Unit 65 diary

Unit 65 – Diary

I started off the creation of my website by setting the main background; I did this by clicking on the colour panel on the properties section which is named Stage.

Then I created a background layer and imported one of my images to the library so that I could use it again later on without navigating through folders, then I dragged it onto the stage and rotated it a little to position it in the corner. I also converted it to a movie clip symbol so that when I double click it I can add other content to the layer to create my complete background without dealing with various different layers on the timeline.

After that I created a large white rectangle in order to build the content section of the page, then I added another rectangle coloured blue with an orange line underneath it.

After creating the basic background it was time to create the logo which I

carried out in Adobe Photoshop using various tools such as the quick shape tool, text tool, warping and other effects including drop shadow, bevel and emboss, etc. Also when it came to saving my logo I needed to save it as a PNG file format so that the background is transparent, as my logo is a

Kyle MckendrickPage 1

circular shape therefore if it was to be saved as a JPEG or BMP the corners of the image would be white blocks.

First I need to import my logo, I can do this by going through File > Import > Import to library so that the image can be used over and over again without having to keep importing I can just drag it on through the library. Then when I dragged the logo in I resized it so that it fit appropriately on the banner. After importing the logo it was time to start adding in the navigation buttons, I did this using the text tools just to create all of the buttons first.

After creating all of the text buttons I highlighted them all ready for them to be aligned and spaced out evenly to keep the consistency of the positioning. Now its time to actually create the text into buttons, I do this by right clicking the text and selecting convert to symbol. When the pop up box appears I call it an appropriate name so I know which button it actually is and I make sure the button type is selected, and then click ok. After

that I right clicked the text layer again and selected actions to open the actions panel, then using the global functions section > movie clip control > On > Release > timeline control > go to and stop > frame 1. This will convert the button so that when clicked on it will navigate to and stop on frame 1.

Now I have created the first button I need to organize the timeline into the sections for the pages, I am going to do this by creating two new

layers one being called ‘Labels’ which will help me indicate which page it is and the other layer will be content which will hold all of the input of the page. Each page will consist of 15 frames; I can then label the frames by inserting a name into the properties section.


After organizing all of the pages into 15 frames each I carried out the same process which I did to create the home button however this time I obviously created the actions so that once clicked on it navigates to the certain frame which the page starts on.

Now that all of my navigation is working correctly, the template for my pages is complete as I can use this for every page; the only thing that changes is the white section. I locked the background and navigation layers so that they can’t be tampered with, now it is time to add content to my home page frames.

Before adding any content I am going to import all of my images into my library together so that it saves me importing one by one as I go along, I do this by clicking file > import > import to library then highlighting all of the images in my assets folder.

After importing all of my images I selected the first image which I am going to use on my home page which is a map of Australia which will be an interactive map that leads to pages related to the area clicked on. First I dragged my image onto the stage and resized and positioned it how I want it to look. When resizing my image I made sure that the lock height and width is selected to that if I edit the height or width of the image the other edits in proportion. But before I drag my image onto the stage I need to make sure that the content layer is selected so that the image is on that layer.


Then I selected the rectangle tool and created a rectangle underneath the map so that it looks identical to my plans on the storyboard; however as the logo is on the background layer which is the bottom layer, the rectangle overlays it. Therefore I create a new layer and named it ‘logo’ and moved it to the top of the layers so that it is the top layer and can be seen. Also the new layer it is on I extended the frames so that the logo is still on the stage throughout every page and I locked the layer so that it is basically still part of the background template but just on another layer.


Now I notice that my map is a little too big and doesn’t fit inside the rectangle I have created therefore I select the map and checking the height and width link so that they in proportion to each other.

Now that I have the background set for the page I am going to make little checks which will be underneath the navigation buttons if the user is on that page. For example, if the user is on the home page there will be a little line underneath the text to indicate that. First I select the content layer and the line tool, and I simply use the colour pane to select the orange shade which I have for the banner. Then I just draw the line to the size I want and position it underneath the text on the certain frame. When I want to create the dot for another page all I simply do is select the first frame of the page, right click the existing line click cut, then paste it and move it under the next page’s title.


Now it is time to link my map to the accommodation page, first I start off by making the map on the home page a button which links to the accommodation page, I do this by right clicking the image and converting it to a symbol and selecting button. Then I right clicked the image and clicked Actions and in the movie clip control I clicked on > release > timeline control > go to and stop > frame 16.

