SM1205 Interactivity Topic 04: Properties and Events Part I Spring 2011SCM-CityU1

Today’s Examples Simple_Flow.swf and Interactive_Album.swf in W drive Spring 2011SCM-CityU2

Review: if Conditional Spring 2011SCM-CityU3 Condition A true false if Process B... if (conditionA) { // process B }... if (conditionA) { // process B }... var score:Number = 87; if (score >= 90) { trace ("A+"); } if (score = 85) { trace ("A"); } var score:Number = 87; if (score >= 90) { trace ("A+"); } if (score = 85) { trace ("A"); }

Review: if-else Conditional Spring 2011SCM-CityU4 Condition A Process B true false if Process C if (conditionA) { // process B } else { // process C } … if (conditionA) { // process B } else { // process C } … if (currentFrame == 1) { gotoAndStop(totalFrames); } else { prevFrame(); } if (currentFrame == 1) { gotoAndStop(totalFrames); } else { prevFrame(); }

Review: else-if Conditional Spring 2011SCM-CityU5 Condition A Process C true false if Process E Condition B false Process D else-if true second if-else statement if (conditionA) { // process C } else if (conditionB) { // process D } else { // process E } if (conditionA) { // process C } else if (conditionB) { // process D } else { // process E } var age:uint = 15; if (age >= 21) { trace("adult"); } else if (age > 12) { trace("teen"); } else if (age > 7) { trace("child"); } else { trace("infant"); } var age:uint = 15; if (age >= 21) { trace("adult"); } else if (age > 12) { trace("teen"); } else if (age > 7) { trace("child"); } else { trace("infant"); }

Review: if Conditional Summary Requires one if Only one optional else can be used Any number of optional else-if test can be used Spring 2011SCM-CityU6 if (...) { } if (...) { } if (...) { } else if (...) { } if (...) { } else if (...) { } if (...) { } else { } if (...) { } else { } if (...) { } else if (...) { } else { } if (...) { } else if (...) { } else { }

Review: Functions Example: math function f(x, y) = x 2 +y 2 Spring 2011SCM-CityU7 trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4)); trace(f(4, 5)); function f(x:Number, y:Number): Number { return x*x + y*y; } trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4)); trace(f(4, 5)); function f(x:Number, y:Number): Number { return x*x + y*y; } function definition function calls

Review: Functions Position of function definition doesn’t influence program flow Spring 2011SCM-CityU8 trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4)); trace(f(4, 5)); function f(x:Number, y:Number): Number { return x*x + y*y; } trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4)); trace(f(4, 5)); function f(x:Number, y:Number): Number { return x*x + y*y; } function f(x:Number, y:Number): Number { return x*x + y*y; } trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4)); trace(f(4, 5)); function f(x:Number, y:Number): Number { return x*x + y*y; } trace(f(1, 2)); trace(f(2, 3)); trace(f(3, 4)); trace(f(4, 5)); trace(f(1, 2)); trace(f(2, 3)); function f(x:Number, y:Number): Number { return x*x + y*y; } trace(f(3, 4)); trace(f(4, 5)); trace(f(1, 2)); trace(f(2, 3)); function f(x:Number, y:Number): Number { return x*x + y*y; } trace(f(3, 4)); trace(f(4, 5));

Review: Statements and Blocks Simple statements are expressions followed by a semicolon (;) Spring 2011SCM-CityU9 // the following code contains four simple statements var a:int = 3; trace(a); a += 5; trace(a); // the following code contains four simple statements var a:int = 3; trace(a); a += 5; trace(a);

Review: Statements and Blocks Braces { and } group multiple simple statements into a compound statement or block – { and } must be matched – Indentation highly recommended – Blocks can be nested Spring 2011SCM-CityU10 function genderTest(male:Boolean): void { if (male) { trace("male"); trace("playing games"); } else { trace("female"); trace("going shopping"); } genderTest(false); function genderTest(male:Boolean): void { if (male) { trace("male"); trace("playing games"); } else { trace("female"); trace("going shopping"); } genderTest(false); Question 1: How many blocks? Question 2: Output?

Review: Indent Style Spring 2011SCM-CityU11 var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } trace(5); } else { trace(20); } var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } trace(5); } else { trace(20); } Auto Format var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } trace(5); } else { trace(20); } var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } trace(5); } else { trace(20); }

