nota flash

7/28/2019 nota flash

1/59

1 IntroductionAdobe Flash CS4 provides a comprehensive authoring environment for creating interactive

websites and digital animation. You can create content in Flash or import it from other Adobeapplications, quickly design simple animations, and use Adobe ActionScript 3.0 to develop

sophisticated interactive projects. User can either create or import, and edit different types of

media, such as audio, video, text, graphic and animation.

The term Flash always refer to different flash applications including flash authoring tool, Flash

Player and Flash Lite. Flash authoring tool is a software application to create Flash project file in

FLA format. The SWF file can be published from FLA flash project file. The flash player is usedto play the SWF file. A variety of file types can be produced by Flash CS4, i.e. the ActionScript

file (.as), the project file (.fla), the video file (.flv), the movie file (.swf) and the project file in

Windows (.exe) and Macintosh (.app)

Previous versions of Flash required you to create motion tweens manually through a number of

steps, all of which were essentially timeline-based. With the new motion model, which is object-

based, creating keyframes and motion tweens has become an automated, streamlined process.

The parent-child relationship is implemented in symbol and instance creation in Flash. Symbols

of movie clip, button and graphic are master copy of instances created from the symbol. By usingthe parent-child relationship of symbol and instance aims to save the file size of the application

created with Flash.

By the end of this section of the practical, the students should be able to:

Recognize the function of individual components in Adobe Flash CS4 andworking environment.

Apply the drawing and colouring tools in flash application. Create and edit symbols and instances in Flash. Generate animations using motion tween, shape tween and presets. Control the animation sequence using keyframes and layers in the timeline.


2/59

1.1 Flash Interface

The first time you start Flash, you'll see a Welcome Screen with links to standard file templates,tutorials, previously opened files and other resources. The welcome panel offers a few options

for creating a Flash file. You may disable the default settings of showing the welcome screen at

the beginning of the launching the Flash CS4 application by checking the Dont show again

message on the welcome screen. Otherwise, you may change the settings from

Edit>Prefereces>General

You create and manipulate your documents and files using various elements, such as panels,

bars, and windows. Any arrangement of these elements is called a workspace. The workspaces of

the different applications in Adobe Creative Suite 4 share the same appearance so that you

can move between the applications easily. You can also adapt each application to the way you

work by selecting from several preset workspaces or by creating one of your own. Although the

default workspace layout varies in different products, you manipulate the elements much the

same way in all of them. To start learning the Flash, create a new Flash File (ActionScript 3.0)

since ActionScript 3 is the most recent Flash scripting standard.

Disable the welcome screen


3/59

Application bar Consists of workspace switcher, menus (Windows only), and other

application controls.

Tools panel Contains tools for creating and editing images, artwork, page elements,

and so on. Related tools are grouped.

Property Panel Displays options for the currently selected tool.

Stage Visible presentation area for published or exported flash project.

Stage pasteboard Gray area around the stage. Elements on the pasteboard are invisible in the

published or exported flash project.

Panels Where tools and information in different categorisation located.

Timeline Show the organisation of the contents in layers over time.

On top right, there is pull-down menu that allows you select from several preset

configurations. The same menu is also available through the Window>Workspace

menu/After you added your own configurations, the pull down menu might look like

this:

Tools panel

tage

eboard

Stage

PropertyPanel

Application

bar

Timeline

Panels


4/59

1.2 Drawing and Colouring with Flash CS4Before using the drawing and colouring tools, you need to understand the differences between

fills, strokes, lines and shapes. Lines are created with Pencil, Pen and Line tools while strokes

are created with object tools, such as Rectangle, Oval, PolyStar, etc. Fills are created with

Brush and Paint Bucket tools. Strokes are shown in dotted mesh from the combinations or part

of strokes, lines, fills text etc.

The outlines of shapes you create with the rectangle, oval, etc. tools are also called strokes. The

insides of these shapes can have fills (various forms of colour or gradients). All geometric shapes

therefore have both strokes (the outline) and fills.

Lines or Strokes Fills Strokes, lines, fills and Shapes

1.2.1 Drawing Lines with Pencil and Pen Tool

1. Open a new flash file and name it as Pencil.fla.


5/59

2. Select the Pencil tool from the Tools panel and change the mode to Straighten. Circle anddrag to draw a circle on the Stage.

3. Try to draw some triangles with with Straighten, Smooth, and Ink mode, respectively.

4. Save your file. Now, create a new flash file and name it as Pen.fla. Select the Pen tool andchoose a stroke colour and a fill colour.

5. Move the cursor on to the stage and press the mouse button once for each corner point. Whena new point is created a connecting line will be drawn between the points. To complete the

shape, select the first point you created. Use the Ink Bottle tool to fill the inside area of the

drawing.

