Your SlideShare is downloading. ×
Unit 65 diary
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unit 65 diary

179

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
179
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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 itagain later on without navigating through folders, then I dragged it onto the stage and rotated it alittle to position it in the corner. I also converted it to a movie clip symbol so that when I double clickit I can add other content to the layer to create my complete background without dealing withvarious 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 Icarried out in Adobe Photoshop using various tools such as the quick shape tool, text tool, warpingand other effects including drop shadow, bevel and emboss, etc. Also when it came to saving mylogo I needed to save it as a PNG file format so that the background is transparent, as my logo is aKyle Mckendrick Page 1
  • 2. 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 textbuttons I highlighted them allready for them to be aligned andspaced out evenly to keep theconsistency of the positioning.Now its time to actually create thetext into buttons, I do this by right clicking the text and selectingconvert to symbol. When the pop up box appears I call it anappropriate name so I know which button it actually is and Imake 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 thepages, I am going to do this by creating two new layers one being called ‘Labels’ which will help meindicate which page it is and the other layer will be content which will hold all of the input of thepage. Each page will consist of 15 frames; I can then label the frames by inserting a name into theproperties section.Kyle Mckendrick Page 2
  • 3. After organizing all of the pages into 15 frames each I carried out the same process which I did tocreate the home button however this time I obviously created the actions so that once clicked on itnavigates 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 itsaves me importing one by one as I go along, I do this by clicking file > import > import to librarythen 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 pagewhich is a map of Australia which will be an interactive map that leads to pages related to the areaclicked on. First I dragged my image onto the stage and resized and positioned it how I want it tolook. When resizing my image I made sure that the lock height and width is selected to that if I editthe height or width of the image the other edits in proportion. But before I drag my image onto thestage I need to make sure that the content layer is selected so that the image is on that layer.Kyle Mckendrick Page 3
  • 4. Then I selected the rectangle tool and created a rectangle underneath the map so that it looksidentical to my plans on the storyboard; however as the logo is on the background layer which is thebottom layer, the rectangle overlays it. Therefore I create a new layer and named it ‘logo’ andmoved it to the top of the layers so that it is the top layer and can be seen. Also the new layer it is onI extended the frames so that the logo is still on the stage throughout every page and I locked thelayer so that it is basically still part of the background template but just on another layer.Kyle Mckendrick Page 4
  • 5. Now I notice that my map is a little too big and doesn’t fit inside the rectangle I have createdtherefore I select the map and checking the height and width link so that they in proportion to eachother.Now that I have the background set for the page I am going to make little checks which will beunderneath the navigation buttons if the user is on that page. For example, if the user is on thehome page there will be a little line underneath the text to indicate that. First I select the contentlayer and the line tool, and I simply use the colour pane to select the orange shade which I have forthe banner. Then I just draw the line to the size I want and position it underneath the text on thecertain frame. When I want to create the dot for another page all I simply do is select the first frameof 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
  • 6. 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 homepage into my accommodation page, then I right clicked it and converted it to a movie clip symbol sothat I can double click the image and carry out all of my content and add actions inside the movieclip instead of on my normal timeline, this keeps the timeline clean and easier to read. After doubleclicking inside the movie clip it was time to organise my timeline which was similar to what I did atthe start of this project however I assigned the different parts of Australia 10 frames each so thatwhen the user clicks on the different part of the map then the information being displayed will berelated to that area.I created four layers (labels, content, buttons and map) the buttons and the map are visiblethroughout the page as it is the main feature of the page and it is used in order to actually displayinformation on the page. After organising the timeline into sections for each page I clicked at theend of each page frame and inserted a keyframe, and then I right clicked the keyframe and added astop action so that the movie clip doesn’t just play through and so it stops on the page until the usernavigates to another.Kyle Mckendrick Page 6
  • 7. 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 appropriatename so that I don’t get confused with my buttons in the library. Then I double clicked the text layeropening into a new timeline. Then I simply dragged the Up frame over to the Over section so thatwhen 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 actionsto it. I opened the actions panel and clicked on movie clip control >On> release > go to and stopKyle Mckendrick Page 7
  • 8. >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 goingto start off with a normal text box to the left of the map welcoming the user. I start by selecting thecontent layer and then the text tool and dragging a box to the size I want, and then I copied andpasted my information into the text box. Then I highlighted all of the text and changed it to a size12px so that it fits appropriately next to the map and so that it is readable, I also changed the colourof 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 spaceunderneath the map and other text. I start by using the text box again and dragging a text box to thesize I want then I copied and pasted all of my text but this time I changed the text style from statictext to dynamic text, then I right clicked the text box and selected ‘Scrollable’. Then I clicked onWindow > Components to add a UI Scroll bar.Kyle Mckendrick Page 8
  • 9. Now it’s time to add content to the different pages inside this movie clip, as I have already linked allthe buttons it’s a matter of copy and pasting my information and images onto the pages. I willpossibly need to add more scrollable text boxes as there may be too much information for the onepage.I carried the same process as above for all of the pages in the accommodation section, I createdscrollable text boxes and copy and pasted my text assets into there. I dragged my images on frommy library so that all of the pages look similar, when importing my images to my stage I also editedthe size of them by checking the height and width tool so that they are in proportion. Below is howmy pages look.Kyle Mckendrick Page 9
  • 10. This is the end of the process for my accommodation section on my website. Now it’s time to startmy sightseeing page, on this page I want a scrollable text box displaying the different touristattractions with an image above the text box, however I want to have arrows which allows the userto scroll through different images.I start by creating my scrollable text box carrying out the same steps as the last time I created one onmy accommodation page, and then I resized the box and positioned it where I wanted, and addedmy text from my assets folder.I started my image slide show by dragging one image onto the stage from my library, and then Iconverted it to a movie clip symbol giving it an appropriate name ‘image 1_mov’. Then I created twolayers inside of the movie clip called ‘Pictures’ and ‘Buttons’, after that I created a key frame at theend of every 10 frames so that I can have different images on each scene and different buttonswhich once clicked on navigate to the next set of ten frames. I also added another keyframe at theend 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 firstimage on the slideshow therefore they can only view ‘Next’, I dragged my arrow image onto the firstscene from my library and positioned it on the right of the first sightseeing image. Then I rightclicked 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 onframe 11 which is the start of scene 2.Kyle Mckendrick Page 10
  • 11. Now its time to add the images and arrows to the other pages, however the arrows need to be in thesame position on every page, therefore I copy and paste it to each frame and position it correctly bychecking 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 onthe pages.Kyle Mckendrick Page 11
  • 12. After that I aligned all the arrows on the different frame pages. The first image on the slideshow onlyneeds a next arrow to go onto the next image and the last image on the slideshow only needs aprevious button so that it navigates to the previous image. This system allows the user to navigateback and forward through images.Now that my first arrow is already linked to the second page I am going to do the same with theother arrows on the pages so that the next one goes to the first frame of the next scene and theprevious arrow goes to the first frame of the previous scene. I used the same technique again on >release > go to and stop > frame ‘number’.Kyle Mckendrick Page 12
  • 13. Then all I needed to do is drag my different images onto the stage from my library and align them sothat 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 pagewill only contain a text box with our contact details in. However I need to add some content boxesfor the user to fill in as a booking form. I started this page by converting the line by the side of thecontact us button into a movie clip symbol then I created two layers, one named text and the othernamed form. After that I added a text box at the bottom of the page containing the contact detailswhich I copy and pasted from my text assets.Kyle Mckendrick Page 13
  • 14. Then I added another text box in the text layer which are the labels for the text boxes and comboboxes and I aligned it on the page to the place I wanted, changed the size of the text to 15px and thecolour to the rest of the text on the site. I also changed the text to ‘Multiline’ so that it isn’t all onone 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 thecomponents section next to the properties then drag on what I need, first I am going to drag all ofmy text boxes onto the certain fields which require it. I resized the text input boxes using theproperties panel.Kyle Mckendrick Page 14
  • 15. Now I have all of my text input boxes on my page I am going to do the same however I am going addthe datefield component to the departure date, return date and expiry date sections, and again editthe 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 alist of different hotels on it. I do this by again dragging on the combo box from the componentspanel. Once it is in place I accessed the properties panel and on the component parameters section Iopened the labels section and added the different hotel names so that the user can select themwhen clicking on the combo box.Then I dragged on a button from the components section and name it ‘Submit’ in the label section.Kyle Mckendrick Page 15
  • 16. 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 aroundthe form on the page.I then created another layer named ‘map’ and moved it to the bottom of the layer order, I draggedon the image which I have used on the top right hand corner of every page and positioned it halfbehind the entry form which concludes the end of the process for my contact and booking page.Kyle Mckendrick Page 16
  • 17. Now it’s time to continue the content of my home page, I am going to add a welcome message atthe top of the page to the left of the map which I placed earlier on in the creation of the website, Istarted by converting the line next to the home button into a movie clip symbol in order to keep mytimeline tidy, then I selected white text sized 14px. Then I copied and pasted the text from my assetsfolder. I then also created a new layer inside the movie clip and named it ‘welcome message’ andadded 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 scrollabletext box, I did this by changing the text type to dynamic text then right clicking the text box andselecting ‘scrollable’. After that I resized the text box and then dragging on a scroll bar from thecomponents panel. After that I added a stop action on the frames so that they don’t continually playthrough.Now its time to add an image slideshow in the available space, I start by adding a new layer insidethe movie clip and naming it images. And another layer and I named it ‘background’. On thebackground layer I created two rectangles the same colour as the side panels and placed them inlinewith the space at the bottom of the page so that when I create a scrolling images animation theydon’t overlap the side panels.Kyle Mckendrick Page 17
  • 18. After that I dragged in my image I am going to use on the slideshow into my images layer and resizedthem all so that they all have the same height and that they all fit in the white space at the bottom. Ithen lined them all next to each other. Then I locked the background and welcome layers so thatthey do not get moved.After that I right clicked on the layer and clicked create motion tween, which enabled a pop up thatallowed me to group the images together, then I clicked on the last frame (50) and moved all of theimages to the new location in order to create a movement that looks as if the images are scrollingacross.Kyle Mckendrick Page 18
  • 19. This then concludes the process of creating my website.Home Page:Accommodation page:Kyle Mckendrick Page 19
  • 20. Sight-seeing page:Contact us page:Kyle Mckendrick Page 20

×