You are on page 1of 56

1.

Motion 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. 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. 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.

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

2.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.

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

3.Working on Layers
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.

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

4.Motion Guide
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. 8. Now go to "Frame 50" of "graphic" layer and press F6 to insert a new keyframe. 9. Now drag your symbol to other end of your path. Again, the bubble should go right below the path. 10. 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.

5.Masking
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. 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.

6.Bouncing Effect
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.

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.

7.Fade in Fade out 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 toModify>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 Symbolfrom 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 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.

8.Zoom in Zoom Out Effect


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.

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 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!

9.Blur Effect
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 image. Select the image on the stage and choose Modify/Convert To Symbol. Name the symbolblur 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.

10.Straight Ripple Effect


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, Selectgirl_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. 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.

11.Circular Ripple Effect


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

Instructions to draw the above shown borderless circle


o o o

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 demonstartion. 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 differnce basically depends on the type of effect you want. So you can adjust it the way you want.

12.Sparkling Glass Effect


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.

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. 3.

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. 4. Create another movie clip with a star which becomes smaller at a slower rate

than our 1st star movie clip.


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. 5. 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. 6. 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.

13.Photo Slideshow
Steps to Follow : Step 1: Create and export your images

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. SelectPhoto Slideshows. Click on OK. You will see a ready-made Flash photo slideshow created. Press Cntrl+Enterto 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.

14.Custom Cursor
Steps to Follow :

Press (Ctrl+F8) to create a new symbol. "Create New symbol" window will appear Name your symbol cursorNew_mc. Click on movieclip behavior and then press "OK" Now you would have entered your movieclip symbol Draw anything you like to replace the existing cursor. For example I drew an arrow as shown below

Now come back to "Scene 1" which is your main movie To get back to "Scene 1", click on the "Scene 1" text on top of your timeline window as shown in the figure below

In "Scene 1" of your Main Movie


Drag your cursorNew_mc movieclip symbol from library onto your stage. If Library window is not open, Press (Ctrl+L). Name this Symbol "cursornew" in the instance text box of your property window. Select 1st Frame of your "Layer1". Go to Actionscript panel ( If your actionscript panel is not open, Press "F9") With Frame1 of your layer 1 still being selected, type the below mentioned script in your action panel.

Mouse.hide() startDrag(cursornew,true) Guess what! You have finished with customizing your cursor :), Press Ctrl+Enter to view customized cursor.

15.Linking to External Files


There are different ways that you can link to websites and emails in Flash 1.

Text Links
The first way is very simple. You can link to a website via a simple text link. Type in the text using the A tool and in the properties inspector you can enter the full http path of the website or you can enter a web page name if you want to link to a page within the same folder. You can also set the target as _blank if you want the website to open in a new browser window (as seen below).

To link to an email address, all you need to do is enter mailto: followed by the email address (See below)

You can also link to content in a frame, by specifying the html file and frame name (See below).

You can also link to an image or a pdf file by entering the file name and specifying "_blank" to open the file in a new browser window.

2.

Button Links
You can also link to websites, web pages and emails from buttons using the GetURLfunction in actionscript.

All you need to do is choose the button and in the actionscript panel, enter the following script :

on (release) { getURL("http://www.entheosweb.com", "_blank"); }

3.

You can link to an email address the same way, prefixing it with mailto: (see below).

You can also link to particular frame by giving the content.html file and frame name. Flash will open the content file in the frame name you specify. See example given below.

You can also link to an image or a pdf file by entering the name of the image or pdf file and opening it in a new browser window by specifying "_blank".

16.Loading External Images


Steps to Follow :
1. Create a folder which will have your .fla file, .swf file and your external image. Name the external image photo.jpg. 2. Create the photo and empty movie clips

Create an empty movie clip by clicking on Insert/New Symbol. Save the symbol asempty_mc. Create another movie clip and save it as photo_mc. This movie clip is for any properties you would like to add to the photo, like a frame around the photo or background color etc.

Create a frame or background in this movie clip and drop the empty movie clip (empty_mc) inside the frame. Give an instance name to the empty movie clip, call it empty. The external image will be loaded into this empty movie clip. You should have photo_mc movie clip in the the main timeline, give this an instance name ofphoto.

3. Actionscript for loading the external image in the photo movie clip.