6. To create curves, click the mouse button and with it held down move the mouse. Note how anew line appears with two additional points - these are control points. These points define a

tangent at the selected point. This tangent will affect how the line is drawn to the point and


6/59

how it leaves the point, i.e. it will define the curvature of the line. To close the shape click on

the initial point. Or, if an open curve, click again on the final point. Remember that the pen

tool can be used to create a mixture of straight and curved lines.

7. To move around your objects, use the Selection tools. Save your work.

1.2.2 Drawing Shapes with Oval, Rectangle and Polystar Tools

1. Open a new flash file and save it as OvalRectStar.fla.2. Flash provides three drawing modes, which determine how objects interact with each other

on the Stage, and how you can edit them. By default, Flash uses Merge drawing mode, but

you can enable Object drawing mode, or use the Primitive mode tool to use the primitive

drawing mode. Now, draw a simple oval.

3. A Merge drawing model shape appears as a dotted mesh when selected while a shapecreated with object drawing model is surrounded with rectangular bounding box.

Merge Drawing Object Drawing

Snap to object

Object Drawing


7/59

4. The merge drawing model merges drawn shapes, such as rectangles and ovals, where theyoverlap, so that multiple shapes appear to be a single shape. If you move or delete a shape

that has been merged with another, the portion that was overlapping is permanently removed.

5. Click on Object Drawing option to change the default merge drawing model to objectdrawing model. ClickSnap to Objects option for easier object alignment on the Stage. Draw

another oval.

6. In this mode, Flash does not merge drawn objects; they remain distinct and separate, evenwhen they overlap.

7. When you use the Rectangle Primitive tool or the Oval Primitive tool, Flash draws theshapes as separate objects. Unlike regular objects, however, you can modify the corner radius

of rectangle primitives, and the start and end angle and the inner radius of oval primitives

using the Property Panel.

8. Using different tools from the Rectangle pop-up menu, manipulate with settings in theproperty inspector, create objects as following.

Snap to objectObject Drawing


8/59

9. To convert an object to shapes (merge drawing mode), use the Selection tool, select theobject and press Ctrl+B (Windows). To convert a shape to an object (object drawing mode),

select it and choose Modify > Combine Object > Union.

10.Save your file.

1.2.3 Drawing Strokes the Brush Tool

1. Open a new flash file and name it as Brush.fla.2. Select the Brush tool and the settings as following.


9/59

Paint Normal Paints over lines and fills on the same layer.

Paint Fills Paints fills and empty areas, leaving lines unaffected.

Paint Behind Paints in blank areas of the Stage on the same layer, leaving lines and fills

unaffected.

Paint Selection Applies a new fill to the selection when you select a fill in the Fill Color

control or the Fill box of the Property inspector, the same as selecting a

filled area and applying a new fill.

Paint Inside Paints the fill in which you start a brush stroke and never paints lines. If

you start painting in an empty area, the fill doesnt affect any existing

filled areas

3. Create your own drawings with different brush modes, sizes, shapes and colours. Click onthe strokes of the drawing, add coloured strokes to the flower by using Ink Bottle tool,

Brush Mode

Brush ShapeBrush Size

Use TiltUse Pressure

Brush

Paint Bucket

Ink Bottle

Zoom


10/59

4. Save your file.

1.2.4 Modifying Lines, Strokes, Fills, Shapes and Gradients

1. Open a new flash file and name it as LinesStrokesFillsShapes.fla .2. Draw a black triangle with the Line tool. Select the triangle with the Selection tool. Change

the stroke colour and style of your triangle in the property panel.


11/59

3. Click to show the Color panel. If the Color panel can not be found in the Panel, you can goto Window>Color to bring it out to the Panel.

4. Change the settings on the Color panel as shown above. Use the Paint Bucket to fill in thegradient colour in the triangle.

5. Using the Gradient Transform tool (Click and hold on the Free Transform tool),modify the fill colour in the triangle as shown in the following.

Strokes Style

Strokes HeightStrokes Colour

Fill Colour

Double-click the pointer to

change colour.

Pointer

Fill Color


12/59

6. Now change the Color type to Bitmap. Import a graphic from the computer. Modify thebitmap fill with the Gradient Transform tool.

7. Save you file.

1.3 Symbols and InstancesSymbols and instances are objects created in flash. The object mentioned here can be a shape or

an object. The relationship of symbol and instance can be described as master and copy. A

created symbol can be reuse multiple times. A reuse symbol is called as instance. Using the

concept of symbols and instances efficiently can dramatically reduce the file size as well as the

downloading time of the Flash CS3 documents and movie files. There are three types of

symbols, i.e. the graphic symbol, the button symbol and the movie clip symbol.


13/59

Graphic symbol: Static images or animation that are tied to the main Timeline. It will play

together with the timeline. However, sound and interactivity can not be

