Department of Information Technology

DEPARTMENT OF INFORMATION TECHNOLOGY
MULTIMEDIA AND APPLICATION DEVELOPMENT LAB
Prepared by Mr. Mirza Irfan Baig

Asst. Prof.
BALAJI INSTITUTE OF TECHNOLOGY AND SCIENCE

Laknepally, Narsampet, Warangal 2009-2010
MMAD LAB MANUAL
Week 1: Introduction to Flash Introduction to Action Script 2.0 Week 2: Creating an object and assigns actions to that object using script Creating looping effect to an object Week 3: Generating Random Numbers Creating a function and calling a function Week 4: Detecting flash player version using script Detecting operating system using script Week 5: Checking display language of a device Detecting display settings of a device Week 6: Tinting a Movie clips color Changing a movie clips color with sliders Week 7: Drawing a circle using script Drawing a rectangle using script Week 8: Filling a shape with Gradient effect Script Masking Week 9: Converting angle measurements Calculating the distance between two points on stage Week 10: Converting units of measurements Formatting currency amount Week 11: Calculating the co-ordinates along a circle Reverse or sort of an array Week 12: Custom Sort of an array Creating an input text Field Creating an input password field
BALAJI INSTITUTE OF TECHOLOGY AND SCIENCE 2009-10
MMAD LAB MANUAL
Index 1. Lab Objective 2. Introduction to Flash 3. Introduction to Action script 4. Script that creates an object and assign actions 5. Script that creates looping effect for an object 6. Script that generates Random Numbers 7. Script that creates a function and calling a function 8. Detecting the Player version of Flash 9. Detecting the operating System of a device 10. Checking the display language of a device 11. Detecting display settings of a device 12. Introduction to Movie Clip Class 13. Flash Movie that Tints a Movie Clips color 14. Action Script that Controls a Movie Clips color with sliders 15. Drawing a Circle using Action Script 16. Drawing a Rectangle using Action Script 17. Filling a Shape with Gradient Effect 18. Script Masking of movie clip 19. Math Class 20. Converting angle measurements 21. Action Script for calculating the distance between two points 22. Action Script that Formats Currency Amount 23. Action Script for converting between units of measurements 24. Action Script for calculating the co-ordinates along a circle 25. Introduction to Arrays 26. Action Script that displays reverse order of an input array. 27. Additional Exercises 4 5 11 13 13 14 14 15 16 17 17 18 20 21 24 26 27 27 30 33 34 35 36 38 39 42 51
MMAD LAB MANUAL
Lab Objective:
The fundamental objective of the lab is to help students familiarize and get used to work on author ware with macromedia flash as a tool. The secondary objective of the lab is to expose students to work on action script 2.0. Detailed objectives of the lab include: Introduction to working on author ware tool flash (shape tween, motion tween). Basic action scripts such as assigning actions to an object and a button, Creating loops, generating random numbers . Exposure to working on create API s in flash using action scripts like drawing a circle, rectangle, filling shape with gradient. Practice to work on movie clips like tinting a movie clips color, controlling movie clips color with sliders using action script. Exposure to animation and multimedia fundamentals such as usage of masking, morphing techniques. Exposure to working on creating applications that supports Math Class such as in space center applications like converting angle measurements, distance between points, converting units and measurements, Exposure to working on text fields, message fields to create flash players like sorting an array, making pass word field. This lab is specifically designed for students who are already introduced to basics OOP concepts and in general programming through C and C++ and working on scripting languages like HTML, XML and JSP etc.
Course Pre-requisites: Computer Graphics, programming fundamentals (java and other oops
concepts)
System requirements
System requirements (Hardware components) PC with P-IV with considerable RAM and HDD Suggested Software Macromedia Flash 2004 or above windows xp
MMAD LAB MANUAL
Week1: Introduction to Flash

