You are on page 1of 59

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

idual components in Adobe Flash CS4 and working 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.

Introduction

Adobe 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 Adobe applications, 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 used to 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 objectbased, 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 using the parent-child relationship of symbol and instance aims to save the file size of the application created with Flash.

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

Disable the welcome screen

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.

Application bar Stage pasteboard Stage

Panels Property Panel Tools panel

Timeline

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 Stage Stage pasteboard

Displays options for the currently selected tool. Visible presentation area for published or exported flash project. Gray area around the stage. Elements on the pasteboard are invisible in the published or exported flash project.

Panels Timeline

Where tools and information in different categorisation located. 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:

1.2 Drawing and Colouring with Flash CS4


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

2. Select the Pencil tool from the Tools panel and change the mode to Straighten. Circle and drag 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 and choose 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. When a 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 a new 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

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 shape created with object drawing model is surrounded with rectangular bounding box.

Merge Drawing

Object Drawing

Snap to object Object Drawing

4. The merge drawing model merges drawn shapes, such as rectangles and ovals, where they overlap, 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 object drawing model. Click Snap to Objects option for easier object alignment on the Stage. Draw another oval.

Object Drawing

Snap to object

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

7. When you use the Rectangle Primitive tool or the Oval Primitive tool, Flash draws the shapes 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 the property inspector, create objects as following.

9. To convert an object to shapes (merge drawing mode), use the Selection tool, select the object 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.

Brush Mode

Ink Bottle

Brush

Paint Bucket

Zoom

Brush Size Use Pressure Paint Normal Paint Fills Paint Behind

Brush Shape Use Tilt

Paints over lines and fills on the same layer. Paints fills and empty areas, leaving lines unaffected. 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 on the strokes of the drawing, add coloured strokes to the flower by using Ink Bottle tool,

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.

Fill Colour Strokes Colour Strokes Height

Strokes Style

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

Double-click the pointer to change colour.

4. Change the settings on the Color panel as shown above. Use the Paint Bucket to fill in the Pointer gradient 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.

Fill Color

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

7. Save you file.

1.3 Symbols and Instances


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

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 easily remember 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.

1.3.1 Creating and Editing Graphic Symbols

1. Open a new flash file and name it as SymbolGraphic.fla. Create/draw the object(s) to be converted into a graphic.

2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).

3. Select the Graphic behavior and name the symbol as 'leaf'. 4. To edit it at a later point, double-click the symbol in the library (Ctrl + L) or any of its instances on the stage to switch to its symbol-editing mode as shown below. The name of the symbol will appear near the scene name ('Scene 1' by default, as shown below).

5. When youre done, click 'Scene 1' to exit from the symbol editing mode and go back to view the main movie's time-line. 6. Now you may create instances of leave from your Leave symbol in the library. Just drag and drop 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 by choosing 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. Now you 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.

4. Flash will automatically place the sequence of animation in separated keyframes. Make the cycle smooth enough that it can loop repeatedly without it being apparent where the cycle begins and ends. Adjust the keyframes in the timeline to control the speed of the animated sequence.

5. Click Scene 1 to exit from the symbol editing mode. Drag an instance of birdfly onto the movie's Stage. 6. Save your work and test the Movie (Ctrl + Enter).

1.3.3 Creating and Editing Button Symbols

1. Open a new flash file and name it as SymbolButton.fla. Draw an object and select it. Press F8 (or Modify >> Convert to Symbol). 2. Select the Button behavior for the symbol and name the symbol as 'sound'.

3. Double-click the instance of 'sound' on the stage to switch to its symbol-editing mode. The Timeline 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 as Text.

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 by pressing F5.

7. Now reselect the Shape layer. The first frame displays the drawn vector/plain text used for creating 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 to user action and is not visible at runtime). Change the color of the object in the Down frame.

9. Click Scene 1 to exit from the symbol editing mode. Drag an instance of sound onto the movie's Stage. 10. Now, to add sound effects into the Down frame, import sound.mp3 by choosing File>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. Mouse over or click the button to see the button effects.

1.4 Working with Filters


1. 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 by choosing the Text tool. 3. Select the text, and open the filter panel. Click the Add Filter icon and choose any filters.

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 file once youre done.