attached in this symbol.

Button symbol: Use as interactive buttons. Button symbol contains its own timeline to be

animated for mouse operations. The interactivity of a button symbol is usually

controlled by the ActionScript.

Movie symbol: Contains its own independent timeline similar to main timeline. A movie

symbol can contain graphic symbols and button symbols. Thus, is has the

largest file size in all symbol types.

Symbols are advised to be named in simple and meaningful names so that you can easilyremember the names of all the created symbols and manipulate them in your flash project files.

However, special characters, spaces, periods and slashes are not allowed in naming symbols.


14/59


15/59

5. When youre done, click 'Scene 1' to exit from the symbol editing mode and go back to viewthe main movie's time-line.

6. Now you may create instances of leave from yourLeave symbol in the library. Just drag anddrop the leave from your library to the stage. Change the transformation of your leave

instances with the Free Transform tool (You may use a single of a combination of

transformations like rotating, skewing, scaling and distorting). You may also change the

colour styles of your leave instances from the Properties box.

1.3.2 Creating, Editing and Animating Movieclip Symbols

1. Open a new flash file and name it as SymbolMovieClip.fla. Insert an empty symbol bychoosing Insert>New Symbol. Select the Movieclip behavior and name the symbol as

'birdfly').

2. Double-click the instance of ' birdfly' on the stage to switch to its symbol-editing mode. Nowyou will need to create an animation sequence using Frame-by-Frame Animation technique.

You only need animate one cycle. First, import four bitmaps onto the stage using Ctrl+R or

choosing File>Import>Import to Stage.

3. Choose BirdFly1.png and press Open. Click Yes when a dialogue box appears.


16/59


17/59

3. Double-click the instance of 'sound' on the stage to switch to its symbol-editing mode. TheTimeline header changes to display four consecutive frames labelled Up, Over, Down, and

Hit as shown below.

4. Rename Layer 1 as Shape the timeline. Then, add a new layer above it and name it asText.

5. Type Enter in the Text layer representing the buttons function.

6. Make sure the Text layer is active. Insert a blank keyfarme in the frames labeled Down bypressing F5.


18/59

7. Now reselect the Shape layer. The first frame displays the drawn vector/plain text used forcreating this button, now insert a Key frame (F6) in the frame labeled Over (Flash

automatically duplicates the contents of the Up frame). Now change the color of the object in

the Over frame to create a rollover effect in the button.

8. Insert frames (F6) for the Down frame (only defines the area of the button that responds touser action and is not visible at runtime). Change the color of the object in the Down frame.


19/59

9. Click Scene 1 to exit from the symbol editing mode. Drag an instance of sound onto themovie's Stage.

10.Now, to add sound effects into the Down frame, import sound.mp3 by choosingFile>Import>Import to Library. Open the Property panel. Under the Sound section, click

the name menu. sound.mp3 to select it.

11.Save your work and test the Movie (Ctrl + Enter). Your animated button is ready. Mouseover or click the button to see the button effects.

1.4 Working with Filters1. Open a new flash file with the following settings:

File name: Filters.fla

Size: 550 X 400 pixels

Frame rate: 15fps

Background colour: #FFFFCC

2. You can only apply filters only to text, button, and movie clip objects. Create a text bychoosing the Text tool.

3. Select the text, and open the filter panel. Click the Add Filter icon and choose any filters.


20/59

4. Experiment with the attributes of the selected filter.

5. Now create more buttons and movie clip objects and apply filters to them. Save your fileonce youre done.

1.5 Animation in FlashAnimation in Flash is described over time through the Timeline, by working with layers,

keyframes, blank keyframes, frame-by-frame animation, and onion skinning. The Timeline in

Flash CS4 is illustrated as below:


21/59

A Playhead G Tweened animation

B Empty keyframe H Scroll To Playhead button

C Timeline header I Onion-skinning buttons

D Guide layer icon J Current Frame indicator

E Frame View pop-up menu K Frame Rate indicator

F Frame-by-frame animation L Elapsed Time indicator

Flash content can be organised in different frames in different layers on the layer stack. Frame is

an important element in Flash animation. Each frame represents a unit in the measurement of

time depending on the frame rate. A common web animation frame rate is suggested between 10

to 15 frames per second (fps). However, to export your flash animation into a video clip, you are

recommended to follow the standard frame rate of video production of either 25fps or 30fps. A

keyframe(F6) define a change either through the properties of the objects or physically to the

content on the stage while a frame carries the content of the previous keyframe. A frame with no

content is called a blank frame(F5). Blank frame can be a blank keyframe or just simply a blank

frame.

There are three types of animation in Flash - Motion, Shape and Frame-by-Frame tween.

"Tweening" is a term coined by the pioneers of Flash to denote in-betweening.


22/59

