Embed Size (px)
Citation preview
SM1205 Interactivity
Topic 05: Properties and Events Part 2
Spring 2010 SCM-CityU 1
Simple Flow Control
• First Example
Spring 2010 SCM-CityU 2
Simple Flow Control
• Load Images• Convert to symbols• Create Layers • Put Images into correct layers and frames
Spring 2010 SCM-CityU 3
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 2010 SCM-CityU 4
Simple Flow Control
• Blending effect (Alpha property)
Spring 2010 SCM-CityU 5
Simple Flow Control
• Insert control code– At frame 1 add a button (my_btn)– Add code to control flow
Spring 2010 SCM-CityU 6
stop();
my_btn.addEventListener(MouseEvent.CLICK, onButtonClick);
function onButtonClick(e:MouseEvent) : void {
if (currentFrame == 1) {gotoAndPlay(2);
}
}
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 2010 SCM-CityU 7
stop();
Interactive Album
• Control multiple objects• Using same event handle– All objects have the same behavior!
Spring 2010 SCM-CityU 8
Interactive Album
• Load set of images• Convert images to symbols• Add instance for each symbol• Assign different instance name
Spring 2010 SCM-CityU 9
Interactive Album
• Inset control code– First stop the animation
– Add event listeners
– Repeat this for all images
Spring 2010 SCM-CityU 10
stop();
s1.addEventListener(MouseEvent.CLICK, onPhotoClick);s1.addEventListener(MouseEvent.MOUSE_DOWN, onPhotoDown);s1.addEventListener(MouseEvent.MOUSE_UP, onPhotoUp);
Interactive Album
• Bring image to top when user click it
Spring 2010 SCM-CityU 11
function onPhotoDown(e:MouseEvent) : void {var photo:MovieClip = e.target as MovieClip;
// bring the photo to topvar topPosition:uint = numChildren - 1;setChildIndex(photo, topPosition);
}
Interactive Album
• Make images draggable– When mouse down => start dragging
Spring 2010 SCM-CityU 12
var down_x:Number;var down_y:Number;
function onPhotoDown(e:MouseEvent) : void {var photo:MovieClip = e.target as MovieClip;
// bring the photo to topvar topPosition:uint = numChildren - 1;setChildIndex(photo, topPosition);
// start draggingphoto.startDrag();
}
Interactive Album
• Make images draggable– When mouse up => stop dragging
Spring 2010 SCM-CityU 13
function onPhotoUp(e:MouseEvent) : void {var photo:MovieClip = e.target as MovieClip;
// stop draggingphoto.stopDrag();
}
Interactive Album
• Enlarge Image when clicking
Spring 2010 SCM-CityU 14
function onPhotoClick(e:MouseEvent) : void {var photo:MovieClip = e.target as MovieClip;photo.x = 75;photo.y = 50;photo.width = 400;photo.height = 300;
}
Interactive Album
• Restore size when clicking on enlarged image– Use some global variables to store old size and
location
Spring 2010 SCM-CityU 15
var currentZoomedPhoto:MovieClip = null;var old_x:Number;var old_y:Number;var old_width:Number;var old_height:Number;
Interactive Album
• Restore size when clicking on enlarged image– In function onPhotoClick()
Spring 2010 SCM-CityU 16
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
Interactive Album
• Exercise– How to prevent enlarge when dragging image?
Spring 2010 SCM-CityU 17
Simple Scroll Bar
• Changing properties of a object to control other objects
Spring 2010 SCM-CityU 18
Simple Scroll Bar
• Exercise– Build a simple scroll bar– Control the locations of other object using the scroll
bar
Spring 2010 SCM-CityU 19
