Heather Lomas

Website Diary

23/10/2012

To begin with I had to choose the background colour. As you can see as the same as my storyboards I have stuck with the theme of the light blue colour.

As you can see I have created another layer to the timeline. This layer will be where I begin to create the navigation such as the buttons etc.

Above I have created all my buttons. I used Buxton Sketch as the font in size 22.

Heather Lomas

I had to convert my buttons to symbols because originally they would have saved as movie files.

As you can see here I have converted my button to a button instead of a movie clip and I have added a keyboard shortcut ‘btn_’ so I know this when I see it in my library.

Here is my library page. As you can see all my buttons in this page.

Heather Lomas

25/10/2012

Heather Lomas

In the screen shots above I made a page for every button I have. As you can see I have 7 pages overall which is a reasonable amount for the site.

26/10/2012

I have taken a shot of the timeline so far. I have created 4 different layers, Labels, Navigation, Content, and Background. The background layer continues throughout the site and keeps going till the end of the site. The navigation also continues throughout. I have added labels which are the pages and as you can see I’ve created the content the same and they both stop on the same frames. These will be my pages.

I began to work with my homepage by putting all the information onto it.

Heather Lomas

As I wanted to change my writing to a graphic I had to convert it to a symbol. I selected this from the menu tab when I right clicked over the graphic. As you can see the last thing I converted was my buttons so the type selected is a button. I had to change this to graphic and re name the graphic.

On the timeline I created a new layer in order to link my buttons to the correct pages. As you can see I made the layer and called it Actions.

Heather Lomas

As you can see I had to insert a key frame before every label starts so in this case I had to stop my actions on frame 19 so that the next frame could then start the next page.

I selected the ‘Home’ button and then went into the option window and selected Actions. Once selected this was the screen that appeared. I put in timeline controls to stop so that whenever a page was selected it would not continue onto the next page.

In the screen shot to the left you can see that it has shown a small ‘a’ above the key frame. This shows that there are actions now assigned to that key frame.

Heather Lomas

Above I have shown that within the actions panel I have put in that on release the button selected will take me to the homepage. I selected the type as frame label this is because all my buttons were under a labels layer so I could easily select the right page from this. I repeated all this on every page so now my website is fully linked together.

Here now I have locked all my layers so I can only selected items on the navigation layer. This means I could then link my pages. I selected my home button and went into the actions panel once again.

Heather Lomas

Now I could start putting all the content into my website I chose to import all my images that I have collected into my library. As you can see there is a long list of images and buttons included in my site. There is only one movie clip within this website which is my background; this is because the background continues throughout the website.

Heather Lomas

I created the homepage and this is now the finished first page of my website.

06/11/12

Heather Lomas

I created the gallery page by adding in images to make the gallery complete. I added 6 images overall and will possibly manipulate the image when I am further into my website.

13/11/12

As you can see here I went onto creating my page about Australia. Within this I have discussed some main point about Australia but left it brief as I want the viewers to look further into the site to find out more.

Heather Lomas

I went onto adding in a couple of pictures in order to finish off that page. By adding in a photo of the view and also showing the sand and flip flops I think it gives a warm feel overall to the site.

Heather Lomas

Here I have begun my ‘Contact Us’ page. Within this page I will be looking into all the phone numbers and emails that the customer may want to have to get in contact with the company.

Heather Lomas

20/11/12

I moved on to the accommodation page where I have placed photos of different Hostels that are available for bookings.

Heather Lomas

I went onto changing the Contact Us page, by adding more information, such as Address’ etc. I also added in an image for the user to view.

22/11/12

Heather Lomas

When it came to the Gallery page i didn’t like the layout i have made i decided that the image should be viewed in a large space to see the full quality of each image and what they show. As you can see i only have one page to do this so i had to think how i could move the images appropriately so that the user can see all thumbnails and the larger images. From this i decided that i wanted the image to enlarge when the user rolled over the thumbnail.

To begin with i made all the images into symbols. I made them into a button so i could add animations later on in the process.

As you can see after creating the image into a symbol i double clicked to be taken to another scene. From this i was allowed to insert a keyframe within the ‘Hit’ frame. Whilst in that hit frame i had to draw a box over the image i was enlarging and copy it.

Heather Lomas

I then went into the ‘Over’ frame where i inserted a key frame and pasted the picture into the space i left to enlarge and increased its size.

As you can see i have now got the enlarged image and the regular image that will be displayed on the page.

Heather Lomas

I exported the file so that i could see if the enlarged image worked.

Heather Lomas

As you can see it has worked so when i rollover the image it enlarges. I did this for all my images on the Gallery page.

Heather Lomas

On the accomodation page i wanted to change all the information and images around that i had put in. By putting the images on the right hand side i wanted the text to scroll, so i need to import a scroll bar. To begin with i selected the text box i wanted. I needed to change the text to Dynamic text instead of static. I also right clicked on the box to ensure it was ‘Scrollable’ and it was.

Heather Lomas

