Advanced Multimediasite.iugaza.edu.ps/lalsaedi/files/2012/01/flash_manual.pdf · Flash began as a basic package to create interactive and animated web applications and has since evolved

© Commonwealth of Australia 2009 Page | 1

Advanced Multimedia

Flash CS4 Manual


Acknowledgements The Technology Unit of the Curriculum K-12 Directorate has developed the Advanced multimedia: Digital media in Technology subjects professional learning workshop for secondary technology teachers in NSW public schools to enhance the teaching of multimedia in a range of Technology subjects.

Materials developed by:

Kim Allford Doonside Technology High School

Jason Carthew Crestwood High School

For more information contact:

Julie King

R/Manager Technology

[email protected]

© State of NSW, Department of Education and Training, Curriculum K–12 Directorate, 2009. Copies of this document may be made for use in connection with DET activities on the condition that copies of the material shall be made without alteration and must retain acknowledgement of the copyright. Any enquiries about alterations, or about reproduction for other purposes including commercial purposes, should be directed to Technology unit on 9886 7163 in the first instance.


Contents:

Flash: An introduction ................................................................................................ 4

Flash: The interface ................................................................................................... 4

Layers and the timeline ............................................................................................. 6

The toolbar ................................................................................................................ 7

The scene library ....................................................................................................... 8

The colour selector .................................................................................................... 8

Project steps .............................................................................................................. 9

Creating graphics: ........................................................................................................... 9

Creating movie clips ..................................................................................................... 15

Animation ................................................................................................................. 16

Cell based animation .................................................................................................... 16

Path based (tweening) animation ................................................................................. 17

Bone tool (Extension animation technique) ................................................................. 23

Interactivity (Basic) .................................................................................................. 24

Creating buttons ........................................................................................................... 24

Creating the movie. ...................................................................................................... 25

Actionscript .................................................................................................................. 27

Interactivity (Advanced) ........................................................................................... 28

Creating buttons ........................................................................................................... 28

Using labels and instances ............................................................................................ 33

Actionscript 3.0 ............................................................................................................. 35

Flash Video (Converting video files to f4v) .............................................................. 37


Flash: An Introduction Adobe Flash CS4 is the latest version of the web-based multimedia package Flash created by Macromedia. Flash began as a basic package to create interactive and animated web applications and has since evolved into a powerful multimedia application creator that can be used to create interactive web-applications, websites, animated banners, web-based video streams, games, animated films, and now stand-alone applications that no longer require Flash player to run on computers.

Flash: The interface Flash CS4 has had a number of layout changes made to the default interface which will appear quite different to those who are familiar to CS3 and all other previous versions. There are a number of default layout settings in CS4 that can be selected from the indicated drop down menu. We will be using the Animator layout so there are some similarities to previous versions.


The best way of looking at the layout of the Flash interface is to think in terms of theatre. The white work area is like a window or stage that we see characters enter and exit through scenes much like a play.

1. Layers: Like Photoshop, Flash works with layers to separate components or objects on the screen as well as place them in front or behind each other.

2. Timeline: The timeline is used in the same way a timeline for video editing is used. Each cell represents a frame that will be played over time.

3. The stage: The stage is the area that the project is developed, where objects are created or imported and displayed.

4. The toolbar: The toolbar has the tools that are used to manipulated and create objects on the stage.

5. The library: The library fills up with objects created and imported into the project. These are often graphics, buttons, movie clips, sounds, etc.

6. The scene library: The scenes are displayed in the order at which they are displayed. Scenes are separate stages and timelines. They can be renamed and reordered for reference and display purposes.

7. Colour selector: This is where colours and fill effects can be selected.

8. Properties inspector: The properties inspector provides details about the stage, keyframes, objects and motion functions. There are also settings here that can be changed to add extra functionality to those components.

1 2

3

4

5

6

7

8


Layers and the timeline

• In the timeline panel you will find that each layer has its own timeline for controlling objects on that layer. It is good practice to rename layers so that they are easily located amongst a large number of layers. To do this, double click on the text (Layer 1) and edit the name once it is highlighted.

• The eye symbol represents the visibility column. When the dot beneath it is selected/deselected, the visibility of all objects on that layer are toggled.

• The padlock symbol represents the column for toggling the locking of a layer. When a layer is locked any editing is prevented.

• The square outline symbol represents the fill toggle. Any colour fills and graphics are removed when the fill is toggled, leaving only an outline of the objects. This is useful when lining up layer objects in a layer below.

• The timeline is composed of a series of frames. The red line that highlights the frame number is like a playhead found in video editing software. You can select it and move it along the timeline to view how the Flash movie looks at that point.