Create a new layer in your main timeline for adding the actionscript for loading the external image. Choose the first frame in the actionscript layer and copy the following actionscript in the actionscript panel loadMovie("photo.jpg", photo.empty); This script loads the image photo.jpg which is saved externally in the same folder to the empty movie clip which is in the photo movie clip (instance names empty and photo).

The script can also be added to the photo movie clip timeline if you don't want to add it to the main timeline frame. You just need to change the actionscript to loadMovie("photo.jpg", empty); The above script can be added in the photo_mc timeline

Press Ctrl+Enter to test the file.

Congratulations! You have successfully learnt how to load external images in Flash using simple actionscript. If the image is not loading, please check that the photo is saved as photo.jpg in the same folder and the instance names for the movie clips are correct.

17.Scrolling Content
Steps to Follow :
1. Open Flash 8.0 and create a new Flash document 2. Create a movie clip called content_mc and in the symbol properties box check export for actionscript and Export in first frame. View the screenshot below.

3. Open the Components Panel by clicking on Window/Components 4. Select and drag the ScrollPane component into the stage

5. Select the ScrollPane component on the stage and in the properties inspector choose theParameter tab and enter the height and width you would like for the scrolling content. In the contentPath property, type in the name of your content movie clip i.e. content_mc. The scrollpane is an in-built Flash component that scrolls the content in the movie clip specified.

6. Press Ctrl+Enter to test the file. Congratulations! You have successfully learnt how to scroll content in Flash using the in-built Flash ScollPane component. If the content is not loading, please check that you have typed the correct movie clip name in the contentPath and in the movie clip properties you have checked export for actionscript andExport in first frame.

18.Random Movement
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 237px by 268px. This is the same size as the Bitmap picture we have. Select the Bitmap picture which you want to use as the 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 to the Stage. This will be in your first layer, name it background. 2. Create the dot movie clip Add a new layer and name it dot . Draw a red dot with the oval tool, press shift so that the circle comes out round. Make the size 2px by 2px. Select the borders and delete them. Click on the dot. Go to Modify>Convert to Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as dot_mc. Select Movie Clip. Click on OK. 3. Create the heart movie clip Add a new layer and name it heart. Draw or import a heart. Make the size as 10px by 10px Click on the heart. Go to Modify>Convert to Symbol from the Menu Bar. A dialog Box named Create New Symbol will appear. Give the name as heart_mc. Select Movie Clip. Click on OK. 4. Add simple Actionscript to the movie clips Select the dot on the stage. Go to Actions-Movie Clip Panel below the Stage. Copy this Action Script in the Dialog Box as seen below, to give the random movement to the movie clip: onClipEvent(enterFrame) { _alpha=random(100); _x=_x=random(50);

_y=_y=random(50); }

Repeat this for the heart moview clip. You can enter different values instead of 100 and 50 and experiment to see which looks the best. 5. Select the dot and copy and paste it to various places in the stage. Repeat this step 5 times and adjust the dots in the Stage by dragging them next to each other in different places. You can repeat the steps as many times as you want and change the values to give different movement. Copy and paste the heart in various places as well. 6. Save your file as random.fla. Press on Ctrl+Enter to see the Random Movement. This will create automatically random.swf file. Congratulations! Your Flash Random Movement Effect is ready.

19.Simple Preloader
Steps to Follow:
Create a Movie clip.
1. Draw a borderless rectangle. If your color mixture panel is not open press Shift+F8 to open it. Select your rectangle, go to color mixture panel and choose linear from the drop down menu. Now change your linear fill accordingly, with white on right end and your background color on the other end. 2. Select this rectangle and press F8 to convert this rectangle to a symbol. Name this symbol "Bar" and choose Graphic behavior. Press OK.

3. 4. Press Ctrl+F8 to create a new movie clip for preloader effect. Call it "preloader_mc". Choose movie clip behavior and press OK. 5. Draw a borderless zigzag as shown below on the first frame and press F5 on the 90th frame.

6. 7. Insert a new layer and pull it below Layer1. 8. Insert the bar graphic symbol into this new layer "Layer2". 9. Adjust the height of the bar such that its height is equal or little more than the zigzag height. 10. Position this bar graphic as shown below.

11. 12. Press F6 on the 35th frame. Keeping framehead on 35th frame, pull the bar graphic onto the other side of zigzag as shown below.

