Creating a Custom Class

Working with events

1. Make a list of six events that can occur in a Flash movie.

Event name Typically occurs when …

2. In Flash open a new movie.

3. In the movie Insert a New Symbol of the MovieClip type.

4. In this movie clip create some shape. Then switch back to Scene1 and drag out an instance of the movie clip onto the stage.

1 Working with events | © Mike Brooks 2008 5. Click on this instance on the stage. In the Properties Panel type in an instance name. I named mine ‘orange’.

6. Objects like movie clips have Properties. Complete the table below, for key properties of movie clips.

Name Description Range of values x Horizontal position in pixels Any number + or -

2 Working with events | © Mike Brooks 2008 7. If you want the movie clip instance to take on a squashed appearance, which property do you need to change the value of ? ______

8. Create a new Layer in your movie timeline and label it ‘actions’

9. Open the Actions Panel (shortcut F9) and type in. orange.scaleY = 0.5;

NOTE: If you have named your movie clip instance something else, then substitute that name for ‘orange’ in the script above and all examples that follow.

Then Test the movie. What happens and why?

10. Try out some other properties and values, e.g. orange.alpha = 0.3; orange.rotation = 120;

Events – listening for

Now we want to have one of these properties altered in value when the user moves their mouse over the movie clip.

To do that you need an Event Listener and an Event Handler which the listener calls up when the event is detected.

11. In the Actions panel – clear out any script currently there, then type in the following. This script is adding an event listener for the MOUSE_OVER mouse event to the ‘orange’ object. orange.addEventListener( MouseEvent.MOUSE_OVER, react );

‘react’ is the name I have chosen for my event handler, that will get called up when this event listener ‘hears’ a MOUSE_OVER event on my ‘orange’ movie clip instance.

3 Working with events | © Mike Brooks 2008 12. In the Actions Panel, now add in the following script to create the event handler. function react ( e:MouseEvent ) : void { orange.rotation = 80; }

Just to confirm, you should now have script in the Actions Panel that looks similar to that shown below. Remember, if you named your instance differently use your name. Plus all this is case- sensitive.

13. Test your movie. Does it work?

Try changing the values of some other properties as part of the event handler, e.g. function react ( e:MouseEvent ) : void { orange.rotation = 80; orange.scaleY = 0.5; orange. x = 20; orange.alpha = 0.4;

4 Working with events | © Mike Brooks 2008 Going further

14. Suppose we want a MOUSE_OVER to add on a few more degrees of rotation every time it happens.

Edit the event handler to read: function react ( e:MouseEvent ) : void { orange.rotation + = 20; }

+= is shorthand in programming for doing things like orange.rotation = orange.rotation + 20;

Try out orange.rotation -= 20;

15. If you want to listen for the MOUSE_OUT event as well and make that have the same effect as the MOUSE_OVER event.

Just add a second event listener, for MOUSE_OUT and have it call the same event handler as MOUSE_OVER.

Just add this line in the Actions Panel. orange.addEventListener( MouseEvent.MOUSE_OUT, react );

Test the movie.

As a check, your script should now look something like that below.

5 Working with events | © Mike Brooks 2008 16. Try listening for some other events, for example MOUSE_DOWN. You can do this by just editing script to add in the appropriate event listener, as in the example below. orange.addEventListener( MouseEvent.MOUSE_DOWN, react );

Listen for the ENTER_FRAME event

17. What we will do here is to make ‘orange’ move say 8 pixels to the right each time there is an ENTER_FRAME event.

Delete all the script in the Actions Panel and enter the following. orange.addEventListener( Event.ENTER_FRAME, react ); function react( e:Event ):void { orange.x += 8; }

Test the movie.

18. What two things could you do to speed up the animation?

______, ______

19. Make ‘orange’ move vertically as well as horizontal and also fade out over time (think change alpha gradually).

6 Working with events | © Mike Brooks 2008 Adding event listeners to buttons

Ideally, use the Flash ‘slide show’ movie you built last week (if you don’t have this, one can be downloaded from http://mmedia.glos.ac.uk/mu120/lectures.htm - then look under Week 4 and use the link ‘Part built slide show’. This will allow you to download a Flash FLA file, which will open in Flash CS3 (or higher).

The aim is to add MOUSE_UP event listeners to the forwards and back buttons, which via suitable event handlers, will allow navigation back and forth through the pictures.

1. First step, is to give each of the buttons an instance name.

I have named my back button ‘backButton’ and the forward button ‘nextButton’. These are the names that I will be using in the following scripts. Change your scripts accordingly if you use different instance names.

3. Now we need to add the event handlers. Which in my example I have named ‘nextPicture’ and ‘previousPicture’. function nextPicture( e:MouseEvent ):void { nextFrame(); } function previousPicture( e:MouseEvent ):void { prevFrame(); }

4. Test the movie.

5. Modify the script so navigation takes place on a MOUSE_OVER on the buttons.

You add an event listener to an object to allow it to respond to some event, but you can also remove an event listener when you want it to stop responding to the event.

1. In a new movie create two button instances and name them ‘startButton’ and ‘stopButton’.

2. Now add an instance of a movie clip and name that ‘airship’. The movie I built (you can download this from the MU120 site as AddRemoveListeners.FLA) has a rather elaborate movie clip, which explains my choice of name. Just keep your version simple for now!

3. The aim; mouse over the startButton and this will cause the airship to have an event listener for the ENTER_FRAME event to be attached. Mouse over the stopButton and the ENTER_FRAME event listener is removed.

First, attach event listeners for MOUSE_OVER to the startButton and stopButton.

9 Working with events | © Mike Brooks 2008 At this stage you should have script like that shown below. The MOUSE_OVER event on the startButton leads to the startAnimation event handler being called. MOUSE_OVER on the stopButton will call the stopAnimation event handler.

4. The startAnimation event handler will need to add the event listener for ENTER_FRAME to the airship movie clip. function startAnimation( e:MouseEvent ):void { airship.addEventListener( Event.ENTER_FRAME, moveAirShip ); }

5. The stopAnimation event handler will need to remove the event listener for ENTER_FRAME from the airship movie clip. function stopAnimation( e:MouseEvent ):void { airship.removeEventListener( Event.ENTER_FRAME, moveAirShip ); }

6. Finally, you need the ENTER_FRAME event handler, called ‘moveAirShip’ in my example. function moveAirShip( e:Event ):void { airship.x += 2; }

7. Test the movie.