• The circle in frame 1 is a blank keyframe. Keyframes are significant frames that represent an event along the timeline. When you add objects, or position an animation path, keyframes represent the time at which these events occur. In CS4 the addition of keyframes has been partially automated. In previous versions, it was required that you right click on the frame you wish to add a keyframe to and select the function from a menu. The keyframe will go black once an object or event is added to the project.


The toolbar

Tool options When you select a tool the tool options section in the toolbar will change and offer various settings.

1. selection tool

2. sub selection tool

3. free transform tool (Toggles to the gradient transform tool)

4. 3D rotation tool (Toggles to the 3D translation tool)

5. lasso tool

6. pen tool

7. text tool

8. line tool

9. shape tool

10. pencil tool

11. brush tool (Toggles to the spray brush tool)

12. decoration tool

13. bone tool (toggles to the bind tool)

14. paint fill tool (toggles to the ink bottle tool)

15. eyedropper tool

16. eraser tool

17. hand tool

18. zoom tool

19. line (stroke) colour selector

20. fill colour selector

21. black and white tool and the swap colour tool

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Tool options


The scene library

The scene library displays the scenes found in the project. Here you can create a new scene, change the order of scenes or rename scenes.

• To create a new scene you click on the icon in the bottom left-hand corner of the panel.

• To change the order of when scenes are displayed, click and drag scenes up or down, like you would with layers.

• To rename scenes, double click on the text (Scene 1) and change the highlighted text.

The colour selector The colour selector is used when you wish to refine the colours of fills and strokes. The type menu allows you to select radial and linear gradient options to create shading.


Project steps Creating graphics: Since Flash primarily uses vector graphics, it is advised to utilise the capabilities of vectors in the creation of objects. Most objects can be created using the shape and line tool. It is even possible to trace bitmaps to create original graphics.

Step one: Import the butterfly jpeg file into the library of your Flash project. Create a layer called ‘Butterfly_bkg’.

Step two: Select the butterfly_bkg layer then drag the butterfly jpeg from the library onto the stage.

Step three: Create a layer above the butterfly_bkg called butterfly. Select the first frame then the line tool. Change the stroke colour to one that will contrast with the image.


Step four: To trace effectively, you will need to look at the curves outlining the object and draw a line between major curve changes to the object outline. (See below.)

This basic outline is created using five lines. It is important to use a line for each curve so that you can refine the vectors with more precision. You will also need to note that the line ends snap together to close the shape off.


Step five: Activate the section tool (v on the keyboard) and move your cursor over one of the lines. When in the correct position, the cursor will change with the addition of a curved dotted line. Select and drag the line into shape. (See below.)


Step six: Once you have curved all the lines into shape you can select a fill colour and use the paint bucket to fill the shape. When you choose a colour you will see the eyedropper tool appear and you can select a colour from the original image that is on the stage. In this case, I selected the orange of the wing near the body.

Step seven: Due to the nature of shape tweens, it is wise to remove the outline from the shape once it is created. To do this you activate the selection tool (v) and select the lines then press delete on the keyboard.


Step eight: Toggle the visibilty of the butterfly_bkg layer off. Click and drag a selection marquee around the wing then right-click on the graphic. A menu will appear and select Convert to symbol. In the Convert to symbol window, name the graphic ‘wing’ and change the type to graphic. The wing will now appear in the library.


Step nine: You can now delete the wing from the stage and toggle the visibility of the butterfly_bkg layer to visible. Now repeat steps four to eight for the body of the butterfly and name the graphic ‘body’.

Step ten: You should have a body graphic and wing graphic in the library now. Drag the wing graphic onto the stage twice. This gives you two wings. Use the free transform tool to flip the second wing and rotate it into position. Hint: holding down shift with the free transform tool maintains the proportions of the graphic.

Theory: Vector graphics are useful for retaining precision in graphics when resizing them. They also have the advantage of being small in memory size, thus giving the project a faster playback rate on slower computers. Try resizing the finished product. When enlarged it will maintain smooth edges.


Creating movie clips Step eleven: Drag the body graphic onto the stage and into position. Hint: you can move a selected item one pixel at a time with the arrow keys on the keyboard. Activate the selection tool and drag a marquee around all the graphics. Right click and convert to a movie clip symbol.


Animation Cell based animation Step twelve: Double click on the butterfly that is on the stage. This will open up the butterfly movie clip timeline. Right click on the second frame in the timeline and choose insert keyframe. Select a single wing and then the transform tool to make a slight adjustment to the wing as if it was closing up. Do the same to the other wing. Hint: You can always adjust one wing, copy it, delete the other then paste a new version in for the deleted wing. Continue this step again for another frame.