Motion Tween/ Path AnimationMotion tween can be referred to an object that travels from one point to another and

involves no change of shape over time. Sometimes motion tween can also mean changing

colours over time. In Flash, the Playhead sweeps the frames from left to right. To author

motion tween in Flash, you place a graphic in the first frame (a keyframe) and one in the

last frame (another keframe) and tell Flash to spread the change in position over a certain

number of frames. Click the image to playback movie

Shape TweenShape tween means an object travels from one point to another and involves change of

shape over time. Sometimes motion tween can also mean a stationary object changing

shape over time. Click the image to playback movie.

Frame-by-Frame AnimationFrame-by-frame was the conventional way of authoring animation. Real movies are

really a form of frame-by-frame animation. Each frame contains different content andanimation is achieved by running the playhead through the frames. In Flash, a keyframe

can be a frame that effect a change in an animation or when it holds new content, Frame-

by-frame animation is very tedious or painstaking to develop but it is sometimes

necessary.


23/59

1.5.1 Creating a Motion Tween Animation

1. Open a new flash file and name it as MotionTweenAnimation.fla .2. In the document property panel, change the settings as follow:


24/59

3. Click OK to close the Document Properties dialog box.4. Draw a vector shape using any of the drawing tools in Flash. Convert it into a movie

clipsymbol.

5. By using the Selection tool, select the object and choose Insert>Motion Tween. Or rightclick the first keyframe in the timeline and choose Create Motion Tween.

The file location in the Formatstab indicates the location of the

published file. You may set your own location; else the file will be saved in the

same location as the Flash project file.


25/59


26/59

8. To adjust the position the object at any frame using the playhead, go to the Timeline andmove the playhead to any point in the animation. Insert a new keyfarme(F6) in the specific

frame. Select the corresponding point on the spline path and drag it up or down. You can also

make changes to the objects scale and rotation. Repeat this process as many times as you

desire. As you scrub the Timeline, the object follows the new spline path.

9. In addition to motion and scale, you can also tween color in Flash. To animate the color of anobject, select the last frame of the animation and then click the object on the Stage. Go to the

Property panel and make changes in the Tint attribute. Apply some filter effect for the

object.


27/59

10.To animate 3D effects, right again on the Timeline and choose 3D Rotation Tool. Click anddrag the green line to rotate the Y-Axis.

11.Choose Control>Test Movie to test your movie. Save your file.

1.5.2 Creating a Shape Tween Animation


28/59

1. Open a new flash file and name it as ShapeTweenAnimation.fla.2. In the document property panel, use the same settings in the previous exercise.3. Draw a small circle and remove its border using any of the drawing tools in Flash.4. Click the Frame 10 in the Timeline and insert a Key Frame (F6).

5. Now press shift and right-click on any frame in between these two Key Frames and chooseInsert>Shape Tween.


29/59

6. Remember, only vectors can be Shape Tweened (Not for Symbols). Note both the Tweenshave different colours along the Timeline as shown above. Make sure that the line is smooth

without being broken to ensure correct Tweening.

7. If youre satisfied with the transformation, delete the first shape in Frame 1. Click onControl>Test Movie to test your movie as a SWF file in a new window.

8. Save your file.

1.5.3 Using Motion Presents

1. Open a new flash file and name it as MotionPresentsAnimation.fla . In the documentproperty panel, use the same settings in the previous exercise. On Frame 1, add a graphic by

choosing File>Import>Import to Stage.

2. Choose guitar.gif and press Open. Convert it into a movie clipsymbol. ChooseWindow>Motion Presents. Choose any effects from the Defaults Presets.

Start frame End frameIn-between frames


30/59

3. Click Apply button to create the animation. You may make changes to the duration of theanimated sequence by adjusting the keyframes.

4. Save your work and test the Movie (Ctrl + Enter) to test your movie as a SWF file in a newwindow.

1.5.4 Advance Animation Control with the Motion Editor

1. Open a new flash file and name it as MotionEditorAnimation.fla . In the document propertyinspector, use the same settings in the previous exercise.

2. Draw a vector rectangle using any of the drawing tools in Flash and convert it into a MovieClip symbol. Based on the previous exercise, create a simple motion tween.

3.

To create an ease effect and apply it to the entire animation, click on the plus sign in theEases category row to access the context menu. Choose any list at the bottom of the context

menu. Make sure your Ease attribute for basic motion and transformation is checked

properly.


31/59

4. Save your work and click on Control>Test Movie to test your movie as a SWF file in a newwindow.


32/59

2 IntroductionFlash ActionScript started as a scripting language for Macromedia's Flash authoring tool, nowdeveloped by Adobe Systems as Adobe Flash. The first three versions of the Flash authoring tool

provided limited interactivity features. Early Flash developers could attach a simple command,

called an "action", to a button or a frame. The set of actions was basic navigation controls, with