Then I copied and pasted my map from the home page into my accommodation page, then I right clicked it and converted it to a movie clip symbol so that I can double click the image and carry out all of my content and add actions inside the movie clip instead of on my normal timeline, this keeps the timeline clean and easier to read. After double clicking inside the movie clip it was time to organise my timeline which was similar to what I did at the start of this project however I assigned the different parts of Australia 10 frames each so that when the user clicks on the different part of the map then the information being displayed will be related to that area.

I created four layers (labels, content, buttons and map) the buttons and the map are visible throughout the page as it is the main feature of the page and it is used in order to actually display information on the page. After organising the timeline into sections for each page I clicked at the end of each page frame and inserted a keyframe, and then I right clicked the keyframe and added a stop action so that the movie clip doesn’t just play through and so it stops on the page until the user navigates to another.


Now it’s time to create the buttons for map, I started by selecting the buttons layer and creating a text layer similar to the text size, font and colour of the existing text on the map. Then I converted the text layer to a button symbol and gave it an appropriate

name so that I don’t get confused with my buttons in the library. Then I double clicked the text layer opening into a new timeline. Then I simply dragged the Up frame over to the Over section so that when the user hovers over the section they know it’s a button.

Then I clicked back onto the original timeline and right clicked the button in order to add the actions to it. I opened the actions panel and clicked on movie clip control > On > release > go to and stop >


frame labels > NT so that when it is clicked on it navigates to the NT label which is the page for that section of Australia. I then carried out the same process for all of the buttons on the map, linking them to their specific pages inside the movie clip.

After that it was time to add some text to my accommodation page, there is a hostels page which the audience will first view before navigating to their desired destination. I am going

to start off with a normal text box to the left of the map welcoming the user. I start by selecting the content layer and then the text tool and dragging a box to the size I want, and then I copied and pasted my information into the text box. Then I highlighted all of the text and changed it to a size 12px so that it fits appropriately next to the map and so that it is readable, I also changed the colour of the text to a dark brown so it contrasts with the colour theme used on the site.

After that I added a scrollable text box as the rest of the text is too large to fit inside the space underneath the map and other text. I start by using the text box again and dragging a text box to the size I want then I copied and pasted all of my text but this time I changed the text style from static text to dynamic text, then I right clicked the text box and selected ‘Scrollable’. Then I clicked on Window > Components to add a UI Scroll bar.


Now it’s time to add content to the different pages inside this movie clip, as I have already linked all the buttons it’s a matter of copy and pasting my information and images onto the pages. I will possibly need to add more scrollable text boxes as there may be too much information for the one page.

I carried the same process as above for all of the pages in the accommodation section, I created scrollable text boxes and copy and pasted my text assets into there. I dragged my images on from my library so that all of the pages look similar, when importing my images to my stage I also edited the size of them by checking the height and width tool so that they are in proportion. Below is how my pages look.


This is the end of the process for my accommodation section on my website. Now it’s time to start my sightseeing page, on this page I want a scrollable text box displaying the different tourist attractions with an image above the text box, however I want to have arrows which allows the user to scroll through different images.

I start by creating my scrollable text box carrying out the same steps as the last time I created one on my accommodation page, and then I resized the box and positioned it where I wanted, and added my text from my assets folder.

I started my image slide show by dragging one image onto the stage from my library, and then I converted it to a movie clip symbol giving it an appropriate name ‘image 1_mov’. Then I created two layers inside of the movie clip called ‘Pictures’ and ‘Buttons’, after that I created a key frame at the end of every 10 frames so that I can have different images on each scene and different buttons which once clicked on navigate to the next set of ten frames. I also added another keyframe at the end of every 10 frames and inserted a stop action so that it doesn’t play straight through.

Then I added the buttons to the first image, I only need one button for this scene as this is the first image on the slideshow therefore they can only view ‘Next’, I dragged my arrow image onto the first scene from my library and positioned it on the right of the first sightseeing image. Then I right clicked the arrow and converted it to a button and gave it actions, on movie clip control I clicked on > release > timeline control > go to and stop > frame 11 so that once clicked on it goes to and stops on frame 11 which is the start of scene 2.

Kyle Mckendrick Page 10

