If you come to Adobe Flash CS6 from a traditional animation background, you may want to create animation the old-fashioned way: frame by frame. Flash easily supports this method, but you should decide which method you want to use based on the type of animation you want to create.
Free Adobe Flash Tutorials is a site and video podcast dedicated to learning Flash. Free step-by-step video tutorials are offered including basic material, to more complicated actionscript. Check weekly for new video downloads, links, tips, and ideas.
Both methods have advantages: Although motion and shape tweens give you the power to create sleek animations quickly and easily, you may find that they’re limited. Frame-by-frame animation is significantly more time-consuming and complex to create but can afford some detail and flexibility that you can’t otherwise achieve.
To create a frame-by-frame animation, follow these steps:
Create a new Flash document to work in.
Create a blank keyframe for each frame you want to include in your animation. You can do this easily by clicking a frame and using the F7 shortcut key.
Frames don’t have to be consecutive; you can leave space between keyframes to control the time that elapses between each one.
Draw (or insert) a graphic for each state of your animation on the appropriate keyframes.
Play back your animation by pressing Enter or Return.
If your goal is simply to move an object from one location to another, to create fades, or to transform size and rotation, it makes sense to use motion tweens and let Flash do the thinking for you. If you’re trying to create highly complex animations that tweens can’t handle (for example, a person running), you may want to try the more traditional frame-by-frame approach.
In some cases, you can break artwork into individual moving parts (like wheels on a bicycle) across several layers to achieve effects similar to frame-by-frame by using motion tweens.
Getting Started
Let me guess – you want to add snappy interactivity and animations to your Web pages but you don’t want to create huge “click here and go get a sandwich” files? Then Adobe’s Flash may be for you. It doesn’t require the scripting savvy of DHTML and Ajax which makes it easier for beginners.
The process of making a Flash movie is easy to learn, but mastering it takes time and sweat. Here, and in Lesson 2, I’ll show you the basics of making one, and then I’ll show you what you need to learn to become a Flash grandmaster.
The best way to create Flash content is with the Flash application, which was originally called FutureSplash. In 1997, Macromedia acquired the small company that developed FutureSplash as a way to complement Director, its flagship product. Director, which has since gone the way of the Dodo.
Toward the end of 1995, when Netscape Navigator 2 was the latest, greatest browser, Macromedia introduced Shockwave as a way to port Director movies to the Web. Users downloaded and installed a free plug-in, and the movies played right there in the browser.
As the web got more complex Director proved unwieldly, but here was still a need to provide an alternative to standard GIFs and JPEGs, which lack versatility and can result in big files.
Adobe Flash Cs3 Animation Tutorial
The vector capabilities in Flash proved to be one possible anwer. Vector-graphics programs create graphics using instructions while bitmap programs map out images pixel by pixel.
Let’s say you want to draw a circle. A vector graphic simply tells a display program to “draw a perfect circle exactly 100 pixels in diameter.” A bitmap program maps out every pixel in that circle, which requires more information (and therefore a larger file size) often resulting in a poorly rendered circle. Also, a vector-based image can be scaled to virtually any size with no impact on file size or quality.
Here’s a simulation of the differences between bitmap and vector graphics. The left circle demonstrates how a bitmap image is defined by a finite set of pixels. Enlarge it, and the circle looks pretty rough. But if you increase the resolution to lose that “pixely” look, you’ll run into major file-size issues. Meanwhile, the vector graphic on the right could be enlarged 10 times and still look just as sharp.
Because of bandwidth concerns on the Web, there has long been an urgent need for vector graphics. SVG is emerging as an official standard, but with Flash, the future is now.
Flash allows you to create animations, build interactivity, and add sound to your pages — and even fairly complex games. You can make some dazzling graphics and interfaces for your Web pages that eat up an amazingly petite 5 to 50 KB. And the growth of the ActionScript programming language offers you the chance to take it much farther, if you want.
Another big advantage of Flash is that it’s virtually independent of browsers. Since Flash files are only viewable with a plug-in, everyone with a version 3 browser or better can see the movies almost identically. The downside to this is the plug-in itself:Users need to download and install it before they can see anything. But this is becoming less of a hurdle since the latest browsers come with Flash already included.
So all in all, Flash is looking like quite the solution and is becoming more popular every day. But enough talk. Let’s get our hands dirty.
What you’ll need
To use this tutorial, you’ll need to have the Flash plugin installed. Chances are you already have it, but if you don’t you can grab the latest version. Also, you need a copy of the Flash application if you want to do the exercises.
Animation Tutorials Using Adobe Flash
If you can’t fork out the bucks for Flash right now, don’t fret. You can download a 30-day trial version from Adobe, which also includes the current plug-in for your browser. The site also offers a pretty good deal on upgrades from previous versions of Flash. They offer a really great deal if you also want to purchase Freehand.
After you’ve installed everything, bookmark this page, restart your browser, stretch your fingers, and come on back.
OK. Everyone here? Let’s get started.
The Flash Tools
Flash is both a drawing tool and a movie editor. If you’ve used other graphics applications, some of the tools may look familiar, but some won’t. To keep things simple, let’s start with a little introduction to the interface before diving right in to the nuts and bolts.
At this point, you should have Flash running. Create a new file by selecting New from the File menu bar. Now select Document from the Modify menu. This allows you to define some general attributes for your movie, like window size, background color and frame rate. Set the width to 550 pixels and the height to 400 pixels.
If you’ve installed the latest Flash plug-in, you should see something when you roll your mouse over the image below.
Go ahead and click around:I know you want to.
The Toolbar panel on the left side of the window probably looks similar to those of other graphics programs you’ve used, and it serves a like-minded purpose:to help you create and edit your images. The various icons allow you to draw, paint, shape, edit, fill and color your graphics. You’ll find that these tools useful for creating new images and they’re indispensable for modifying existing elements. There is an assortment of other Panels that offer more specialized functions from picking a color or typeface to creating complex scripts.
The blank rectangle filling the bottom portion of the screen is called the Stage. This is where you draw graphics and preview the movie as you build it. At the bottom of the Stage is is a Panel with some different tabs for controlling items you’ve drawn or placed on the Stage.
See the area above the Stage that has a ruler, like a strip and a field labeled Layer 1? This is the Timeline, where it all comes together. Similar to a storyboard, the Timeline acts as a map to the Flash movie. It represents the various elements that appear over time, together or separately. Use the Timeline to combine images, make the animations happen, and define interactivity. If you need to spread out, you can detach the Timeline by clicking and dragging it outside of the document window. You can also enlarge or compress it using a pop-up menu in the upper right hand corner.
The red vertical slider indicates the frame that you’re currently working with on the Stage. You can add elements to your Flash movie by creating new layers in the left column. You can also extend the duration of the movie by adding frames to the right end of the Timeline. At any time, you can add frames or layers to the Timeline, move them, or change their attributes. Throughout these tutorials, you’ll be adding Keyframes to the timeline, which control transitions and events in the movie.
Flash also has the standard pulldown menus that you’ll find in almost every program. Many of the functions you’ll find here are simply other ways of carrying out actions that the panels perform. Like other Adobe applications, Flash allows you to customize the shortcuts for most menu items. Just go to Keyboard Shortcuts under the Edit menu (Mac Flash>>Keyboard Shortcuts…). It comes with sets of shortcuts that mimic other popular programs like Dreamweaver and Photoshop. Before you have the shortcuts down, you may want to set these.
Flash also uses contextual menus almost everywhere. Just right-click (control-click on a Mac) in different places. And if you let the cursor hover over something you aren’t sure about, a brief label usually pops up.
OK. Now that you’re more familiar with the tools, let’s use them.
Drawing and Modifying an Image
Let’s start drawing something simple with Flash.
Now select the Pencil tool. (Note:All the tools are identified by icons. If you’re ever puzzled by a particular icon, place your cursor over the tool in question for a second and a tool tip will pop up and identify it for you.) In the bottom half of the Toolbar palette, you’ll find some graphic buttons. These are the tool modifiers. They are contextual, so they change according to what tool you’ve selected from above. The very last button affects the shapes you draw with the pencil, and the others are for color, line size, and line quality.
With the pencil tool still selected, click that last button and select the Straighten option. If you are capable of drawing a perfectly straight line, you can skip this tool – and you might consider alerting Guinness. The rest of us will need this modifier to help in the drawing of three connecting lines to form a triangle. Pretty good, eh?
If you’re accustomed to using a program like Illustrator or Freehand, you may be familiar to the pen tool, an alternate way of drawing shapes in Flash.
There are two arrow tools. They are used to select objects and modify them. The hollow arrow (Subselection tool) is for selecting or modifying points on an object. Once you have selected a shape with an arrow tool, you can straighten or smooth it by clicking on one of the icons under Options on the tool panel. Or you can choose Optimize… under the Modify menu. You can access these arrow tools even if another tool is selected by clicking with the command key (on Macintosh) or control key (on Windows).
Next, select this Paint Bucket icon. Pick your favorite color from the tool modifier below and click anywhere inside the triangle. See the pretty, colorful triangle? If your triangle won’t fill, it’s possible that there’s a gap at one corner. No problem — just select “Close Large Gaps” under the Options section on the tool panel.
Adobe Animate Tutorials For Beginners
Double-click on one of the segments. You’ve now selected the entire outline of the triangle. Hit the Delete key, and the outline will disappear, leaving you with a pure, triangular shape.
Try clicking your mouse on any edge of the triangle and then dragging it. This allows you to reshape the object. Select the Paintbrush tool and, using the same color as the triangle, paint along the triangle. Select the triangle with the arrow tool. You’ll notice that now everything has merged into one image. Choose the eraser and try the same thing. If you don’t want to merge the paintbrush stroke with the triangle, you should create a new layer first. But again, we’ll cover this in a bit.
Select Edit and Undo a few times to revert to the original triangle shape. Remember, the number of undos available is defined under Preferences.
Wait! Are you sure that’s really your favorite color? Changing colors is no problem. With the triangle selected, go to the Swatches panel and select a different fill color or gradient. You can also just “pour” another color into it with the Paintbucket tool.
Now save your movie. Next, we’ll make that triangle move around.
Making the Moves with Symbols
Look at the Timeline for your movie. Double-click on the field labeled Layer 1 and rename it Triangle. To give the triangle space to move, click on it and drag the entire shape to the left side of the Stage.
Note:If you want to rewind a Flash Shockwave movie like this one, Control-click (on a Mac) or right-click (if you’re using Windows) to reveal a popup Control menu.
Click on frame 20 to select it, and then choose Frame from the Insert menu. You’ll notice some faint hash marks designating the frames you created. The background of these frames is gray to indicate that there is something on the stage for that range of frames, the triangle you created. Delete the triangle and see how the timeline changes. Now select command-Z (control-Z on Windows) to undo your delete and bring back the triangle.
The Frame Indicator can now move within those 20 frames, but nothing changes in the Stage area because all the frames except the first are blank. In Flash, a blank frame inherits whatever is defined in the Keyframe before it, and you can create as many blank frames as you like without affecting the file size of the movie.
Select the sixth frame. Choose Insert>> Timeline>> Keyframe. The Stage area should remain the same, but now another division appears in the Timeline with another solid dot. Hit Enter on your keyboard to play the movie. Since both Keyframes are the same, nothing really happens, aside from the slider moving across the Timeline. To make something happen, click on the second Keyframe and then drag the triangle to a different location. Hit the Enter key again. What you see is animation:the triangle jumps from one location to another. It’s nothing very smooth or award winning, but it’s animation nonetheless.
Timeline with two Keyframes and Tweening
Let’s make the animation better. To do this, you must make a symbol.
Symbols are an important concept in Flash. Not only do they make every Flash animation (except shape morphing) work, they keep Flash movies small.
Let’s say we want to use triangles throughout our movie. We could duplicate the original triangle a bunch of times, or we could transform the triangle into one – and only one – simple symbol. You can then resize it, distort it, change its color or transparency, and place instances of that symbol wherever you like as many times as you like. But the original symbol will still take up only one spot in the Library, and less memory is consumed. For an extensive look at the advantages of using symbols to create smaller files, check out Marlow’s Optimizing Flash tutorial.
All symbols are stored in the Library. Choose Window and then Library to access the Library for this movie. Right now it’s blank. Click on the first frame in the Timeline and then select the triangle you drew. Choose Modify, then Convert to Symbol. As advertised, this maneuver will convert the triangle shape into a symbol. When the dialog box pops up, name the new symbol Triangle and select Graphic as its Behavior. You can now see it in the Library palette, which means you can place it into your movie wherever you like.
Applying tweening in the Frame panel
Click on the sixth frame or the second Keyframe. The presymbol triangle should still be sitting there. Delete it, then select the triangle on the Library palette. Drag the preview of the symbol into the Stage area to a location close to the object you just deleted. Now select any frame between the two Keyframes and right-click. From the pulldown menu select Create Motion Tween. Now you’ll notice an arrow in the Timeline that indicates the tweening. You’ll also notice that the bottom panel changes to give you number of options for you tween. Leave everything at its default setting for now.
Back in the day, I had a friend who worked in an animation studio, and her title was in-beTween artist. Her supervisor would give her two drawings, or keyframes, and she would draw a designated number of frames “be-Tween” the keyframes to complete the transition. With Flash, you have your own in-beTween artist.
Hit the Enter key and marvel at the improvements to your animation. And it’s only going to get better.
As top-notch designers, we all know there’s more to life than Flash. Fortunately, you can also import images from other vector-based programs, such as Adobe Illustrator. Just select Import under the File menu. Flash also supports many familiar bitmap formats in addition to the old standbys GIF and JPEG.
If you need to import a bitmap image into Flash, use the File/Import menu command or just copy the image from the source file (such as a document opened in Photoshop) and paste it onto the Stage area. You can change the image properties of a bitmap image to compress it as a GIF, PNG or JPEG using Properties menu on the Library palette (look for the “i” icon).
Layering and Other Neat Tricks
Don’t be stingy about creating layers. They don’t add any bulk to the final file size and they can help separate elements, which will aid in keeping you sane. Also, if you want to animate symbols separately, you must create a layer for each symbol.
To add another layer, select Insert >>Timeline>> Layer (or click the new layer button at the bottom of the Layers palette). Double-click on the Layer and name it Circle. Insert a Keyframe in frame number 3. Select the Oval tool and then go to the Stroke and Fill option in the tools palette. Set the Stroke Height to 4 points. Choose a Stroke Color different from what you used for the triangle – for variety’s sake – and set the Fill to none:
Adobe Flash Cs6 Animation Tutorial
Now draw a circle about 2 inches in diameter in the center of the Stage. Reset the movie to the first frame and hit the Enter key to see the circle pop up suddenly in frame 3. The next step will be to make that circle fade in smoothly.
Adobe Flash Animation Banner Tutorials
Since you’re going to work more extensively with the circle, convert it to a symbol (choose Convert to Symbol from the Modify menu). Name this symbol Circle. Insert a Keyframe at frame 10 of the Circle layer. Remember, the contents of any new Keyframe are inherited from the previous Keyframe until you specifically alter it, so you should only add a Keyframe when you want to make a change to a symbol or object. Not only does this keep the Timeline neat, it conserves file size of the final movie.
Click on the Circle symbol in frame 3 of the Circle layer. Then go to the bottom panel and select Alpha from the Color pulldown menu, and set the percentage to 0. After you click OK, the circle will seem to disappear. It’s still there, but an alpha value of 0 makes symbols appear invisible. With frame 3 still active, right-click the timeline and select Create Motion Tween. Motion tween? But it’s not moving! Congratulations, you’ve just discovered a quirk in the interface of Flash. As a rule, use the Motion tween for everything but shape morphing.
To see the results, reset the movie to the first frame and hit Enter.
That triangle moving across the stage looks pretty dumb, but you can modify a symbol however you like on the Stage, and the original symbol will remain the same. (See Lesson 2 of this tutorial to learn how to edit the original symbol.) Click on the Triangle layer to make it active. Next, click on the triangle symbol in frame 6 (the second Keyframe) and set the width and height to 50 percent in the Transform panel. Check the “Constrain” box and you only have to enter 50 percent for the height.
Also, Flash animations don’t have to move along a straight line; they can take any path. With the Triangle layer active, choose Insert >> Timeline >> Motion Guide. You’ll notice this created a new guide layer (with a loop icon in it). Click on the guide layer name to make it active if it isn’t already. Make frame 5 the current frame so you can see the triangle on the right side of the Stage. Select the Pencil and the Smooth Modifier. Draw a loop starting at the center of the triangle and bring it around the bottom and back up the left side of the stage area. Is it not smooth enough? Click on the path (using the Arrow tool), and then click on the Smooth Modifier again and again until you achieve the desired result.
Here’s the Triangle layer and its Motion Path layer. The Pencil icon indicates an active layer for editing in the Stage area. Right-click (control-click on Mac) to reveal layer options.
Next, drag the triangle by the cross hairs into the center until it snaps to the starting point of the path you just drew. If you are having trouble with this, make sure that “Snap to Objects” under the View menu is checked. Add another Keyframe to Frame 20 in the Triangle layer and, with that frame active, drag the triangle to the opposite end of the path. With the trangle symbol selected, choose “tint” in the bottom panel (it’s hiding in the dropdown menu beside “color”). Play around with the other settings in the panel until the triangle is a new color that you like.
Activate motion tweening for frames 6 through 20 and Play the movie to see what you’ve created. If the triangle doesn’t move along the path, be sure that the center of the triangle symbol is snapped to the path in Keyframe 5 and Keyframe 20. Once everything is working for you, click the first dot to the right of the Guide layer name (under the eyeball) to hide it. Guide layers don’t appear in the final movie, but you may want to hide them while editing other layers.
Now Get Experimental
Another benefit of symbols is that they simplify editing. If you have a movie full of dozens of instances of a single symbol, you can change them all at once by editing the symbol. I’ll often build a Flash movie with roughed out symbols and then go back and refine them after the movie is assembled. To edit a symbol, just double-click on an instance in the Stage or in the Library panel.
Adobe Flash Text Animation Tutorial
You can stop there for now or you can go crazy creating more layers and animating the same Triangle and Circle symbols any way you like with little impact on the file size. If you saved this as a Flash movie right now, its size would be less than 4 KB.
Experiment with adding more layers to your movie and combining tweening actions. There are numerous ways to double up the effects. Once you’re comfy with those, try and make a Shape tween. Hint:This is the only exception to using symbols. Shape tweening (also called shape morphing) works only with ungrouped, nonsymbol objects, which exist directly on the Stage and Timeline.
Also, try adding some text as an object or symbol. It’s similar to creating and editing other objects, but you use the text tool.
Here we’re adding another triangle to the animation.
If you want to check your work, download this .fla file and open it in Flash. So far we’ve talked about creating images in Flash and animating them. That’s pretty cool in itself, but that only scratches the surface of what you can do with Flash. So in Lesson 2 we’ll add some basic interactivity to our movie and integrate it into a Web page.
Stay tuned!
Flash Tutorial for Beginners – Lesson 1 |