Flash Tutorial (1)

Januari 22, 2008 at 3:41 am 1 komentar


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 journalism, 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, are fairly easy to learn.

In this tutorial we take a two-pronged approach to learning Flash. First we look at basic shape drawing and animation tools and the workspace. Then we switch to a walkthrough on creating multimedia slideshows with video, audio and playback controls. Unlike most Flash tutorials, this one is aimed specifically at the needs of journalists, and does not dwell on drawing and animation techniques.

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

Getting Started: The Work Area

Launching Flash will load the work area page. The work area has the following main sections: the toolbar, the stage, and the timeline.

work area


Selection tools * Arrow Subselection Lasso
Drawing tools Line Pen Oval Text Rectangle Brush
Transforming tools Transform Fill transform Inkbottle Paintbucket

YOUR BEST FRIEND = Apple > Z (this erases your previous move)

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 iMovie and put in a Flash movie.

To change size and color:
_ Menu > Modify > Document
In the Property Inspector: Change pixels in “size” and color in “background.”

To change stage area view:
Menu > View > View Work Area
to toggle between looking at just the stage or seeing the space around the stage.

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 put the individual pictures of your project into separate layers. You can have as many layers as you want. You can: * Move the layers around: click on layer and drag above or below another layer Delete them: click on layer and drag to or click on trash bin just under layer list Add more: click on left-most symbol (plus on paper) just under layer list

Top right buttons over the Timeline: Edit scene or edit symbol
Symbol Editing Mode: This is where you alter the “symbols” in your library

Main work area toggles between two modes:

The Stage, where you make your movie, and Editing symbols.

Windows (or palettes, located in the main horizontal menu bar):
Make sure the “Properties”, “Library” and “Toolbar” windows are open (find them on the menu in Window).

Keyframes and Tweening

Or Five Easy Steps to Making a Photo Fade In and Out

Keyframes signify the beginnings and ends of changes in an image (the bounces of a ball, the fade-in of a photo or a fade-out of a photo, etc.). Mark a frame as a keyframe when you want to start or end a change. Think of keyframes as the brackets, the starts and stops, the beginnings and ends – of a motion, a fade in, a fade out, size increase, a size decrease, etc.

When you set two keyframes – one when a fade starts, another when it ends, Flash does its magic and figures out the middle, the inbetween part. This is called TWEENING.

IMAGES: Use four jpgs [download them from this site here].

1. Open up Flash
2. Stage dimensions = 700 x 500 pixels
3. Background = white
4. Frame rate = 15 fps
5. Choose: File > Import to Library, browse to boats.jpg and open it. Boats.jpg ends up in your Library.

IMPORTANT NOTE: If you grab frames from iMovie or Final Cut Pro to use as still photos in Flash, first save them in a .pict file, then import them into Photoshop to change them to a .jpg. If you don’t the picture will be distorted and/or show the video interleaving lines. ALSO: Save all .jpgs for the Web (_File > Save for Web_) before using them in Flash, otherwise they will be too large.

Before you can manipulate images in Flash, you have to change jpgs to symbols. Flash is very picky about this.

Change a jpg to a Symbol
6. Create a new layer (or if one exists with nothing in it, use that one) and name the layer “boats” by double-clicking in the layer and typing in “boats”. Then select the empty keyframe (click in the first frame of the layer — it contains an empty circle) and then click-and-drag boats.jpg from your library onto the stage.

7. Make sure boats.jpg is selected on the stage (a light blue square will appear along its outside border), and choose Modify>Convert to Symbol. A handy shortcut is F8 (Function key 8). In the highlighted box, type boats. Make sure that “graphic” is selected from the choices below. Click “okay”, and the jpg on the stage turns into a symbol. A symbol of boats.jpg appears in your library.

[One way you can tell the image on the stage is a symbol is that there’s a little circle in the middle of the photo. And, in fact, when you select any of your symbols on the stage, they’ll always have the little circle in the middle.] You can check to make sure that symbol boats looks the same as boats.jpg by clicking on boats symbol in your Library Window and seeing the image.

