flash tutorial

26
FLASH tutorial™ [email protected] FLASH TUTORIAL Perisian ADOBE Flash digunakan untuk membina halaman web, animasi, interaktif dan juga montaj atau pun promo. Antara muka Adobe Flash. Kebiasaannya ia akan memaparkan TOOLS, TIMELINE, STAGE dan juga PROPERTIES WINDOW.

Upload: pusatlatihan

Post on 07-Nov-2014

72 views

Category:

Documents


0 download

DESCRIPTION

Nota untuk kursus di Pusat Latihan AADK

TRANSCRIPT

Page 1: Flash Tutorial

FLASH tutorial™

[email protected]

FLASH TUTORIAL

Perisian ADOBE Flash digunakan untuk membina halaman web, animasi, interaktif dan juga montaj atau

pun promo.

Antara muka Adobe Flash.

Kebiasaannya ia akan memaparkan TOOLS, TIMELINE, STAGE dan juga PROPERTIES WINDOW.

Page 2: Flash Tutorial

FLASH tutorial™

[email protected]

ANIMATION WITH ADOBE FLASH.

Flash can create two types of tweened animation using timeline:

Motion Tween & Shape Tween

Creation of Motion/Shape tween using timeline is the basics of Flash.

Motion tween is nothing but tweening a Symbol's movement from one position to another.

To implement Motion Tween all that you have to do is, provide Flash with Symbol's initial position

and the end position. Rest is taken care by Flash. Isn't it really simple.

For example in the above demonstration, I have converted the pencil object to a Symbol. Provided

Flash with its initial and the end position, intermediate tweening is done by Flash. Motion Tween

animation is as simple as that :)

Okay, you ready to learn how to create motion tween. All you have to do is just follow this

tutorial step by step.

Steps to follow:

Open a new flash file (Ctrl+N).

New Document window will appear

Select General panel and choose Type: Flash Document . Press OK.

If your timeline window is not open, press (Ctrl+Alt+T).

Now you can see a single Layer called "Layer1" in your timeline Window.

Select the first frame. Import your image onto stage, upon which you would want to implement

motion tween.

File>Import>Import to Stage, or just press (Ctrl+R).

Or you can even draw your own object, you can either choose Rectangular tool or Oval tool

from the tool box and draw your desired shape.

Now select your object on the stage and press F8 to convert this image to a Symbol. Convert

to Symbol window will pop-up.

Name your Symbol what ever you like.

Select Graphic behavior and press OK.

Page 3: Flash Tutorial

FLASH tutorial™

[email protected]

Note: You can create motion tween only on symbols. So any object upon which you would want

to implement motion tween, First convert the object to a Symbol.

Right now your Symbol is in frame1 of Layer1. Select frame 20 and press F6 to insert a new

keyframe.

Still keeping playhead on frame 20, move your Symbol to any other position other than the

present one.

Select any frame between, 2 to 19 and select Motion from the tween pop-up menu in the

Property inspector.

Now your Layer will look something like the one shown below. (BLUE COLOR)

Now press (Ctrl+Enter) to view your motion tween.

Page 4: Flash Tutorial

FLASH tutorial™

[email protected]

Page 5: Flash Tutorial

FLASH tutorial™

[email protected]

Shape Tween in Flash

Shape Tween

Creation of Motion/Shape tween using timeline is the basics of Flash.

By tweening shapes, you can create an effect similar to morphing, making one shape appear to change

into another shape over time. Flash can also tween the location, size, and color of shapes.

This tutorial will teach you a simple shape tween.

Steps to follow:

Open a new flash file (Ctrl+N).

New Document window will appear

Select General panel and choose Type: Flash Document . Press OK.

If your timeline window is not open, press (Ctrl+Alt+T).

Now you can see a single Layer called "Layer1" in your timeline Window.

Select the first frame. Now go to your working area and draw any object. To start off with,

may be you can draw a circle.This is going to be your initial object.

In the above demonstration, my initial object is a short line.

Select frame 20 and press F6 to insert a new keyframe.

Still keeping playhead on frame 20, delete the object present in your working area. Now draw

a different object, may be a square.

In the above demonstration, I have drawn a long line.

Select any frame between, 2 to 19 and select Shape from the tween pop-up menu in the

Property inspector.

Now your Layer will look something like the one shown below. (GREEN COLOR)

Now press (Ctrl+Enter) to view your motion tween.

In the above tutorial, you learnt how to create a simple shape tween. Believe me, using this logic

