Adobe Edge Tutorial Create animation with Adobe Flash CS4 by oas111

VIEWS: 116 PAGES: 9

									Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                2/8/09 11:58 PM




 Tutorial: Create animation with
 Adobe Flash CS4 Professional
 by Doug Winnie

 Flash CS4 Professional introduces a revamped animation engine that is easy to use and more powerful than previous versions.
 When you have mastered the basics of the engine, Flash CS4 gives you added capabilities to extend your creative possibilities.

 In this article, I show you how to import artwork to Flash CS4, create an animation, and change an animation after you've created
 it.



 Importing artwork to Flash CS4

 With Flash CS4, you can import content from multiple Adobe Creative Suite applications, including Adobe Photoshop, Illustrator,
 and Fireworks, as well as from InDesign CS4 and After Effects CS4.

 In this example, we import artwork from Fireworks. With Fireworks CS4, you can work with both raster and vector content. Raster
 files (or bitmaps) become pixelated when you resize them. A photograph is an example of a raster graphic file. Vector files, on the
 other hand, do not pixelate when you resize them. The paths of a vector graphic simply redraw no matter how much you expand or
 reduce it.

 In Fireworks CS4, you can create assets to import to Flash CS4. For this example, I have created a vector polygon with a gradient
 fill and a stroke that is grouped with a text field (see Figure 1). This Fireworks file is saved as a PNG file, which can then be
 imported to Flash CS4.

 Download the sample file:

 Go.png (PNG, 75KB)




                                                  Figure 1. A vector graphic created with Adobe Fireworks CS4




 To import the file, you must first create a new Flash CS4 document by selecting Flash File (ActionScript 3.0) from the Create New
 column on the Flash startup screen.

 To import the Fireworks PNG file, choose File > Import. You have two import options: you can import either to the Stage or the
 Library. The Stage is the main animation area for the movie you're creating with Flash. The Library is a bank of assets or graphics
 that are part of the project but not necessarily on the Stage. The Library contains assets that you either create in Flash or import
 from other applications.

 Import the Fireworks PNG design to the Flash CS4 Library by choosing File > Import > Import To Library. Then browse to the file
 and click Import To Library. In the Import Fireworks Document dialog box, select the options shown in Figure 2.




http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                        Page 1 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                 2/8/09 11:58 PM




                                                       Figure 2. Fireworks import dialog box in Flash CS4.




 For this example, you want to keep the vector design editable instead of converting it to a raster or bitmap design. For designs that
 are more complex, you may want to import as a bitmap to maintain the appearance.

 When you click OK, the Fireworks asset is imported to Flash CS4. To see the imported assets, click the Library tab. When the
 assets are imported, the design is automatically converted to a graphic called Go.png.

 To position the graphic on the Stage, drag and drop the Go.png asset from the Library panel to the Stage. Position the object in the
 upper left corner. If you don't position it in the correct location initially, you can reposition it using the mouse by dragging and
 dropping the graphic to the correct position. Your file should look like Figure 3.




                                                 Figure 3. The starting position on the Stage for the Go graphic.




 Creating an animation

 Now, let's say you want to make an animation that will move the asset from the upper left corner to the lower right corner.



http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                         Page 2 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                         2/8/09 11:58 PM


 First, you need to tell Flash that you want to tween the object. When you use a tween, you tell Flash where on the Stage you want
 the object in the animation to start and end. Flash will automatically fill in the frames between the start and end points that you
 define.

 There are two types of tweening in Flash: motion and shape. Since you are moving the Go graphic instead of changing its shape,
 you need to create a motion tween. To do this, right-click the object in Flash and select Create Motion Tween.

 Now you'll notice that the timeline at the bottom of the application has changed.

 The timeline represents how the animation looks and behaves from the time it starts moving until it arrives at its destination. The
 timeline is broken up into frames, or individual points in time, that display the animation.

 By default, Flash CS4 displays individual frames at a rate of 24 per second, which means that for each second the animation is
 playing, 24 frames are displayed. In the timeline, the red indicator is the playhead, which shows what frame you are currently
 displaying in the Flash CS4 application.

 Before you added the motion tween, the timeline was a single frame, containing the object you placed onto the Stage. When you
 created the tween, Flash extended the timeline by 24 frames and positioned the playhead at the end of the tween.

 Now that you are at the end of the tween, you want the Go graphic to be at the lower right corner of the Stage. To change its
 location, simply drag and drop the graphic to the desired location. With the playhead on frame 24, move the Go symbol to the lower
 right corner of the Stage (see Figure 4).




                                               Figure 4. Setting the Go graphic's final destination in the animation.




 After you drop the object, you'll notice a line with dots appear from the graphic's starting location (the origin) to the final location (the
 destination). That line is called the motion path. It won't actually show when you publish your file, but it is a visual cue to show you
 the path the graphic will take as it moves from the origin to the destination.

 Now that the destination has been set, you can click and drag the playhead to show the animation on the timeline. Click and drag
 the playhead to frame 1, and then press Return to play the animation in Flash CS4. You'll see the object move from the upper left
 to the lower right.

 Now, you can preview how it will look in Flash Player. It is a good idea to test your animations in Flash Player as well as in Flash
 CS4, since the Flash Player preview more accurately represents the timing and actions you may use to control and update your
 animation. To preview in Flash Player, Choose Control > Test Movie from the main Flash menu.


