1 / 56

Topic 04: Properties and Events Part I

Topic 04: Properties and Events Part I. Today’s Examples . Simple_Flow.swf and I nteractive_Album.swf in W drive . Review: if Conditional. ... if ( conditionA ) { // process B } . if. Condition A. false. var score : Number = 87 ; if ( score >= 90 ) { trace ( "A+" ); }

amma
Download Presentation

Topic 04: Properties and Events Part I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Topic 04: Properties and Events Part I SCM-CityU

  2. Today’s Examples • Simple_Flow.swf and Interactive_Album.swf in W drive SCM-CityU

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

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

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

  6. Review: if Conditional Summary • Requires oneif • Only one optionalelse can be used • Any number of optionalelse-if test can be used if(...){ } if(...){ }elseif(...){ }elseif(...){ } if(...){ }else{ } if(...){ }elseif(...){ }elseif(...){ }else{ } SCM-CityU

  7. Review: Functions • Example: math function f(x, y) = x2+y2 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 calls function definition SCM-CityU

  8. Review: Functions • Position of function definition doesn’t influence program flow 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)); trace(f(3,4)); trace(f(4,5)); function f(x:Number, y:Number):Number{ return x*x + y*y; } SCM-CityU

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

  10. 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 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? SCM-CityU

  11. Review: Indent Style 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 SCM-CityU

  12. Review: Indent Style • Indentation reveals program structure easily 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); } SCM-CityU

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

  14. Review: ; : , . var a:int=3; trace(a); • ; • 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) var pi:Number=3.14; function f(x:Number):Number; function f(x:Number, y:Number):Number; trace(a, b, c, d); bird.speed = 5; bird.fly(); btn_prev.addEventListener(MouseEvent.CLICK,onPrevButtonClick); SCM-CityU

  15. Events & Listeners SCM-CityU

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

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

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

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

  20. 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 Event, MouseEvent … are complex data types for events btn_prev.addEventListener(MouseEvent.CLICK, onPrevButtonClick); functiononPrevButtonClick(e:MouseEvent): void { prevFrame(); txt_index.text = currentFrame + "/" + totalFrames; } SCM-CityU

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

  22. 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 • btn.addEventListener(MouseEvent.CLICK, clickTask); • btn.addEventListener(KeyboardEvent.KEY_DOWN, • keyDownTask); SCM-CityU

  23. Simple Flow Control • Our previous album demo • A keyframe in every frame • Frame jumping using ActionScript (at Frame 1) SCM-CityU

  24. Simple Flow Control • Today’s first example • Jumping between tween animations SCM-CityU

  25. Basic Steps Image Source • Change stage size to 181 x 380 • 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 • Distribute images to individual layers SCM-CityU

  26. Basic Steps • Drag keyframe of 1.jpg and move it to frame 2 Then insert frame at frame 10 SCM-CityU

  27. Basic Steps • Create motion tweens • Convert to symbols first • Why: motion tween requires symbol instances • How: select 1.jpg image on the stage & right click…. SCM-CityU

  28. Basic Steps • Create motion tweens • Convert to symbols first • Change properties of symbol instances • E.g., alpha in our case Alpha = 0 @Frame1 Alpha = 1 @Frame10 SCM-CityU

  29. Timeline SCM-CityU

  30. Class Exercise • Task: create motion tween for images 2-4 31-40 21-30 11-20 2-10 Frame No SCM-CityU

  31. Basic Steps • 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 Instance: playBtn SCM-CityU

  32. Basic Steps • Add user control • Add an event listener for the control button I have been clicked! Event Type Got it. I will play the next key frame. Event Listener Event Target SCM-CityU

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

  34. Basic Steps • 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) SCM-CityU

  35. 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 SCM-CityU

  36. Frame Labels • Example • Select key frame 10 • Assign a frame label in Properties panel • E.g., 1e (end of 1.jpg) SCM-CityU

  37. 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) • gotoAndPlay and gotoAndStop accept both frame number or label as input (ref) mc1.gotoAndPlay(currentFrame +5); mc1.gotoAndPlay("1e"); SCM-CityU

  38. Properties SCM-CityU

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

  40. Properties • Why bother property changing in ActionScript? • To support interactivity! • But you can use properties panelto set initial properties SCM-CityU

  41. Properties: x, y • Using dot syntax • Units: pixels X O Note: y-axis is downward! Y SCM-CityU

  42. Properties: width, height X O box.width box.height Y SCM-CityU

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

  44. Properties: rotation • Clockwise; angle in degree X O Y SCM-CityU

  45. Properties: alpha • Range: [0, 1] box.alpha = 0.5; box.alpha = 1; SCM-CityU

  46. Example: Interactive Album • Control multiple objects • Sharing event listeners • All objects have the samebehavior! SCM-CityU

  47. Basic Steps • Load images to the stage • Convert to symbols and assign instance names • E.g., names: s1, s2, s3, s4 • Resize symbol instances and have an initial layout like s4 s1 s2 s3 SCM-CityU

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

  49. Add User Controls Note 1: e.targetrefers to event target where event happens. Note 2: as operator does data type conversion (DisplayObject  MovieClip) • Make images draggable • Start to drag when mouse is down • Stop to drag when mouse is up functiononPhotoDown(e:MouseEvent):void{ var photo:MovieClip= e.target as MovieClip; photo.startDrag(); } functiononPhotoUp(e:MouseEvent):void{ var photo:MovieClip= e.target as MovieClip; photo.stopDrag(); } SCM-CityU

  50. Add User Controls • Bring the image being dragged onto topmost (ref) • Each symbol instanceon the stage has an index • numChildren -1 means topmost • 0 means bottommost 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); } SCM-CityU

More Related