nota flash
-
Upload
nor-farhana-yaakub -
Category
Documents
-
view
224 -
download
0
Transcript of 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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
14/59
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
16/59
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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:
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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:
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
25/59
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
31/59
4. Save your work and click on Control>Test Movie to test your movie as a SWF file in a newwindow.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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"));}
-
7/28/2019 nota flash
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")}
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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);
}
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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");}
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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");}
-
7/28/2019 nota flash
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);}
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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;
}}
-
7/28/2019 nota flash
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);}
-
7/28/2019 nota flash
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
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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;
}
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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.
-
7/28/2019 nota flash
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;}