COMPUTER MULTIMEDIA AND ITS
INTRODUCTION TO
DEVELOPMENT IN
MATHEMATICS TEACHING AND LEARNING
By Fajar Nur Hidayat, M.Ed.
2010
TABLE OF CONTENTS
FOREWORD TABLE OF CONTENTS INTRODUCTION TO MACROMEDIA FLASH 8
i iii 1
Development Environment Of Macromedia Flash ...................................... 1
DRAWING IN FLASH
9
Selection Tool (V) ...................................................................................... 10 Subselection Tool (A) ................................................................................ 11 Free Transform Tool (Q) ........................................................................... 11 Gradient Transform Tool (F) ...................................................................... 13 Line Tool(N) .............................................................................................. 14 Lasso Tool (L) ............................................................................................ 15 Pen Tool (P) ............................................................................................... 16 Text Tool(T) ............................................................................................... 17 Oval Tool(O) .............................................................................................. 18 Rectangle Tool(R) ...................................................................................... 19 Polystar Tool .............................................................................................. 19 Pencil Tool(Y) ............................................................................................ 20 Brush Tool(Y) ............................................................................................ 20 Inkl Battle Tool(S) ..................................................................................... 21 Paint Bucket Tool(K) ................................................................................. 22 Dropper Tool(K) ........................................................................................ 23 EraserTool(E) ............................................................................................. 23
TABLE OF CONTENTS
Using Grid and Ruler ................................................................................. 23
ANIMATION IN FLASH
25
Shape Tween ........................................................................................... 27 Frame by Frame Animation ................................................................ 30 Motion Guide Animation .................................................................... 32 Masking Animation .............................................................................. 34 Animation Using Timeline Effect ..................................................... 36 SYMBOLS AND INTERACTIVITY
39
Creating Button...................................................................................... 40 Giving Command to a Button ............................................................ 42
INTRODUCTION TO MACROMEDIA FLASH 8 Macromedia Flash is a tool to make various ranges of animation, presentation, game, and even teaching and learning media. Besides, it can also be used as a tool to design web and other multimedia applications.
DEVELOPMENT ENVIRONMENT OF MACROMEDIA FLASH. Once you open Macromedia Flash program, you will see the front page as shown below.
In this front page, we can see some menus such as: Open a Recent Item: a category to show all flash files/documents made using file extension .fla Open: a command to open documents already made, yet they are not available in Open Recent Item due to the space limit. Create New: a command to make a new flash document/file. Create from Template: a template provided by Macromedia in the form
1
INTRODUCTION TO MACROMEDIA FLASH 8
of user interface. E xt en d : t hi s co m m a nd wi l l c al l M a cr om edi a w e bsi t e f o r Ex c han g e s e ssi o n .
If you choose Create New > Flash Document, you will see the display of new file or document from the working area of Macromedia Flash as shown in the figure below, alongside the important parts in the development environment of Macromedia Flash.
Some of important parts in the development environment are: Menu, Toolbox, Timeline, Stage and Panel. 
Menu Menu in Macromedia Flash consists of: File, Edit, View, Insert, Modify, Text Commands, Control, Window and Help. You can also view the submenu under each menu by clicking once on the menu that you choose. As an example, if we click Insert menu, we will see the display like one below.
2

Stage Stage is also called layer. Stage is used to play objects that will be animated. We can create picture, text, give color and many other things to do in Stage.

Toolbox: Tools are used to draw and manipulate a picture/an object. Tools are divided into four primary parts, those are: o Tools, in this part it is used to edit and manipulate objects. The icons available in this part will be discussed individually in Drawing Using Flash part. o View is used to zoom in or out the display screen in Stage. o Colors which in this part there is a palette to change the color of line and filling. o Option is modifiers from every chosen tool. Each tool has different modifiers.

Timeline Timeline is a component that is used to manage and control the way the animation works. Timeline consists of a few layers which are used to place one or some objects in stage in order to be able to manage with other objects. Each layer is made of frames used to set the speed
3
INTRODUCTION TO MACROMEDIA FLASH 8
of the animation. The longer the frame in the layer, the longer the animation will be played. The picture below shows the important parts of a timeline.

Panel Some of the important panels in Macromedia Flash are: Properties & Filters & Parameters, Actions, Library, Color and Align & Info & Transform. o Properties & Filters & Parameters Panel This panel is situated under stage. You can press Ctrl+F3 to show it up or hide it. Properties & Filters & Parameters panel is used to set the size of background, background color, the speed of animation and so on. The picture below shows properties panel.
4
o Actions Panel Actions panel is used to write Flash script or programming languages (ActionScript). You can just type it directly on the Actions screen or use the assistance provided by Macromedia Flash. You can press F9 to show the panel up or to hide it.
o Library Panel Library is a panel to save objects such as graphics or pictures, buttons, movies, or sounds either produced directly in the stage or imported from other source outside stage. Use shortcut Ctrl+L to view or to hide this panel.
5
INTRODUCTION TO MACROMEDIA FLASH 8
o Color Panel Color panel is a panel to choose color that will be used in producing objects in stage. There are two subpanels in this panel, namely Color Mixer and Swatches. Shortcut used for Color Mixer is Shift+F9, and shortcut for Color Swatches is Ctrl+F9.
o Align & Info & Transform Panel To show this panel up, you can press Ctrl+K on the keyboard. This panel is used to arrange the position of objects, whether it would be put in the center of the stage, left side, right side or other side required. This panel also allows you to rotate objects using Transform.
6

