FLASH TUTORIALS: CMM

Flash is Macromedia's powerful vector-based animation tool. Flash is the defacto standard for Internet multimedia because it allows authors to create online multimedia presentations with minimum file sizes. With Flash, Web presentations can blend text and pictures with video and audio, interactive buttons, and animated charts and graphs.

Flash is also becoming a rich ground for multimedia because its interactivity lends itself as a medium to non-linear, reader-directed storytelling.

While Flash is used on the most advanced Internet media sites, basic uses, like generating animated slideshows and animating objects, are fairly easy to learn.

First we are going to look at basic shape drawing and animation tools and the workspace.

This tutorial was written for Flash CS5, so some of the procedures we describe may be slightly different if you have a newer version of Flash.

Launching Flash will load the work area page. The work area has the follow ing main sections: the stage, the timeline, the properties, the tools, and the library.

A movie is your Flash project, whether a slide show of still photos or bouncing balls, as opposed to a video clip that you might edit in Adobe Premiere and embed in a Flash movie.

It’s divided into frames, like a video or animation, with 12 frames per second being the default [but change it to at least 15].
The rectangular red box is the playhead that you move to see changes on the Stage. Play your movie by hitting "Return"

· You can make those frames bigger or smaller by clicking the pop-up box at the end of the line of frame numbers (it has what looks like a little Frankenstein scar).

· In the single layer, the first box is outlined in black and contains an empty circle. That first box is a blank keyframe.

· The rest of the boxes are outlined in gray. Boxes with gray outlines are called “protoframes” – they’re placeholders. Every fifth protoframe is tinted gray; the rest are white.

· A frame with an empty circle means it is a blank keyframe with nothing in it. Put something in it, and the empty circle changes to a black circle, which indicates a keyframe.

F6: Then press "F6" and keep on drawing petals, entering "F6" before every stroke.

Find PD images from use Flickr ’s Creative Commons, theNew York Digital Public Library 's Flickr Photostream, orWikimedia Commons (all images need to be selected from the Public Domain or Creative Commons). Students will pick a theme for their collage and go for it (e.g., flowers, geese, shoes, etc). Students might want to take a photo of themselves and include themselves in the Collage (using PhotoBooth). Students will then review each other’s work before the end of the day. (Peer Review)

4. ADDING MUSIC

Open your animation file. To import any file into Flash: go to File -> Import to Library, then select the appropriate file

If you look in your library, you'll see the name of your audio file with a little speaker icon next to it, indicating that it's an audio file.

You can even play the file in the preview window, by clicking the little "play" arrow in the area above the library list.

To place the audio in your scene, you're going to create a new layer. Rather than drag and drop the audio file onto a keyframe

as we normally would, however, instead you're going to click on the first frame in the layer, then go to the Properties taskbar.

To the top right you'll see a dropdown that says "Sound" and, in the options, "none".

If you click on that, now, it should expand to show a list of all audio files in your library (it might only show one--the mp3 you just downloaded)Select that file.

5. LEARNING TO MOTION TWEEN

There are frames and then there are keyframes. A keyframe signifies the beginnings of changes in an image.

Flash does its magic and figures out the middle, the inbetween part and the end of a motion. This is called TWEENING.

First, IMPORT the Photoshop fIle" ziplineboy.psd" (your counselor will give you this file)
Make sure you Check the following, then click "OK":

Second, put your curser on frame 40 of the BACKGROUND layer and hit Function/F5 (it's just F5 if you're not using this small funky keyboard).
This will elongate your layer. (See below)

Third, make a MOTION TWEEN for the top layer (boy).
Hold down the Command key; Click on the keyframe for that layer, and then Right click: you'll find the option to "Create a Motion Tween." Flash will prompt you to "create a symbol." Do it! (Good practice: go to the library and name the symbol).