Path based (tweening) animation Step thirteen: Select the scene clapboard at the top left corner of the stage window. This will take you back to the stage timeline for scene 1. To view the animation choose test movie from the control menu at the top of the Flash window. Right click on the first frame of the butterfly layer and select Create Motion Tween.


The timeline will show a blue strip that goes for 24 frames (this is the default amount of frames played per second). Move the butterfly to a different position on the stage and a guide layer will automatically be created. Previous versions of Flash required you to manually create a guide layer as well as draw a motion path for the object. If you move the playhead you will see the butterfly follow the path.


Step fourteen: Place the cursor over the end of the tween in the timeline. A double ended arrow will appear. You can select and drag the length of the tween along the timeline to make it go longer (frame 75 will make it approx 3 seconds).

Step fifteen: Place the playhead in a position between the beginning and end of the tween (frame 34) then move the butterfly to another position. The motion path will automatically update to follow this change and a new keyframe will be placed in the timeline.


Step sixteen: Activate the selection tool and move the cursor over the motion guide. You will see the transform icon appear like that of the lines you created. You can then select and drag the motion path into a curved shape.


Step seventeen: Move the playhead over the middle keyframe then select the transform tool. Resize the butterfly on that keyframe then do the same to the last keyframe. Test the movie.


Step eighteen: To enhance animations in Flash, you can add new layers with more butterflies going different paths as well as provide a moving background. Import the jpeg Googlemap (district) to the library. Turn visibility off any butterfly layers. Create a new layer called ground_bkg and drag it to the bottom of all the layers. Drag the Google image onto the stage, convert it into a movie clip then select create motion tween in the first keyframe. Drag the tween out to the 75th frame then move the Google image across the page. Test movie.

Theory: The basic animation of the butterfly wings was using cell-based animation and repeated itself inside the butterfly movie clip. The movement of the butterflies across the screen was path-based animation which is easier to change and reproduce.


Bone tool (extension animation technique) The bone tool is a new addition to Flash that is a very powerful animation device. Create a circle and fill it using the radial fill. Change the fill colours to green and black. Select the circle and convert it into a movie clip symbol called ‘section’. Drag the sections onto the stage to build up a caterpillar. Activate the bone tool then click and drag the bone connections from one section to another. Once all are connected, using the selection tool to drag the caterpillar (grub) around.

The bone tool animation can be converted into a collective movie clip which can be animated in the grub movie clip timeline then tweened across the stage. There is also an option for the movement of the grub to be at runtime. This means that a user can move it around. This is done by selecting the armature keyframe and changing the Type in the properties inspector to Runtime. Test the movie to see it in action. This can also be applied to the stick figure animations as well as separated limbs of students when Photoshopped into separate layers and placed into Flash.


Interactivity (Basic) Start a new project and select Actionscript 3.0. Create three layers called Actions, Buttons, and Movie in the timeline.

The buttons layer must be above the Movie layer.

Creating buttons • A button can be an imported graphic, text or a drawn object created in Flash. To create a

classic button appearance, activate the circle tool and draw a circle on the stage.

• Convert the shape into a button called ‘smile’.

• Create another circle (with a different fill colour).

• Convert the new circle into a button called ‘frown’.

• Double click on the smile button. A new timeline will appear. This is the button timeline.

• Right click in the frame below the over heading. Insert a keyframe. This frame represents what will happen when a mouse cursor hovers over the button.

• Select the transform tool and enlarge the button slightly.

• Click on scene 1 and you will be returned to the main stage and timeline.

• You can test the movie (ctrl+enter) to see the roll-over effect.

• Repeat this step with the other button.


Creating the movie The buttons you have created will be used to navigate a movie on the movie layer. • Turn the visibility of the button layer off. • Click on the first frame of the movie layer. • Draw a rectangle with a white fill and black outline.

• Right click on the rectangle and convert it into a movie called ‘face’.

• Double click on the ‘face’ movie to open the ‘face’ timeline.

• Create a layer called labels, a layer called actions and a layer called faces.

• Create keyframes on three consecutive frames on each layer.

• Select frame 1 on the faces layer and draw a passive face on the stage. Select the second frame on the faces layer and draw a sad face on the stage. Select the third frame of the faces layer and draw a happy face.


• Select the second layer of the labels frame and type ‘sad_lbl’ in the label text box of the properties window. This is providing a label name to that position in the movie timeline. Select the third frame in the labels layer and type ‘happy_lbl’ in the label text box of the properties window.