I had to make sure that the behaviour of the text box was multi line so that it would scroll instead of sitting still.

I went into the components panel and went to find the scroll bar. Once i had found it i dragged the scroll bar into the text box.

Heather Lomas

As you can see the scroll bar has been placed into the text box.

Heather Lomas

I went back to my title page as i wanted to change the motion presets so there were animations added to all the titles. I decided for the first bit of writing i wanted to make it ‘bounce-smoosh’ onto the canvas. To begin with i had to make the writing a movie clip so i could add in an animation. As i have shown in the screen shot below i had to create a new layer in order to drag the animation onto that timeline. I decided to make it go to frame 75 as that is a lengthy time for it to animate onto the screen.

Heather Lomas

So that the animation doesn’t repeat i had to add in some action script to stop the timeline from repeating so as you can see i put a stop action at the end of the timeline.

I moved the writing out of the way so that it would fall onto the canvas from above.

As you can see i change the timeline so it would be faster falling onto the canvas since it took too long the first time.

Heather Lomas

Heather Lomas

In the three screen shots above i have shown that when the file is exported the ‘Welcome to Australia’ sign falls into place.

I then chose to repeat the same process with the writing ‘Let the Fun Begin’ but this time i made it fly in from the left hand side.

Heather Lomas

As you can see here this ‘Let the Fun Begin’ writing is flying in and below i have shown it once it has completed its journey onto the canvas.

Heather Lomas

Once more i wanted the writing ‘Everything you need to know and more...’ to fly onto the screen but this time from the bottom direction. In the screen shots below i have shown it flying in from below and it once it has reached the canvas.

Heather Lomas

23/11/12

I needed to make a form within my request a brochure page so i began by putting in the text box fields.

As you can see here i have made the page a movie clip so that the fields will work better.

Heather Lomas

In the components tab i have shown that i will be taking all the fields from this section to put it into my form.

Here i have used a combo box which will give the user the options for their title. As you can see i have put 6 different options into the form for the user to choose from.

Heather Lomas

As you can see here for me to change all the data within the combo box i had to change the data and the labels for it to work.

Heather Lomas

Once i had completed the combo box i exported it to see how it would look and this shows it works.

Heather Lomas

I also inputted information into the above fields to see what it would look like as a user.

Heather Lomas

On my accommodation page i decided that when it came to the booking form i wouldn’t be able to do it unless i put some proper information about hostels in. So i decided to put my paragraph of information and the base of the page with a scroll bar leaving me more room to put in hostels.

As you can see i imported an image to the stage and then made it into button. I double clicked into a separate scene where it allowed me to begin editing the image to how i choose. I made sure that there were keyframes in both the ‘Hit’ state and the ‘Over’ state.

Heather Lomas

Within the ‘Over’ state i thought it would be a good idea that when the user hovers over the image all the information will be displayed, so as you can see this is what i have done.

Heather Lomas

I exported the file once again to see if it would work when it is rolled over and that it does.

Heather Lomas

I repeated the process once again for another image and then another after that. As you can see below i have exported the file to see if it would work, it does and i have shown this in the 3 screen shots below.

Heather Lomas

I once again decided that i need to make my booking form so i created the form in a movie clip sequince just like my request a brochure form.

Heather Lomas

Once made this is what my booking form looks like. There is not enough information there to make a proper booking, it only secures a place in which i have stated in the scroll box in the top right corner. I also thought the form looked quite bland so i added in a photo.

Heather Lomas

The photo just appearing didn’t particularly excite me so i chose to add an effect to it where it flies on the screen. As you can see i have created the timeline and added in a stop action so it doesn’t repeat.

Heather Lomas

27/11/2012

In this screen shot you can see that the image starts off the canvas and then follows the faint green dots onto the canvas.

Heather Lomas

This is the image example, here i have shown its flying process onto the canvas. It starts in the top left corner and continues down to where it lands on the right hand side.

Heather Lomas

I filled in the booking form to see what it would look like from a customers point of view.

I decided to change the request a brochure button so that the text turns black when the user rolls over it.

I began another page so i can have a blank page when the forms submit. So to do this i had to create new a new page by extending my backgrounds and navigation on the timeline.

Heather Lomas

I had to set up the navigation also on the submit button which was difficult and i did have to google some of the code in order to get it right.

I exported the file once again to see if it would work and once i had pressed Submit it took me too this blank page.

Heather Lomas

As you can see I went onto creating the page that comes up after the user submits a form. I have written a message for the user and included a simple image as they won’t be on that page for long.

I added in a submit button also to my ‘Request a Brochure’ page.

Heather Lomas

I have also changed the text colour when I hover over it. When the cursor is over the text it changes from black to yellow.

As I was looking through making the final checks I thought that the fields on my request a brochure page needed to be wider as users names will vary in length.

Heather Lomas

30/11/2012

When it came to the evaluation the user that evaluated my site said I needed to change my text to bold and in the screenshot above I have shown all the text in bold.