Review: Indent Style Indentation reveals program structure easily Spring 2011SCM-CityU12 var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } else { trace(20); } trace(5); } var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } else { trace(20); } trace(5); } var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } else { trace(20); } trace(5); } var a:Boolean = true; var b:Boolean = false; if (a) { if (b) { trace(10); } else { trace(20); } trace(5); }

Review: Brackets (wiki)wiki Parentheses: () – Function parameter list – Precedence ordering Braces: {} – Define a block, which groups a set of statements Box/square brackets: [] – Array Spring 2011SCM-CityU13 trace(para1, para2, para3, …, paraN); trace((2 + 3) * 4); // 20 if (female) { trace("female"); trace("hobby: shopping"); } if (female) { trace("female"); trace("hobby: shopping"); } var a:Array = [val1, val2, val3];

Review: ; :,. ; – A semicolon ends a simple statement : – A colon for data type declaration, – A comma for separate parameters. – A.B means A contains B (B can be either a property or a method/function) Spring 2011SCM-CityU14 var a:int = 3 ; trace(a) ; var a:int = 3 ; trace(a) ; var pi : Number = 3.14; function f(x : Number) : Number; var pi : Number = 3.14; function f(x : Number) : Number; function f(x:Number, y:Number): Number; trace(a, b, c, d); function f(x:Number, y:Number): Number; trace(a, b, c, d); bird. speed = 5; bird. fly(); bird. speed = 5; bird. fly(); btn_prev. addEventListener(MouseEvent. CLICK, onPrevButtonClick);

SM1205 Interactivity Events & Listeners Spring 2011SCM-CityU15

Events & Listeners Multiple parties might be interested in special things, called events (e.g., clicking), happened to a target object (e.g., a button) Spring 2011SCM-CityU16 Hi folks, I have been clicked!

Spring 2011SCM-CityU17 Hi folks, I have been clicked! Got it. I will perform some follow-up task Who cares! I’m only interested in keyboard events on you

In ActionScript, eventTarget.addEventListener ( EventType, eventListener); – btn.addEventListener(MouseEvent.CLICK, clickTask); – btn.addEventListener(KeyboardEvent.KEY_DOWN, keyDownTask); Spring 2011SCM-CityU18 Hi folks, I have been clicked! Got it. I will perform some follow-up task Who cares. I’m only interested in keyboard events on you

eventTarget can be – Stage – Any symbol instance you create, e.g., a button! Spring 2011SCM-CityU19 btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick); function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick); function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } eventTarget.addEventListener (EventType, eventListener);

Listen to an event type you only care! There are many event types defined in Event, TimerEvent, KeyboardEvent, MouseEvent, … – E.g., MouseEvent.CLICK Spring 2011SCM-CityU20 btn_prev.addEventListener( MouseEvent.CLICK, onPrevButtonClick); function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } btn_prev.addEventListener( MouseEvent.CLICK, onPrevButtonClick); function onPrevButtonClick(e:MouseEvent) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } eventTarget.addEventListener ( EventType, eventListener); Event, MouseEvent … are complex data types for events

eventListener is simply a function but always with a single special parameter – Through this parameter you can get the context where the event happens Spring 2011SCM-CityU21 btn_prev.addEventListener( MouseEvent.CLICK, onPrevButtonClick ); function onPrevButtonClick ( e:MouseEvent ) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } btn_prev.addEventListener( MouseEvent.CLICK, onPrevButtonClick ); function onPrevButtonClick ( e:MouseEvent ) : void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } eventTarget.addEventListener (EventType, eventListener ); Note: data type of parameter should be compatible with the one used for event type

Execution Flow When an event happens to a target, all registered listeners that are listening to this event type are invoked E.g., when click event happens to btn – clickTask function will be called – But keyDownTask function won’t Spring 2011SCM-CityU22 btn.addEventListener(MouseEvent.CLICK, clickTask); btn.addEventListener(KeyboardEvent.KEY_DOWN, keyDownTask); btn.addEventListener(MouseEvent.CLICK, clickTask); btn.addEventListener(KeyboardEvent.KEY_DOWN, keyDownTask);

Simple Flow Control Our previous album demo – A keyframe in every frame – Frame jumping using ActionScript (at Frame 1) Spring 2011SCM-CityU23