you can create n number of beautiful things. Here is a simple example just to trigger your

Page 6: Flash Tutorial

FLASH tutorial™

[email protected]

creativity.

Working with Layers in Flash

This tutorial will teach you how to work on layers using Flash MX 2004.

If you still haven't finish motion tween. Please go through Motion Tween Tutorial and then get back here.

Steps to follow:

Open a new flash file (Ctrl+N).

New Document window will appear

Select General panel and choose Type: Flash Document . Press OK.

If your timeline window is not open, press (Ctrl+Alt+T).

Now you can see a single Layer called "Layer1" in your timeline Window.

Create a Shape Tween on Layer1. Similar to the one in Shape Tween Tutorial.

Single click on add new layer button.

A new layer gets added. By default it will be named "Layer 2".

Create a Motion Tween on Layer 2. Similar to the one in Motion Tween Tutorial. After

creating two layers, your timeline will look something like the one shown below.

Page 7: Flash Tutorial

FLASH tutorial™

[email protected]

Now press (Ctrl+Enter) to view your motion tween.

Motion Guide in Flash

What is Motion Guide?

Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles.

Learn how to move Flash objects in circular, zig zag or curved paths using Flash motion guide.

Download .fla is included at the end of the tutorial.

This tutorial will explain on how to create motion guide in Flash MX 2004.

Steps to follow :

1. Create a graphic symbol or drag a pre-existing graphic symbol from library onto the stage.

Name the layer as "graphic"

2. Right click on the "graphic" label and select "Add Motion Guide" from the pop-up window.

3. A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along

with the guide icon.

4. Draw the path for your symbol in this new layer using pencil or line tool.

For example: I drew a circle for my car.

5. Select frame 50 of guide layer and press "F5" to insert frames.

6. Now go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path. While

dragging, you will see a bubble on the symbol. That bubble should go right below the path.

Something like the one shown below.

7. Now go to "Frame 50" of "graphic" layer and press F6 to insert a new keyframe.

8. Now drag your symbol to other end of your path. Again, the bubble should go right below the

path.

Page 8: Flash Tutorial

FLASH tutorial™

[email protected]

9. Select any frame between 1 to 50 of your "graphic" layer. Right click and select "motion

tween" from the pop-up menu.

That's it, you are through.

Press Ctrl+Enter to view your work.

Masking with Flash

Masking is revealing portion of your picture or graphic in the layer below.

While surfing through net you might have come across lots of beautiful Flash effects such as ,

some wording with sky background or glitter bordering an object, and wondered "How? What is the

logic behind this". The answer for all this is masking.

This tutorial will teach you the basics of masking in Flash MX 2004. The download .fla file is also

included at the end of the tutorial.

I shall start this tutorial assuming that the reader has basic knowledge of flash such as Shape

Tween and . working with layers

Okay! if you are ready, just follow the steps given below.

STEPS TO FOLLOW

Inserting Layers and Naming them

By default you will have a layer in your timeline window. Insert one more layer, totally you

need two layers to mask an object.

Rename the top layer to "Mask" and the layer below that to "background".

Creating Shape Tween

Import your picture to the "background" layer.

Using Oval tool from your tool box, draw a circle in your "Mask" layer and delete it's

border.

Page 9: Flash Tutorial

FLASH tutorial™

[email protected]

Drag the circle to one end of your picture.

Now go to"frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.

Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that

your background image is available all through your mask.

Select "frame 40" of your "Mask" layer, that is your new keyframe, Keeping the playhead on

"frame 40" of "Mask" layer, drag the circle to other end of your picture.

Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your

"Mask" layer, select Shape tween in your properties window.

Masking

Right click on the "Mask" layer (the area where you named the layer not where the frames

exist) and select Mask.

Your Mask is all ready. Press Ctrl+Enter to view your Mask.

Below is an example to give you more ideas on Masking.

*actual picture is animation

Flash Fade In and Fade Out Effect

Learn how to fade an image in Flash MX. You can use this fading effect on images and text and it is

a very common Flash effect

STEPS TO FOLLOW

1. Open a new file. Go to File >New. A Screen called New Document will appear. Select Flash

Document and click on OK. Go to Modify>Document and give a file size of 300px by 200px. This

is the same size as the Bitmap pictures we have.

2. Select the Bitmap pictures that you want to Fade in and Fade out from your picture file and

bring it to the Flash Library. Select File>Import to Library from the Menu Bar. A Screen