commands such as "play", "stop", "getURL", and "gotoAndPlay". Other capabilities includedvariables, expressions, operators, if statements and loops. The recent Flash version uses

ActionScript 3.0 as its scripting language.

Audio and video are important components in multimedia application. The ability of Flash to

embed a video clip into a SWF file was established in Adobe Flash. This has broadened the

opportunity of Flash developer in presenting rich media contents. Video clip needs to be

imported into flash and they can also be controlled by using ActionScript. One may import orexport the video stream with or without encoded audio.

Development of file project can be done separately with different scenes. Then, the scenes are tobe connected into a whole project. Dividing into different scenes will not only speed up the

development but also are more organised in overall. There are several ways to create navigation

in Flash which are linking to specific frames, labels, scenes and between separate SWF files.

By the end of this section of the practical, the students should be able to:

Import video into Flash project. And control audio clips Add button interactivity by using Flash ActionScript 3.0 Connect scenes using keyframes, labels, project scenes and SWF files Create Preloaders and load dynamic content Publish and export Flash movies


33/59

2.1 Audio and Video in FlashYou may import selected video files as the embedded video clips into Flash application.

However, you need to have at least QuickTime 4 or DirectX 7 installed in your computer. The

video file formats that are accepted by Flash are the MOV, AVI, DV, WMV, ASF and

MPG/MPEG files. Besides that, an appropriate codec is needed while importing and exporting a

video clip into Flash. Flash CS4 provides the user with its own Flash video encoder. The

compression codec uses by Flash CS4 are the On2 VP6 and Sorenson Spark.

2.1.1 Adding Sounds into the Timeline

1. Open a new flash file and name it as PlaySound.fla. Import bgmusic.mp3 by choosingFile>Import>Import to Library. Open the Property panel. Under the Sound section, click

the name menu. bgmusic.mp3 to select it.

2. A sound wave will appear in the Timeline. Test the Movie (Ctrl + Enter) and the sound willautomatically play.

3. To create a sound loop, open the Property panel. Under the Sound section, click Event inthe sync menu and choose Loop.


34/59

4. Choose Control>Test Movie to test your movie and your sound loops continuously.

2.1.2 Embedding Video Clips in Flash

8. First, import your cliponto the stage by choosing File>Import>Import Video9. The Import Video wizard will pop up on screen, browse to and select the movie file. from

where you have saved it in. Choose the first Load External video with playback

component.option. ClickNext to go the Skinning screen.


35/59

10.Choose your preferred skin for the video player. Click button Next.

11.Once, youre satisfied with the result. Click on Finish button.


36/59

12.Your edited video has been imported to the stage. Press Control+Enter key. Your videoplayer is embedded in your Flash movie.

2.2 Introduction to ActionScript

ActionScript is the name of the programming language used to develop applications for

Flash. When combined with Flash animation and graphic objects, it can be used to gather

data and dynamically manipulate objects and events while a Flash movie is running.

ActionScript 3.0 is similar in some ways to JavaScript, and in others to Visual Basic, but its


37/59

basis relies on events, handlers, and classes that perform specific functions based on the

movie's timeline and certain established conditions.

Flash ActionScript 3.0 is used primarily for the development of websites and multimedia

application using the Adobe Flash Player platform (in the form of SWF files embedded into

Web pages). ActionScript was initially designed for controlling simple 2D vector animations

made in Adobe Flash (formerly Macromedia Flash). Later versions added functionality

allowing for the creation of Web-based games and rich Internet applications with streaming

media (such as video and audio).

There are three basic ways to include ActionScript custom classes into your Flash

application.

Creating (or importing) a custom ActionScript class and then instantiating the class inyour script on the main Timeline. You can then use the classes' methods and

properties in your Timeline script.

Attaching a custom ActionScript class to a MovieClip that is created at authoringtime. (This is done via the Linkage item in the Library menu.)

Using the Document Class new to Flash CS3 and ActionScript. When you use thisapproach, you do not place any code on the Timeline. All code resides in external

files. ActionScript 3 purists consider this approach to be preferred.

In ActionScript 3.0, buttons and interactive movieclip are scripted differently. All events

such as mouse clicks, mouse move, mouse over, keyboard inputs, even movieclips frame

movement is controlled using event listeners. You can attach this event listeners to any

movieClip, components, stage or sprites to add interactivity features to it. ach event

listeners has a trigger function. Trigger function is a script which triggers because of the

specific event for example, a mouse click. This means if you attached an event listener

for mouse click on a button, the trigger function itself will be the script for the button.

This is how you make button scripts in Action Script 3.0.


38/59

2.2.1 Creating a simple clickable Button with Actionscript

1. Open a new flash file and name it as WebLinkActionScript.fla .2. Create a button symbol andplace it in a layer called Object. Follow the previous exercise to