Simple Flow Control Today’s first example – Jumping between tween animations Spring 2011SCM-CityU24

Basic Steps 1.Change stage size to 181 x Load images (File > Import to Stage) – Select all images of interest – All images will be loaded into single frame and single layer In previous example, only first image is selected, all images under the same directory are loaded as a sequence, each image placed into individual key frames 3.Distribute images to individual layers Spring 2011SCM-CityU25 Image Source

Basic Steps 4.Drag keyframe of 1.jpg and move it to frame 2 Then insert frame at frame 10 Spring 2011SCM-CityU26

Basic Steps 5.Create motion tweens – Convert to symbols first Why: motion tween requires symbol instances How: select 1.jpg image on the stage & right click…. Spring 2011SCM-CityU27

Basic Steps 5.Create motion tweens – Convert to symbols first – Change properties of symbol instances E.g., alpha in our case Spring 2011SCM-CityU28 Alpha = Alpha =

Timeline Spring 2011SCM-CityU29

Class Exercise Task: create motion tween for images 2-4 Spring 2011SCM-CityU Frame No

Basic Steps 6.Add user control – Have a layer for AS and span the entire timeline Insert frame at Frame 40 – Insert control button (from built-in component) This button will appear in the entire animation Spring 2011SCM-CityU31 Instance: playBtn

Basic Steps 6.Add user control – Add an event listener for the control button Spring 2011SCM-CityU32 I have been clicked! Got it. I will play the next key frame. Event Target Event Listener Event Type