named Import To Library will open. Choose the file name and click on Open. Repeat these

steps for all the Bitmap pictures. To open Library, go to Window>Library. You can see the

pictures in the Library panel.

3. Drag the picture from the Library panel to the Stage. Select the picture by clicking on it.

Go to Modify>Convert To Symbol from the Menu Bar. A dialog Box named Create New Symbol will

appear. Give the name as pic1_mc. Select Movie Clip. Click on OK.

4. Click on your Movie Clip. Go to Frame 15. Insert a Keyframe. Right click on layer 1 in the

Page 10: Flash Tutorial

FLASH tutorial™

[email protected]

middle of the frames 1 to frames 15. The frames will become black. Select Create Motion

Tween. An arrow from frame 1 to frame 15 will appear. Again click on Frame 30. Insert a

Keyframe. A second arrow will appear automatically.

5. Click on Frame 1. Here we will give the fade in effect. Select the picture by clicking on

it. Go to Properties in the panel below the Stage. Go to Color>Alpha give 0% to it.

Your picture has faded in. Click on Frame 30. Here we will give the fade in effect. Select

the picture by clicking on it. Go to Properties in the panel below the Stage. Go to

Color>Alpha give 0% to it.

6. Repeat the steps 3 to 5 in layer 2 from the frame 31 to 45 to 60. To make a new layer, click

on the following button which is on the right side below the layers. Repeat the

above steps for all the images in new layers and you will create a simple fade in and fade

out Flash animation.

Press on Ctrl+Enter to see the Fade in & Fade out Effect of the 4 pictures.

Zoom in Zoom Out Flash Animation with Fading Effect

This tutorial will teach you how to create a simple zoom in & zoom out animation with fade-in and

fade-out effect in Flash. You can use this zooming effect on any image or text.

STEPS TO FOLLOW

Open a new flash file (Ctrl+N). The New Document window will appear. Select General panel

and choose Type: Flash Document. Press OK.

If your timeline window is not open, press (Ctrl+Alt+T). Now you can see a single Layer

called "Layer1" in your timeline Window.

Page 11: Flash Tutorial

FLASH tutorial™

[email protected]

Select the first frame. Import a background image onto stage, preferably an image of a street by

clicking on File>Import>Import to Stage, or just press (Ctrl+R).

Press F8, to convert this image to a symbol. Name this Symbol "background_gr" and choose graphic

behavior. Press OK. Name this Layer "bg". On the 35th frame press F6 to insert a new frame.

Select the second layer. Import an image or create a shape of a car using shape tools from the tool

box. Press F8, to convert this image to a symbol. Name this Symbol "car1_m" and choose movie clip

(F8). Press OK. Name this Layer "car1".

Select the image(car1_m) >right click>edit in place. Now you will come to a new timeline Window

called Symbol2

On Frame1 of Symbol2 convert the image to a graphic (car1_gr). Go to the Properties

Bar>Color>Alpha>0%. In Frame5 insert a new Key frame (Press F6) and change Alpha to 100% and make

the image small. Eg : Pic

Right click in between Frame1 and Frame5 and press motion tween.

Add one more Key Frame in Frame20. In this frame make the Image(car1_gr)bigger and move it

Page 12: Flash Tutorial

FLASH tutorial™

[email protected]

out.

Eg:

On Frame25 insert a new key frame and change Alpha to 0% . Insert motion tween in between

frame5-20 and Frame20-25. eg:

Now press (Ctrl+Enter) to view your motion tween.

Continue to do this for your other car images.

Remember to insert only ONE symbol/image in ONE new Layer only.

Congratulations! You have successfully created a Zoom In/Zoom Out animation with Fade In and Fade

Out effect!

NOTES

Blur Effect in Flash 8.0

Steps to Follow :

Step 1: Import an image and create a movie clip

Open Flash 8.0. Select New/Flash Document.

Import the image you would like to blur by clicking on File/Import to Stage and select the

Page 13: Flash Tutorial

FLASH tutorial™

[email protected]

image.

Select the image on the stage and choose Modify/Convert To Symbol. Name the symbol blur and

choose Movie Clip as Type.

Step 2: Create the blur effect

Select the blur symbol on the stage.

In the Properties Inspector, choose the Filters tab

Click on the '+' icon and choose Blur.

Choose 100 for Blur X and Blur Y and Quality as Medium.

Step 3: Create the animation

