Build Site Structure on Timeline - Exercise

Contact Us or call 1-877-932-8228
Build Site Structure on Timeline - Exercise

Build Site Structure on Timeline

Duration: 20 to 30 minutes.

In this exercise, you will put together an entire web site for Griffin Park. We will continue to use this site in later topics. You will have a chance to practice tweening by bringing in the various parts of the site one at a time. Because there are no actions yet, it will just play through and repeat. In later topics we will add actions and buttons to allow users to control navigation.

  1. If you haven't already done so, open and test the solution so that you can see the animation in action. It is saved as BasicAnimation/solutions/Website.fla.
  2. Now that you've see the end result, close the completed file and open BasicAnimation/exercises/Website.fla. You will find one layer with a simple graphic of the sky.Sky Layer
  3. The only layer is currently named Layer 1. Rename this layer sky since it holds the sky graphic.Logo Layer
  4. Add a new layer and name it logo.
  5. Drag an instance of the logo to the center of the stage on Frame 1.
  6. Use the Free Transform tool to increase the size. It should be large.
  7. Add a Motion Tween (Right-click or select Insert > Motion Tween).
  8. Drag the end of the motion tween span to frame 39 to extend the motion.
  9. Drag the playhead to the end of the motion tween. Reduce the size of the logo and reposition it to the upper right corner of the screen.
  10. Scrub the timeline to see your animation. The logo should decrease in size and move into its final position.
  11. If your sky layer has only one frame, it will disappear after frame 1. It will need additional frames to match the other layer. Single-click on frame 39 of the sky layer. Press F5 to add regular frames.
  12. Since the logo is in position and will not move again, we could use a single instance of the logo in frame 40. This will be a static instance. Click on Frame 40 and Insert Blank Keyframe.
  13. Click on frame 39 (the end of the logo animation). Single click the logo in its ending position. Press Control+c to copy the logo.
  14. Click back on the new blank keyframe in Frame 40 and choose Paste in Place (Control+Shift+v). This will place a new instance in the exact same position as the previous frame.
  15. Add enough frames to the sky layer so that it will be the background throughout the animation.Prepare the Text Links Layer
  16. Next you will create the text (which will eventually become buttons in a later lesson). Add a new layer and name it Text Links.
  17. Add a new Keyframe in Frame 40.
  18. Select the Text Tool. Set your text properties as desired in the Properties Panel. We chose Arial, white, 26 point.
  19. Create a text box and type the text "home" in Frame 40 on the Text Links Layer.
  20. To create the additional text links, copy and paste the home text and replace the word "home" with "facilities," "videos," "photos" and "contact".
  21. To line up the text links easily, use Shift+click to select all of the text boxes. Open the Align Panel. Unclick "align to stage" then click Align Left Edge and Distribute Vertical Center. This will even out the space between the text links. (Be sure to unclick "align to stage!")Animate the Text Links Layer
  22. Now let's animate the text links by adding a Motion Tween. Select all of the text links at once (in Frame 40) and press F8 (or select Modify > Convert to Symbol). Select Graphic Symbol and name it navigation.
  23. In Frame 40 on the text links layer, create a motion tween.
  24. Drag the navigation instance in frame 40 just off the stage. This will position the instance to slide into the screen.
  25. Decide how long it should take for the text to slide in. Place your cursor in that frame (we chose frame 60) and drag the text into the ending position.
  26. Extend the other layers to the end of your animation. Ours ends in frame 60. Add Remaining Layers
  27. We need a layer with a background for the photos fading in. There will be no animation on this layer. Add a layer called content back and add a new keyframe in Frame 40. Drag an instance of the content back symbol to the new keyframe.
  28. Add a layer called photo. Add a Keyframe in Frame 40 for an instance of the photo symbol. Add a motion tween and click on the instance in Frame 40. Using the Properties Panel, set the Effect called "Alpha" to 0%. Then, drag the playhead to frame 55 and change the Alpha to 100%. This will fade the photo layer in over 15 frames.
  29. Add a layer called airplane. In Frame 55 add a keyframe and an instance of the airplane from the Library. Add a Motion Tween to position the airplane off stage initially and fly in.
  30. Add one final layer named labels. Add a keyframe in Frame 40. Using the Properties Panel, add labels for frames 1 (logo) and 40 (intro).
  31. Save your movie and test it! Does the animation behave the way you intend it to?
  32. In later exercises, the web site file will be used again. You will have the choice of using yours or a version provided for you. To make it easy to find this file later, save it in the Course Files folder as CourseFiles/Website.fla.

If you are done early...

  • Adjust any of your existing animations.
  • Add additional objects to animate.
Next