Introduction to ActionScript 3.0 programming MovieClips, properties & Display list

Transcription

1 Introduction to ActionScript 3.0 programming MovieClips, properties & Display list Thomas Lövgren Flash developer, designer & programmer Umeå Institute of Design,

2 Introduction to ActionScript 3.0 MovieClips, properties & Display list Lecture outline In this lecture we ll discuss and practice the following topics: Programming introduction, examples & exercises: MovieClips (Display) Properties Coding with MovieClips, Properties & Events Nested MovieClips & Access Display list addchild & removechild Ball example (Adding a Ball-object from library)

3 MovieClips (1/2) MovieClips are the key-element for Flash-based animations Every MovieClip has it s own timeline MovieClips can be nested (MovieClip inside another mc) A MovieClip can be used as a button-object Each MovieClip has a coordinate system in which the origin (0, 0) is located in the registration point, for the main timeline this is the top left corner Tip! Use the suffix _mc for MovieClips, ex. ball_mc

4 MovieClips (2/2) Every created MovieClip-instance has the properties, methods and events of the MovieClip class These parts can be accessed and used in different ways A MovieClip has also Display Properties that we can access and manipulate (manually or by code) apple_mc alpha = 0.9 xpos = 200 ypos = 200 height = 300 apple_mc.x = 200; color = red

5 Display Properties The Display Properties are visual parameters for the MovieClip-object The most common Display Properties, and a migration from AS2 to AS3 are shown below:

6 MovieClips & Properties We can easily manipulate these properties and change the form and/or position of a MovieClip- Object like: movieclipinstancename.propertyname = value; square_mc.scalex = 2; //scale-up 200% in x-direction square_mc.x = 650; //move in x-direction to 650 square_mc.rotation = 90; //rotate 90 degrees square_mc.alpha = 0.5; //50% transparency square_mc

7 MovieClip class Example of some of the MovieClip class s public methods, properties and events: Methods: gotoandplay(), gotoandstop(), play(), stop() Properties: currentframe(), currentlabel(), totalframes() Events: mouseup, mousedown(), rollover(), rollout() Note! There are more methods, properties and events for the MovieClip-Object

8 MovieClips: Events, functions & properties This example demonstrates how to use the rotation-property for rotating a MovieClip in different directions (by pressing two buttons) Part of the code looks like this: //add listener to button forwardrot_btn.addeventlistener(mouseevent.click, forwardrotation); //function for rotating mc function forwardrotation(e:mouseevent):void{ //increase degrees by 5 every click rectangle_mc.rotation += 5; }

9 MovieClips: Input-text & Properties An Input text-field can be used for user-inputs; in this example we are changing a MovieClip s x-properties based on values from a text-input (triggered from a Mouse-down Event) //add listener to button xpos_btn.addeventlistener(mouseevent.mouse_down, xmove); //function for moving box_mc in x-direction, get values from input-text function xmove(event:mouseevent):void{ box_mc.x = Number(xPos_txt.text); //cast input-text as number }

10 AS3 Hierarcy, nested MovieClips & access levels: Stage, root, parent & children In AS3 the Stage is the highest level, the second level is the Main Timeline (root) A Nested movieclip is a movieclip inside another (see House example below) We can reach variables, and functions within a nested movie Clip by using dot-notation : house_mc.room_mc To access the Main-timeline (root) we need to cast it as a MovieClip in AS3: MovieClip(root).house_mc; //access house_mc tex. from box_mc Parent will take us up one level : MovieClip(parent).house_mc; //up one level from room_mc

11 Display list Background: In prior to AS3 we could create a number of different types of visual objects, including MovieClips, buttons, textfileds, bitmaps, components etc They all had very different ways of being created, destroyed and manipulated AS3: A new Display Model for Display Objects handled by the Display list These elements are placed/located at a specific index/depth in the Display List In AS3 all these Display Objects behave the same way, in terms of how we create them, put them on stage, manipulate and destroy them Common display programming tasks: Adding display objects to the display list Removing objects from the display list Examples of Display Objects...

12 Display Objects Display Objects are visual elements that can appear on screen and being handled by the Display list They all have their own certain properties and methods that we can access and manipulate by our code; for example: The MovieClip and Sprite class, can serve as containers for graphics Example of Display Objects: MovieClip: Has a timeline. Can be created as a symbol or dynamically by code Sprite: New in AS3, like a MovieClip but with no timeline Shape: Same features as a Sprite but with no mouse or keyboard interactivity Bitmap: Similar to Sprite but used only for displaying bitmap images Loader: Like a Sprite but used specifically to display and contain loaded content (SWFs and images) Note! You cannot add non-visual objects to the display list, for example a number-variable

13 addchild : Adding objects to the Display list Adding a Display-Object to the Display list requires just two simple steps: 1. First we create the object, in this case a MovieClip (my_mc) 2. Then we add it to the Display list by using the addchild() method, the whole thing looks like this: //example1: addchild var my_mc:movieclip = new MovieClip(); addchild(my_mc); //add movieclip to display list //example2: addchildat var my_mc:movieclip = new MovieClip(); addchildat(my_mc, 4); //add movieclip at a specific index/depth

14 removechild: Removing objects from the Display list To remove a specific Display-Object from the Display list, we simply use the removechildmethod: removechild(my_mc); //remove my_mc To remove a Display-Object at a specific index/depth, we use the removechildat()-method: removechildat(4); //remove object at index/depth 4 Remove the Display-Object from memory: removechild(my_mc); //object still exists my_mc = null; //remove from memory

15 Adding a symbol instance (object from library) Adding a symbol instance from Library to the Display list, and make it visible on main-stage - can be done by the following steps: 1. Create a MovieClip and give it the name Ball 2. In the Linkage-section: Check the box Export for ActionScript 3. Go back to your Action-frame and create a new Ball instance like: var ball:movieclip = new Ball(); //create a new ball object addchild(ball); //add ball to the display list

16 Ball example: Adding a Ball-object from library In this example we re creating a new Ball instance (based on a Library MovieClip-symbol), adding the object to the Display list at a specific index/depth on every Stage-Click: var counter:int = 0; //declare counter variable //add eventlistener to stage, mouse-click, function-call stage.addeventlistener(mouseevent.click, onclick, false, 0, true); //function that adds a ball-mc/object from library and place it on stage function onclick(event:mouseevent){ var ball_mc:movieclip = new Ball(); //create a new ball-object/instance ball_mc.x = 50 + (counter * 10); //xpos ball_mc.y = (counter * 5); //ypos //add to display list, counter/index/depth addchildat(ball_mc, counter); counter++; //increase counter }

17 Advantages of the AS3 Display Model This individualization of classes and the hierarchical structure of the Display lists have the following benefits: More efficient rendering and reduced memory usage Improved depth management Full traversal of the display list Off-list display objects Easier sub-classing of display objects