What is Flash and when you should use it? The Flash technology is most often used for Web sites. (It can also be used on CD-ROMs and even TV.) Flash is a full-featured program and can create almost any technique you can imagine. On the other hand, you may not want to use Flash all the time. Although Flash`s vector images are compact and files are compressed when published, Flash still introduces an overhead to your Web site. Make sure that you do not make you viewers wait too long for your site to load. In general, a good guideline is that you should use Flash only when it does not violate two basic principles:

1)the Flash tools are easy to use 2) the Flash files load fast
Flash is most commonly used to create vector graphics-based animation programs with full-screen navigation interfaces, graphic illustrations, and simple interactivity in an anti aliased, resizable file format that is small enough to stream across a normal modem connection.
How does Flash work

If you were to plot a bitmap on a grid, each pixel is detailed. Essentially, this is what your computer does when it displays bitmaps. Vector images do not plot images on a pixel-by-pixel basis. Instead, vector files contain a description of the image expressed mathematically. Essentially, the file tells the computer about the image and the computer draws it.
Formats and Support

Macromedia/Adobe has released the specifications of the Flash file format (excluding specifications of related formats such as AMF), and compatible third-party tools exist. However, Macromedia/Adobe retains control of the format. Since Flash files do not depend on a truly open standard, this reduces the incentive for non-commercial software to support the format, although there are several third party tools which utilize and generate the SWF file format. In addition to a vector rendering engine, the Flash Player includes a virtual machine called the Action Script Virtual Machine (AVM) for scripting interactivity at run-time, support for video, mp3-based audio, and bitmap graphics.
5
MMAD LAB MANUAL
The most commonly used soft wares for creating flash applications are:
Adobe Flash Professional 8 SWiSH Max Wildform Wild Presenter Swift 3D CoffeeCup Firestarter 6.7
How to Export Flash Files

After creating a Flash movie you choose File > Save As from the top menu to save your movie. Save the file as "Somefilename.fla".
Basic Tools
There are many basic drawing tools available in Flash. Each is detailed below. Also note that many of these tools have additional options or modes that can be changed in the Options area of the Tools panel. The first important tool is the Selection tool. This tool is used to make selections on objects and graphics on the drawing area, or stage. You can either click on individual objects to select them, or click and drag to make a rectangular region and select all the objects in it. Once you make a selection, you may perform subsequent actions that affect your selection, such as moving it around the stage, deleting, or altering it in the Properties panel. Hold down the SHIFT key to select multiple individual objects. The Sub selection tool is used for selecting and modifying anchor points on curves and lines. Clicking once on a line or curve with the Sub selection tool reveals the anchor points. Anchor points are represented either by a hollow square (a corner point), or a hollow circle (a curve point). Clicking on an anchor point with the Sub selection tool will select that anchor point (then represented by a filled square or circle). You can then click and drag the anchor point to move it, ALT-click and drag on a corner point to convert it to a curve point (and thus reveal anchor point tangent handles), or ALT-click on a curve point to convert it to a corner point (and thus remove the tangent handles). The Line tool is an important drawing tool. It functions like the line tool in other drawing programs. To use it, click on the stage, drag, and release to draw a straight line. Stroke width, style, and color can be changed in the Properties panel. Hold down the SHIFT key while dragging to constrain the line angle to increments of 45. The Lasso tool can be used to select objects on the stage. It allows you to create a freeform selection area by clicking and dragging around an area. When you release the mouse button, Flash automatically completes the loop with a straight line.
6
MMAD LAB MANUAL
The Pen tool is used to create precise paths that are either straight lines or smooth curves. Stroke width, style, and color, and fill color (for closed paths) can be changed in the Properties panel. To use the Pen tool to create straight lines, click anywhere on the stage to define the first anchor point, click again where you want the first segment of the straight line to end (hold down the SHIFT key to constrain the line to increments of 45), and continue clicking to create more straight line segments. Double click the last point to end the line segments (and create an open curve), or click on the first point you created to close the curve. To create curved lines, follow the same procedure, but instead of simply clicking to create each point, click and drag in the direction you want to curve to go. The Text tool allows you to draw text on the stage. Position the cursor on the stage where you want to begin your text and then click and start typing. The text font, size, color and paragraph formatting can be changed in the Properties panel The Oval tool allows you to create ovals of any shape and size (including circles).Stroke width, style, and color, and fill color for ovals can be changed in the Properties panel. To create an oval, simply click and drag across the stage to create the oval as you want it. Hold down the SHIFT key while dragging to constrain the oval to a circle. The Rectangle and PolyStar tools allow you to create rectangles and polygons. To switch between the Rectangle and PolyStar tools, click and hold the tool icon on the Tools panel, then select the desired tool from the menu that appears. Stroke width, style, and color, and fill color for rectangles and polygons can be changed in the Properties panel. In addition, for the PolyStar tool, the number of sides of a polygon, or points on a star, can be changed by clicking on Options in the Properties panel. To create a rectangle or polygon/star, simply click and drag across the stage to create the shape as you want it. While using the Rectangle tool, hold down the SHIFT key while dragging to constrain the rectangle to a square. While using the PolyStar tool, hold down the SHIFT key to constrain the orientation of the polygon or star to increments of 45. The Pencil tool is used to create lines and shapes on the stage in much the same way you would use a real pencil. Stroke width, style, and color can be changed in the Properties panel. To use the Pencil tool, click and drag across the stage to create a line. Note that you can end your drawing at the same place you started, but the shape you create is not filled in. Hold the SHIFT key while dragging to constrain the line to a horizontal or vertical direction. The Brush tool is used much like a paint brush. Click and drag across the stage to paint. The fill color can be changed in the Properties panel. Note that no stroke is produced when using the brush tool. Under the Options section of the Tools panel, you can change the brush size and shape. The Free Transform tool can be used to transform objects in a variety of ways. To use the tool, click on an object on the stage to reveal transform handles. Then, under the Options section of the Tools panel, choose the type of transformation you want to perform. Options include Rotate and Skew, Scale, Distort, and Envelope. Hold down the SHIFT key while rotating to constrain the angle to increments of 45. The Fill Transform tool allows you transform gradient and bitmap fills. To use it, click on an object that has a gradient or bitmap fill to reveal transform handles. Click and drag the circle handle in the center of the fill to move the gradient or bitmap. To change the width or height of a bitmap fill, or the scale of a gradient fill, click and drag the square handle along the edge of the fill bounding box. To rotate the fill, click and
7
MMAD LAB MANUAL
drag the circle handle on the corner of the bounding box. To change the radius of a circular gradient fill, click and drag the middle circle handle on the bounding circle of the fill. The Ink Bottle tool allows you to change the stroke color, width, and style of lines and shape outlines. To use it select the stoke width, style, and color you want to apply in the Properties panel, and click on one or more lines or shapes on the stage to apply the stroke properties to them. The Paint Bucket tool allows you to fill enclosed areas with color. To use it, select the solid color or gradient you want to apply in the Properties panel, and click on one or more enclosed shapes on the stage to fill them with color. Note that under the Options section of the Tools panel, you can choose how you want Flash to handle partially enclosed areas. The Eyedropper tool allows you to copy stroke and fill properties from one object to another. To use it, click on a stroke or fill of the object whose properties you want to copy. If you click on the fill, the Eyedropper tool automatically changes to the Paint Bucket tool, with fill properties set the same as the object you clicked on. If you click on the stroke, the Eyedropper tool automatically changes to the Ink Bottle tool, with stroke properties set the same as the object you clicked on. Now click on one or more objects on the stage to apply the stroke or fill properties. The Eraser tool allows you to erase objects on the stage. To quickly erase everything on the stage, double click the Eraser tool icon on the Tools panel. Note that you can change erasing options in the Options section of the Tools panel. The Hand tool is used for moving the view of the stage. It is especially useful when you have used the Zoom tool to magnify the stage. To use it, simply click and drag the stage in the direction you want it to move. To temporarily switch between another tool and the Hand tool, hold down the spacebar and click the Hand tool in the Tools panel. When done dragging, Flash will return to the tool you were using. The Zoom tool is used for magnifying or reducing the view of the stage. To use it, click anywhere on the stage to zoom in by a factor of two. Alternatively, you can click and drag to zoom into a region of the stage. Hold down the ALT key while clicking to zoom out by a factor of two. In addition to the drawing and view tools, the Tools panel allows you to modify the colors that are used to draw strokes and fills. The Stroke color is applied to lines and shape outlines. The Line, Pen, Oval, Rectangle, PolyStar, and Pencil tools all produce a stroke. The Fill color is applied to the interiors of shapes. The Pen (for closed paths), Oval, Rectangle, PolyStar and Brush tools all produce fills.
Stage Elements and Properties

The stage is the main working area for your drawings and animations. Anything on the stage will show when you play your movie, and anything off the stage will not appear in the movie. To set the stage and movie properties, press CTRL-J to access the Document Properties window. Here, you can set the frame rate of your movie, the dimensions of your movie in pixels, and the default background color of your movie. Keep in mind that the higher the frame-rate of your movie, the smoother it will play.
MMAD LAB MANUAL
Document Properties window

12 frames per second is sufficient for most Flash projects. For higher quality animations, 30 frames per second can be used. The default Flash movie dimensions are 550 pixels by 400 pixels. This can be adjusted to suit your larger web page. For example, Flash animations are often used in combination with HTML elements on a web page and you may need to change the size of the Flash animation to fit properly with the layout of the rest of the page Choose a background color that will be easy to work with, or set the background color after you are done with your Flash movie you dont want to stare at a high intensity color for too long while working.
Property
is a concept that is frequently encountered in Flash. An object or item contains sets of parameters that are configurable at any time. For instance, when you draw a red circle on the stage, it has: A fill color property of red A height and width property A rotation property of 0 degrees A stroke width property of 1 pixel, and so on. You can view the properties of any object on the stage in the Properties panel by selecting the object with the Selection tool. The type of object selected will affect the variety of properties that you can modify.
Layers
Flash provides a way to create layers in your animation. Using layers, you can organize the contents of an animation and separate different objects or groups of objects. As you work with your animation, you can hide layers to prevent the stage from getting cluttered and unwieldy, and / or you can lock layers to prevent accidental changes to the objects on them. Overall, layers are a very useful tool in organizing the objects in your Flash movie, and, particularly in the case of some animation techniques, are required for the animation to work properly. Never be concerned with creating too many layers; having too many layers is better than having too few. The layers are shown as a stacked order in the layers section of the Timeline panel, meaning that they are all physically stacked on top of one another on the stage. A higher-positioned layer will cover anything below it. Objects on lower-positioned layers will not be visible if there is a shape in a higher layer that is drawn on top of it.
MMAD LAB MANUAL
To add a new layer, click on the Insert Layer icon on the Timeline panel. This will insert a new layer directly above the layer that is currently selected.
Be sure to make it a habit of naming your layers for better organization. Double click the layer name to change it. You may also easily rearrange the order of your layers by clicking a layer and then dragging it to the selected location among the rest of the layers.
The Timeline
The Timeline is the essence of Flash. This is where your work comes alive in the form of animation. Although it may not be clear at first how the Timeline works, its use will become almost intuitive as you gain experience in working with Flash. The Timeline represents all the frames in your movie. Like a cell-animated cartoon, the illusion of movement is attained by rapidly displaying the contents of a sequence of frames, just like a flip-book animation. Flash can handle several different types of animation frame-by-frame, motion tweening, and shape tweening. All three animation techniques are conveyed by the Timeline. The Play head is the red rectangular marker located within the frame numbers. Its position designates which frame is currently displayed on the stage. To move the Play head, click and drag it left and right to see how your movie behaves.
10
MMAD LAB MANUAL
Introduction to Action Script

What Is Action Script?
Adds interactivity and/or playback efficiency to a movie via coding. Similar to JavaScript. Action Script is Flash built-in programming language. Action Script is an object-oriented programming language Action Script is the scripting language Flash uses to control its movies and the objects within those movies. If you want to do anything interactive in Flash, youll need to use Action Script. It allows you to execute different actions in a movie depending on what a user does or on what frame of the movie is being played.
Action Script looks a lot like JavaScript, which Macromedia (the folks who wrote Flash) did on purpose. A specification called ECMA-262 was written to provide an international standard for the JavaScript language. Action Script in Flash MX is based on the ECMA-262 specification, so if youve used Java-Script before, a lot of Action Script will look familiar to you. If you havent used JavaScript before, dont worryyoull get it. Throughout this book, Ill be referring to actions. This is a general term, and an action roughly means a chunk of Action-Script code that does something. The biggest leap in the abilities of Action Script occurred. When Flash 5 was released. Flash 6 is the next version, and while the additions to Action Script arent as grand in this version, they do round out Action Script into a full-fledged scripting Language. Check out Chapter 2 to find out precisely whats new in Flash MX.
What Is Action Script Good For?

Here does some of what you can do using Action Script:
Create multiplayer games. Create engaging, user-aware navigation. Send data to middleware, like PHP and Cold Fusion. Create and parse XML objects. Allow for a more responsive Web site. Make your site more accessible to readers. Make your site more international in scope (Flash MXsupports Unicode). Communicate with JavaScript.
What Action Script Cant Do

Action Script cant talk directly to a database-youll still need to use middleware, like PHP,
Cold Fusion, or ASP, to do that.

Action Script cant access the Window or Document objects that JavaScript can. You cant use exception handling with try, throw, or catch
11
MMAD LAB MANUAL
Objects and Object-Oriented Scripting

Both Action Script and JavaScript are called object-oriented scripting languages. Scripting languages organize information into groups called classes. You can create multiple instances of these classes, which are called objects. Classes and objects are just ways to group together chunks of information. To use a real-world analogy, you could create a bicycle class. That bicycle has lots of different properties to it, such as how many gears there are, how big the tires are, and what color it is. You can also perform some actions with the bike: You can, among other things, pedal, brake, and turn
(These are called methods). In Flash MX, all movie clips are objects (also called instances) of the class Movie Clip. Since all movie clips are objects of the same class, they all have the same properties and the same methods. Buttons are also objects.
Flash has a number of predefined objects you can access: Accessibility, Arguments, Array, Boolean, Button, Capabilities, Color, Components, Custom Actions, Date, FStyleFormat, Key,
LoadVars, Math, Mouse, Movie Clip , Number, Object, Selection, Sound, Stage, System, String, Text field, TextFormat, XML, and XMLSocket.
12
MMAD LAB MANUAL
Week2:
Experiment: 1 Objective: Write a Script that creates an object and assign actions (ex: object-----circle)
Procedure: 1) open a new flash document 2) draw an object(circle) using tool box and assign instance name as cir 3) write the below actions in action panel(press F9 to open action panel) cir._x =_root._xmouse; cir._y= _root._ymouse; 4) test the movie(ctrl+Enter) Conclusion: object is created and assigned actions are obtained.
Experiment: 2 Objective: Write a Script that creates looping effect for an object (ex: object-----circle)
Procedure: 1) open flash document 2) create one object using tool box and assign instance name as cir 3) write the below actions in action panel (press F0 to open action panel) cir.onEnterFrame=function() { xdist=_xmouse-290; ydist=_ynmouse-190; j=0; while(j<0) { j++; _root[circle+j+_mc]._x=290+(xdist+j/10); _ root[circle+j+_mc]._x=290+(ydist+j/10); } } var i:NUMBER=0; var j:NUMBER=0; var xdist:NUMBER=0; var ydist:NUMBER=0; while(i<0) { i++; duplicateMovieclip(circle,circle+i+_mc,i); }
13
MMAD LAB MANUAL
Conclusion: Looping effect for an object is obtained
Week3: Experiment: 3 Objective: Write a Script that generates Random Numbers

Procedure: 1) Open a new flash document 2) Create one dynamic text field on the stage by using tools in the tool box a) Select text tool (A tool) b) Select it and click on properties. Select dynamic text from dropdown menu c) give the variable name as Rrandom 3) Create a button on stage a) Draw a shape rectangle or oval or circle. b) Convert into symbol(press F8) c) Select type as button d) Select propertied panel and give instance name to button. 4) Select the button and open the action panel(press F9), write the below code on(release) { Random=Math.random(100)+1; //100 is any number. i,e.. with in that range, numbers will be displayed randomly } 5) test the movie Conclusion: Random Numbers are obtained.
Experiment: 4 Objective: write a script that creates a function and calling a function (Ex : for button
click) Procedure: 1) open a flash document 2) draw a shape(button) convert into button(press F8--> select type=button) 3) create one dynamic text field and assign variable name as name 4) write the below actions in action panel to button on(press) { myName=function() { name=MVGR;
14
MMAD LAB MANUAL
} trace(myname()); trace(function is called); } conclusion : function is crated and is called.ouput is displayed in pout put panel
Week 4: Experiment: 5 Objective: Detecting the Player version of Flash

Procedure: 1) Open new flash document 2) open the action panel and write the below code playerVersion = eval("$version"); myLength = length(playerVersion); while (i <= myLength) { i = i + 1; temp = substring(playerVersion, i, 1); if (temp eq " ") { platform = substring(playerVersion, 1, i-1); majorVersion = substring(playerVersion, i + 1, 1); secondHalf = substring(playerVersion, i + 1, myLength - i); revision = substring(secondHalf, 5, 2); trace("platform " + platform); trace("majorVersion " + majorVersion); trace("secondHalf " + secondHalf); trace("revision " + revision); } } //version (platform, major Version, second Half, revision) will be displayed in output Panel 3) Test the movie Conclusion: Flash Player version is detected
15
MMAD LAB MANUAL
Experiment: 6 Objective: Detecting the operating System of a device in which the movie is being
displayed Procedure: 1) Open New Flash Document 2) Create one dynamic text field on the stage by using tools in the tool box a) Select text tool (A tool) b) Select it and click on properties. Select dynamic text from dropdown c) give the variable name as lang 3) Open the action panel(press F9) and the write the below code lang = = System.capabilities.Languge; 4) test the movie(ctrl+ENTER) Conclusion: Operating system of a device is detected
menu
16
MMAD LAB MANUAL
Week 5: Experiment: 7 Objective: Checking the display language of a device in which the movie is being
displayed Procedure: 1) Open New Flash Document 2) Create one dynamic text field on the stage by using tools in the tool box a) Select text tool (A tool) b) Select it and click on properties. Select dynamic text from dropdown c) give the variable name as myos 3) Open the action panel(press F9) and the write the below code myos = System.capabilities.OS; 4) test the movie(ctrl+ENTER) Conclusion: Display Language of a device is detected
menu
Experiment: 8 Objective: Detecting display settings of a device, in which the movie is being displayed.
Procedure: 1) Open New Flash Document 2) Create one object on the stage by using tools in the tool box(ex: circle or 3) Open the action panel(press F9) and the write the below code
trace(System.capabilities.screenResolutionX);
rectangle)
trace(System.capabilities.screenResolutionY); // Display settings ll be displayed in output panel 4) test the movie(ctrl+ENTER) Conclusion: Display Settings of a device are detected
17
MMAD LAB MANUAL
Week 6: Movie Clip Class:

Movie clips are self-contained SWF files that run independently of each other and the Timeline that contains them. For example, if the main Timeline has only one frame and a movie clip in that frame has ten frames, each frame in the movie clip plays when you play the main SWF file. A movie clip can, in turn, contain other movie clips, or nested clips. Movie clips nested in this way have a hierarchical relationship, where the parent clip contains one or more child clips. You can name movie clip instances to uniquely identify them as objects that can be controlled with Action Script. When you give a movie clip instance an instance name, the instance name identifies it as an object of the Movie Clip class type. You use the properties and methods of the Movie Clip class to control the appearance and behavior of movie clips at runtime. You can think of movie clips as autonomous objects that can respond to events, send messages to other movie clip objects, maintain their state, and manage their child clips. In this way, movie clips provide the foundation of component-based architecture in Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004. In fact, the components available in the Components panel (Window > Development Panels > Components) are sophisticated movie clips that have been designed and programmed to look and behave in certain ways. For information on creating components, see Creating Components in Using Components.
Creating an empty movie clip

To create a new, empty movie clip instance on the Stage, use the createEmptyMovieClip() method of the MovieClip class. This method creates a movie clip as a child of the clip that calls the method. The registration point for a newly created empty movie clip is the upper left corner. For example, the following code creates a new child movie clip named new_mc at a depth of 10 in the movie clip named parent_mc: parent_mc.createEmptyMovieClip("new_mc", 10); The following code creates a new movie clip named canvas_mc on the root Timeline of the SWF file in which the script is run, and then invokes loadMovie() to load an external JPEG file into itself: this.createEmptyMovieClip("canvas_mc", 10); canvas_mc.loadMovie("flowers.jpg");
Duplicating or removing a movie clip

To duplicate or remove movie clip instances, use the duplicateMovieClip() or removeMovieClip() global functions, or the MovieClip class methods of the same name. The duplicateMovieClip() method creates a new instance of an existing movie clip
18
MMAD LAB MANUAL
instance, assigns it a new instance name, and gives it a depth, or z-order. A duplicated movie clip always starts at Frame 1, even if the original movie clip was on another frame when duplicated and is always in front of all previously defined movie clips placed on the Timeline. To delete a movie clip you created with duplicateMovieClip(), use removeMovieClip(). Duplicated movie clips are also removed if the parent movie clip is deleted. For more information, see duplicateMovieClip() and removeMovieClip() in Flash ActionScript Language Reference.
About controlling movie clips with ActionScript

You can use global ActionScript functions or the methods of the MovieClip class to perform tasks on movie clips. Some MovieClip methods perform the same tasks as functions of the same name; other MovieClip methods, such as hitTest() and swapDepths(), dont have corresponding function names. The following example shows the difference between using a method and using a function. Each statement duplicates the instance my_mc, names the new clip newClip, and places it at a depth of 5. my_mc.duplicateMovieClip("newClip", 5); duplicateMovieClip("my_mc", "newClip", 5); When a function and a method offer similar behaviors, you can select to control movie clips by using either one. The choice depends on your preference and your familiarity with writing scripts in ActionScript. Whether you use a function or a method, the target Timeline must be loaded in Flash Player when the function or method is called. To use a method, invoke it by using the target path of the instance name, a dot (.), and then the method name and parameters, as shown in the following statements: myMovieClip.play(); parentClip.childClip.gotoAndPlay(3); In the first statement, play() moves the playhead in the myMovieClip instance. In the second statement, gotoAndPlay() sends the playhead in childClip (which is a child of the instance parentClip) to Frame 3 and continues to move the playhead. Global functions that control a Timeline have a target parameter that let you specify the target path to the instance that you want to control. For example, in the following script startDrag() targets the instance the code is placed on and makes it draggable: my_mc.onPress = function() { startDrag(this); }; my_mc.onRelease = function() { stopDrag(); }; The following functions target movie clips:
19
MMAD LAB MANUAL
loadMovie(), unloadMovie(), l oadVariables(), setProperty(), startDrag(), duplicateMovieClip(), and removeMovieClip(). To use these functions, you must enter a target path for the functions target parameter to indicate the target of the function. The following MovieClip methods can control movie clips or loaded levels and do not have equivalent functions: MovieClip.attachMovie() MovieClip.createEmptyMovieClip() MovieClip.createTextField() MovieClip.getBounds() MovieClip.getBytesLoaded() MovieClip.getBytesTotal() MovieClip.getDepth() MovieClip.getInstanceAtDepth() MovieClip.getNextHighestDepth() MovieClip.globalToLocal() MovieClip.localToGlobal() MovieClip.hitTest() MovieClip.setMask() MovieClip.swapDepths()
Experiment: 9 Objective: Create a Flash Movie that Tints a Movie Clips color using action Script
Procedure: 1) Open a new a flash document. 2) Begin by importing an image to the stage using File->Import To Stage. Convert it to a movie clip by right clicking the image and clicking Convert to Symbol. Set the type to Movie Clip. 3) Select the movie clip by single clicking it and insert the following code into the actions tab: 4) onClipEvent(load) 5) { 6) //Import the classes needed to transform the color 7) import flash.geom.ColorTransform; 8) import flash.geom.Transform;
20
MMAD LAB MANUAL
9) //A starting amount to tint the image 10) redamount = 0; 11) //Is the image getting more red or more blue? 12) goingred = true; 13) } 14) //Run at the start of each frame 15) onClipEvent(enterFrame) { 16) //if going red is set to true, set the color transform to tint the image more red 17) if (goingred) { 18) redamount++; 19) //otherwise, it is getting more blue 20) } else { 21) redamount--; 22) } 23) //the boundaries. If a limit (0 or 64) has been reached, flip from going red to going blue 24) if (redamount == 0 || redamount == 64) { 25) goingred = !goingred; 26) } 27) //Declare a new ColorTransform object 28) var colorTrans:ColorTransform = new ColorTransform(); 29) //Set the red offset to the specified amount. Higher is stronger 30) colorTrans.redOffset = redamount; 31) //when the red offset is low, the blue offset is high, and vice versa. 32) colorTrans.blueOffset = 64-redamount; 33) //Create a new Transform object. This is attached to the movieclip 'tintedimage' 34) var trans:Transform = new Transform(this); 35) //apply the color transform to the transform object 36) trans.colorTransform = colorTrans; 37) } 3) Test the Movie (ctrl+ENTER) Conclusion: A movie which tints a movie clip is obtained
Experiment 10 Objective: Write an ActionScript that Controlls a Movie Clips color with sliders
Procedure: 1. Create a new Flash document and save it.
2. On the main timeline, rename the default layer as movieClips and create a new layer named actions.
21
MMAD LAB MANUAL
3. Create a movie clip symbol and draw a circle in it. The circle should be approximately 120 x 120 pixels. 4. Return to the main timeline and create an instance of the circle movie clip on the Stage on the movieClips layer. Place the instance on the left side of the Stage. Name the instance circle_mc using the Property inspector. 5. Open the Components panel (Window Components) and drag four instances of the ScrollBar component onto the Stage on the movieClips layer. Name these instances red_sb, green_sb, blue_sb, and alpha_sb. Line them up horizontally on the right side of the Stage. 6. Select the keyframe of the actions layer and open the Actions panel. 7. Add the following code to the Actions panel and test the movie (Control Test Movie). The scrollbars are automatically colorized to indicate the color components they control. Moving the thumb sliders on the scrollbars adjusts the circle's color. // Define a function that will initialize the scrollbar instances as sliders to // control the color values. function initSliders ( ) { // First, set the scroll properties of each of the scrollbars. For the red, // green, and blue scrollbars, the values should range from 0 to 255. Use a // pageSize of 120 for the color sliders to create a proportional thumb bar. // The alpha range is from 0 to 100, and so the pageSize should be 47 to create // a thumb bar that is proportional with the other sliders. red_sb.setScrollProperties (120, 0, 255); green_sb.setScrollProperties(120, 0, 255); blue_sb.setScrollProperties (120, 0, 255); alpha_sb.setScrollProperties(47, 0, 100); // Colorize the sliders themselves. Make the red_sb slider red and, similarly, // make green_sb green and blue_sb blue. Make the alpha_sb slider white. red_sb.setStyleProperty ("face", 0xFF0000); green_sb.setStyleProperty("face", 0x00FF00); blue_sb.setStyleProperty ("face", 0x0000FF); alpha_sb.setStyleProperty("face", 0xFFFFFF);
22
MMAD LAB MANUAL
// Set the initial position for the color sliders. alpha_sb remains at 100%. red_sb.setScrollPosition (127); green_sb.setScrollPosition(127); blue_sb.setScrollPosition (127); } function initColor ( ) { // Store a new Color object in a property of circle_mc. my_color = new Color(circle_mc); circle_mc.col = my_color; // Store references to the four scrollbars as properties of circle_mc. circle_mc.red = red_sb; circle_mc.green = green_sb; circle_mc.blue = blue_sb; circle_mc.alpha = alpha_sb; } // Initialize the sliders and the Color object. initSliders( ); initColor( ); // Update the color of the circle_mc movie clip based on the slider positions. circle_mc.onEnterFrame = function ( ) { // Retrieve the current position of the color and alpha sliders. var r = 255 - this.red.getScrollPosition( ); var g = 255 - this.green.getScrollPosition( ); var b = 255 - this.blue.getScrollPosition( ); var a = 100 - this.alpha.getScrollPosition( ); // Set up the transformation object properties to set circle_mc's color. transformObj = new Object( ); transformObj.ra = 0; transformObj.rb = r; transformObj.ga = 0; transformObj.gb = g; transformObj.ba = 0; transformObj.bb = b; transformObj.aa = a; transformObj.ab = 0; this.col.setTransform(transformObj); } Conclusion: A movie which controls a Movie clips color with sliders is obtained.
23
MMAD LAB MANUAL
Week 7: The Flash Drawing API

Beginning with Flash MX, Macromedia has provided the ability for coders to programmatically create their own movieclips within a Flash movie at runtime, and give them a defined shape using the Drawing API (Application Programmer Interface). This consists of a set of commands (MovieClip methods) to create movieclips (and movieclips within movieclips) that contain shapes made of strokes and fills. Those commands are:

createEmptyMovieClip, to create a blank movieclip lineStyle, to define the stroke of the drawn movieclip beginFill, to define the fill color and transparency of the drawn movielcip beginGradientFill, to define a gradient fill and transparency endFill, to close a drawn object and apply the fill set in beginFill moveTo, to define a start point for the drawn movieclip lineTo, to draw a line from the current spot to the specified new one curveTo, to draw a curve from the current spot to the specified new one setMask(movieclip), masks the movie clip
Experiment No: 11 Objective: create a movie that draws a circle dynamically(using ActionScript)
Procedure: 1) Open a New Flash Documemt 2) Write the below ActionScript at Frame 1 of Layer 1
// r = radius of circle // x, y = center of circle MovieClip.prototype.drawCircle = function (r, x, y) { var TO_RADIANS:Number = Math.PI/180; // begin circle at 0, 0 (its registration point) -- move it when done this.moveTo(0, 0); this.lineTo(r, 0); // draw 12 30-degree segments // (could do more efficiently with 8 45-degree segments) var a:Number = 0.268; // tan(15) for (var i=0; i < 12; i++) { var endx = r*Math.cos((i+1)*30*TO_RADIANS); var endy = r*Math.sin((i+1)*30*TO_RADIANS); var ax = endx+r*a*Math.cos(((i+1)*30-90)*TO_RADIANS); var ay = endy+r*a*Math.sin(((i+1)*30-90)*TO_RADIANS); this.curveTo(ax, ay, endx, endy); 24
DEPARTMENT OF INFORMATION TECHNOLOGY } this._x = x; this._y = y; } // use the method to draw a circle in movieclip c // at x=100, y=100 with a 70-pixel radius createEmptyMovieClip("c", 1); c.beginFill(0x000055, 60); c.drawCircle(70, 100, 100); c.endFill();
MMAD LAB MANUAL
(OR) // r1 = radius of outer circle // r2 = radius of inner circle (cutout) // x, y = center of donut // This creates a donut shape that can be used as a mask MovieClip.prototype.drawDonut2 = function (r1, r2, x, y) { var TO_RADIANS:Number = Math.PI/180; this.moveTo(0, 0); this.lineTo(r1, 0); // draw the 30-degree segments var a:Number = 0.268; // tan(15) for (var i=0; i < 12; i++) { var endx = r1*Math.cos((i+1)*30*TO_RADIANS); var endy = r1*Math.sin((i+1)*30*TO_RADIANS); var ax = endx+r1*a*Math.cos(((i+1)*30-90)*TO_RADIANS); var ay = endy+r1*a*Math.sin(((i+1)*30-90)*TO_RADIANS); this.curveTo(ax, ay, endx, endy); } // cut out middle (go in reverse) this.moveTo(0, 0); this.lineTo(r2, 0); for (var i=12; i > 0; i--) { var endx = r2*Math.cos((i-1)*30*TO_RADIANS); var endy = r2*Math.sin((i-1)*30*TO_RADIANS); var ax = endx+r2*(0-a)*Math.cos(((i-1)*30-90)*TO_RADIANS); var ay = endy+r2*(0-a)*Math.sin(((i-1)*30-90)*TO_RADIANS); this.curveTo(ax, ay, endx, endy); } 3) test the movie. Conclusion: A Movie that creates a Circle (dynamically) is obtained.
25
MMAD LAB MANUAL
Experiment No: 12 Objective: create a movie that draws a Rectangle dynamically (using Action Script)
Procedure: 1) Open A New Flash Document 2) Write the below ActionScript code at Frame 1 of Layer 1
// Create rectangle_mc with a depth of 1 on the main timeline. _root.createEmptyMovieClip("rectangle_mc", 1);
rectangle_mc.lineStyle(1, 0x000000, 100);
// Draw four lines to form the perimeter of the rectangle. rectangle_mc.lineTo(100, 0); rectangle_mc.lineTo(100, 50); rectangle_mc.lineTo( 0, 50); rectangle_mc.lineTo( 0, 0); 3) test the movie.
Conclusion: A Movie that creates a Rectangle (dynamically) is obtained
26
MMAD LAB MANUAL
Week 8: Experiment No: 13 Objective: create a movie that fills a Shape with Gradient Effect (using Action Script
Procedure 1) Open A New Flash Document 2) Click on the first key frame then open the actions panel" and write the below code fillType = "linear"; colors = [0xF83680, 0x5844EA]; alphas = [100, 100]; ratios = [0, 255]; matrix = {matrixType:"box", x:50, y:50, w:150, h:100, r:0/180*Math.PI}; _root.lineStyle(2, 0x666666, 100); _root.beginGradientFill(fillType, colors, alphas, ratios, matrix); _root.moveTo(50, 50); _root.lineTo(200, 50); _root.lineTo(200, 150); _root.lineTo(50, 150); _root.lineTo(50, 50); _root.endFill(); 3) Save it and Test the move(Ctrl+ENTER). Conclusion: A Movie that creates a shape with Gradient Effect is obtained
Experiment No: 14 Objective: create a movie with Masking Effect (using Action Script
Procedure 1) Start a new Flash file, set the canvas size to 550x400, the frame rate to 20 fps, and the background
colour as white. 2) Add two more layers to the time line to have a total of three, name them as mask art work, mask, actions respectively 3) click once on the "Masked Artwork" layer on the timeline, it should get highlighted in blue. Now import the image that youwant to apply mask, into the stage 4) The image that we have used has been trimmed to fit the canvas we created perfectly. Click on our image to select it. Convert the image to a Movie Clip symbol to be able to manipulate it via ActionScript. Once your image is selected go under Modify and select Convert to Symbol. An
27
MMAD LAB MANUAL
option panel should pop up, make sure you choose the option Movie Clip. The name that you put here does not matter, put "keyboard_image", click on "OK" once you are done 5) give our movie clip instance name so that we can refer to it when writing the code in ActionScript. Using the Properties panel set the instance name of the keyboard movie clip as "masked_mc". 6) click once on the layer named "Mask", use the Oval tool to draw a circle on the canvas, the position and colour of what you draw does not matter, the size is a matter of preference. You may want to hold down "Shift" while you draw your circle to have a perfect circle.
7) Double click on your circle to select the whole of it (including the outline!), now convert this to a
movie clip (Modify>Convert to Symbol). You will then have to use the Properties panel to give your symbol the instance name "myMask_mc".
8) select the layer named "ActionScript" then access the ActionScript panel (simply hit F9 on your
keyboard or go under Window > Developer Panels > ActionScript).
9) masked_mc.setMask("myMask_mc");
myMask_mc.startDrag(true); // The boolean value "true" is used to lock the mouse to the centre of the mask.
10) Test the movie (OR) 1) First of all, find any photo which you like to use for this lesson. 2) Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of photo. Select any color as background color. Set your Flash movie's frame rate to 32 and click ok. 3) Choose file > Import > Import to stage (Shortcut key: Ctrl+R) and import any photo intoflashstage 4) While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following: 1.Make sure that the Align/Distribute to Stage button is turned on,
28
MMAD LAB MANUAL
2.Click on the Align 3.Click the Align vertical center button.
horizontal
center
button
and
5) While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo intoaMovieClipSymbol. 6) While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clipphoto. 7) While the circle is still selected, press F8 key (Convert to Symbol) to convert this circle intoaMovieClipSymbol 8) While the new made Movie Clip is still selected, go again to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this MovieClipmask. 9) Create a new layer above the layer mask and name it action. 10) Select the first frame of layer action, go to the Properties Panel (Ctrl+F3) below the stageandenterthiscode: stop(); photo.setMask(mask); mask.onPress=function() { startDrag(this); } mask.onRelease=function() { stopDrag(); } 11)Test the Movie (Ctrl+Enter).
Conclusion: A Movie with Masking Effect is obtained
29
MMAD LAB MANUAL
Week 9: Math Class (Derived From Object Class):

public class Math extends Object The Math class is a top-level class whose methods and properties you can use without using a constructor. Use the methods and properties of this class to access and manipulate mathematical constants and functions. All the properties and methods of the Math class are static and must be called using the syntax Math.method(parameter) or Math.constant. In ActionScript, constants are defined with the maximum precision of double-precision IEEE-754 floating-point numbers. Several Math class methods use the measure of an angle in radians as a parameter.You can use the following equation to calculate radian values before calling the method and then provide the calculated value as the parameter, or you can provide the entire right side of the equation (with the angle's measure in degrees in place of degrees) as the radian parameter. To calculate a radian value, use the following formula: radians = degrees * Math.PI/180 The following is an example of passing the equation as a parameter to calculate the sine of a 45 angle: Math.sin(45 * Math.PI/180) is the same as Math.sin(.7854) Availability: ActionScript 1.0; Flash Lite 2.0 - In Flash Player 4, the methods and properties of the Math class are emulated using approximations and might not be as accurate as the non-emulated math functions that Flash Player 5 supports.
30
MMAD LAB MANUAL
Property summary Modifiers Property Static Static E:Number LN10:Number Description A mathematical constant for the base of natural logarithms, expressed as e. A mathematical constant for the natural logarithm of 10, expressed as loge10, with an approximate value of 2.302585092994046. A mathematical constant for the natural logarithm of 2, expressed as loge2, with an approximate value of 0.6931471805599453. A mathematical constant for the base-10 logarithm of the constant e (Math.E), expressed as log10e, with an approximate value of 0.4342944819032518. A mathematical constant for the base-2 logarithm of the constant e (Math.E), expressed as log2e, with an approximate value of 1.442695040888963387. A mathematical constant for the ratio of the circumference of a circle to its diameter, expressed as pi, with a value of 3.141592653589793. A mathematical constant for the square root of one-half, with an approximate value of 0.7071067811865476. A mathematical constant for the square root of 2, with an approximate value of 1.4142135623730951.
Static Static
LN2:Number LOG10E:Number
static
LOG2E:Number
Static
PI:Number
Static Static
SQRT1_2:Number SQRT2:Number
Properties inherited from class Object constructor (Object.constructor property), __proto__ (Object.__proto__ property), prototype (Object.prototype property), __resolve (Object.__resolve property)
Method summary Modifiers Signature Description

31
MMAD LAB MANUAL
Static Static Static Static Static
abs(x:Number) : Number acos(x:Number) : Number asin(x:Number) : Number atan(tangent:Number) : Number atan2(y:Number, x:Number) : Number ceil(x:Number) : Number cos(x:Number) : Number exp(x:Number) : Number floor(x:Number) : Number log(x:Number) : Number
Computes and returns an absolute value for the number specified by the parameter x. Computes and returns the arc cosine of the number specified in the parameter x, in radians. Computes and returns the arc sine for the number specified in the parameter x, in radians. Computes and returns the value, in radians, of the angle whose tangent is specified in the parameter tangent. Computes and returns the angle of the point y/x in radians, when measured counterclockwise from a circle's x axis (where 0,0 represents the center of the circle). Returns the ceiling of the specified number or expression. Computes and returns the cosine of the specified angle in radians. Returns the value of the base of the natural logarithm (e), to the power of the exponent specified in the parameter x. Returns the floor of the number or expression specified in the parameter x. Returns the natural logarithm of parameter x.
Static static Static Static Static Static Static Static Static Static Static Static
max(x:Number, y:Number) : Evaluates x and y and returns the larger value. Number min(x:Number, y:Number) : Evaluates x and y and returns the smaller value. Number pow(x:Number, y:Number) : Computes and returns x to the power of y. Number random() : Number Returns a pseudo-random number n, where 0 <= n < 1.
round(x:Number) : Number Rounds the value of the parameter x up or down to the nearest integer and returns the value. sin(x:Number) : Number sqrt(x:Number) : Number Computes and returns the sine of the specified angle in radians. Computes and returns the square root of the specified
32
MMAD LAB MANUAL
number. Static tan(x:Number) : Number Computes and returns the tangent of the specified angle.
Methods inherited from class Object addProperty (Object.addProperty method), hasOwnProperty (Object.hasOwnProperty method), isPropertyEnumerable (Object.isPropertyEnumerable method), isPrototypeOf (Object.isPrototypeOf method), registerClass (Object.registerClass method), toString (Object.toString method), unwatch (Object.unwatch method), valueOf (Object.valueOf method), watch (Object.watch method)
Experiment: 15 Objective: Write an ActionScript for converting angle measurements (Ex: Radians/Degrees
to Degrees/Radians) Procedure: 1) Open new flash document 2) Create two dynamic input text fields and assign variable names as rad and deg respectively 3) Create one button, to calculate the values when pressing the button. and assign and assign instance name as btn 4) Write the below action in action panel btn.onRelease=function() { if(deg) { rad=a=deg* Math.PI/180; } else { deg=(rad*180)/Math.PI; } } Conclusion: Converted value (Radians/Degrees) for the input value (Degrees/Radians) is obtained .
Experiment: 16 Objective: Write an ActionScript for calculating the distance between two points
stage( Ex draw a triangele and find the distance between edges) Procedure: on the
33
MMAD LAB MANUAL
1) open a new flash document 2) create 3 dynamic textfield using tool box, and assign instance name as da, db,dc respectively 3) write the below actions in actions panel of layer1 _root.onenterFrame=function() { xmid=Stage.width/2; ymid=Stage.height/2; a=_root._ymaouse ymid; b= _root._xmouse-xmid; c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2)); da.text=Math.roun(a); db.tex=Math.round(b); dc.text=Math.round(c); this.createEmptymovieclip(tr,2); tr.beginFill(ox0000FF,5); tr.lineStyle(2,ox9900CC,25); tr.miveTo(xmid,ymid); tr.linrTo(_root._xmouse,_root._ymouse);/ tr.lineStyle(2,ox0000FF,25); tr.lineTo(xmid,_root._ymouse); tr.lineStyle(2,oxFF0000,25); tr.lineTo(xmid,ymid); tr.endFill(); } Conclusion: Distances between the edges of triangle are obtained
Week 10: Experiment: 17 Objective: Write an Action Script that Formats Currency Amount
Procedure:
34
MMAD LAB MANUAL
1) open New Flash document 2) write the below code in action panel function formatAsDollars(amount:Number):String { // return a 0 dollar value if amount is not valid // (you may optionally want to return an empty string) if (isNaN(amount)) { return "$0.00"; } // round the amount to the nearest 100th amount = Math.round(amount*100)/100; // convert the number to a string var amount_str:String = String(amount); // split the string by the decimal point, separating the // whole dollar value from the cents. Dollars are in // amount_array[0], cents in amount_array[1] var amount_array = amount_str.split("."); // if there are no cents, add them using "00" if (amount_array[1] == undefined) { amount_array[1] = "00"; } // if the cents are too short, add necessary "0" if (amount_array[1].length == 1) { amount_array[1] += "0"; } // add the dollars portion of the amount to an // array in sections of 3 to separate with commas var dollar_array:Array = new Array(); var start:Number; var end:Number = amount_array[0].length; while (end>0) { start = Math.max(end-3, 0); dollar_array.unshift(amount_array[0].slice(start, end)); end = start; } // assign dollar value back in amount_array with // the a comma delimited value from dollar_array amount_array[0] = dollar_array.join(",");
35
MMAD LAB MANUAL
// finally construct the return string joining // dollars with cents in amount_array return ("$"+amount_array.join(".")); } _root.onEnterFrame = function() { text_two.text = (formatAsDollars(text_one.text)); }; trace(formatAsDollars(12345));// returns $12,345.00 trace(formatAsDollars(123.45));// returns $123.45 trace(formatAsDollars(1.2345));// returns $1.23 trace(formatAsDollars(565998986));// returns $0.00 3) Test the movie (ctrl+ENTER) Conclusion: formattaed value for the input currency value is obtained
Experiment: 18 Objective: Write an ActionScript for converting between units of measurements (Ex:
Temperature converter) Procedure: 1) open New Flash document 2) Create 3 text fields (input and dynamic) on stage to give the value and to retrive the value. 3) Give the instance names to them as t1 and t2 , t3respectively 4) Create one button and give instance name to it as btn 5) Create new layer name it actions. In this layer add the below code for onPress function. Fmeasure= t1.text; Tmeasure=t2.text; Btn.onPress=function() { Math.convertTemperature = function (fMeasure, tMeasure, val) { // Convert all names to lowercase to match any capitalization. fMeasure = fMeasure.toLowerCase( ); tMeasure = tMeasure.toLowerCase( ); if ( (fMeasure == "centigrade" || fMeasure == "celsius" || fMeasure == "c") && (tMeasure == "fahrenheit" || tMeasure == "f") ) { // Convert Centigrade to Fahrenheit. return (val * 9/5) + 32;
36
MMAD LAB MANUAL
} else if ( (fMeasure == "fahrenheit" || fMeasure == "f") && (tMeasure == "centigrade" || tMeasure == "celsius" || tMeasure == "c") ) { // Convert Fahrenheit to Centigrade. return (val - 32) * 5/9; } else { T3.text = trace ("Invalid conversion type from " + fMeasure + " to " + tMeasure); return NaN; } } }; 6) test the movie Conclusion: Converted value(farhenheet) for the input value(degrees) is obtained
Week 11: Experiment: 19 Objective: Write an ActionScript for calculating the co-ordinates alongs a circle on the
stage. Procedure:
37
MMAD LAB MANUAL
1) Open a new document 2) In layer 1, draw a circle , and covert into movieclip symbol(press F8). 3) Give the instance name to movie clip as knob 4) Double click the movie clip and draw a new circle in another layer and back to scene 1 5) Create a a new layer create two dynamic text fields to disply the co ordinates and assign instance names as da and db respectively. 6} create a new layer name it as actions. write the below actions in action panel at this layer knob.onPress=function()// while pressing the circle ( dragging =true; a= _root._ymouse-knob._y; //y co-ordinate b=_root._xmouse-knob._x; //x co-ordinate } knob.onRlease=knob.onReleaseOutside=function() { dragging= false; } knob.onEnterFrame=function() { if(dragging) { a= _root._ymouse-knob._y; //y co-ordinate b=_root._xmouse-knob._x; //x co-ordinate da.text=a; db.text=b; } } knob.onDragout=function() { dragging=false; } conclusion: Co-ordinates along a circle are obtained when the circle is pressed and the mouse is dragged over the circle
Arrays:
An array is a collection of pieces of data all of the same type (typically, but the compiler doesn't check for that) that are accessible by a numeric index.
38
MMAD LAB MANUAL
For example, the strings "linguine", "spaghetti", and "ziti" might all be stored in an array named pasta, and if stored in that order, the first element would be accessible as pasta[0] (the indexing always starts with 0) and the last would be pasta[2]. Methods: sort (Array.sort method) Syntax: public sort([compareFunction:Object], [options:Number]) : Array Sorts the elements in an array. Flash sorts according to Unicode values. (ASCII is a subset of Unicode.) By default, Array.sort() works as described in the following list: Sorting is case-sensitive (Z precedes a). Sorting is ascending (a precedes b). The array is modified to reflect the sort order; multiple elements that have identical sort fields are placed consecutively in the sorted array in no particular order. NOTE: Numeric fields are sorted as if they were strings, so 100 precedes 99, because "1" is a lower string value than "9". If you want to sort an array by using settings that deviate from the default settings, you can either use one of the sorting options described in the entry for the options parameter or you can create your own custom function to do the sorting. If you create a custom function, you can use it by calling the sort() method, using the name of your custom function as the first parameter (compareFunction). Parameters: compareFunction:Object [optional] - A comparison function used to determine the sorting order of elements in an array. Given the elements A and B, the result of compareFunction can have one of the following three values: -1, if A should appear before B in the sorted sequence 0, if A equals B 1, if A should appear after B in the sorted sequence options:Number [optional] - One or more numbers or names of defined constants, separated by the | (bitwise OR) operator, that change the behavior of the sort from the default. The following values are acceptable for the options parameter:
39
MMAD LAB MANUAL
Array.CASEINSENSITIVE or 1 Array.DESCENDING or 2 Array.UNIQUESORT or 4 Array.RETURNINDEXEDARRAY or 8 Array.NUMERIC or 16
sortOn (Array.sortOn method)
public sortOn(fieldName:Object, [options:Object]) : Array Sorts the elements in an array according to one or more fields in the array. The array should have the following characteristics:

The array is an indexed array, not an associative array. Each element of the array holds an object with one or more properties.
All of the objects have at least one property in common, the values of which can be used to sort the array. Such a property is called a field. If you pass multiple fieldName parameters, the first field represents the primary sort field, the second represents the next sort field, and so on. Flash sorts according to Unicode values. (ASCII is a subset of Unicode.) If either of the elements being compared does not contain the field specified in the fieldName parameter, the field is assumed to be undefined, and the elements are placed consecutively in the sorted array in no particular order. By default, Array.sortOn() works as described in the following list:

Sorting is case-sensitive (Z precedes a). Sorting is ascending (a precedes b).
40
MMAD LAB MANUAL
The array is modified to reflect the sort order; multiple elements that have identical sort fields are placed consecutively in the sorted array in no particular order.

Numeric fields are sorted as if they were strings, so 100 precedes 99, because "1" is a lower string value than "9". You can use the options parameter to override the default sort behavior. If you want to sort a simple array (for example, an array with only one field), or if you want to specify a sort order that the options parameter doesn't support, use Array.sort(). To pass multiple flags, separate them with the bitwise OR (|) operator: my_array.sortOn(someFieldName, Array.DESCENDING | Array.NUMERIC);
Parameters fieldName:Object
- A string that identifies a field to be used as the sort value, or an array in which the
first element represents the primary sort field, the second represents the secondary sort field, and so on. options:Object [optional] - One or more numbers or names of defined constants, separated by the | (bitwise OR) operator, that change the sorting behavior. The following values are acceptable for the options parameter:

Array.CASEINSENSITIVE or 1 Array.DESCENDING or 2 Array.UNIQUESORT or 4 Array.RETURNINDEXEDARRAY or 8 Array.NUMERIC or 16
Returns Array - The return value depends on whether you pass any parameters, as described in the following list:
41
MMAD LAB MANUAL
If you specify a value of 4 or Array.UNIQUESORT for the options parameter, and two or more elements being sorted have identical sort fields, Flash returns a value of 0 and does not modify the array.
If you specify a value of 8 or Array.RETURNINDEXEDARRAY for the options parameter, Flash returns an array that reflects the results of the sort and does not modify the array.

Otherwise, Flash returns nothing and modifies the array to reflect the sort order.
UNIQUESORT (Array.UNIQUESORT property)
Syntax: public static UNIQUESORT : Number Represents the unique sorting requirement. You can use this constant for the options parameter in the sort() or sortOn() method. The unique sorting option aborts the sort if any two elements or fields being sorted have identical values. The value of this constant is 4
Experiment: 20 Objective: Write an ActionScript that displays reverse order of an input array.(ex:Strings)
Procedure: 1) open new flash document 2) create 2 textfields(input and dynamic respectively)and assign instance names as arr and rarr respectively. 3) Create a button to disply the reverse order of an arry in dynamic field. Assign instance name to it as btn 4) click on the button and insert the below code into action panel on(press) { a:Array=new Array(); a=arr.text rarr.text= a.sort(Array.DESCENDING); } 5) test the movie Conclusion: A reverse orderd array for an input array of string type is obtained
42
MMAD LAB MANUAL
Week 12: Experiment: 21 Objective: Write an ActionScript that implements custom sort for an input array
Procedure: 1) 2) 3) 4) 5) 6) Open a new flash document. Create a static text field and name it as values. Create another input text field and assign its instance name as t1. Now insert a combo box and give its labels as ascending and descending Create a button to display the sorted values. click on the button and insert the below code into action panel on(release) { var a:String=t1.text; var b:Array=a.split(","); if(cus.selectedIndex==0) { var temp; for(var i=0;i<b.length;i++) { for(var j=0;j<b.length;j++) { if(parseInt(b[i])<parseInt(b[j])) { temp=b[i]; b[i]=b[j]; b[j]=temp; } } } for(var k=0;k<b.length;k++) { t1.text=b.join(","); } } else if(cus.selectedIndex==1) { var temp; for(var i=0;i<b.length;i++) {
43
MMAD LAB MANUAL
for(var j=0;j<b.length;j++) { if(parseInt(b[i])>parseInt(b[j])) { temp=b[i]; b[i]=b[j]; b[j]=temp; } } } for(var k=0;k<b.length;k++) { t1.text=b.join(","); } } } 7) Test the movie.
TextField class
The TextField class represents any dynamic or selectable (editable) text field you create using the Text tool in Flash. You use the methods and properties of this class to control text fields at runtime. TextField objects support the same properties as MovieClip objects, with the exception of the _currentframe, _droptarget, _framesloaded, and _totalframes properties. You can get and set properties and invoke methods for text fields dynamically
Properties:.
alwaysShowSelection property alwaysShowSelection:Boolean [read-write] When set to true and the text field is not in focus, Flash Player highlights the selection in the text field in gray. When set to false and the text field is not in focus, Flash Player does not highlight the selection in the text field. The default value is false. autoSize property Syntax: autoSize:String [read-write] Controls automatic sizing and alignment of text fields. Acceptable values for the TextFieldAutoSize constants: TextFieldAutoSize.NONE (the default), TextFieldAutoSize.LEFT, TextFieldAutoSize.RIGHT, and TextFieldAutoSize.CENTER. If autoSize is set to TextFieldAutoSize.NONE (the default) no resizing occurs.
44
MMAD LAB MANUAL
If autoSize is set to TextFieldAutoSize.LEFT, the text is treated as left-justified text, meaning that the left margin of the text field remains fixed and any resizing of a single line of the text field is on the right margin. If the text includes a line break (for example, "\n" or "\r"), the bottom is also resized to fit the next line of text. If wordWrap is also set to true, only the bottom of the text field is resized and the right side remains fixed. If autoSize is set to TextFieldAutoSize.RIGHT, the text is treated as right-justified text, meaning that the right margin of the text field remains fixed and any resizing of a single line of the text field is on the left margin. If the text includes a line break (for example, "\n" or "\r"), the bottom is also resized to fit the next line of text. If wordWrap is also set to true, only the bottom of the text field is resized and the left side remains fixed. If autoSize is set to TextFieldAutoSize.CENTER, the text is treated as center-justified text, meaning that any resizing of a single line of the text field is equally distributed to both the right and left margins. If the text includes a line break (for example, "\n" or "\r"), the bottom is also resized to fit the next line of text. If wordWrap is also set to true, only the bottom of the text field is resized and the left and right sides remain fixed. background property Syntax: background:Boolean [read-write] Specifies whether the text field has a background fill. If true, the text field has a background fill. If false, the text field has no background fill. Use the backgroundColor property to set the background color of a text field. The default value is false. backgroundColor property Syntax: backgroundColor:uint [read-write] The color of the text field background. The default value is 0xFFFFFF (white). This property can be retrieved or set, even if there currently is no background, but the color is visible only if the text field has the background property set to true. displayAsPassword property Syntax: displayAsPassword:Boolean [read-write] Specifies whether the text field is a password text field. If the value of this property is true, the text field is treated as a password text field and hides the input characters using asterisks instead of the actual characters. If false, the text field is not treated as a password text field. When password mode is enabled, the Cut and Copy commands and their corresponding keyboard shortcuts will not function. This security mechanism prevents an unscrupulous user from using the shortcuts to discover a password on an unattended computer.
45
MMAD LAB MANUAL
The default value is false. htmlTextproperty Syntax: htmlText:String [read-write] Contains the HTML representation of the text field's contents. Flash Player supports the following HTML tags: Tag Description The <a> tag creates a hypertext link and supports the following attributes:
target: Specifies the name of the target window where you load the page. Options include _self, _blank, _parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window.
href: Specifies a URL or an ActionScript link event.The URL can be either absolute or relative to the location of the SWF file that is loading the page. An Anchor tag example of an absolute reference to a URL is http://www.adobe.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, Flash treats them as relative URLs. You can use the link event to cause the link to execute an ActionScript function in a SWF file instead of opening a URL. To specify a link event, use the event scheme instead of the http scheme in your href attribute. An example is href="event:myText" instead of href="http://myURL"; when the user clicks a hypertext link that contains the event scheme, the text field dispatches a link TextEvent with its text property set to "myText". You can then create an ActionScript function that executes whenever the link TextEvent is dispatched. You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets. Bold tag The tag renders text as bold. A bold typeface must be available for the font used. The tag creates a line break in the text field. You must set the text field to be a Break tag multiline text field to use this tag. Font tag The tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:

color: Only hexadecimal color (#FFFFFF) values are supported. face: Specifies the name of the font to use. As shown in the following example, you can specify a list of comma-delimited font names, in which case Flash Player selects the first available font. If the specified font is not installed on the user's computer system or isn't embedded in the SWF file, Flash Player selects a substitute font.
46
MMAD LAB MANUAL
size: Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4. The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.
The <img> tag supports the following attributes:
Image tag
src: Specifies the URL to an image or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG, GIF, PNG, and SWF files) do not show until they are downloaded completely. width: The width of the image, SWF file, or movie clip being inserted, in pixels. height: The height of the image, SWF file, or movie clip being inserted, in pixels. align: Specifies the horizontal alignment of the embedded image within the text field. Valid values are left and right. The default value is left. hspace: Specifies the amount of horizontal space that surrounds the image where no text appears. The default value is 8. vspace: Specifies the amount of vertical space that surrounds the image where no text appears. The default value is 8. id: Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded image file, SWF file, or movie clip. This is useful if you want to control the embedded content with ActionScript. checkPolicyFile: Specifies that Flash Player will check for a cross-domain policy file on the server associated with the image's domain. If a cross-domain policy file exists, SWF files in the domains listed in the file can access the data of the loaded image, for instance by calling the BitmapData.draw() method with this image as the source parameter. For more information, see the "Flash Player Security" chapter in Programming ActionScript 3.0.
Flash displays media embedded in a text field at full size. To specify the dimensions of the media you are embedding, use the <img> tag's height and width attributes. In general, an image embedded in a text field appears on the line following the <img> tag. However, when the <img> tag is the first character in the text field, the image appears on the first line of the text field. Italic tag The tag displays the tagged text in italics. An italic typeface must be available for
47
MMAD LAB MANUAL
List item tag
the font used. The <li> tag places a bullet in front of the text that it encloses. Note: Because Flash Player does not recognize ordered and unordered list tags (<ol> and <ul>, they do not modify how your list is rendered. All lists are unordered and all list items use bullets. The tag creates a new paragraph. You must set the text field to be a multiline text field to use this tag. The tag supports the following attributes:
Paragraph tag
align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
Span tag
class: Specifies a CSS style class defined by a flash.text.StyleSheet object. The tag is available only for use with CSS text styles. It supports the following attribute:

class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
The <textformat> tag lets you use a subset of paragraph formatting properties of the TextFormat class within text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags. The <textformat> tag has the following attributes:
Text format tag
blockindent: Specifies the block indentation in points; corresponds to TextFormat.blockIndent. indent: Specifies the indentation from the left margin to the first character in the paragraph; corresponds to TextFormat.indent. Both positive and negative numbers are acceptable. leading: Specifies the amount of leading (vertical space) between lines; corresponds to TextFormat.leading. Both positive and negative numbers are acceptable. leftmargin: Specifies the left margin of the paragraph, in points; corresponds to TextFormat.leftMargin. rightmargin: Specifies the right margin of the paragraph, in points; corresponds to TextFormat.rightMargin. tabstops: Specifies custom tab stops as an array of non-negative integers; corresponds to TextFormat.tabStops.
Underline The tag underlines the tagged text. tag Flash Player supports the following HTML entities:
48
MMAD LAB MANUAL
Entity < > & " '
Description < (less than) > (greater than) & (ampersand) " (double quotes) ' (apostrophe, single quote)
length property Syntax: length:int The number of characters in a text field. A character such as tab (\t) counts as one character. Selectable property Syntax: selectable:Boolean [read-write] A Boolean value that indicates whether the text field is selectable. The value true indicates that the text is selectable. The selectable property controls whether a text field is selectable, not whether a text field is editable. A dynamic text field can be selectable even if it is not editable. If a dynamic text field is not selectable, the user cannot select its text. If selectable is set to false, the text in the text field does not respond to selection commands from the mouse or keyboard, and the text cannot be copied with the Copy command. If selectable is set to true, the text in the text field can be selected with the mouse or keyboard, and the text can be copied with the Copy command. You can select text this way even if the text field is a dynamic text field instead of an input text field. The default value is true.
Assigning text to a text field at runtime To assign text to a text field, use the TextField.text property.
Experiment: 22 Objective: Create a Text Field dynamically (using ActionScript)

Procedure: 1) Open a new flash document 2) Create one input texfield using tool box and give instance name as input . 3) Click on the stage and open action panel(press F9) and the below code: _root.createTextField(loading_txt, 10); loading_txt. autoSize= true;
49
MMAD LAB MANUAL
loading_txt.text=haiii.; loading_txt.text=input.text; 4) test the movie(ctrl+ENTER) Conclusion: A dynamic textfiled is obtained
Experiment: 23 Objective: Create a password Field dynamically(using ActionScript)

Procedure: 1) Open a new flash document 2) Create one input textfield using tool box and give instance name as pwd . 3) Click on the stage ,open the action panel and write the below code Pwd. displayAsPassword =true; 4) Test the movie(ctrl+ENTER) Conclusion: A dynamic password field is obtained
Additional Exercises Flash Text Effect - Fade

Step1: First we will add some text and set the properties of the text. To do this click on the Text Tool in the Tools bar. Then left click on your mouse in the work area where you want to put the text. Step2: To set the properties Right Click in the Text field, a small popup menu will appear. Now Select Properties. The Properties window will appear below the work area. For our Fade effect set the font to Arial and the size to 30, and select any color except white.
50
MMAD LAB MANUAL
Step3: Now we will be creating the Flash Text fade in effect. To do this go to the timeline and right click on frame 20. A small popup menu will appear. From this popup menu select insert keyframe. After you have done this right calico on the keyframe again and select create motion tween. Now go to the first key frame, again right mouse click on it, and select create motion tween. Step4: Now we have arrived at the final step to create the basic fade in text effect. To finalize it all we need to do is to set the alpha channel of the first text to 0. To do this go to the workarea and click on top of the text you already entered in Step1. Below the work area the frame properties window will appear. In this window you can set several properties such as the color and alpha channel (fade) of the selected frame. To set the color of the text effect to transparent, go to the color drop down menu and select alpha. If needed set the alpha amount to 0 by dragging the slider downwards. Step5: To preview what we have created. Enter Ctrl Key and the Enter Key on your keyboard. Step6: Now we have created the text fade in we will move on to create the final text fade effect. To do this go to the timeline and right mouse calico on frame 30. Select insert Keyframe. Go to the work area and left calico on the text. Now the properties window below the work area will appear. Go to the color drop down menu and select Alpha and set the alpha number to 0. Step7: To preview what we have created. Enter Ctrl Key and the Enter Key on your keyboard. Your animation should look like something such as the Flash Fade Text animation below.
Flash Text Effect - Easing In this Flash Text tutorial you will learn the impact of the easing parameter on the movement of your text animation.
Step1: First we will add some text and set the properties of the text. To do this click on the Text Tool in the Tools bar. Then left click on your mouse in the work area where you want to put the text. Step2: To set the properties Right Click in the Text field, a small popup menu will appear. Now Select Properties.
51
MMAD LAB MANUAL
The Properties window will appear below the work area. For our Fade effect set the font to Arial and the size to 30, and select any color except white. Step3: Now we will be creating the Flash Text fade in effect. To do this go to the timeline and right click on frame 60. A small popup menu will appear. From this popup menu select insert keyframe. After you have done this right click on the keyframe again and select create motion tween. Now go to the first key frame, again right mouse click on it, and select create motion tween. Step4: Now we have arrived at the final step to create the basic flash text movement. To finalize it all we need to do is to move the text in the first key frame to the left and the text in the second keyframe to the right. To do this click in the first keyframe, as you will see the text in the working ara is automatically selected as well. To move the text to the left press about 20 times on the left arrow on your keyboard. Now do the same with the text in the second keyframe Step5: To preview what we have created. Enter Ctrl Key and the Enter Key on your keyboard. Your animation should look like something such as the Flash Text Movement Animation below. Step6: Now we haev created the basic movement we will be setting the easing parameters. To do this select the first frame in the timeline. Got to Easing option in the the propertiy windows and drag the slider all the way down to -100. This means that the animation will start slow and end at the normal speed. When you set the easing to 100 the text animation will start fast and slow down at the end. Experiment No:3 Creating Snow Flake Effect Procedure: 1)open a new flash document 2) Import one image on which u want snow flake effect(press Ctrl+ENTER) 3) click on the movie clip and write the below actionscript code onClipEvent (load) { //specifies the size of the movie stage movieWidth = 300; movieHeight = 200; //variables that will modify the falling snow i = 1+Math.random()*2; k = -Math.PI+Math.random()*Math.PI; //giving each snowflake unique characteristics this._xscale = this._yscale=50+Math.random()*100; this._al pha = 75+Math.random()*100; this._x = -10+Math.random()*movieWidth; this._y = -10+Math.random()*movieHeight; } onClipEvent (enterFrame) {
52
MMAD LAB MANUAL
//putting it all together rad += (k/180)*Math.PI; this._x -= Math.cos(rad); this._y += i; if (this._y>=movieHeight) { this._y = -5; } if ((this._x>=movieWidth) || (this._x<=0)) { this._x = -10+Math.random()*movieWidth; this._y = -5; } } Conclusion: Snowflake for an object is obtained
53

Department of Information Technology

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Department of Information Technology

Загружено:

Авторское право:

Доступные форматы

DEPARTMENT OF INFORMATION TECHNOLOGY

MULTIMEDIA AND APPLICATION DEVELOPMENT LAB

Prepared by Mr. Mirza Irfan Baig

BALAJI INSTITUTE OF TECHNOLOGY AND SCIENCE