complete this task.

3. Select the instance, and add the instance name 'myButton' in the Property inspector. Makesure you track it as menu item.

4. Insert a new layer, and rename it as Actions.

5. Open the Actions panel (Window > Actions), select frame 1 of the actions layer, and add thefollowing ActionScript in the Script panel.

stop();mybutton.addEventListener(MouseEvent.CLICK, clickLibraryButton);function clickLibraryButton (event:MouseEvent):void {

navigateToURL(new URLRequest("http://www.utem.edu.my"));}


39/59

6. Choose Control > Test Movie to test your document. When you click on the button, it willprompt the stated web address in a browser. Thats all there is to create a clickable button

with ActionScript.

7. You can also change the MouseEvent to MOUSE_DOWN or MOUSE_OVER to modifyhow the interaction works. Search Flash Help for MouseEvent, and look at the Class in the

ActionScript 3.0 Language Reference.

2.2.2 Linking Buttons to Specific Frames

1. Now, you will learn how to jump from one frame in your animation to another by using afew lines of ActionScript. To navigate between frames in the timeline using Action Script,

you can change that entire line to be something else, such as go to and play a frame number:gotoAndPlay(). To do this, create a new Flash project file and name it as

FrameJumpActionScript.fla.

2. Import both DummyBG1.png and DummyBG2.png into the stage by choosingFile>Import>Import to Stage. Rename the layer as Background.

3. On the timeline, right click on Frame 20 and choose Insert Frame.

To close a Flash Movie window, you may use fscommand(" quit" )like this:

mybutton.addEventListener(MouseEvent.CLICK, clickLibraryButton);function clickLibraryButton (event:MouseEvent):void {fscommand("quit")}


40/59

4. Slowly, drag the keyframe from Frame 2 to Frame 11.

5. The result, first graphic will appear starting from Frame 1 to 10 while second graphic will bedisplayed beginning from Frame 11 to 20 as shown below.

6. Add a new layer above the Background layer in the timeline. Name it as Buttons. Nowcreate a button symbol with myButton1 instance name. Place it at Frame 1.


41/59

7. Right click on Frame 11 and choose Inset Blank Keyframe in the timeline.

8. Create another button symbol with myButton2 instance name. Place it at Frame 11.

9. Add a new layer above the Buttons layer in the timeline and name it as Actions. Right clickon Frame 10 and choose Inset Blank Keyframe in the timeline. Do the same for Frame 20.

10.Press F9 on Frame 10 in your timeline to open the actions panel and enter this code below.This just stops the movie from playing. Do the same for Frame 20.

11. Right click Frame 10 in your timeline and choose Actions to open the actions panel. Enterthis code below formyButton1 button event.

stop();

myButton1.addEventListener(MouseEvent.CLICK, clickLibraryButton1);function clickLibraryButton1(event:MouseEvent):void{gotoAndPlay(11);

}


42/59

12.Press F9 on Frame 20 in your timeline to open the actions panel. Add this code below formyButton2 button event.

13.Save your work and test the Movie (Ctrl + Enter). When you're done, you just have to addcontent in the frame you wish to link to.

myButton2.addEventListener(MouseEvent.CLICK, clickLibraryButton2);function clickLibraryButton2(event:MouseEvent):void{gotoAndPlay(1);}

Add more content by placing them in new layers on the timeline. Lock your

Actions,Buttons and Background layers to prevent unwanted alteration.


43/59

2.2.3 Linking Buttons with Labels

1. Create a new Flash project file and name it as FrameLabelActionScript.fla . Follow theprevious exercise to complete the tasks of importing background with the correct locations

on the timeline.

2. Add a new layer above the Background layer in the timeline. Name it as Buttons. Now,choose Window>Components. Components are little smart Flash objects with built-in

functionality. Look under the User Interface category to find the Button Component and

simply drag and drop an instance of it onto stage.


44/59

3. We will need to change the labels of our button and assign to them Instance Names in orderto be able to manipulate them via ActionScript. Starting with the label, select the first button

on Frame 1, then assign the instance name myButton1 to this button. Now, choose

Window>Component Inspector. Simply click once on the labelfield to rename the button.

4. Insert a new symbol button on Frame 11. Repeat the same process to assign the instancename myButton2 and label.


45/59

5. The next step to complete all of our content assets is the frame labellingprocess. Labellingframes is not necessary for navigating through a movie clip using ActionScript as you can

use frame numbers, but using labels makes thing much easier because you do not need to

figure out what the frame number is. We are going to put the labels on the same frames as

our content. To label the first actual frame of our application, click on Frame 1 and then

access the Property paneland type intro as the Frame Label.

6. Do the same for Frame 11 by typing main as the Frame Label.