Status Bar The picture on the left is the menu status bar used for altering zooming/overall stage size. Fit in Window option will only display stage, Show Frame option will display Stage and Work Area, and Show All will focus on the existing object. To change background color and size of the stage, you can do either these steps: o Right-click on the stage, then choose Document Properties and a dialog box like the one below will appear. o Or, you can choose from Menu>Modify>Document (Ctrl+J).
7
INTRODUCTION TO MACROMEDIA FLASH 8
You can alter the size of the stage in Dimensions option in which the minimum width and height of the stage is 1 pixel, and the maximum is 2880 pixels. In Match option, there are: o Printer. To change stage to the maximum available print area (the size of the stage will adapt with the size of paper used). o Contents. To adjust width and height of the stage with the available object. If the object is on the top left of the Stage, the width of the Stage is the same as the width of the object. If not, the distance from left and top of the stage to the object will be the same as the distance from right of and below the stage. o Default. To change the size of the stage back to standard i.e. 550 x 400 pixels. To change the background color of the stage, click background color box and you can choose the color you want from color dialog box. Frame rate option is used to adjust the speed of the animation. The standard speed is 12 frames per second. To make it quicker, you can fill in bigger value.
8
DRAWING IN FLASH Flash has an ability to draw various objects using provided tool panel facility. The location of tool panel default is on the right side of Macromedia Flash screen. Tool panel consists of a set of tools used to draw and edit graphics and texts which is divided into Selection
four Tools
parts,
those
are:
Tools, View, Colors and Options (see figure 1). Tools contains apparatus
View tool Color tools
to draw lines and shapes, to color, to write text and to choose object to modify. View contains hand tool used to slide the display on
Option
stage, and zoom tool which is to zoom in and zoom out the
Figure 1. Tools panel
display
on
stage.
Colors contains tools and
icon used to change stroke (the outlines of an object) and fill (the area inside an object) colors. Options contains alternative tools that can be used. For instance, brush tool has various sizes to use. Next, we will discuss the use of each tool.
9
DRAWING IN FLASH
1. Selection Tool (V) This is used to pick and move object, either in the form of shape, line, dot, or symbol. Besides, it can also be functioned to draw. There are four modes of selection tool, namely: move corner, bend curve, move object and no object. Every time we activate selection tool, the cursor will change as its active mode as Figure 2. Selection tool modes
in figure 2. Move corner will be
active whenever the cursor is put on the corner of an object and used to move/slide the corner of the object. Bend curve will be active if the cursor is pointed to the side/line of an object and used to modify the curve/line of the object. Move object will be active as the cursor is upon an object and used to move it. No object is a mode when the selection tool is not in the position of being near an object. Using these variations of selection tool, we can create the various shapes as shown in figure 3. The group of objects on the left uses move corner, the one in the middle uses bend curve, and the one on the right uses general selection mode.
Figure 3. Variations of selection tool use
10
2. Subselection Tool (A) Subselection
tool
functions to modify an object in the form of stroke/line. An object picked
using
subselection tool will
Figure 4. Edit a circle using subselection tool
show anchor point which enables us to edit that object. Subselection tool is similar to selection tool with move corner mode, however, it is equipped with bezier and an ability to erase dots. For an instance, figure 4 shows a circle chosen with subselection tool. We can see dots upon the line of the circle. The object on the right is the circle after haviing edited using bezier as we can see the line of bezier.
3. Free Transform Tool (Q) This tool is used to transform an object by changing its size or to rotate or to skew the object as what we expect. To make it work, we need to activate free transform tool, then choose an object that we want to transform. An active object will be marked with a box having eight black square dots upon its outline which is used to transform and one dot as the center of the objectâ€&#x;s pivot point. Besides, the object can be moved using this facility if the cursor is changed into move object mode. There are four options provided by free transform tool: Rotate and Skew, Scale, Distort, and Envelope.
11
DRAWING IN FLASH
Change the size of the object To enlarge or reduce the size of an object, we can use option scale from free transform tool. Point the cursor to one of the eight black square dots of the active object until Figure 5
the cursor shaped a line with two arrows on
its both ends as shown in figure 5. To change the size of an object without changing the proportion, we can slide it from the corner point. If we do it from the dots in the middle, the shape of the object will turn into taller, shorter, wider, or slimmer. Rotate and skew an object To rotate or skew an object, we can use the option rotate and skew. First, activate the object. Then, to rotate the object, point the cursor around the dots in the outside corner until we can see three-quarter-circle-shaped arrows as in figure 6. Hold the mouse and move the object to the direction we want. We can also change the pivot point of the object by sliding the white circle in the
center
of
the
object to the location we want. To skew an object, Figure 6
Figure 7
you can point the cursor to the outline of the object until you can see the “equal�
mark with arrows in its corners as shown in figure 7. Hold the mouse and slide it to the direction you want.
12
Change the shape of an object To change the shape of an object using free transform tool, we have to activate the option distort or envelope first. Distort is used to change the shape of an object by moving the points of each corner. Figure 8 shows the shape of an object before and after it is changed using distort. From the original shape on the left, we move one top-right corner point up and we will get the new shape as one on the right side of figure 8. Envelope is almost the same as subselection tool. It will show bezier line to change the shape of an object through the change of its strokes. Figure 9 shows the transformation using bezier line (symbolized as black dots). We can see the left corner part of an object on the left side is modified becomes the one on the right side.
Figure 8. Distort
Figure 9. Envelope
4. Gradient Transform Tool (F) It is used to transform the color gradation of fill by setting the size, direction, or center of the fill. This tool functions when the object has fill with color gradation. There are two kinds of color gradation of fill, namely linear gradient and radial gradient. Linear gradient is a color gradation in which the gradation follows a linear pattern of
13
DRAWING IN FLASH
horizontal line, while radial gradient is a gradation in which the color gradation forms a circle-shaped pattern. We can choose either of these two patterns from color mixer located in the right panel or dialog box of fill color where the gradation option is down under. Figure 10 shows color mixer in the form of linear gradient and figure 11 shows gradient transform tool for linear gradient. By sliding the dots in the circle, we will obtain the color gradation we want. The dot in the middle of the circle is the center point of a gradation. Figure 12 shows the fill transformation in linear gradient.
Figure 10. Color Mixer
Figure 11. Radial gradient
Figure 12. Linear gradient
5. Line Tool (N) Line tool is used to create a line. To activate it, we just click the Line tool. To create a line, click a location on stage, then hold the mouse and move the cursor on the stage. When we drag the cursor, a line will show up from the point we click the mouse. The line we are making is not realized yet until we release the mouse. You can draw horizontal line, vertical line or diagonal line with 45o angle by pressing SHIFT key at the same time as you draw the line.
14
Setting in Line tool consists of line color, line width, and line shape. If we want to change the color, the shape, and the width of a line, we just click on the line that we want to change and choose the property panel below the screen. To change the color of a line, click the color of the stroke to make the color palette box appears. To change the shape of a line, click drop-down arrow from line shape then choose the shape which you want. To change the width of a line, click dropdown arrow menu or fill in the number in the box showing the width of the line. See figure 13
Figure 13. Line menu properties
6. Lasso Tool (L) It is used to select objects or parts of an object which will be edited. To select using lasso tool, click, hold and move the mouse. The selection that we made will look like a patterned area with dots. The options available in lasso tool are Magic
Figure 14. Lasso tool with polygon mode
wand, Magic wand properties and Polygon mode. Magic Wand and Magic wand properties
are used to select an area with the
same color. Polygon Mode
enables us to create a selection of an
area closed by straight lines. As an instance, in figure 14 we select part of the circle using polygon mode in which we can give different color to the selected area or we can erase it or transform it.
15
DRAWING IN FLASH
7. Pen Tool (P) Pen tool is used to draw line or curve by creating the order of dots that are connected automatically which is called anchor point. We can create straight line or curve line segment and adjust the angles and the length of the straight line segment and the elevation of the curve line segment. There are two methods in drawing using Pen tool: 1. By clicking to create dots on straight line segment. 2. By clicking and dragging to create dots on curve line segment. How to make a straight line using Pen Tool: 1. Click on Pen Tool. 2. Click once on stage to create initial anchor point. 3. Next, make second anchor point by clicking the mouse once on stage while pressing Shift
Figure 15
button on keyboard at the same time. Pressing Shift button is intended to make a line segment which is created between two anchor points. It forms a straight line or a line with 45o elevation and its multiples (look figure 15). 4. A straight line has been created. Once you finish drawing an object using Pen Tool, click on tools beside Pen Tool or quickly click twice to see the form of the object created. How to make a curve line: 1. Click Pen Tool.
16
2. Click once on stage, hold the mouse and drag it to the direction of the curvature. Once the mouse is dragged on stage, the tangent handles will appear as the reference direction of the curve (figure 16.1) 3. Release the mouse. 4. Position the cursor on the place we want for the second anchor point.
Click
the
mouse
once
and
hold it, then drag to the position which you want to direct the curve (Figure
1
2
3
Figure 16. Create a curve line using pen tool
16.2). 5. Release the mouse. You can click tools instead of Pen Tool to see the object created. The curve made will look like one in figure 16.3.
8. Text Tool (T) Text tool is used to enter and edit text. There are two ways to enter text. The first way is by clicking text tool option on toolbar, then we click
Figure 17
the mouse on stage until we can see a text box with little circle on its top right appears as in figure 17. The text box is a place where we insert text. The text box will adjust its size as we insert the text.
17
DRAWING IN FLASH
The second way is by sliding the mouse to adjust the length of the text box which is called paragraph box. The box will then
Figure 18
appear with particular permanent length, so when we insert the longer text than its length, the rest of the text will be moved to the next line. We can modify the text attributes such as type, size, font color, bold, italic, or alignment by
Figure 19. Text property
setting it in property panel as in figure 19. There are two ways to edit text. First, click one of the letters using selection tool to make the text box appear. In active position, we can modify all text in the text box. The second way is by clicking one of the letters using text tool to make the text box appear. Then, we highlight the text we want to modify. This way will only modify the text that we highlight.
9. Oval Tool (O) Oval tool is used to create circular forms. Click Oval tool on toolbar to activate it. To make circular form, you can click, hold and drag the mouse. The circular form will be created as the mouse moves and you can see it as it appears after you release the mouse. To make a circle form, you can press SHIFT as you drag the mouse. The way to set attributes in Oval tool is similar to one in line tool as shown in
18
figure 13, those are line color, line width, line form, and filling, however, in oval tool we can set the fill color.
10.Rectangle Tool (R) Rectangle tool is used to make rectangle form. Click rectangle tool on toolbar to activate it. Then, click, hold and drag the
Figure 20. Rectangle with round radius = 20
mouse, the rectangle form will appear following the pointer direction of the mouse and you can see it as you release the mouse. To make a square, press SHIFT when you draw. The setting of this tool is similar to one in the oval tool. One additional setting in this tool is round rectangle radius that you can find in toolbar options. Rectangular radius is used to change the rectangular corner which is from angular form into round form. To make it appear, you can just press Round Rectangle Radius
icon
until you can see Rectangle Setting dialog box. Then, insert the value of the radius of the rectangle corner. The rectangle that we make will have round-form corner as in figure 20, with its radius = 20.
11.Polystar Tool Polystar tool is a subtool of rectangle tool. If we click rectangle tool button in toolbox and hold it for about 1-2 seconds, we can see option box of Rectangle Tool and Polystar Tool. Choose Polystar tool to create a poly-angle (x-sided) star or polygonal figure. We can set the shape of the figure either in the form of star or polygon and the
19
DRAWING IN FLASH
number of its sides by opening properties panel (Ctrl+F3) and choose option. Next step is we can then draw the figure on stage.
12.Pencil Tool (Y) Pencil Tool is used to draw line or any shape we want. There are three available options namely Straighten (to draw straight line), Smooth (to draw smooth curve line) and Ink (to freely draw any shape without modification). To create a line, click, hold and drag the mouse until we can see a line formed. The setting for color, width, and type in pencil tool is similar to one in line tool in property panel. Straighten mode is used to help straighten the line we create, however, the result will not be as straight as if we make line using Line Tool. Smooth mode is used
Ink/original
to help smooth the line that
Figure 21. Three types of Pencil tool mode
we make. Ink mode is used
Straighten
Smooth
to erase Flash assistance in smoothing the line. Using ink mode will give the result as we make a line by our own without flash assistance. To get a clearer view, you can see figure 21.
13.Brush Tool (Y) Brush Tool is used to fill color. You can activate Brush Tool by clicking the icon, then click and drag the mouse to the space we want
20
to draw, and we will get a scratch. To finish, just release the mouse. The options available in Brush Tool are: Brush Mode, fill color, Brush
Figure 22. Brush Tool options
Size, Brush Shape, and Lock Fill (figure 22). Brush Mode is used to define the type of the brush scratch as we draw using Brush Tool. Brush mode sets the relations between the brush and other objects. So, in order to make distinction, you had better make an object first before you make an experiment with the brush mode. There are five selections of painting, those are: Paint Normal, Paint Fill, Paint Behind, Paint Selection and Paint Inside. Paint Normal is used to cover all the object field including the border line, the filling field, or both. Paint Fill is to cover the object field regardless border line. Besides, by using Paint Fill we can draw on other objects instead of those two shapes. Paint Behind is used to fill behind the object without covering the object. Paint Selection is used to fill the selected area. Paint Inside is to fill inside an object only and leave the outer part untouched. Brush Size is used to set the size of the brush. Brush Shape is to select the brush shape. Lock Fill is utilized to lock (not to use) gradient fill in Brush Tool.
14.Ink Bottle Tool (S) Ink Bottle Tool is used to modify a border line or to add a border line to an object, for example in oval shape. To set the attributes of a line
21
DRAWING IN FLASH
such as color, width, and line shape, we can do it from property panel in stroke panel, then click on the line we want to modify.
15.Paint Bucket Tool (K) Paint Bucket Tool is used to change the fill or to fill an object. To change the fill, you can choose the color to fill, then click an object field whose color you want to change. To fill, choose the color in fill panel, then click the field to fill. The color to choose can be solid color which is monotonous color, linear gradient, and radial gradient. The options available in Paint Bucket Tool are: Gap Control and Lock Fill. Gap Control is an option to fill a field with a border line whose ends are not connected (see figure 23). The options are Don’t Close Gaps to fill a field with a border line whose ends are connected; Close Small Gaps to fill the field with
Figure 23. Gap control
unconnected border line whose small gap between its ends; Close Medium Gaps to fill a field with the border line whose medium gap between its ends; and, Close Large Gaps to fill a field with the border line whose large gap between its ends. Lock Fill is used to lock the center point of gradation. If we choose gradation as the filling, the center point of the gradation will be on the place where we click Paint Bucket on Stage. The center point of gradation can be realized as the power point of light. As we activate
22
Lock Fill by clicking the icon, we can still fill the color using gradation but we cannot change the existing center point of gradation. It will not change its position though we click Paint Bucket on other spot on Stage.
16.Dropper Tool (I) Dropper Tool is used to take color sample from an existing object so that we can use it to color other object to be similar to the existing one.
17.Eraser Tool (E) Eraser Tool is used to erase part of drawing on Stage. The options available in Eraser Tool are: Erase Mode, Faucet and Brush Size. Erase Mode is used to define the way to erase from Eraser Tool. The function of each mode is about the same as the one in fill tool. Faucet is used to erase all fill completely or border line with only one click. Erase Shape is used to define the eraser shape we use.
18.Using Grid and ruler Grid is a group of intersecting lines horizontally and vertically with particular distance as a guide to draw and to put the elements. It has the same function as graphic paper in non-digital world. Flash also uses grid to straighten the object if we activate Snap to Grid feature. Because grid is only a helping tool, it does not appear in our movie result. The way to make it appear is from menu View, then, we
23
DRAWING IN FLASH
choose Grid > Ruler
Show Grid. If
Guide
this feature is active,
s
there Grid
will be check mark beside it and
on
stage
Figure 24. Ruler, guides, and grid
showing grid as a part of Stage. Grid on stage can be set as we want for its color, width and length. We just use menu view>grid>edit grid to show dialog box to set the color and size of the grid. Ruler and guides help us to draw an object with precise size, shape, and position on Stage. To view ruler, choose menu view>rulers. Guides is to line up objects on stage with ruler. To use it, you can click rulers on the sides of the screen, you can choose either the horizontal one or the vertical one. Hold and drag the mouse to the stage and position it to the space you want. To set the color and the size of guides, choose menu file>guides>edit guides.
Exercise Try to draw the objects and do the mathematics equations as shown below using Flash.
24
ANIMATION IN FLASH Macromedia Flash is known as software used to make animation, especially for web application. Flash has some techniques in making animation such as motion tweening, shape tweening, frame by frame animation, motion guide, masking, and text animation.
MOTION TWEEN Motion tween (motion animation) is used to move an object from one location (starting frame) to another location (ending frame) on stage. Motion tween can only be used by one object – which includes symbol, group object or in combined texts – on one layer. So, if you want to move many objects, you must use many layers.
You can follow these steps: 1.
Open macromedia flash and choose Create New Flash Document
2.
Import file from Clip art Microsoft Office using this way: a.
Choose
File
>
Import > Import to Library, but first you have to transform the file type into WMF and
find
file
“C:\Program Files\Microsoft
25
ANIMATION IN FLASH
Office\MEDIA\CAGCAT10\J0183328.WMF�
which
contains a picture of a bus. Click Open. b.
In library you will see a bus with its background, next, drag the picture to the stage as shown in the figure beside this.
c.
Since we just want to get the picture of the bus, we have to erase the background. We can edit the graphic by clicking twice on the picture of the bus and erase the picture that we want to get rid of by pointing at it and press DEL button on keyboard. Then, we will only get the picture of the bus. To get out of the edit position of the picture click scene 1 in timeline.
3.
Set the position of the bus and its size on stage which then will be the starting point of the animation we make.
4.
Create keyframe in frame 30 on layer 1 by right-clicking frame 30 and choose Insert Keyframe from the menu.
5.
Still in frame 30, slide the picture of the bus to the right as you want which then will be the ending point of the animation we make.
6.
Right click Frame 1 and choose Create Motion Tween, and you can see an arrow on Timeline as in the figure below.
7.
Play the animation by pressing CTRL + ENTER buttons on keyboard.
8.
26
Save the file you just created.
Task: Create an additional animation to make the bus go back and forth.
SHAPE TWEEN Shape tween is used to create animation which involves shape transformation. Different from motion tween, shape tween cannot be done with group object or a symbol. So, we have to break them apart first or ungroup them. Letâ€&#x;s create an animation of the transformation from a rectangular to a parallelogram. 1.
Make a new document in macromedia flash, choose File > New or by pressing CTRL+N button then choose Flash Document
2.
Draw a rectangular using rectangle tool.
3.
Click frame 1. In property panel, you will see the box shown on the right side of the tween that you can choose by clicking the arrow containing the types of available tween and choose shape (see the picture beside this).
27
ANIMATION IN FLASH
4.
Click frame 30, then press F6 to add keyframe in that frame.
5.
Remember, still in frame 30, drag the picture of rectangular to other location on stage and change the rectangular into a parallelogram. The result will be as one shown in the figure below. Next, see the result by clicking test movie icon or pressing CTRL + ENTER.
6.
You will see that the rectangular transforms into a parallelogram. However, the transformation does not go as we expect to. To direct the shape transformation as we expect, Macromedia Flash provides shape hints feature to define the points put in the object in the starting and ending frames.
To add shape hint on shape tween 7.
Click frame 1, choose Modify > Shape > Add Shape Hint in bar menu or press CTRL+SHIFT+H, and you will see a red circle with a letter inside in the object as shown in the figure below. Move the red circle to the location in the object as you want, for instance, you put it in the corner point of the rectangular. Add as many shape hint points as you want and put them in the position.
28
8.
Click frame 30 (ending frame), move the shape hint points to the ending shape of the object as in the picture below. Then, you can see the result by pressing CTRL+ENTER. If the animation still does not go as you wish, you can put more shape hint points.
9.
Save your work.
Task: Complete the animation by adding other square shape transformations such as transformation to trapezium, rhombus, and diamond (kite).
29
ANIMATION IN FLASH
FRAME BY FRAME ANIMATION Frame by frame animation is an animation designed by changing the appearance frame by frame. This type of animation is the most flexible one, yet takes a lot of creativity and a quite long time to design. The example below shows the odd number pattern. 1. Create a new document in macromedia flash, choose File > New or press CTRL+N buttons and choose Flash Document
1
2. Draw a circle and write number 1 below it as shown in the figure beside this. 3. Click frame 10, and press F6 to add keyframe in that frame. Then, add three more circles and number 3 on their right side. Use oval tool to draw and Text tool to write number. 4. Click frame 20, and press F6 to add keyframe in the frame. Then, add five more circles and number 5 on their right side as in point 3. 5. Click frame 30, and press F6 to add keyframe in the frame. Then, add seven more circles and number 7 on their right side, so we can get the figure as shown below.
30
Insert layer 6. Click frame 40, and press F6 to add keyframe in the frame. Then write ”The number of n first odd integers = n2”. To make square symbol, you can highlight number 2 and choose superscript in combo normal box in property. 7. Click frame 50 and press F5 (or right click on frame 50 and choose insert frame) to lengthen frame 40. 8. Make new layer by choosing menu Insert > Timeline > Layer or you can use insert layer icon at bottom left of the layer as shown in the figure above. Then, click frame 1 in layer 2 and choose Text Tool. Next, type ”Odd Integers Pattern”. Use bigger font for the phrase and make it as a title, so you will see the screen as shown below.
31
ANIMATION IN FLASH
9. See the result by pressing CTRL+ENTER and save your work.
MOTION GUIDE ANIMATION Motion guide animation is used to move an object on the path that we create. Macromedia Flash provides a special layer to make a path to guide the direction of the movement which is called motion guide layer. There are two ways to work with motion guide. The first one is by inserting motion guide layer (a layer to guide the movement), drawing path, and making animation by combining the animated objects in the path. The second way is by making the animation, inserting motion guide layer, drawing path on the layer, and combining the animation in the path. We will try to apply the second way of this animation on the bus we made before. 1. Open bus animation file we made before. 2. Click frame 1 on layer 1
32
3. Click the menu bar, choose Insert > Timeline > Motion Guide. Layer 1 will be under Layer Guide: layer 1 with the position a bit sticks out. 4. Click frame 1 on layer guide, click Pencil tool panel, click Smoth option
icon on Tool
icon in the option in Tool panel. Start
making a path by drawing a line on stage 5. Click selection tool
icon on tool panel.
Click frame 1 in layer 1. If the centre point of the transformation of the bus is
Titik trasformasi dari objek ditempelkan pada lintasan
not attached on the starting point, slide the bus until the center point of the transformation is attached on the path as shown in the figure. 6. Like point 5, the centre point of the transformation in frame 30 of layer 1 should also be attached to the end of the path. 7. Run the animation by pressing CTRL+ENTER. And, you can see that the bus will move with permanent position. 8. To change the position of the bus to match the direction of the path, click frame 1 on layer 1. 9. As you are sure that the bus picture is accepted, tick the box in Orient to path in property panel. 10. Play the animation and see the difference.
Task: Make an experiment with the options in the property panel while the motion tween is active, such as sync, snap, scale, ease, and edit. See the difference. Try to add sound in the animation.
33
ANIMATION IN FLASH
MASKING ANIMATION 1 Masking animation is an animation that principally views an object which we hide before. Masking animation has two basic methods, those are: 1. Moving masking area and the object masked stays still. 2. Still masking area and moving masked object. These two techniques will show different results. Besides, the masking area can only be realized as fill, and outline is not allowed. How to make masking animation: Below is the process of creating masking animation: 1. Open new file or press Ctrl+N. 2. Here, we will work with black background, so we change the color of the background first from property panel.
. 3. Then, we make two layers, the first one is named “text” which is the one to be masked and the other one is named “masking” which is masking layer.
1
Taken from site http://sinauflash.blogspot.com/2009/01/animasi-masking.html accessed on October 13, 2009 with some modification.
34
. 4. In frame 1 of the text layer, we write a phrase “PPPPTK Matematika Yogyakarta� using white color as shown below. PPPPTK Matematika Yogyakarta
. 5. Right click frame 50 on layer text, then choose Insert Frame
PPPPTK Matematika Yogyakarta
6. In frame 1 of masking layer, make a black ellipse and put it on the left side of the stage.
PPPPTK Matematika Yogyakarta
35
ANIMATION IN FLASH
7. In frame 50 of masking layer, right click and choose Insert Keyframe from the menu. Change the position of the ellipse to the right side of the stage.
PPPPTK Matematika Yogyakarta
8. In frame 1 of masking layer, right click and choose Create Motion Tween.
9. On masking layer, right click and choose mask.
10. Then, press CTRL+ENTER to see the result.
ANIMATION USING TIMELINE EFFECT Timeline Effect is a ready-to-use animation provided by Macromedia Flash. To use it, you must first choose an object to animate, then, click on menu Insert > Timeline Effects. Macromedia Flash provides three types of effects, those are: 1.Assistants
36
a.
Copy to Grid If you want to make duplication of an object using reflection on the column as well as on the lines.
b. Distributed Duplicate If you want to make duplication of an object with additional scaling or to change the color or to give motion. 2. Effect a.
Blur:
To make the object blurred.
b. Drop Shadow: To give shadow to an object. c.
Expand:
To create animation for the text such as squeeze it.
d. Explode:
To give an object animation as if it explodes to pieces.
3. Transform/Transition a.
Transform:
To give animation to an object such as moving from one place to another place, scaling, color transformation, rotation, etc.
b. Transition:
To give transition effect (of the appearance) to an object.
Following is an example of transition effect application on a text. 1. Open new file by pressing CTRL+N 2. Make a phrase “PPPPTK Matematika Yogyakarta�, set the font type, the size and the color. 3. Click on the menu bar Insert > Timeline Effect > Transform/Transition. The dialog box of Transition will be
37
ANIMATION IN FLASH
opened and let us set the effect of Fade (appearance) and Wipe (emergence). Set it up as the figure below. The effect used is fade in (from unseen to obviously seen) that will slow down by the end of the process (motion ease = 73) and the process will be made for 50 frames. At this time, we do not use Wipe effect. To preview the animation, you can click update preview button, then click OK. 4. As the result, the number of the frames will become 50 frames, the layer will change its name as the effect we have chosen, and there will be symbol matching the layerâ€&#x;s name in Library panel and an effect folder.
PPPPTK Matematika Yogyakarta
5. Run the animation using CTRL+ENTER
Task: Try to apply other effects and see how the animation works.
38
SYMBOLS AND INTERACTIVITY Symbol is one of top features from Macromedia Flash which can make our job easier and save the size of the file. Symbol is similar to group; however, anything already made into symbol will be automatically saved into the Library to be reused at anytime. Macromedia Flash defines 3 categories of symbol, namely: 1. MovieClip, a symbol which enables us to create an animation. 2. Button, a symbol which functions as a switch to interact. 3. Graphic, a symbol that makes us impossible to make animation. Graphic type symbol is similar to group.
The easiest way to create symbol is by altering object into symbol. You can decide the object using Selection menu,
tool,
choose
then
from
Modify
>
Convert to Symbol or by pressing F8 on the keyboard. After you find symbol category that you want as one shown in the picture on the right, name the symbol and decide the type of the symbol that you want to create.
All objects changed into symbol will be automatically saved in Library panel. To open the Library panel, click Window > Library (or F11). If an object has already changed into a symbol, the object then will be framed by
39
SYMBOLS AND INTERACTIVITY
blue rectangular and mark “+� appears on the center of it. This is to make the object that has been changed into symbol differs from the one has not.
Exercise: 1. Create a rectangular by clicking Rectangle Tool. 2. Click Selection Tool and pick the rectangular that you just made. Choose from menu Modify > Convert to Symbol or press F8 from the keyboard. 3. You will see a display as the one you see previously above. Change the name of the symbol into g_kotak. Convert the rectangular to graphic symbol by choosing the type using graphic. 4. Click OK 5. In the Library panel, we can see symbol g_kotak with the graphic type. Next, try to drag the symbol to the stage. 6. Change the color of the object you just made by clicking the color combo box in Property panel. Change None into Tint and from the color box on the right side, choose blue. Try to change the dimension of the rectangular as well.
Creating Button Interactivity in Macromedia Flash can only be carried out using button, so each object that will be used should be first converted into button.
40
To convert an object into a button, you have to highlight the object which will be converted first, then choose menu Modify>convert to symbol and click button. After this is done, the object has become a symbol button and is facilitated by all properties related to button.
If we edit a symbol which is a button, the button object that we click will be put into a specific space particularly to manipulate the chosen button. Its timeline will be like the one shown in the picture on the right side, in which there are four frame options namely up, over, down, and hit.
Up
: form of the button when the cursor of mouse is
not on it
Over
: form of the button when the cursor of mouse is
on it
Down
: form of the button when the mouse clicks it
Hit
: to define the area width of the button
We can insert different forms and colors in each frame above.
Exercise: Create a button shaped rectangular whose corner with radius 20 1. Create a rectangular by clicking rectangle tool 2. Before drawing on stage, first set the corner radius to 20. Click option in tool box and choose set corner radius
and fill in with 20 point.
3. Draw the rectangular in stage. 4. Activate
the
rectangular
and
convert into the form of symbol
41
SYMBOLS AND INTERACTIVITY
and choose button. Then, name it b_tombol. 5. Edit the button by clicking twice or you can do it from the menu Edit > Edit in Place. You will see the display as the one shown on the right. You can notice the timeline changed into the form of frame for button. (up, over, down, hit) 6. Make the new key frame for frame Over, Down, and Hit by pressing F6 in the frame. 7. Click on frame Over, and change the color of the rectangular. You can use other color, such as blue. 8. Click on frame Down and move the rectangular using arrow buttons. Move down twice and then move to the right twice. 9. Click on Scene 1 or choose from Edit > Edit Document or CTRL+E from keyboard to finish symbol editing. 10. Start to use it by pressing CTRL+ENTER and move the cursor to the button. Look and notice what will happen. The cursor will change into hand form and the color of the button will change into blue. And also try to click the button and see what will happen.
Giving Command to a Button When you click a button and nothing happens, this is because the button has not yet been assigned a command to perform certain task. Macromedia Flash provides a facility to assign command to perform task which is called action. The rules defined (programming language) by
42
Macromedia Flash to assign command is known by the name ActionScript. Actionscript can be applied either on button or frame. For example, to stop a certain program from running in particular frame, you can give command „stop‟ () in that frame.
Exercise: 1. Make new layer in timeline and name it “action”. Choose menu Insert > Timeline > Layer. Click twice on the name of the new layer and rename it with action. 2. In frame 1 of layer action, choose Window > Layer or press F9, and window Action will be opened. 3. Choose mark + and you will see the display as shown on the right. Choose Global Functions > Timeline Control > Stop. 4. In line 1, you can read stop(); and in frame 1 of layer action,
Huruf a menunjukkan bahwa di frame tersebut ada perintah action
letter a signposts that there is actionscript in the frame. 5. Press F9 to close window Action. Then, try to press CTRL+ENTER. You will see that the movie in frame 1 will stop because of the stop command.
43
SYMBOLS AND INTERACTIVITY
To assign a command for a button has almost similar steps as the one for a frame. The only difference is that in frame we have to click on it first before we assign the command, and in button we have to click on the button we will assign and choose the event to occur. For example, the command will be carried out as the button is pressed. If we want to assign command on a button that we just made by clicking, we have to click the button first then we show the window action and choose the event, next we write the command we want. For clearer understanding, we will do the exercise of assigning command on the button that we have made. The command will manage how the next frame operates.
Exercise: 1. Put the button just made in frame 1 which has been assigned command stop. 2. Add text �play� on the button by clicking Text tool and direct it to the button. Set the text to be fit inside the button. 3. Click the button and press F9 to open window action. Look into Current selection to make sure that the button selected is the active one. 4. Type command as shown below in the space provided. on (release) { play();} Be careful when writing the command. The color of the written text is blue if the text is correct and well-written. ActionScript is case sensitive meaning the uppercase is considered different from lowercase. The command shown above means if the mouse is
44
released from the button (on release) the command play will operate. Command play is used to replay the animation/movie that has been paused by command stop. 5. Add keyframe from frame 2 until frame 10. Add bigger text stated “Replay”. 6. Play the movie using CTRL+ENTER. The frame will stop at frame 1. Go on by clicking the button with command “play”, so flash will continue the animation by going to the next frames containing command “replay”, and it will stop again as it reaches back frame 1 (due to “stop” command). Below are some basic commands often used in designing program using Flash. -
Go To (gotoAndPlay, gotoAndStop): to jump to a particular frame or scene.
-
Play and stop
: to play and stop the animation.
-
Load Movie and Unload Movie: to view or delete animation.
-
Tell Target
: to control other animations and clips.
-
If Frame is Loaded
: to perform action which will monitor
whether particular frame is already played. -
Get URL
: to link to a particular site.
-
FSCommand
: to control Flash player which plays the
animation.
45
SYMBOLS AND INTERACTIVITY
46