1. SM1205 Interactivity Topic 05: Properties and Events Part 2 Spring 2010SCM-CityU1

2. Simple Flow Control First Example Spring 2010SCM-CityU2

3. Simple Flow Control Load Images Convert to symbols Create Layers Put Images into correct layers and frames Spring 2010SCM-CityU3

4. Simple Flow Control Create motion tween – Go to corresponding frame – Select each image – Right click and Select create motion tween – Change properties at diffent frames Spring 2010SCM-CityU4

5. Simple Flow Control Blending effect (Alpha property) Spring 2010SCM-CityU5

6. Simple Flow Control Insert control code – At frame 1 add a button (my_btn) – Add code to control flow Spring 2010SCM-CityU6 stop(); my_btn.addEventListener(MouseEvent.CLICK, onButtonClick); function onButtonClick(e:MouseEvent) : void { if (currentFrame == 1) { gotoAndPlay(2); }

7. Simple Flow Control Insert control code – At frame 10 insert a key frame – Add code to stop animation – Test the Animation! – Exercise: Complete the whole animation Spring 2010SCM-CityU7 stop();

8. Interactive Album Control multiple objects Using same event handle – All objects have the same behavior! Spring 2010SCM-CityU8

9. Interactive Album Load set of images Convert images to symbols Add instance for each symbol Assign different instance name Spring 2010SCM-CityU9

10. Interactive Album Inset control code – First stop the animation – Add event listeners – Repeat this for all images Spring 2010SCM-CityU10 stop(); s1.addEventListener(MouseEvent.CLICK, onPhotoClick); s1.addEventListener(MouseEvent.MOUSE_DOWN, onPhotoDown); s1.addEventListener(MouseEvent.MOUSE_UP, onPhotoUp);

11. Interactive Album Bring image to top when user click it Spring 2010SCM-CityU11 function onPhotoDown(e:MouseEvent) : void { var photo:MovieClip = e.target as MovieClip; // bring the photo to top var topPosition:uint = numChildren - 1; setChildIndex(photo, topPosition); }

12. Interactive Album Make images draggable – When mouse down => start dragging Spring 2010SCM-CityU12 var down_x:Number; var down_y:Number; function onPhotoDown(e:MouseEvent) : void { var photo:MovieClip = e.target as MovieClip; // bring the photo to top var topPosition:uint = numChildren - 1; setChildIndex(photo, topPosition); // start dragging photo.startDrag(); }

13. Interactive Album Make images draggable – When mouse up => stop dragging Spring 2010SCM-CityU13 function onPhotoUp(e:MouseEvent) : void { var photo:MovieClip = e.target as MovieClip; // stop dragging photo.stopDrag(); }

14. Interactive Album Enlarge Image when clicking Spring 2010SCM-CityU14 function onPhotoClick(e:MouseEvent) : void { var photo:MovieClip = e.target as MovieClip; photo.x = 75; photo.y = 50; photo.width = 400; photo.height = 300; }

15. Interactive Album Restore size when clicking on enlarged image – Use some global variables to store old size and location Spring 2010SCM-CityU15 var currentZoomedPhoto:MovieClip = null; var old_x:Number; var old_y:Number; var old_width:Number; var old_height:Number;

16. Interactive Album Restore size when clicking on enlarged image – In function onPhotoClick() Spring 2010SCM-CityU16 if (currentZoomedPhoto == null) { old_x = photo.x; old_y = photo.y; old_width = photo.width; old_height = photo.height; photo.x = 75; photo.y = 50; photo.width = 400; photo.height = 300; currentZoomedPhoto = photo; return; } else { currentZoomedPhoto.x = old_x; currentZoomedPhoto.y = old_y; currentZoomedPhoto.width = old_width; currentZoomedPhoto.height = old_height; currentZoomedPhoto = null; } Store location Restore old location

17. Interactive Album Exercise – How to prevent enlarge when dragging image? Spring 2010SCM-CityU17

18. Simple Scroll Bar Changing properties of a object to control other objects Spring 2010SCM-CityU18

19. Simple Scroll Bar Exercise – Build a simple scroll bar – Control the locations of other object using the scroll bar Spring 2010SCM-CityU19