• Right click on the first keyframe of the actions layer. Select actions in the menu and type stop(); in the actions window. Repeat this process in the second and third frames of the actions layer.

• Click on Scene 1 at the top of the stage to exit the movie clip timeline.


Actionscript The next step is to make the buttons functional by applying Actionscript functions to them.

• The first step is to select the smile button. Type ‘smile_btn’ in the instance name window of the properties panel. This will allow the Actionscript to recognise it.

• Repeat the process with the ‘sad_btn’.

• Select the movie clip on the stage and type ‘faces_mov’ in the instance name window in the properties panel.

• On the actions layer right click on the first frame and select actions from the menu.

Type in the following script:

//The following script stops the movie clip playing at the keyframe the script is placed in

stop();

//The following script imports the common functions for mouse events

import flash.events.MouseEvent;

smile_btn.addEventListener(MouseEvent.CLICK,smile);

sad_btn.addEventListener(MouseEvent.CLICK,sad);

function smile(event:MouseEvent):void {

faces_mov.gotoAndPlay("happy_lbl");

}

function sad(event:MouseEvent):void {

faces_mov.gotoAndPlay("sad_lbl");

}


Interactivity (Advanced) Start a new project and select Actionscript 3.0. Create three layers called Actions, Buttons, and Movie in the timeline.

The buttons layer must be above the Movie layer.

Creating buttons A button can be an imported graphic, text or a drawn object created in Flash. To create a classic button appearance, activate the square tool and then type in 7 in the rectangle (corner) options.

• Select the first keyframe of the button layer.

• Activate the rectangle tool. In the properties inspector change the value of corners to 15.00.


You can change the stroke and fill colours in the properties inspector. To achieve a nicer ‘finish’ to buttons. Select no stroke colour by clicking on the white square with a red line through it in the top right corner of the colour selector.

• Select the fill colour and then select the gradient white to black in the bottom left corner of the colour selector.

• Draw a button shape on the stage (remember the button layer needs to be the active layer).

• Activate the gradient transform tool by holding down the cursor on the free transform tool.

• Select the button shape you created.

• With the gradient selected you can now take the handles of the gradient fill and rotate or compress and expand the gradient.


• If you select the gradient fill with the selection tool, you can also change the colours of the gradient in the colour selector tab. Double click on the white handle and select a light blue.

• Convert the shape into a button called ‘Sydney’.

• Select the button on the stage. You will see the properties inspector has displayed a number of options. In the filters option, select a new filter (from the bottom left corner of the panel) and add a glow effect.


• You can then select the colour, change the strength of the glow effect around the button.

• Double click on the button graphic. A new timeline will appear that looks different to the usual

timelines.

• The Up frame displays how the button looks and behaves when not selected.

• The Over frame displays how the button looks and behaves when the mouse is over the button.

• The Down frame displays how the button looks and behaves when the button is clicked before release.

• The Hit frame indicates the selectable area of the button.

• Rename Layer 1 as Graphic.

• Create two more layers called text and sound.


• Activate the text key frame and select the text tool. Place the text ‘Sydney’ over the button graphic.

• Place key frames in the Over frames for each layer.

• In the graphic and text frames select the transform tool and enlarge both graphic and text. This will make the button grow when the mouse is over it.

• Import the sound file ‘button1.aif’ into the library. Select the over keyframe in the sound layer then drag the sound onto the stage, this will cause a sound to play when the mouse is over the button.

• To return to the main scene, select the scene 1 link in the top left corner of the stage.

• You can make the other buttons by simply right clicking on the ‘Sydney’ button in the library and duplicating it. You will get a ‘Sydney’ button copy which you can rename to ‘rome’ or ‘new york’ and double click to edit its contents.


Using labels and instances A label is created in a movie clip timeline to act as a chapter marker or scene marker (Flash CS4 does not use scenes like previous versions).

Create a layer called ‘labels’ in the scn_mov timeline.

Create keyframes at the 125th, 145th, 190th, 235th, 260th frames respectively.

• Name the 125th frame ‘begin_lbl’ in the properties inspector then the 145th frame ‘sydney_lbl’.

• Create a layer called ‘image_bkg’. Insert a key frame at the 145th frame then import the ‘sydney’ jpeg and place it on the stage.

• Repeat the steps replacing ‘sydney’ with ‘rome’ (190th frame) and ‘new york’ (235th frame), both in label name and image you place on the stage.


An instance is a name given to objects such as buttons, graphics or movie clips. The instance name allows the Actionscript to refer to these objects and control them.