Now its time to add the images and arrows to the other pages, however the arrows need to be in the same position on every page, therefore I copy and paste it to each frame and position it correctly by checking back to the previous scene.

Now I need to add an arrow on the left of where each image will go, I do this by going to Modify > Transform > Flip horizontal, then I positioned the arrow appropriately in line with the other one on the pages.


After that I aligned all the arrows on the different frame pages. The first image on the slideshow only needs a next arrow to go onto the next image and the last image on the slideshow only needs a previous button so that it navigates to the previous image. This system allows the user to navigate back and forward through images.

Now that my first arrow is already linked to the second page I am going to do the same with the other arrows on the pages so that the next one goes to the first frame of the next scene and the previous arrow goes to the first frame of the previous scene. I used the same technique again on > release > go to and stop > frame ‘number’.


Then all I needed to do is drag my different images onto the stage from my library and align them so that they are in the size and similar position and that completes the sightseeing section.

Now it’s time to add content to my Contact Us page which isn’t really a large job to do as the page will only contain a text box with our contact details in. However I need to add some content boxes for the user to fill in as a booking form. I started this page by converting the line by the side of the contact us button into a movie clip symbol then I created two layers, one named text and the other named form. After that I added a text box at the bottom of the page containing the contact details which I copy and pasted from my text assets.


Then I added another text box in the text layer which are the labels for the text boxes and combo boxes and I aligned it on the page to the place I wanted, changed the size of the text to 15px and the colour to the rest of the text on the site. I also changed the text to ‘Multiline’ so that it isn’t all on one line using the paragraph section in the properties.

Now its time to add my combo boxes, I do this by selecting my form layer and opening the components section next to the properties then drag on what I need, first I am going to drag all of my text boxes onto the certain fields which require it. I resized the text input boxes using the properties panel.


Now I have all of my text input boxes on my page I am going to do the same however I am going add the datefield component to the departure date, return date and expiry date sections, and again edit the size using the properties panel.

Now there’s one more field to add which is the hotel selection, I am going to use a combo box with a list of different hotels on it. I do this by again dragging on the combo box from the components panel. Once it is in place I accessed the properties panel and on the component parameters section I opened the labels section and added the different hotel names so that the user can select them when clicking on the combo box.

Then I dragged on a button from the components section and name it ‘Submit’ in the label section.


Then I created a new layer and moved it to the bottom of the list and named it ‘background’, I selected the rectangle tool and coloured it the same as the side panels using the colour finder tool, I then rounded the edges using the rectangle options. After selecting the settings I created a rectangle around

the form on the page.

I then created another layer named ‘map’ and moved it to the bottom of the layer order, I dragged on the image which I have used on the top right hand corner of every page and positioned it half behind the entry form which concludes the end of the process for my contact and booking page.


Now it’s time to continue the content of my home page, I am going to add a welcome message at the top of the page to the left of the map which I placed earlier on in the creation of the website, I started by converting the line next to the home button into a movie clip symbol in order to keep my timeline tidy, then I selected white text sized 14px. Then I copied and pasted the text from my assets folder. I then also created a new layer inside the movie clip and named it ‘welcome message’ and added a keyframe at frame 50 so that the message stays on the page the whole time.

However I realised that my text is too long for the space I have therefore I had to create a scrollable text box, I did this by changing the text type to dynamic text then right clicking the text box and selecting ‘scrollable’. After that I resized the text box and then dragging on a scroll bar from the components panel. After that I added a stop action on the frames so that they don’t continually play through.

Now its time to add an image slideshow in the available space, I start by adding a new layer inside the movie clip and naming it images. And another layer and I named it ‘background’. On the background layer I created two rectangles the same colour as the side panels and placed them inline with the space at the bottom of the page so that when I create a scrolling images animation they don’t overlap the side panels.


After that I dragged in my image I am going to use on the slideshow into my images layer and resized them all so that they all have the same height and that they all fit in the white space at the bottom. I then lined them all next to each other. Then I locked the background and welcome layers so that they do not get moved.

After that I right clicked on the layer and clicked create motion tween, which enabled a pop up that allowed me to group the images together, then I clicked on the last frame (50) and moved all of the images to the new location in order to create a movement that looks as if the images are scrolling across.


This then concludes the process of creating my website.

Home Page:

Accommodation page:


Sight-seeing page:

Contact us page:


Documents

Unit 65 diary