FLASH

What you should already know:
Before you continue you should have a basic understanding of the following: WWW, HTML and the basics of building Web pages.

What is Flash?
· Flash is a multimedia graphics program specially for use on the Web
· Flash enables you to create interactive "movies" on the Web
· Flash uses vector graphics, which means that the graphics can be scaled to any size without losing clarity/quality
· Flash does not require programming skills and is easy to learn

Flash vs. Animated Images and Java Applets
Animated images and Java applets are often used to create dynamic effects on Web pages.

The advantages of Flash are:
· Flash loads much faster than animated images
· Flash allows interactivity, animated images do not
· Flash does not require programming skills, java applets do

Who can Create Flash Movies?
To create your own Flash movies you need to buy a Flash program.
The latest version from Macromedia is Flash MX 2004 (or Flash MX Professional 2004). You can get your trial version at http://www.macromedia.com

Where to Start?
After you have installed Flash, you should go through the lessons that are included in the program. Start Macromedia Flash, click Help in the menu and choose Lessons. These lessons will teach you the basics of Flash. Flash Embedded in HTML. After creating a Flash movie, you choose a File > Save As from the top menu to save your movie. Save the file as "Test.fla". To embed the Flash movie you just made into an HTML page, you should go back to your Flash program and do the following steps:

Step 1 Choose File > Open. Open a Flash movie you have created.

Step 2 Choose File > Export Movie.

Step 3 Name the file "TestOne.swf". Choose the location where the file is to be stored (in your Web folder). Click OK.

Step 4 Open the HTML page where you want to insert your Flash movie. Insert this code: <object width="550" height="400"><param name="movie" value="TestOne.swf"><embed src="TestOne.swf" width="550" height="400"></embed></object>

Note: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed.

Note: In the code above there is both an <embed> tag and an <object> tag. This is because the <object> tag is recognized by Internet Explorer, and Netscape recognizes the <embed> tag and ignores the <object> tag.

Step 5 Type in the address of the HTML file in your browser and look at your first Flash movie. Let the Flash Program do the Work. The code above is the absolute minimum code to embed Flash movies in HTML pages. It is not recommended to use the minimum code. There should be a few more attributes added:

What Is Pluginspage & ClassID?
· ClassID is an attribute to the <object> tag. It tells Internet Explorer to load the ActiveX plug-in if it is not installed

· Pluginspage is an attribute to the <embed> tag. It displays a link to the Shockwave download page if Netscape does not have it

The Flash program can add these attributes for you:

Step 1 Choose File > Publish. Flash will now create the <object>, <param>, and <embed> tags for you. It will also create the classid and pluginspage attributes.

Step 2 Open the HTML document that Flash created, view the HTML source and copy the code into your HTML page where you want your Flash movie.

Step 3 Be sure that you have the "TestOne.swf" in your Web folder.

Step 4 Type in the address of the HTML file in your browser and look at your first Flash movie.

Tweening comes from the words "in between".
With Tweening you can go from one key frame to another and specify changes in the animation and let the Flash program create the frames in between.
Example: In this example you will learn how to make an object move across the screen.

Step 1 Create a small circle to the left in the Stage area. Do this by selecting the circle tool from the left toolbar. Draw the circle in the Stage area.

Step 2 Select the Arrow tool from the left toolbar. Double-click on the circle to select it.

Step 3 Now we have to convert the circle to a symbol. When the circle is converted to a symbol we can create instances of the circle. From the top menu choose Insert > Convert to Symbol. Name the symbol "Ball", and select OK.

Step 4 Go to Frame 10 in the Timeline. Do this by clicking the gray field below 10. Then right click in this field. Choose Insert Key frame. Key frames appear as circles in a frame. This operation duplicates the image.

Note: A key frame specifies changes in an animation. You create key frames at important points in the Timeline and let Flash create the frames in between.

Step 5 Select the circle and move it to the right a couple of inches.

Step 6 Click on the Timeline any place between Frame 1 and Frame 10. Then right click and choose Create Motion Tween.

Step 7 Choose Control > Test Movie from the top menu to test your Flash movie. With Motion Guide Tweening you can move an object from one location to another along a specified path.

Example: In this example you will learn how to draw a path an object should follow.

Step 1 Choose Window > Common Libraries > Graphics. Select the image you want to use. In this example we have used a blue mouse.

Step 2 Click on the image and drag it outside the left edge of the Stage.

Step 3 Go to Frame 40 in the Timeline. Do this by clicking the gray field below 40. Then right click in this field. Choose Insert Key frame. Key frames appear as circles in a frame. This operation duplicates the image.

Step 4 Click on the Timeline any place between Frame 1 and Frame 40. Then right click and choose Create Motion Tween.

Step 5 Right click on Layer 1 (Click on the layer name, where it says "Layer 1"). Choose Add Motion Guide in the pop-up menu. The Flash program will now insert a motion guide layer on top of layer 1. Motion guide layers are used to draw lines an animated symbol should follow.

Step 6 Click on the Motion Guide Layer to make sure it is the active layer (Click on the layer name, where it says "Guide: Layer 1").

Step 7 Click on the Pencil tool in the left toolbox. Set the Pencil Mode to Smooth (in the Options section of the left toolbox).

Step 8 Draw a line. Begin on the image and draw a line to the other side of the Stage.

Step 9 Go back to Frame 1 in the Timeline. Click on the Arrow tool in the left toolbox. Select the "Snap to Objects" button in the Options section of the left toolbox.

Step 10 Place the image with its centre on the beginning of the motion guide (the black line you have drawn with the Pencil). The centre of the image shows as a +. A black circle appears when the image is snapped to the motion guide. Release the mouse button when the image is snapped to the guide.

Step 11 Go to Frame 40. Place the image with its centre on the end of the motion guide.

Step 12 Choose Control > Test Movie from the top menu to test your Flash movie. With Tint Tweening you can change the colour of an object.

Changing The Colour Of The Object
Example: In this example you will learn how to change the colour of an object.

Step 1 Choose Insert > New Symbol.
Note: To add Tint effects the object must be a symbol.

Step 2 Name the symbol "Romeo" and select the Graphic option in Behaviour. Click OK. Note: You will now be taken to the symbol generator in the Flash program. Here you create symbols. Symbols can be dragged to the stage of your movie after you have created them.

Step 3 Choose the Text tool in the left toolbox. Choose Text > Size > 36 from the top menu to make the text big. Choose Text > Style > Bold to make the text thick.

Step 4 Click in the work area and write "Colour Changing Text".

Step 5 Jump back to the movie. Do this by choosing Edit > Edit Movie.

Step 6 Insert the symbol you just created into the movie. Choose Window > Library. Select the "Romeo" symbol and drag it into the middle of the Stage.

Step 7 Insert a key frame in Frame 15 and in Frame 30.

Step 8 Go to Frame 15. Right click on the text in the Stage. In the pop-up menu, choose Panels > Effect.

Step 9 Choose Tint from the drop down menu. A colour map will show. Set the colours to: R=0, G=255, B=0.

Step 10 Click on the Timeline any place between Frame 1 and Frame 15. Then right click and choose Create Motion Tween.

Step 11 Click on the Timeline any place between Frame 15 and Frame 30. Then right click and choose Create Motion Tween.

Step 12 Choose Control > Test Movie from the top menu to test your Flash movie.