Fourth, drag the motion tween (the layer will be green as it's selected) to meet the background layer.

Fifth, put the boy to the far left of the stage on frame one. Move the cursor to Frame 20, and THEN move the boy to the middle of the rope swing (so he logically appears hooked to the middle of the rope). Finally, move the cursor to the last frame, and then move the boy to the far right of the stage.

Sixth, See if you can put a bend in the tween by selecting the orange dotted tween line and bending it, to make the swing up and down more realistic.

THE BOUNCING BALL ANIMATION… in FLASH!!

1. Create a new Flash document (Command + N) for your sweet animation you're gonna cook up. Make sure you pick Actionscript 3.0!

2. Choose a color you want your ball to be. Red, orange, blue, it doesn't matter. Pick your favorite color.

3. Select the oval tool

to begin to create your ball. Draw your ball and don't forget to hold shift to create that perfect circle.

6. Select FRAME 20 and click F6. Then move your ball to the bottom of your stage.

7. Select FRAME 25 and click F6. Use the free transform tool to make the ball short and fat. Move the ball to the bottom of the stage.

8. Select FRAME 30 and click F6. Use the free transform tool to make the ball in the shape of a perfect circle. Move the ball to the bottom of the stage.

9. Select FRAME 50 and click F6.
10. Move your ball from the bottom of the stage back up to the top.

11. Now it's time to create some CLASSIC TWEENS! Click in a frame between 1 and 20. Right click and select Create Classic Tween. Do the same thing for a frame between 20 and 25. You're not done yet, you gotta do the same thing for a frame between 25 and 30. Now the last step.. do the exact same thing for a frame between 30 and 50.

Shape tweens are fun because they look really cool and they’re easy to create. Compared to motion tweens, they look more dynamic because every attribute – including the shape – animates.

In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.

Shape tweens work best with simple shapes. Avoid shapes with cutouts or negative spaces in them. Experiment with the shapes you want to use to determine the results. You can use shape hints to tell Flash which points on the beginning shape should correspond to specific points on the end shape.

Tip: Flash is really unforgiving when you don’t follow its rules. Luckily, the rules for a shape tween are very simple: no groups and no symbols. That’s it. Remember these two things, and shape tweens will be easy. Also, Text acts as if it is a grouped or a Drawing Object from the beginning. This means that you can’t use text in a shape tween unless you first break it apart (by selecting Modify, Break Apart). If text contains more than one character, you have to break apart twice – once to break the text into individual characters and another to turn it into individual shapes. Remember, too, that after text becomes a shape it is no longer editable!

7. INTEGRATING PHOTOSHOP INTO FLASH

How to use Photoshop to isolate an image from its background and and save them as PNG files

Magic eraser tool
Magnetic Lasso tool
Quick Selection Tool/Magic wand tool

Download these 3 images.

Use the magic eraser for the chicken

Use the Magnetic Lasso

for the Barn

Use the Quick Selection tool

for the duck

Put all the farm animals in a layered PSD file (to animate later in FLASH)

OR import this PSD "Fish" file from your counselor.

File/Import/Import to Stage: (SELECT PSD FILE)

The layers will be automatically imported.
Animate the specific photographic components using Motion Tweens!

8. MOVIE CLIPS

The first time someone builds a complex Flash project, the Timeline stretches out forever and becomes very difficult to work with. At some point in the authoring process, the designer may discover Scenes and try using those to manage the huge, unwieldy sequence of frames. However, scenes don’t make the Timeline more compact; they only break it up, the way a book is broken up into chapters. What works much better is to use movie clips for any motion or action that must be repeated or that must remain available to the user.

Movie clips are a type of symbol in Flash (the three types are graphic, button, and movie clip). They act like mini-movies inside the main movie, so they can play parallel to (or simultaneously with) other parts of the movie. With movie clips, a Flash movie that had 100 or more frames could be pared down to as little as one frame!

Some people wrongly think that Graphic symbols are only for when the symbol contains a single frame and Movie Clip symbols are only for when you have multiple frames. The differences go much deeper than that. The best approach is to always use Movie Clips unless you have a reason to use Graphic symbols. The first thing to learn is that both Movie Clips and Graphic symbols can contain one or more frames. However, only Movie Clips will automatically loop regardless of where you place instances of that clip.

Movie clips offer incredible versatility to a Flash designer, and yet it takes some practice before working with them begins to feel comfortable. After you figure out how useful they are, you will begin to realize that almost every cool thing you’ve ever seen in a Flash movie was done with movie clips. They really are worth the effort.

Start with a new Flash document and change your frame rate to 24 fps.

Create a shape, or import a graphic (the bee.png for example!) and convert to symbol (F8).

Name the symbol "bee"; this icon will appear in your library:

Double click on the bee symbol on the stage. You'll know it's a symbol by its blue outline.

You're now in Movie Clip Editing Mode--you'll know by the blue arrow in the upper left hand corner of the screen:

Click on the bee image AGAIN.
Convert THIS bee (inside the first bee symbol) into a graphic symbol (F8/Graphic Symbol)...call it something like "bee2".
The icon in the LIBRARY will look like this:

On the stage, make the graphic symbol bee move along a motion tween.
(Use Bezier curves to make the bee's path more interesting.)
Now you're ready to get back to the first "Movie Clip" layer....
Click the blue arrow to get out of "Movie Clip Editing Mode."
You'll see that you have a single bee moving.
Finally, go to the LIBRARY and select the "bee" movie clip and drag it to the stage.
Do it again.
(Now have fun resizing the bees, or flipping them so they go in opposite directions).
You have 3 instances of the bee movie clip on the stage.
You can apply movie clips to any flash movie.

Go CRAZY with swarms of bees!!!

9. WORKING IN 3D

Find the TEXT tool, type some text into the composition window (your name is a good choice) and a new layer will automatically appear.

Over to the right there is a separate button called “Animate”…If you don’t see the “Animate” button, click on the first or second icon at the bottom left of the screen and expand the layer switches panel.

Twirl the “Animate” button down and you’ll be able to choose various properties to animate.

Range selector determines which characters are selected by the particular adjustment.

Go to the “Add” menu and you can add additional properties to the original animation.

There's a quicker way to animate text though! Go to the Effects and Presets Panel:

Go to Click on flyout menu (little icon that looks like a bunch of lines) on the right hand side of the Effects and Presets panel:

14. USING THE PUPPET TOOL
Import the HUNGARIAN boy PHOTOSHOP FILE (a layered photo in photoshop with separated "arm" and "body" layers). Import as a "Editable Layer Styles" . VIEW THIS HELPFUL TUTORIAL.

Put cursor over the pins, and you get a move icon, and you can move portions of your object around.

For precise movements recorded in the timeline, twirl down Puppet/Mesh/Deform, and each individual pin, which you can animate.

For speedy animation, hold down Control/Command key and you get a little stop watch.

Puppet Starch tool: if things are moving that shouldn’t be, you can go anchor them down using the Starch tool.

4. ADDING MUSIC

5. LEARNING TO MOTION TWEEN

Content on this page requires a newer version of Adobe Flash Player.

7. INTEGRATING PHOTOSHOP INTO FLASH