9. Add a new layer above the Buttons layer and name it as Actions. Right click on Frame 10and choose Inset Blank Keyframe in the timeline. Do the same for Frame 20.


46/59

10.Press F9 on Frame 10 in your timeline to open the actions panel and enter this code below.

11.Press F9 on Frame 20 in your timeline to open the actions panel and enter this code below.

12.This completed the entire code of our basic Flash application. You can now test yourapplication by going through Control>Test Movie, or alternatively pressing Ctrl+Enter.

Save your work.

2.2.4 Linking Buttons and Scenes

1. Create a new Flash project file and name it as SceneActionScript.fla . ImportDummyBG1.pngon Background layer. Create a new Buttons layer and insert a button

symbol with myButton1 instance name.

stop();

myButton1.addEventListener(MouseEvent.CLICK, goMain);function goMain (e:MouseEvent):void{gotoAndPlay("main");}

stop();

myButton2.addEventListener(MouseEvent.CLICK, goIntro);function goIntro (e:MouseEvent):void{gotoAndPlay("intro");}


47/59

2. Choose Insert>Scene. Import DummyBG2.png on Background layer. Create a newButtons layer and insert a button symbol with myButton2 instance name. You may rename

your scene by choosing Window>Other Panels>Scene if required.

3. Now return to Scene 1 by clicking the Edit Scene icon.

4. Add a new layer above the Buttons layer in the timeline and name it as Actions. Press F9.


48/59

5. Enter this code below in the Actions panel.

6. Go to Scene 2 by clicking the Edit Scene icon. Add a new layer above the Buttons layerin the timeline and name it as Actions. Press F9 and add this code.

7. Finally test your application by going through Control>Test Movie, or alternatively pressingCtrl+Enter. Save your file.

2.2.5 Linking multiple Flash Movie SWF files

1. Create a new Flash project file and name it as IntroPage.fla. Import DummyBG1.png onBackground layer. Create a new Buttons layer and insert a button symbol with

myButton1 instance name.

stop();mybutton1.addEventListener(MouseEvent.MOUSE_DOWN, goMain);

function goMain(event:MouseEvent):void {gotoAndStop(1, "Scene 2");

}

stop();mybutton2.addEventListener(MouseEvent.MOUSE_DOWN, goIntro);function goIntro(event:MouseEvent):void {

gotoAndStop(1, "Scene 1");}


49/59

7. Add a new layer above the Buttons layer in the timeline and name it as Actions. Press F9.

8. Enter this code below in the Actions panel.

9. Select Control>Test Movie or alternatively press Ctrl+Enterto generate IntroPage.swf file.Now, create another new Flash project file and name it as MainPage.fla.

10.Import DummyBG2.pngon Background layer. Create a new Buttons layer and insert abutton symbol with myButton2 instance name.

var myLoader:Loader = new Loader();

myButton1.addEventListener(MouseEvent.CLICK, clickLibraryButton);function clickLibraryButton(event:MouseEvent):void{myLoader.load(new URLRequest("MainPage.swf"));addChild(myLoader);}


50/59

11.Add a new layer above the Buttons layer in the timeline and name it as Actions. Press F9and add this code.

12.Select Control>Test Movie or alternatively press Ctrl+Enterto generate MainPage.swf file.When you click on the button, it will prompt the stated SWF file in your Flash player.

2.2.6 Creating a Hotspot Invisible Buttons

1.

Create a new Flash project file and name it as TransparentButton.fla . ImportDummyBG1.png on the stage.

2. Choose Insert>New Symbol and create a button symbol. Press F5 to insert a blankkeyframe. Make sure the other frames are empty.

3. In the Hit frame, draw a simple graphic to define the active area.

var myLoader:Loader = new Loader();

myButton2.addEventListener(MouseEvent.CLICK, clickLibraryButton);function clickLibraryButton(event:MouseEvent):void{myLoader.load(new URLRequest("IntroPage.swf"));addChild(myLoader);}

You have learn different ways to link button symbols using simpleActionScript 3.0. You should choose the appropriate method based on the

size of your Flash project.


51/59

4. Return to the main timeline by clicking Scene 1. Drag the invisible symbol into the stage.The transparent button appears as a transparent blue shape in the Flash development

environment but is invisible in the final export.

5. Use the transform tool to reshape it based on the background. Select Control>Test Movie tosee the results.


52/59

2.2.7 Controlling External Sound with ActionScript

6. While working in Flash with sound/music files you will find it really necessary to use asound on/off button as an option. First, make sure your external sound file is located in the

same folder of yourfla. file. You will load bgmusic.mp3 for this exercise.

7. Create two buttons that are sort of similar and represent sound on and off. For example youcan use play/stop or speaker with sound waves/speaker with a cross buttons. Name the

instances as stop_btn and play_btn.

8. Place them in a layer, separated from your Actions layer.