In the timeline window right click on the 50th frame choose insert keyframe. Select the

movie clip and change the blur filter X and Y values to 0 to remove the blur effect.

Select any frame between Frames 1 and 50 and select Motion from the tween pop-up menu in the

Property inspector.

Press Ctrl+S to save your changes.

Press Ctrl+Enter to view your animation.

You can also blur only the X coordinates by removing the lock icon in the filters inspector and

changing Blur X to 100

and Blur Y to 0. The effect can be seen below. You can try different blur effects by simply

adjusting the blur X and blur Y values.

Bouncing Effect in Flash

This tutorial will teach you how to create a bouncing effect animation using Motion Tween and Shape

Page 14: Flash Tutorial

FLASH tutorial™

[email protected]

Tween in Flash MX 2004.In the demonstration, the bouncing heart animation is created using motion

tween and the shadow effect using shape tween.

TO CREATE MOTION TWEEN

Steps to Follow :

Create a Symbol

First draw an object for Motion Tween.

Like in the above demonstration I used heart.

Select the object you have drawn and press F8 to convert this object to a Symbol.

In the Symbol window which appears now. Name this object heart_mc, choose Movie clip

behavior and bottom center square for registration. Press OK.

Create a Motion Tween

Double click on the Layer and type "Heart".

Select Frame 30 and press F6 to insert a keyframe.

Select Frame 15 and press F6 to add another keyframe.

With the playhead still on Frame 15, hold the Shift key to move the heart_mc in a straight

line, and drag the heart_mc up.

Select any frame between Frames 2 and 14 and select Motion from the tween pop-up menu in the

Property inspector.

Select any frame between Frames 16 and 29 and select Motion from the tween pop-up menu in

the Property inspector.

Press Ctrl+S to save your changes.

Create a Shape Tween

Insert a new Layer and call it "Shadow".

Select the first frame in the Shadow Layer, draw borderless shadow relevant to your Symbol.

If your Color Mixture Window is not open, press Shift+F9 to open it.

Select Eyedropper tool from your Tool box. Click it on your shadow. Now go to Color Mixture

Window and type 25% for Alpha value.

Page 15: Flash Tutorial

FLASH tutorial™

[email protected]

Select Frame 30 and press F6 to insert a keyframe, then select Frame 15 and press F6 to insert a

keyframe.

With the playhead on Frame 15, select the Free Transform tool. Slightly reduce the size of

the Shadow.

With Frame 15 still selected, select the Eyedropper tool in the toolbar, and then click on

your shadow object. Now go to Color Mixture Window and change Alpha value to 10%.

Select any frame between Frames 2 and 14 on the Shadow layer. In the Property inspector,

select Shape from the Tween pop-up menu.

Select any frame between Frames 16 and 29 on the Shadow layer. In the Property inspector,

select Shape from the Tween pop-up menu.

Now its time for Final touch up

Select Frame 1 of the Heart layer. Press F6 to add a keyframe. A new keyframe is added, and

the playhead moves to Frame 2.

Go back to frame 1, select the Free Transform tool from your toolbox.

Select the transformation center point (the small circle near the center of the movie clip)

and drag it to the bottom of the heart. On the Stage, drag the upper middle transform handle

down to slightly compress the heart shape.

Right-click Frame 1 of the heart layer and select Copy Frames from the context menu. Go to

29th frame and press F8 to insert a new keyframe. Right-click 29th frame and choose Paste

Frame from the context menu.

Click on the Stage, away from any objects. Type "28" in the Frame Rate text box of your

Property inspector window.

On the heart layer, select any frame between Frames 2 and 14. Then in the Property

inspector, in the Ease text box, type 100. Similarly select any frame between Frames 16 and

29 in the same layer, then go back to Property inspector window and type -100 in the Ease

text box. Do the same thing to the Shadow layer.

Press Ctrl+Enter to view your animation.

Page 16: Flash Tutorial

FLASH tutorial™

[email protected]

Flash Ripple Effect

This tutorial will teach you how to create a simple Ripple effect in Flash MX 2004.

STEPS TO FOLLOW

Create a Graphic Symbol.

Import an image to your work area upon which you would like to create ripple effect.

Press F8, to convert this image to a symbol.

Name this Symbol "girl_gr" and choose graphic behavior. Press OK.

Name this Layer "bg".

Select girl_gr and choose Alpha 99% from color list box in your property window.

Create a Movie clip.

Press Ctrl+F8, to create Ripple movie clip.

Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.