1.5 Animation in Flash


Animation 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:

A B C D E F

Playhead Empty keyframe Timeline header Guide layer icon Frame View pop-up menu Frame-by-frame animation

G H I J K L

Tweened animation Scroll To Playhead button Onion-skinning buttons Current Frame indicator Frame Rate indicator 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.

Motion Tween/ Path Animation Motion 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 Tween Shape 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 Animation Frame-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 and animation 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, Frameby-frame animation is very tedious or painstaking to develop but it is sometimes necessary.

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:

The file location in the Formats tab 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.

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 right click the first keyframe in the timeline and choose Create Motion Tween.

6. Drag your object across the Stage. You have created a spline path, a curved line connected by two points, for the object to travel on. You can change the duration of an animation by dragging the right edge of the animation and stop at a designated point in the Timeline. The animation expands to fit the new duration. Your keyframes are also moved to fit the new duration.

7. Test the Movie (Ctrl + Enter). Now, modify the animation by clicking on the spline path and drag downward. Doing so will bend and add more anchor points to the path.

8.

To adjust the position the object at any frame using the playhead, go to the Timeline and move 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 an object, 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.

10. To animate 3D effects, right again on the Timeline and choose 3D Rotation Tool. Click and drag 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

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 choose Insert>Shape Tween.

6. Remember, only vectors can be Shape Tweened (Not for Symbols). Note both the Tweens have different colours along the Timeline as shown above. Make sure that the line is smooth without being broken to ensure correct Tweening.

Start frame

In-between frames

End frame

7. If youre satisfied with the transformation, delete the first shape in Frame 1. Click on
Control>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 document property 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. Choose Window>Motion Presents. Choose any effects from the Defaults Presets.

3. Click Apply button to create the animation. You may make changes to the duration of the animated 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 new window.

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 property inspector, 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 Movie Clip 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 the Eases 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.

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

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

Introduction

Flash ActionScript started as a scripting language for Macromedia's Flash authoring tool, now developed 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 included variables, 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 or export the video stream with or without encoded audio. Development of file project can be done separately with different scenes. Then, the scenes are to be 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.

2.1 Audio and Video in Flash


You 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 choosing File>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 will automatically play. 3. To create a sound loop, open the Property panel. Under the Sound section, click Event in the sync menu and choose Loop.

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 clip onto the stage by choosing File>Import>Import Video 9. 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. Click Next to go the Skinning screen.

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

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

12. Your edited video has been imported to the stage. Press Control+Enter key. Your video player 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

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 in your 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 authoring time. (This is done via the Linkage item in the Library menu.)

Using the Document Class new to Flash CS3 and ActionScript. When you use this approach, 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.

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 and place 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. Make sure 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 the following ActionScript in the Script panel.
stop(); mybutton.addEventListener(MouseEvent.CLICK, clickLibraryButton); function clickLibraryButton (event:MouseEvent):void { navigateToURL(new URLRequest("http://www.utem.edu.my")); }

6. Choose Control > Test Movie to test your document. When you click on the button, it will prompt 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 modify how the interaction works. Search Flash Help for MouseEvent, and look at the Class in the ActionScript 3.0 Language Reference. 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")}

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 a few 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 choosing File>Import>Import to Stage. Rename the layer as Background.

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

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 be displayed 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. Now create a button symbol with myButton1 instance name. Place it at Frame 1.

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 click on 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.
stop();

11. Right click Frame 10 in your timeline and choose Actions to open the actions panel. Enter this code below for myButton1 button event.
myButton1.addEventListener(MouseEvent.CLICK, clickLibraryButton1); function clickLibraryButton1(event:MouseEvent):void{ gotoAndPlay(11); }

12. Press F9 on Frame 20 in your timeline to open the actions panel. Add this code below for myButton2 button event.
myButton2.addEventListener(MouseEvent.CLICK, clickLibraryButton2); function clickLibraryButton2(event:MouseEvent):void{ gotoAndPlay(1); }

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

Add more content by placing them in new layers on the timeline. Lock your Actions,Buttons and Background layers to prevent unwanted alteration.

2.2.3 Linking Buttons with Labels