9. Click the first key frame and copy-paste the following ActionScript into the actions panel.var music:Sound = new Sound(new URLRequest("bgmusic.mp3"));var sc:SoundChannel= music.play();var isPlaying:Boolean =true;

stop_btn.addEventListener(MouseEvent.CLICK, stopMusic);function stopMusic(e:Event):void{

sc.stop();isPlaying = false;

}

play_btn.addEventListener(MouseEvent.CLICK, playMusic);function playMusic(e:Event):void{

if (!isPlaying){

sc = music.play();isPlaying = true;

}}


53/59

10.Now, your sound on/off button is ready. Save your file.

2.3 Flash PreloaderComplex flash project with multi element especially heavy graphics, animation, audio and video

require longer time to be loaded on to the screen. Instead of allowing users to view a limited

content while waiting for others to be loaded, a preloader is added to permit playback after all the

necessary frames have downloaded. Different type of proloaders are available such as the frame

load preloader, bytes load preloader, percent load preloader and others.

2.3.1 Developing a Preloader

1. Open a new flash file and name it as Preloader.fla. Create Loading dynamic text and labelit as progressText.

2. On the first keyframe, insert this ActionScript below:stop();

addEventListener(Event.ENTER_FRAME, loadProgress);

function loadProgress(event:Event) {// get bytes loaded and bytes total

var movieBytesLoaded:int = this.root.loaderInfo.bytesLoaded;var movieBytesTotal:int = this.root.loaderInfo.bytesTotal;

// convert to KiloBytesvar movieKLoaded:int = movieBytesLoaded/1024;var movieKTotal:int = movieBytesTotal/1024;

// show progressprogressText.text = "Loading:

"+movieKLoaded+"K/"+movieKTotal+"K";

// move on if doneif (movieBytesLoaded >= movieBytesTotal) {

removeEventListener(Event.ENTER_FRAME, loadProgress);gotoAndStop(2);}


54/59

3. Place an image on the second keyframe representing the main content of the application.Press Control+Enterkey to generate your SWF file.

4. Since the SWF isnt uploaded on the web, your download simulation might load too fast foryou to see. To preview the simulation, choose View> Simulate Download or View>

Download Settings from the Flash Movie player. Select a slower speed for the simulation.

2.3.2 Drawing and Animating Masks


55/59

1. Open a new flash file and name it as MaskEffect.fla.2. Place an image into the stage and name it as Image layer. Add a new layer above it and

name is as Mask. Right click and choose Mask.

3. Click the Lock icon to unlock the Mask layer. Draw a graphic on this layer. Convert theshape into a Movie Clip symbol and create a simple motion tween.


56/59

4. Right click on the Mask layer and choose Show Masking.

5. Flash will display an animated masking effect. Save your work.

2.3.3 Creating a custom Cursor

1.

Open a new flash file and name it as CustomCursor.fla. Use any drawing tools to create acursor. Convert it into a symbol and give its instance name as cursor.

2. Press F9 and add this ActionScript below:Mouse.hide();stage.addEventListener(MouseEvent.MOUSE_MOVE,follow);function follow(evt:MouseEvent){

cursor.x = mouseX;cursor.y = mouseY;

}


57/59

3. The code above calls upon the Mouse.hide() function in this frame or at this point. It hidesthe original mouse cursor. Every time you enter the frame, then the Movie

Clip's x position on the stage (cursor.x) will equal the x position of the mouse on the stage

(mouseX - a universal constant). Similarly so, the code also says that every time you enter

the frame, the Movie Clip's y position on the stage (cursor.y) will equal the mouse's y

position on the stage (mouseY).

4. Now, add a new layer under the cursor layer. Create an animated button. Choose Control >Test Movie to test your document.

2.3.4 Loading Files with a Component

1. Create a new Flash file. Choose Window>Components. Click and drag the instance ofUILoader component onto the stage.


58/59

2. Choose Window>Component Inspector. Type the URL of an image in the Value columnnext to the source.

3. Select Control > Test Movie to test your movie.

2.3.5 Secure a SWF File

1. Open the any Flash FLA file you have done in the previous lab session. Now, you are goingto prevent others from illegally embedding your SWF file in their HTML file. Some web

servers can prevent remote linking. In many cases, it also works with SWF files. You should

check with your ISP about this functionality.


59/59

2. To add security to your Flash movie file, you can use this.root.loaderInfo.urlproperty. It returns the full path of the SWF file, starting with http:// if the file is on the Web.

You can then check it against your domain.

3. The code above will prompt a text field notifying if the user is opening the SWF fromanother server without your permission.

if (this.root.loaderInfo.url.indexOf(yourdomain.com) != -1) {info.text = Is playing at yourdomain.com;} else {info.text = Is NOT playing at yourdomain.com;}

nota flash

Documents