Drag girl_gr to your working area from Library (ctrl+L).

Select girl_gr and choose Alpha 0% from color list box in your property window.

Insert Keyframe (F6) into the 5th frame.

Remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in your

property window.

Now select 1st frame, choose Motion Tween from Tween list box in your property window.

Insert Keyframe into 15th frame and later to 20th frame.

Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your

property window.

Select 15th frame, choose Motion Tween from Tween list box in your property window.

Insert a new layer above this layer, call it "Layer 2".

Select frame 1 of Layer 2 and draw a borderless square or rectangle depending on the type of

ripple effect you want.

In the above demonstration, I have used rectangle with 15 pix as its height.

Place this vector wherever you want the ripple to begin. Make sure that the vector belongs

only to layer 2.

Insert Keyframe into the 20th frame of Layer 2.

Place the vector wherever you want the ripple to end or ebb.

In the above demonstration, I have placed it right at the bottom and reduced the height to 5

pix.

Select 1st frame, choose Shape Tween from Tween list box in your property window.

Right click on Layer 2 and select Mask.

Save (ctrl+S). Make it a habit to save your work after each step you do.

Insert Ripple Movie Clip onto Scene 1

1. Now go back to Scene 1.

2. Insert a new layer above bg layer and call it ripple1.

<!-- google_ad

_client = "pub-

114838706724

8465"; /* 300x

250, created 11

/19/08 */ goog

le_ad_slot = "5

692836953"; go

ogle_ad_width =

300; google_ad

_height = 250;

//-->google_prot

ectAndRun("ads

_core.google_r

ender_ad", go

ogle_handleEr

ror, google_re

nder_ad);

Page 17: Flash Tutorial

FLASH tutorial™

[email protected]

3. Insert new Keyframe (F6) into the 10th frame of ripple1 layer.

4. With 10th frame of ripple1 layer selected, Drag ripple_mc movie clip onto the working area.

Place it appropriate to girl_gr. Make sure that this movie clip is placed exactly where you

had placed your square or rectangular vector in ripple_mc Movie clip.

5. Insert frame (F5) into the 30th frame of ripple1 layer. This is just to make sure that the

ripple _mc runs only for 20 frame.

6. Insert another new layer above ripple1 layer and call it ripple2

7. Insert Keyframe into the 20th frame of ripple2 layer.

8. With 20th frame of ripple2 layer selected, Drag ripple_mc movie clip onto the working area.

Place it appropriate to girl_gr just the way you did in step 4.

9. Insert frame (F5) into the 40th frame of ripple1 layer. This is just to make sure that the

ripple _mc runs only for 20 frame.

10. Insert frame (F5) into the 40th frame of bg layer.

Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.

Okay now few things to Note - In the above demonstration I have created a subtle ripple effect. If

you want the ripples to be more prominent, you can add few more layers of ripple_mc movie clip and

reduce the Keyframe differences between layers. Like in the tutorial above, ripples appear every 10

frames. You can reduce this period and make it appear every 5 frames, which would make the ripple

effect more prominent.

Page 18: Flash Tutorial

FLASH tutorial™

[email protected]

Circular Ripple Effect in Flash

This tutorial will explain how to create a simple circular Ripple effect in Flash MX 2004

Example:

www.primacysearch.com

STEPS TO FOLLOW

Create a Graphic Symbol.

Import an image to your work area upon which you would like to create ripple effect.

Press F8, to convert this image to a symbol.

Name this Symbol "girl_gr" and choose graphic behavior. Press OK.

Name this Layer "bg".

Select girl_gr and choose Alpha 99% from color list box in your property window.

Create a Movie clip.

Press Ctrl+F8, to create Ripple movie clip.

Name this symbol "ripple_mc" and choose Movie clip behavior. Press OK.

Drag girl_gr to your working area from Library (ctrl+L).

Select girl_gr and choose Alpha 0% from color list box in your property window.

Insert Keyframe (F6) into the 5th frame.

Still remaining on the 5th frame, Select girl_gr and choose Alpha 99% from color list box in

your property window.

Now select 1st frame, choose Motion Tween from Tween list box in your property window.

Insert Keyframe into 15th frame and later to 20th frame.

Remaining on the 20th frame, Select girl_gr and choose Alpha 0% from color list box in your

property window.

Select 15th frame, choose Motion Tween from Tween list box in your property window.

Now go to frame 5 and reduce the size of girl_gr, maybe by 5pix width and height.