13. 14. Select any frame between Frames 2 and 34 and select Motion from the tween pop-up menu in the Property inspector. 15. Select frame 40 and press F6 to insert a new keyframe on the 40th frame. 16. Keeping the framehead on the 40th frame select bar graphic and go to main menu, Modify>Transform>Flip Horizontal. 17. Select frame 85 and press F6 to insert a new keyframe on the 85th frame. 18. Keeping the framehead on the 85th frame pull the bar graphic symbol to its initial position as in frame 1. 19. Select any frame between Frames 41 and 84 and select Motion from the tween pop-up menu in the Property inspector. 20. Select frame 90 and press F5.

Adding Preloader to your Scene1


1. Now go to your Scene1. 2. Insert 3 new layers. 3. Drag "preloader_mc" from your library onto your working area. Place it at the center of your working area. Press F5 on the 2nd frame 4. Type in "LOADING" on the 1st frame of your 2nd layer. 5. Copy and Paste the below script in the action panel of your 1st frame of 1st layer.

ifFrameLoaded ("end") { gotoAndPlay ("start"); } 6. 7. Press F6 on the 2nd frame of 1st layer and insert the below script in the action panel of your 2nd frame of 1st layer. gotoAndPlay (1); Start your Main movie from the 3rd frame onwards. Name the 1st frame of your main movie "start" and the last frame "end".

20.Simple Timeline Preloader


STEPS TO FOLLOW
Create a Graphic Symbol

First and foremost type "LOADING" on your center stage. Select the word LOADING and press F8 to convert it to a symbol. Name the symbol "loading", choose Graphic behavior and press OK.

Create a "LOADING" Movie clip


Press Ctrl+F8 to create a new Movie clip. Name this Movie clip "loading_mc", choose Movie clip behavior and press OK. Insert your loading Graphic Symbol in Frame1. Press F6 to insert keyframe in frame5 and in frame10 Now go back to frame5. Select "LOADING", still keeping the playhead in frame5, chooseAlpha 0 from color pop-up menu of your property panel. Choose any frame between 2 and 4 and select Motion from the tween pop-up menu in the Property inspector. Choose any frame between 6 and 9 and select Motion from the tween pop-up menu in the Property inspector. Your Movie clip is ready, Now come back to Scene1.

Create Bar Preloader

Insert 5 layers and name them as shown below.

Now go to frame1 of loading layer, drag loading_mc to your center stage. Center Align the movie clip. Press F5 on your 40th frame of loading Layer. Select frame1 of your mask layer and draw a rectagle as shown below.

Press F5 in frame 40

Double click on this rectangle, Copy ( Ctrl+C), go to Layer bar and press (Ctrl+Shift+V) to paste it exactly in the same position. Now select only its border, Cut (Ctrl+X) and paste (Ctrl+Shift+V) in frame1 of your border layer.

Press F5 in frame 40 of border layer Now come back to your bar layer, Push the rectangle to the left as shown below

Go to Frame 40, keeping playhead on frame 40, pull the rectangle onto the other side as shown below

Now select any frame between 2 and 39 and select Shape from the tween pop-up menu in the Property inspector. Now go back to layer mask, right click on the label and select mask.

Insert script in the action panel


1. Go to action Layer, insert keyframe in 1st,2nd,5th,6th,10th,11th,15th,16th,20th,21st,25th,26th,30th,31st,35th,36th and 40th Frame 2. Copy & Paste the following script into the action panel of Frames mentioned below. ifFrameLoaded ("s1") { x = 1; play (); } ifFrameLoaded ("s2") { x = 2; play (); } ifFrameLoaded ("s3") { x = 3; play (); } ifFrameLoaded ("s4") { x = 4; play (); } ifFrameLoaded ("s5") { x = 5; play (); } ifFrameLoaded ("s6") { Frame 25 Frame 20 Frame 15 Frame 10 Frame 5 Frame 1

x = 6; play (); } ifFrameLoaded ("s7") { x = 7; play (); } ifFrameLoaded ("s8") { x = 8; play (); } gotoAndPlay ("start"); Frame 40 Frame 35 Frame 30

3. if (x != 1) { gotoAndPlay(1); } if (x != 2) { gotoAndPlay(5); } if (x != 3) { gotoAndPlay(10); } if (x != 4) { gotoAndPlay(15); } if (x != 5) { gotoAndPlay(20); } Frame 21 Frame 16 Frame 11 Frame 6 Frame 2