What you’re going to do now is produce a Flash movie in which the photo fades in from Frames 1 to 10, stays unchanged from frame 10 to 20, and fades out from Frames 20 to 30.

Set the Keyframes
8. Click on Frame 30, hit Insert > Timeline > Keyframe or hold down the mouse and select Insert Keyframe from the dialog box (this is the end of the whole fading in, fading out Flash movie)

9. Click on Frame 31, hit Insert > Timeline > Blank Keyframe or hold down the mouse and select Insert Blank Keyframe from the dialog box (this is very important later, as it designates the end of the layer’s content and prevents Flash from filling in frames when you’re copying layers).
10. Click on Frame 10, hit Insert > Timeline > Keyframe or hold down the mouse and select Insert Keyframe from the dialog box (this is where the photo finishes fading in).
11. Click on Frame 20, hit Insert > Timeline > Keyframe or hold down the mouse and select Insert Keyframe from the dialog box (this is where the photo starts fading out)

Set the Fade
12. This is where you apply the fade. Click on Frame 1, and then click on the photo on the screen. (Make sure you’ve selected the arrow – Selection Tool — in the Toolbar.) In the Property Inspector, in Color, choose “Alpha” (transparency) on the drop-down menu. Then change the percentage to “1 percent” – that means the photo is transparent.

13. Click on Frame 10, then click on the photo. In the Property Inspector, in Color, choose “Alpha” on the drop-down menu. Change the percentage to “99 percent”. (Why 1 and 99 percent instead of 0 and 100? Apparently, the transition is smoother.)
14. Click on Frame 20 to make sure that the Alpha on the drop-down menu is at 99 percent.
15. Then click on Frame 30, on the photo, and, in the Property Inspector, change the “Alpha” to “1 percent”.

Set the Motion Tweens
16. One more step. This is where you tell Flash how to do the fade – to set motion tweens between the first two keyframes that bracket the first action to let Flash know that these are the frames in which it has to fill in the action. This is how: Click on Frame 1, hold the mouse down, and when the menu pops up, choose “Create Motion Tween”. [Or, you can look in the Property Inspector for “Tween” and choose “Motion” from the drop-down menu.] A thin solid arrow stretches between Frames 1 and 10, indicating a motion tween.

17. Since the photo doesn’t change between Frames 10 and 20, you don’t put a motion tween between Frames 10 and 20. You put one between Frames 20 and 30, where the photo starts to fade out. So, click on Frame 20, hold the mouse down, and when the menu pops up, choose “Create Motion Tween.”
18. Hit return, and watch your movie!

One more important rule
ONLY ONE SYMBOL ON A LAYER. That means that if you’re moving one symbol on a layer, you can’t add a symbol to a layer that already has a symbol and make it move independently of the symbol that was there first.

The truth about instances
Flash really works with INSTANCES of symbols. Instances is what you call a symbol after you’ve dragged it onto the Stage. Why is this important? Because you can do anything you want to this instance – shrink it, stretch it, make it disappear – and it doesn’t do anything to the symbol from which it came. Which means you can use the symbol as many times as you want.

So, to show you how you can use the same image again, repeat the exercise above, using the same image, but name it boats2 in the new layer. Then, once you’ve dragged boats onto the Stage in the new layer, make it smaller or larger, whatever…just play.


Entry filed under: Flash. Tags: , , , .

Website untuk Peta Wilayah di Indonesia Flash Tutorial (2)

1 Komentar Add your own

  • 1. ken Drakeford  |  Oktober 5, 2008 pukul 12:54 pm

    Hi. Im working with flash 9 for mac. Im designing a project where large jpeg tweens are hopping about madly.

    I can’t see the frame area under the jpegs so Im blindly guessing what will or wont be visible. Is there any way of highlighting the frame edge so I can gauge what Im doing?

    regards – Ken


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )


Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


  • 382,351 kunjungan
Januari 2008
« Des   Feb »


%d blogger menyukai ini: