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 Mckendrick
Page 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.

Kyle Mckendrick
Page 2

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.

Kyle Mckendrick
Page 3

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.

Kyle Mckendrick
Page 4

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.

Kyle Mckendrick
Page 5

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.

Kyle Mckendrick
Page 6

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

Kyle Mckendrick
Page 7

>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.

Kyle Mckendrick
Page 8

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.

Kyle Mckendrick
Page 9

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, onmovie 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.

11

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’.

12

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.

13

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.

14

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.

15

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.

16

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.

17

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.

18

This then concludes the process of creating my website.

Home Page:

Accommodation page:

19

Sight-seeing page:

Contact us page:

20

Unit 65 diary

More Related Content

Viewers also liked

Similar to Unit 65 diary

More from kylemckendrick

Unit 65 diary