Basic Steps 6.Add user control – Add an event listener for the control button At Frame 1 Spring 2011SCM-CityU33 playBtn.addEventListener(MouseEvent.CLICK, onButtonClick); function onButtonClick(e:MouseEvent): void { if (currentFrame == 1) { gotoAndPlay(2); } playBtn.addEventListener(MouseEvent.CLICK, onButtonClick); function onButtonClick(e:MouseEvent): void { if (currentFrame == 1) { gotoAndPlay(2); } Event Target Event Type Event Listener

Basic Steps 6.Add user control – Stop animation at Frame 10 Insert a key frame at Frame 10 Add stop(); to stop animation Class exercise – Complete the whole animation – Hints Event listeners are shared among key frames So the same playBtn can be used for playing control – Add code in onButtonClick (at Frame 1) Spring 2011SCM-CityU34

Frame Labels 10, 20, 30, 40 are like magic numbers in our app If you change position of key frames, you have to modify the code correspondingly A better solution: assigning some labels to key frames and accessing those frames in AS by label Spring 2011SCM-CityU35

Frame Labels Example – Select key frame 10 – Assign a frame label in Properties panel E.g., 1e (end of 1.jpg) Spring 2011SCM-CityU36

Frame Labels Just like currentFrame representing the number of frame being played, currentFrameLabel is the label at the current frame – currentFrameLabel is of String type (ref)ref gotoAndPlay and gotoAndStop accept both frame number or label as input (ref)ref Spring 2011SCM-CityU37 mc1.gotoAndPlay(currentFrame + 5); mc1.gotoAndPlay("1e"); mc1.gotoAndPlay(currentFrame + 5); mc1.gotoAndPlay("1e");

SM1205 Interactivity Properties Spring 2011SCM-CityU38

Properties Symbol instances provide a large set of predefined properties for manipulation, e.g., – x, y – width, height – scaleX, scaleY – alpha – visible Access properties using dot syntax – E.g., ball. rotation += 30; Spring 2011SCM-CityU39

Properties Why bother property changing in ActionScript? – To support interactivity! But you can use properties panel to set initial properties Spring 2011SCM-CityU40

Properties: x, y Using dot syntax Units: pixels Spring 2011SCM-CityU41 O X Y Note: y-axis is downward!

Properties: width, height Spring 2011SCM-CityU42 O X Y box.width box.height

Properties: scaleX, scaleY Multiplies current width/height by a scale factor Spring 2011SCM-CityU43 O X Y box.scaleX = 0.5; box.scaleY = 0.5;

Properties: rotation Clockwise; angle in degree Spring 2011SCM-CityU44 O X Y

Properties: alpha Range: [0, 1] Spring 2011SCM-CityU45 box.alpha = 1; box.alpha = 0.5;

Example: Interactive Album Control multiple objects – Sharing event listeners – All objects have the same behavior! Spring 2011SCM-CityU46

Basic Steps 1.Load images to the stage 2.Convert to symbols and assign instance names – E.g., names: s1, s2, s3, s4 3.Resize symbol instances and have an initial layout like Spring 2011SCM-CityU47 s1 s2 s3 s4

Add User Controls Add event listeners for s1 – MouseEvent (ref)ref Event types: CLICK, DOUBLE_CLICK, MOUSE_DOWN, MOUSE_UP, MOUSE_MOVE Repeat this for the other images – All images share same event listeners Spring 2011SCM-CityU48 s1.addEventListener( MouseEvent.MOUSE_DOWN, onPhotoDown); s1.addEventListener( MouseEvent.MOUSE_UP, onPhotoUp); s1.addEventListener( MouseEvent.MOUSE_DOWN, onPhotoDown); s1.addEventListener( MouseEvent.MOUSE_UP, onPhotoUp);

Add User Controls Make images draggable – Start to drag when mouse is down – Stop to drag when mouse is up Spring 2011SCM-CityU49 function onPhotoDown (e:MouseEvent): void { var photo:MovieClip = e.target as MovieClip; photo.startDrag(); } function onPhotoUp (e:MouseEvent): void { var photo:MovieClip = e.target as MovieClip; photo.stopDrag(); } function onPhotoDown (e:MouseEvent): void { var photo:MovieClip = e.target as MovieClip; photo.startDrag(); } function onPhotoUp (e:MouseEvent): void { var photo:MovieClip = e.target as MovieClip; photo.stopDrag(); } Note 1: e.target refers to event target where event happens. Note 2: as operator does data type conversion (DisplayObject  MovieClip)

Add User Controls Bring the image being dragged onto topmost (ref)ref – Each symbol instance on the stage has an index numChildren -1 means topmost 0 means bottommost Spring 2011SCM-CityU50 function onPhotoDown(e:MouseEvent): void { var photo:MovieClip = e.target as MovieClip; photo.startDrag(); // bring the image being dragged to the top setChildIndex(photo, numChildren - 1); } function onPhotoDown(e:MouseEvent): void { var photo:MovieClip = e.target as MovieClip; photo.startDrag(); // bring the image being dragged to the top setChildIndex(photo, numChildren - 1); }

Add User Controls Enlarge images being clicked Spring 2011SCM-CityU51 // center the image being clicked photo.x = stage.stageWidth/2; photo.y = stage.stageHeight/2; // set larger size photo.width = 400; photo.height = 300; // center the image being clicked photo.x = stage.stageWidth/2; photo.y = stage.stageHeight/2; // set larger size photo.width = 400; photo.height = 300; Note: by default the origin of object coordinate system is at the object center

Add User Controls Get back to the original image size – Store original size to some variables before enlarging zoomedPhoto, old_x, old_y, old_w, old_h – Restore original size if the photo is clicked again Spring 2011SCM-CityU52 // store currently being zoomed photo var zoomedPhoto:MovieClip = null; var old_x:Number; var old_y:Number; var old_w:Number; var old_h:Number; // store currently being zoomed photo var zoomedPhoto:MovieClip = null; var old_x:Number; var old_y:Number; var old_w:Number; var old_h:Number; // need to restore original size if (zoomedPhoto != null) {... } // need to restore original size if (zoomedPhoto != null) {... } Note: null means empty object for complex data types (compare: 0 for primitive data type)

Class Exercise Task: prevent image enlarging when dragging image Hints: check if the mouse positions for mouse down and up are the same Mouse movement  dragging; otherwise img enlarging Step 1: when the mouse is down (in onPhotoDown), store mouse position into some variables – (stage.mouseX, stage.mouseY) Step 2: when the mouse is up (in onPhotoUp), check if the current mouse position is the same as the stored position Spring 2011SCM-CityU53

More Examples Build a simple scroll bar – Use scroll bar to control locations and alpha of other objects – Simple_Scroll_Bar.fla in W drive Spring 2010SCM-CityU54 bar bar_button s1s2s3s4 Spring 2011SCM-CityU54

More Examples Control the movement of FL icon by mouse click – move_icon.fla in W drive Spring 2011SCM-CityU55

More Examples Zoom in/out image – zoom_solution.fla in W drive Spring 2011SCM-CityU56