Go to frame 20 and increase the size of girl_gr, maybe by 5pix width and height.

Insert a new layer above this layer, call it "Layer 2".

Draw a borderless circle. Which would look something like the one shown below

Page 19: Flash Tutorial

FLASH tutorial™

[email protected]

Instructions to draw the above shown borderless circle

Draw a black circle in a layer and delete it's border.

Insert a layer above the black circle layer.

Draw a smaller white circle in this new layer and delete it's border.

Position the white circle such that it is right at the center of the black circle.

Now, cut the white circle and paste it (Ctrl+Shift+V) in the black circle layer.

Click somewhere outside, so that you deselect either of the circles.

Now click on the white circle and delete it

Your borderless circle is ready!

Place this circle right at the center of girl_gr but make sure that this circle resides in Layer 2.

Insert Keyframe (F6) into the 20th frame of Layer 2. Remaining in 20th frame Increase the size of the circle. Note, the increased diameter

decides where you want the ripple to end or ebb.

Now go back to 1st frame, choose Shape Tween from Tween list box in your property window.

Right click on Layer 2 and select Mask.

Save (ctrl+S). Make it a habit to save your work after each step you do.

Insert Ripple Movie Clip onto Scene 1

1. Now go back to scene 1.

2. Insert a new layer above bg layer and call it ripple1.

3. Drag ripple_mc movie clip onto the working area. Place it right at the center, just the way

you placed the circle in ripple_mc Movie clip.

4. Insert frame (F5) into the 20th frame of ripple1 layer. This is just to make sure that the

ripple _mc runs only for 20 frame.

5. Insert frame (F5) into the 30th frame of bg layer.

Here you go!! Your movie is ready. Press Ctrl+Enter to view your movie. Wasn't it simple.

Tips: Inserting 1 ripple_mc Movie clip is sufficient if your picture is approximately the size of

the picture as shown in the demonstration. If your picture is really big, you might have to insert

more than 1 layer of ripple_mc movie clip. See to that the difference between the appearance of

each movie clip is 5 frames. Actually the difference basically depends on the type of effect you

want. So you can adjust it the way you want.

Page 20: Flash Tutorial

FLASH tutorial™

[email protected]

Sparkling Glass Effect in Flash This tutorial will teach you how to create a sparkling effect or twinkling star

effect in Flash MX. This tutorial is for people who are comfortable with movie

clips using Flash MX. You can try the Sparkling Effect on a diamond ring or on text

also.

STEPS TO FOLLOW

1. Import the Background Image

Open a new file. Go to File >New. Select Flash Document. Click OK.

Go to Modify > Document to give a file size of 180px by 400px. This is the same size as the

Bitmap picture we have. Select the Bitmap pictures which you want to put as background and

bring it to the Flash Library by clicking on Select File > Import to Library from the Menu

Bar. Go to Window > Library, You can see the picture in the Library panel. Drag the picture

named Bitmap to the Stage. Select the picture by clicking on it. This will be your first

layer, name it background.

Now you have to create 7 movie clips. You have to have basic knowledge in FLASH MX to do

this. As you know movie clips work independently, and you can use them whenever required.

2. Create a Rotating Star Movie Clip

Create a new layer. Name it sparkle.

Go to Insert > New Symbol. The 'Create New symbol' screen will appear. Name this movie clip

' star_mc'. Click OK. You will be directed inside the movie clip. Now select the PolyStar

Tool. To select the Polystar tool , first go to the Rectangle tool and select it in the drop

down menu as seen below.

Page 21: Flash Tutorial

FLASH tutorial™

[email protected]

Go to the Properties window. Go to Options. A screen called Tool Settings will appear.

Enter these values and click OK:

Style: Star

Number of sides: 4.

Star Point Size: 0.10.

Now draw the Star (without a stroke color). Make the star into a movie clip entitled star_mc. Now

double click on it. On frame 1 you will see your star. Go to Properties>Tween. Select Motion from

the drop down Menu. Name it as star_in_mc. Go to frame 10. Press F6 to insert a new keyframe.

Select the star and go to Modify > Transform > Rotate CW. Repeat Modify>Transform>Rotate CW thrice.

Your rotating Star movie Clip is ready. You will see it in the Library Window also. This movie clip

star_mc will not be there in the sparkle layer but stored in the Library, we will use it later.

Create a movie clip with a small opaque circle that increases in size and becomes almost

transparent.