1. Create a new Flash project file and name it as FrameLabelActionScript.fla. Follow the previous 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.

3. We will need to change the labels of our button and assign to them Instance Names in order to 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 label field to rename the button.

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

5. The next step to complete all of our content assets is the frame labelling process. Labelling frames 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 panel and 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 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.
stop(); myButton1.addEventListener(MouseEvent.CLICK, goMain); function goMain (e:MouseEvent):void{ gotoAndPlay("main"); }

11. Press F9 on Frame 20 in your timeline to open the actions panel and enter this code below.
stop(); myButton2.addEventListener(MouseEvent.CLICK, goIntro); function goIntro (e:MouseEvent):void{ gotoAndPlay("intro"); }

12. This completed the entire code of our basic Flash application. You can now test your application 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. Import DummyBG1.png on Background layer. Create a new Buttons layer and insert a button symbol with myButton1 instance name.

2. Choose Insert>Scene. Import DummyBG2.png on Background layer. Create a new Buttons 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.

5. Enter this code below in the Actions panel.


stop(); mybutton1.addEventListener(MouseEvent.MOUSE_DOWN, goMain); function goMain(event:MouseEvent):void { gotoAndStop(1, "Scene 2"); }

6. Go to Scene 2 by clicking the Edit Scene icon. Add a new layer above the Buttons layer in the timeline and name it as Actions. Press F9 and add this code.
stop(); mybutton2.addEventListener(MouseEvent.MOUSE_DOWN, goIntro); function goIntro(event:MouseEvent):void { gotoAndStop(1, "Scene 1"); }

7. Finally test your application by going through Control>Test Movie, or alternatively pressing Ctrl+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 on Background layer. Create a new Buttons layer and insert a button symbol with myButton1 instance name.

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.


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

9. Select Control>Test Movie or alternatively press Ctrl+Enter to generate IntroPage.swf file. Now, create another new Flash project file and name it as MainPage.fla. 10. Import DummyBG2.png on Background layer. Create a new Buttons layer and insert a button symbol with myButton2 instance name.

11. Add a new layer above the Buttons layer in the timeline and name it as Actions. Press F9 and add this code.
var myLoader:Loader = new Loader(); myButton2.addEventListener(MouseEvent.CLICK, clickLibraryButton); function clickLibraryButton(event:MouseEvent):void{ myLoader.load(new URLRequest("IntroPage.swf")); addChild(myLoader); }

12. Select Control>Test Movie or alternatively press Ctrl+Enter to generate MainPage.swf file. When you click on the button, it will prompt the stated SWF file in your Flash player. You have learn different ways to link button symbols using simple ActionScript 3.0. You should choose the appropriate method based on the size of your Flash project.

2.2.6 Creating a Hotspot Invisible Buttons

1. Create a new Flash project file and name it as TransparentButton.fla. Import DummyBG1.png on the stage. 2. Choose Insert>New Symbol and create a button symbol. Press F5 to insert a blank keyframe. Make sure the other frames are empty. 3. In the Hit frame, draw a simple graphic to define the active area.

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 to see the results.

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 a sound on/off button as an option. First, make sure your external sound file is located in the same folder of your fla. 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 you can 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; } }

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

2.3 Flash Preloader


Complex 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 label it 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 KiloBytes var movieKLoaded:int = movieBytesLoaded/1024; var movieKTotal:int = movieBytesTotal/1024; // show progress progressText.text = "Loading: "+movieKLoaded+"K/"+movieKTotal+"K"; // move on if done if (movieBytesLoaded >= movieBytesTotal) { removeEventListener(Event.ENTER_FRAME, loadProgress); gotoAndStop(2); }

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

4. Since the SWF isnt uploaded on the web, your download simulation might load too fast for you 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

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 the shape into a Movie Clip symbol and create a simple motion tween.

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 a cursor. 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; }

3. The code above calls upon the Mouse.hide() function in this frame or at this point. It hides the 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 of UILoader component onto the stage.

2. Choose Window>Component Inspector. Type the URL of an image in the Value column next 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 going to 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.

2. To add security to your Flash movie file, you can use this.root.loaderInfo.url property. 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.
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; }

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

You might also like