if (x != 6) { gotoAndPlay(25); } if (x != 7) { gotoAndPlay(30); } if (x != 8) { gotoAndPlay(35); } Frame 36 Frame 31 Frame 26

4. Your preloader is now ready. You can start building your main movie from the 41st frame and call the 41 frame "start" . After your main movie is ready. Divide the total frames used by your main movie by 8. Name them s1, s2, s3 and so on.

21.Digital Clock
STEPS TO FOLLOW
1. Insert 3 layers in your timeline window and name them, "background", "text" and "actions". Similar to the one shown below

2. 3. Select Frame1 of background layer, Design the framework for your digital clock. 4. Select frame2 and press F5 5. Now go to Frame1 of your text layer and insert Dynamic text field in your work area. Select frame2 and press F5 To insert a Dynamic text field- Select text tool from your tool box, Select Dynamic text from Text pop-up menu in the Property inspector. Click on your work area wherever you want the digital clock to appear. 6. Name this Dynamic text field instance as "clock_txt" 7. Go to frame1 of actions layer. Copy and paste the below mentioned script in the action panel

time=new Date(); // time object var seconds = time.getSeconds() var minutes = time.getMinutes() var hours = time.getHours() if (hours<12) { ampm = "AM";

} else{ ampm = "PM"; } while(hours >12){ hours = hours - 12; } if(hours<10) { hours = "0" + hours; } if(minutes<10) { minutes = "0" + minutes; } if(seconds<10) { seconds = "0" + seconds; } clock_txt.text = hours + ":" + minutes + ":" + seconds +" "+ ampm;

8. 9. Now go to frame2 of actions layer and press F6 to insert a new keyframe. Still keeping the play head on the frame2, go to action panel and copy paste the below mentioned script.

gotoAndPlay(1);

Congratulations!! your digital clock is ready. Press Ctrl+Enter to view your clock.

22.Analog Clock
STEPS TO FOLLOW 1. Create a background for your clock, You can either draw it in fireworks or photoshop and import it onto your stage or draw it in flash itself. 2. Add 5 Layers in your Timeline window. Name them - interface, sec, min, hour and actions. Similar to the Timeline window shown below.

3. 4. Import your clock background design into your interface Layer if you had created it else where. 5. Draw a line in your sec Layer. Select the line and press F8 to convert it to Symbol. Call this Symbol sec_mc, choose Movie clip behavior and select the bottom center square in registration. Similar to the Symbol window shown below.

6. Press OK. 7. In your sec Layer, place sec_mc right at the center of your clock background design. Name it "sec" in instance text box of your property window. This is going to be your seconds needle.

8. Drag sec_mc into your min Layer from your library. If your library window is not open, press (Ctrl+L) to open it. Reduce sec_mc's height, may be by 3pix. Place it right at the center of your clock background design. Name it "min" in instance text box of your property window. This is going to be your minutes needle. 9. Drag sec_mc into your hour Layer from your library. Reduce its height, may be by 5 to 6pix. Place it right at the center of your clock background design. Name it "hour" in instance text box of your property window. This is going to be your Hours needle. 10. Copy and Paste the code given below in your actions window of actions Layer.

11. Now go to second frame of each layer and press F5 to insert new frame. Your clock is ready. Press Ctrl+Enter to view your clock.

23.On/Off Sound Button


STEPS TO FOLLOW
To start with, make 2 buttons. 1 for ON and another, for OFF Next you need to create 2 Movie clips.

For sound For buttons Okay let's start with the Sound Movie clip Create three keyframes. Insert stop action to all the keyframes. Insert your music into frame1. NOTE: Keep the loop count of your music fairly an high value and the sync should be at event.

In frame2 insert the following code,

gotoAndStop(1);

In frame3 insert the following code,

gotoAndPlay(1); Now you are through with your Sound Movie clip. Next, Lets start with the Button Movie clip

Create 2 keyframes. Insert stop actions to both the keyframes. Insert OFF button into frame1.

Select your OFF button and insert the following code,

on (release) { tellTarget ("../music") { stopAllSounds(); } } on (release) { nextFrame(); }

Insert ON button into frame2. Select your ON button and insert the following code,

on (release) { tellTarget ("../music") { nextFrame(); } } on (release) { prevFrame(); }

Insert your Sound Movie clip into your movie and name it "music" in your instance panel. Insert your Button Movie clip into your movie. Now press ctrl+enter to play your movie.

You might also like