Draw a circle with Oval Tool, choose the fill color as white and make it 2px by 2px. Select

it. Go to Modify>Convert to Symbol from the Menu Bar. A dialog Box named Create New Symbol

will appear. Give the name as shade_mc. Select Movie Clip. Click on OK. double click on it.

You will be inside the Movie clip and in your first frame you will see the dot. Select it.

Go to Modify>Convert to Symbol from the Menu Bar. A dialog Box named Create New Symbol will

appear. Give the name as shade_in_mc. Go to Frame5. Press F6 to insert keyframe. Go to

Properties>Tween. Select Motion from the drop down Menu. Go to Frame 10. Press F6 to insert

keyframe. Now go to Frame 5. Select your movie clip. Increase the size to 14.3px by 14.3px.

Go to Frame 1. Select the dot. Go to Properties. Select Color as Alpha in the drop down menu

and give 100%. Go to Frame 5. Select the dot. Go to Properties. Select Color as Alpha in the

drop down menu and give 10%. Go to Frame 10. Select the dot. Go to Properties. Select Color

as Alpha in the drop down menu and give 5%. This movie clip shade_mc will not be there in

the sparkle layer but stored in the Library, we will use it later.

Create another movie clip with a star which becomes smaller at a slower rate than our 1st

star movie clip.

Page 22: Flash Tutorial

FLASH tutorial™

[email protected]

Go to Main Scene. Go to Insert > New Symbol. The Create New symbol screen will appear. We

will name your first movie clip as star_mc. You will be directed inside the movie clip. Now

go to PolyStar Tool. To go to polystar tool , first go to rectangle tool and select it in

the drop down menu. Go to Properties window. Go to Options. A screen called Tool Settings

will appear. Select Style, in the drop down menu as Star. Select Number of sides 4. Select

Star Point Size as 0.10. Click on OK. Give color as white.

Now draw the Star. Give the size to 23px by 23px. Select the edge and delete them. Choose

the star and make it a Movie Clip. Name it star_s_mc. Now double click on it. On frame 1 you

will see your star. Go to frame 10. Press F6 to insert a new keyframe. Go to

Properties>Tween. Select Motion from the drop down Menu. Go to Frame20. Press F6 to insert

keyframe. Go to Properties>Tween. Select Motion from the drop down Menu. Now go to frame 10.

Select your movie clip. Go to Properties. Give the size to 9px by 9px. This movie clip

star_s_mc will not be there in the sparkle layer but stored in the Library, we will use it

later.

Create the sparkle movie clip by combining the movie clips created above and place it where

required.

You have already created 6 movie clips. Now we will create the last main movie clip. Go to

Insert>New Symbol. The Create New symbol screen will appear. We will name your main movie

clip as sparkle_mc. You will be directed inside the movie clip. Drag in here these 3 movie

clips : star_mc, shade_mc , star_s_mc because when they are combined they will give the

sparkle effect, and adjust them properly in the middle. Now go to your main scene. Go to

layer sparkle. Drag the Main movie Clip sparkle_mc wherever you want the Sparkling Glass

Effect to be seen. You can use it on a diamond ring, a golden jewelry or on sparkling text

also.

Save your file as sparkle.fla. Press on Ctrl+Enter to see the Sparkling Glass Effect. This

will create automatically sparkle.swf file.

Congratulations! Your Sparkling Glass Effect is ready.

Photo Slideshow Gallery in Flash 8.0

Learn how to create a Photo slideshow in Flash 8.0 using the in-built Flash Photo Slideshow

template

Steps to Follow :

Step 1: Create and export your images

Page 23: Flash Tutorial

FLASH tutorial™

[email protected]

Each image should have a size of 640 x 480 pixels.

Export the images in a numbered sequence. For example, for three files, the names could be

photo1.jpg, photo2.jpg, and photo3.jpg. We recommend .jpg format for photographs.

Step 2: Create the photo slideshow file and import the images

Open Flash 8.0. Click on File/New. Chose the Templates tab. Select Photo Slideshows. Click

on OK. You will see a ready-made Flash photo slideshow created. Press Cntrl+Enter to view

the file. Press the auto play button to view the slideshow.

To replace the images with your own, select the bottom layer called picture layer and click

on the trash can icon to delete it.

Create a new layer by clicking the Insert Layer button, and name this new layer My Photos.

Make sure that this new layer is the bottom layer.

Select the first blank keyframe in the My Photos layer, select File > Import > Import to