http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                                 Page 3 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                 2/8/09 11:58 PM



 Now you'll see a new window appear that displays the animation. The animation will simply loop because you haven't told the
 animation when to stop. We'll take care of that later.



 Changing an animation after it is created

 Now that you have created the initial animation, you can modify and extend it using Flash CS4. First, let's change the direction of
 the animation.

 Your current animation moves the Go symbol from the upper left to the lower right corner of the Stage. But now you want to
 change the destination from the lower right corner to the upper right corner.

 To make this change, make sure you're at the destination point by dragging the playhead to the last frame of the animation: frame
 24.

 To move the destination of the Go symbol, and therefore the direction of the animation, simply click and drag the symbol to the
 new desired location. For this example, move it to the upper right corner of the Stage.

 Now the motion path has been updated. If you run or test the animation, the animation will now move the graphic across the Stage
 from left to right instead of down the Stage diagonally.

 You can also change the origin of the animation using these steps, but you need to move the playhead to the first frame, or frame
 1, to make that change. In this example, let's move the origin from the upper left to the lower left corner.

 First, move the playhead to frame 1. Then click and drag the Go symbol to the lower left corner of the Stage.

 Now the animation and the motion path reflect the new origin of the animation. You can continually update the origin and
 destination of your animations using the same methods. Simply move the playhead to the beginning or end of the tween and then
 move the object to the new desired location.

 Adding midpoints to your animation

 Creating point-to-point animations may be easy, but they are relatively boring. More complex animations usually have several
 midpoints in the tween to give the desired effect.

 For instance, in this example, you may want the animation to move from corner to corner to corner, starting in the lower left, moving
 to the upper left, and ending in the upper right.

 To do this, you need to add an intermediate location at the middle of the animation. The process is the same as setting the origin or
 destination points, however you now need to move the playhead to the middle of the animation.

 Move the playhead to frame 12 (see Figure 5).




                                            Figure 5. Adding an intermediate location, or midpoint, to the animation.




http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                         Page 4 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                         2/8/09 11:58 PM



 At the bottom of the timeline is a small text indicator that shows the current position of the playhead. You can click and drag your
 mouse to scrub to a specific point or double-click the indicator and enter the location manually.

 Now that the playhead is at the correct location, the animation shows the symbol in the middle of the motion path. If you look
 carefully, you'll notice tiny dots along the motion path (see Figure 6). These dots represent the location of the object at each
 individual frame. There are 12 dots from the start point to the current point of the symbol because your animation is now on frame
 12. The black circle in the center of the Go symbol is its registration point, which is where it positions itself relative to the location on
 the motion path.




             Figure 6. The motion path displays the location of the object at each frame as well as the point the object is positioned on the path.




 To create a new intermediate destination for the symbol, click and drag it to the upper left corner of the Stage.

 You now have a three-point animation that starts in the lower left corner, moves to the upper left corner, and winds up at the upper
 right corner.

 In the timeline, a small black dot now appears in frame 12, which shows that you have created an intermediate location that the
 tween will use to create the animation. If you want to change this intermediate point, move the playhead to this point in the timeline
 and then drag and drop the object. That will update the motion path with the new intermediate point.

 You can continue to add intermediate points throughout the animation, with a maximum of one per frame. Just move the playhead
 to the desired frame and then move the object.

 Changing the animation's duration

 So far, you have changed the location of the graphic throughout the animation, but you haven't changed the duration. The duration
 is the amount of time that the animation runs. In this example, the duration of your tween is 24 frames. With a default frame rate of
 24 frames per second, your animation will run for one second.

 If you want to change the duration of the entire animation, you need to change the timeline animation layer. Each tween is
 represented as an individual layer in Flash CS4. To change the duration, simply drag the end of the tween to either lengthen or
 shorten the duration.

 If you want your animation to play for two seconds at a frame rate of 24 frames per second, then lengthen it to 48 frames by
 moving your mouse pointer to the end of the tween in the timeline. When the mouse icon changes to a left-right arrow, click and
 drag the tween to the right to extend it to frame 48.

 When you let go of the mouse button, the animation will proportionally update to represent the new desired duration. You'll notice
 that the intermediate point has also moved to the new midpoint of the tween.

 The motion path now has twice as many dots because it is now extended over 48 frames, and each dot represents where the Go
 graphic is on any given frame.
