|
Steps
Optional: Download the working files for this lab
1. Create a 600 x 400 pixel document using the Properties palette or Modify > Document. Leave the background white, and the frame rate at 12 fps, a standard for web animation. Save the file as yourname_lab1.fla within a folder on your computer called Lab 1.
2. In Photoshop, create a graphic of a standard arrow cursor. The area surrounding the cursor should be transparent. Save the cursor as a PNG file. The PNG file should be roughly 12 x 21 pixels.
3. Import the PGN file in to Flash using File > Import. It will now appear on your document in Layer 1 in the Timeline.
4. Rename Layer 1 to Arrow.
5. Animate the arrow moving around by adding a new keyframe to the timeline on the Arrow layer. Once the new keyframe is added, move the cursor to a new location within the document. Then shift-click both the keyframes and select Insert > Create Motion Tween.
6. Preview the animation by hitting Play on the Controller palette.
7. Make the animation loop seamlessly. The easiest way to do this is to copy the original keyframe at frame 1 and then paste it in to the timeline at a later point. This way the cursor will go back to the original position it started.
8. (Optional) If you want to get fancy, insert a couple more keyframes so that the animation becomes more interesting than just a cursor moving back and forth between two spots.
9. (Optional) Import a vector shape from Illustrator. Note how Flash handles pixels and vectors.
10. Save the movie you've created as a SWF embedded in an HTML file by selecting File > Publish Settings and then hitting the Publish button. If you open the HTML file created on in your Lab 1 folder you should see your animation. The cursor will look a little gunky, and that's a problem with how Flash handles animating bitmaps. It's a drawback to working heavily with Flash to do bitmap prototyping.
|