Stage, and locate your photo sequence. Select the first image in the series, click Add, and

click Import. Flash recognizes that your image is part of a series and asks you to import

all files in the series. Click Yes to complete the import process. Flash places each image

on separate keyframes. You can move the images so they are centered in the stage or you can

choose the images on the stage and make the X and Y coordinates 0 so they are centered in

the stage.

Your images appear in the Library panel and can be replaced later if needed by double

clicking on the image in the library window and clicking on the import button to select the

new image file.

You can safely delete the old images that were included in this document from the library if

you wish, they are saved in the photos folder.

If you have more than four images, make sure that all the other layers have an equal number

of frames. Select the frame and click on F5 to add new frames.

Change the captions for the images, by replacing the text in the Captions layer and adding

new keyframes with text for the new images. You do not have to worry about the photo number

field. The template automatically determines how many images are in your document and

indicates which photo you are currently using.

Change the title in the Title, Date layer.

Press Ctrl+Enter to view the completed Flash Photo Slidshow. Congratulations! You have successfully

created a Flash photo slideshow in a few simple steps using the in-built Flash 8.0 Photo slideshow

template.

The Photo Slideshow template also has a built-in autoplay mode that automatically changes the photo

after a set delay. The template is set to a default delay time of 4 seconds, but you can change

this setting easily.

Steps to adjust the delay:

Unlock the _controller layer.

Select the controller component.

Display the Parameters tab in the Component inspector by selecting Window > Component

Inspector. The Parameters tab is selected by default.

Select the delay and change this value to a new delay value in seconds.

Save and publish your document.

Page 24: Flash Tutorial

FLASH tutorial™

[email protected]

3D Animation in Flash CS5

This is a tutorial on how to rotate objects in a 3D motion using the 3D Rotation Tool in Flash

CS5.

Before starting with the actual rotation of an object in 3D, follow the following steps to

understand the concept and the basic tools and utilities in Flash CS5 that will be used to go

through the tutorial.

1. Start Flash CS5 using the shortcut icon from your systems desktop.

2. Choose ActionScript 3.0 under the Create New area to load a new file that uses Actionscript

3.0 as its basics.

3. Choose SMALL SCREEN from the interface type drop down list. The interface type drop-down is

available on the right of the menubar area, refer Figure.

4. Invoke the Rectangle Tool from the Tools panel and create a rectangle in the stage area (

the stage area is the white area in flash where we do all of our artwork). Make sure that

the Height of the rectangle is more than its width.

5. Select the rectangle from the stage area and choose Window > Transform from the main

menubar; the TRANSFORM options dialog box is displayed, refer Figure.

The TRANSFORM dialog box is used to transform the selected shape in the stage area. In this

case, the options in this dialog box are not highlighted. To make them work we need to

transform the selected shape into a movie clip.

6. Double-click on the rectangle created in the stage area and choose Modify > New Symbol from

the main menubar; the Create New Symbol dialog box is displayed, refer Figure.

Page 25: Flash Tutorial

FLASH tutorial™

[email protected]

7. Name the symbol as Box1_mc and choose the OK button; the selected shape is converted into a

movie clip.

The name Box1_mc is followed by mc which means that it is a movieclip. To name a movieclip

follow it with ‘mc’, in case of button use ‘btn’. This naming convention help;s a lot

while doing actionscripting in flash.

8. Select the Box1_mc movieclip from the stage. Press and hold the ALT key and make a duplicate

copy of it. Align them together as shown in Figure.

9. Select the left box and in the TRANSFORM dialog box set Y = -40 under the 3D Rotation area

and for the right box set Y = 40 and align them, refer Figure.

10. Press CTRL + a to select both the objects in the stage area. Next, try playing with

the x, y, and z values under the 3D Rotation area. On doing so, the objects rotate in the 3D

world, refer Figure.

11. Select the first keyframe in the timeline, right click on the selected frame a flyout

is displayed. Next, choose Create Motion Tween from the flyout.

12. Move to the last frame and drag it to frame 55 and choose Window > Transform from the

main menubar; the TRANSFORM window is displayed. Try changing the values in this window; the

result is displayed on the stage area.

13. To test the animated movie, hold down the CTRL key and press ENTER; a new window is

displayed showing the published flash animation.

Using this concept and the traditional timeline animation you can animate any shape in 3D by

Page 26: Flash Tutorial

FLASH tutorial™

[email protected]

just setting the keyframes