http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                                 Page 5 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                2/8/09 11:58 PM


 graphic is on any given frame.

 You can also shorten your animation back to 24 frames by clicking and dragging the left end of the tween on the timeline back to
 frame 24.

 Adding a curve to the motion path

 Each segment of the motion path is editable as well. For instance, the animation now moves the symbol from point to point to point
 in a straight line. You can alter that and have the tween move the animation along a curve by simply dragging and dropping with
 your mouse.

 Once the Go symbol has moved to the upper left corner, let's make it move to the upper right corner on a curved path instead of a
 straight path. To do this, just drag and drop the motion path in the second part of the tween.

 Make sure you choose the selection tool (with the dark arrow icon) from the Tool menu.

 Then move your mouse over the motion path along the top of the Stage. You'll see a curved line icon appear next to the mouse
 pointer, which means you can now drag and drop the motion path to build a curve.

 Now let's create a curved path from the upper left corner down toward the center of the Stage and then up to the right corner. With
 the mouse pointer showing the curved line icon, click and drag the middle portion of the motion path down toward the center of the
 Stage (see Figure 7).




                                                       Figure 7. Changing a straight path to a curved path.




 When you release the mouse button, the motion path updates and shows you the curve. Now when you preview the animation, the
 symbol will follow the curve you just created. You can click and drag the curve again if you want to change the curve ratio between
 tween points.

 Resizing and rotating the animation

 You can also manipulate the motion path using the Transform tool. The Transform tool enables you to resize, rotate, skew, or
 stretch objects in Flash. You can rotate the motion path of the animation, changing the locations of the origin, intermediate, and
 destination points, without rotating the symbol itself.

 To do this, select the motion path with the Selection tool. The path will darken to indicate that it is selected.

 You can now move or reposition the motion path by clicking and dragging it. For this example, however, select the Transform tool.
 Make sure the motion path is selected and then choose the Transform tool.

 Once you select the Transform tool, a box with squares along the edge appears around the motion path. This is called a bounding
 box, and the squares are called handles. If you click and drag a handle, you can resize the contents of the bounding box — which
 in this case is the motion path — in various directions. If you position your mouse pointer slightly outside the corner handles, the
 mouse pointer will change to show that you can rotate the contents of the bounding box.
http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                        Page 6 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                             2/8/09 11:58 PM


 mouse pointer will change to show that you can rotate the contents of the bounding box.

 When the rotation icon appears, you can click and drag to change the rotation of the motion path for the animation. For this
 example, click and rotate the animation 90 degrees clockwise.

 Then let go of the mouse button, and you'll see that the motion path has changed (see Figure 8).




                                                        Figure 8. Rotating the direction of the animation.




 Now let's adjust the height of the bounding box to keep the animation within the confines of the Stage. Select the top handle and
 move it down. Then move the bottom handle up (see Figure 9).




http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                     Page 7 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                                  2/8/09 11:58 PM


                                                       Figure 9. Resizing the motion path of the animation.




 The animation has now been rotated and resized. If you test the animation, you'll see that its path has been updated, but the
 symbol itself doesn't rotate because you only modified the path, not the object on the path.

 To finish the animation, all you need to do is add your stop action to the end of the timeline. Click the New Layer button at the
 bottom of the timeline to create a new layer.

 Now make sure you are on the last frame of the animation, select the new layer, and create a new blank keyframe by choosing
 Insert > Timeline > Blank Keyframe from the main menu.

 Open the Actions panel by choosing Window > Actions. Make sure you have selected the correct layer and that your playhead is on
 the new blank keyframe you created. In the Actions panel (see Figure 10), type the following script:

    stop();




                                                         Figure 10. Adding a script to the Actions panel.




 When you're finished, you'll see a small a appear in the blank keyframe in the timeline.

 That's it. Now when you preview your animation, you'll see it run from start to finish and then stop instead of looping the way it did
 before.



 Conclusion

 Now that you know the basics, you can create all kinds of animations in Flash CS4 using assets from other Adobe applications.
 Experiment with midpoints, curves, and size to come up with innovative ways to move graphics over time. For more information
 about Flash CS4 Professional, visit the Flash Developer Center.



http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                          Page 8 of 9
Adobe Edge: Tutorial: Create animation with Adobe Flash CS4 Professional                                                         2/8/09 11:58 PM


 ‹ Back

 Doug Winnie is group product manager for workflow at Adobe Systems. He is responsible for maximizing workflow collaboration
 between Adobe products, platforms, and technologies. Prior to joining Adobe, Winnie led designer and user experience
 development organizations. He is an avid developer using Flash, Flex, Dreamweaver, and other web development applications and
 platforms.




http://www.adobe.com/newsletters/edge/december2008/articles/article4/                                                                 Page 9 of 9

								
To top