• Select the ‘sydney’ button on the main stage and name it ‘sydney_btn’ in the properties inspector.

• Repeat the step with all the other buttons naming them ‘ny_btn’, ‘rome_btn’, ‘start_btn’.


Actionscript 3.0 Actionscript 3.0 has marked a massive change to the programming of Flash. It has been upgraded to a programming language that matches Java in power and capabilities. This has resulted in some of the automatic scripting functions such as ‘script assist’ to become a little less useful. For some people this means that you will need to ‘relearn’ scripting in Flash CS4.

The basic concept behind the Actionscript 3.0 language is that there are Objects that are assigned a certain type of Class. The Class is the defining blueprint or building blocks behind the object. Each Class is made up of the following elements:

• Properties: properties define the visible attributes and the functional descriptions of the object.

• Methods: methods are tasks the object can perform, otherwise known as actions.

• Events - an event is the occurrence of a user-based action such as clicking a button or time passing.

Actionscript format

• The blue text indicates reserved functions found in Actionscript 3.0. • The green text indicates user defined labels. In this case they are labels found in the

mov_screen timeline.

• The black text indicates user-defined instances (instances are reference points for buttons, graphics, keyframes, functions, etc.)

• The grey text (preceded by two ‘//’) indicates a comment within the code (Flash ignores this when acting on the script).

Since learning Actionscript is the same as learning a foreign language a prepared script has been created to introduce the basic concepts behind Actionscript programming. The script on the following page is the script from the Flash project Alien Attack (you can copy and paste it into a frame in an Actions layer in a new Flash project).


//The following script stops the movie clip playing at the keyframe the script is placed in stop(); //The following scripts import the common functions for mouse events and sound controls import flash.events.MouseEvent; import flash.media.SoundMixer; //the following script declares a button called btn_a and adds the function "attacksydney" when the button is clicked sydney_btn.addEventListener(MouseEvent.CLICK,attacksydney); //the following script declares a button called ny_btn and adds the function "attacknewyork" when the button is clicked ny_btn.addEventListener(MouseEvent.CLICK,attacknewyork); //the following script declares a button called rome_btn and adds the function "attackrome" when the button is clicked rome_btn.addEventListener(MouseEvent.CLICK,attackrome); //the following script declares a button called start_btn and adds the function "begin" when the button is clicked start_btn.addEventListener(MouseEvent.CLICK,begin); //the following script toggles the buttons visibility; start_btn.visible = true; sydney_btn.visible = false; ny_btn.visible = false; rome_btn.visible = false; function begin(event:MouseEvent):void { //the following script stops the intro sound file from playing through the scenes SoundMixer.stopAll(); start_btn.visible = false; sydney_btn.visible = true; ny_btn.visible = true; rome_btn.visible = true; scn_mov.gotoAndPlay("begin_lbl"); } function attacksydney(event:MouseEvent):void { //the following script states that the playhead //should go to the label "sydney_lbl" along the "scn_mov" movie clip timeline scn_mov.gotoAndPlay("sydney_lbl"); //the following script toggles buttons visibilty SoundMixer.stopAll(); sydney_btn.visible = false; ny_btn.visible = true; rome_btn.visible = true; } function attacknewyork(event:MouseEvent):void { SoundMixer.stopAll(); scn_mov.gotoAndPlay("newyork_lbl"); sydney_btn.visible = true; ny_btn.visible = false; rome_btn.visible = true; } function attackrome(event:MouseEvent):void { SoundMixer.stopAll(); scn_mov.gotoAndPlay("rome_lbl"); sydney_btn.visible = true; ny_btn.visible = true; rome_btn.visible = false; }


Flash Video (Converting video files to f4v) To prepare a video to be included as Flash video in a Flash project or on a website you must first convert it. To do this in CS4 you will need to open the Adobe Media Encoder CS4 application.

• Click on the Add.. button. Select the preview video from the media folder.

• Once you select the file click on the start queue button.

• The file will be converted into a f4v file which can be played in the Flash player.

• Import the f4v file into your Flash project library.


• To have a skin and controller automatically created select ‘Load external video...’.


• Click on Continue then select the type of controller and skin colour for the video player.

• You can then drag the f4v file onto the stage and resize using the free transform tool.

Note: When you test the movie the video will play automatically. To stop this you will need to use some more Actionscript.

Documents

Advanced Multimediasite.iugaza.edu.ps/lalsaedi/files/2012/01/flash_manual.pdf · Flash began as a basic package to create interactive and animated web applications and has since evolved