Open a new Flash File Action Script 2.0

Create a button like you did last lesson and name it Click to Play

Select the text and image and Convert to Symbol and save as the ‘Play’ button

Name the Layer ‘Click to Play’

Double click to go inside the button to the UP/OVER/DOWN/HIT section. Remember UP – When the mouse is not over the button OVER – When mouse pointer is over the button DOWN – When mouse pointer is over the button and mouse is pressed down HIT – Invisible area that defines whether mouse is over the button

As per previous print screen, right click at the OVER stage and insert a Key Frame. Inserting a key frame allows you to change the image from the previous frame, it separates the frames. Change the colour of the button so that when the mouse pointer is over it it will change colour

If you insert a key frame at the DOWN stage you can change the image again so that when you click on the button it will change. Otherwise insert a key frame at the HIT stage so that you can set the hit area to say when the mouse pointer is over the image

Insert a rectangle using the shape tool to show where the HIT area is.

Click on Scene 1 to go back to scene 1 so you are no longer inside the button. MAKE SURE the button is still selected, it will have a blue line round it. Click on Windows, Actions and type in code to say that when the mouse is released (after the player clicks it) Go to Frame 2. on(release){ gotoAndStop(2); }

TEST Click on Control, Test Movie to test that when the mouse goes over and you click on your button it changes based on the UP/OVER/DOWN/HIT settings you made

You are on Scene 1. Insert a new layer called Actions above the Click to Play layer

You are on Frame 1 of the Actions Layer, go to Windows, Actions and type in stop(); This will stop it going back to Frame 1 once the click to play button has been pressed

Insert another new layer called Score Panel between the Click to Play and Actions Layer. This is where you will count the scores. Go to Frame 2 and insert a Key Frame

You are on Frame 2, Insert a rectangle at the bottom using the shape tool, that you will use to display the scores. This example has a linear fill. This is your ‘Score Panel’ It will only show on Frame 2 so only after the Click to Play button on Frame 1 has been clicked as per the code you added to the button on Frame 1: on release go to and stop at Frame 2. The Score Panel will appear

Then add another layer called ‘Scores’ above the Score Panel. This is where you will insert variables that will actually count the scores. Insert a key frame at Frame 2 You are on Frame 2 of the ‘Scores’ Panel as you don’t want the scores to show until the player has clicked on the play button and the code has taken you to Frame 2.

You are going to add a box that will count the Scores. To do that Click on the T (Text Tool) and then choose Dynamic Text from the drop down list.

Draw where the box will be and then in the Variable box under Properties enter score (lower case) this will be the name of the variable box.

Then enter a Static Text Box and type in the label ‘Hits’

Enter a new layer above the Scores layer and call it Balloons. Go to FRAME 2 and insert a KEY FRAME

You are on Frame 2, create a balloon using shapes and colours

Convert the balloon to a symbol, save it as a MOVIE CLIP called Balloon

Test your movie to see what happens. You should have the Click to Play button and when you click on it you should then have the second stage which is where the balloon and the score panel appear.

Double Click to go inside the balloon movie clip

Go to Frame 3 and insert a blank key frame

Now on Frame 3 insert a graphic that looks as though the balloon has burst. Inside the Balloon movie clip the balloon is O.K. Frames 1 and 2 and then it bursts in Frame 3. Move the timeline marker across the frames to see.

Now go to Frame 4 and insert a blank key frame. You are still creating the balloon movie clip

You are still on Frame 4, insert a new layer called Actions

Click on Frame 1 of the Actions Layer, go to Windows, Actions and type in stop(); This will stop the movie clip playing when the balloon has burst

Then go back to Frame 4, insert a Key Frame so that you can put a new action in ( a key frame separates the section from the last set of frames)

In Frame 4 go to Windows, Action and type in _parent.gotoAndPlay(3); This says after the balloon has burst and the movie clip has finished go back to Scene 1 and play Frame 3. You will see the a symbol appear on frames 1 and 4 to show you have added ActionScript

RECAP 1.You have created a button and when it is clicked on it goes to Frame 2 2.At Frame 2 you have created a Balloon Movie Clip 3.In the balloon movie clip the balloon bursts at Frame 3 but you haven’t told the computer when to play the movie clip yet 4.You have created a Variable text field on Frame 2 which means the text inside it will change but you haven’t told the computer yet when to change the text and what to change it to. You are now going to create a HIT area over the balloon movie file so that if the balloon is clicked on (in the same way that the Play button was) the computer will know to play the movie so that the balloon bursts

Insert a layer called Dummy Button above layer 1. You are on Frame 4. You are still inside the movie clip.

Click on Frame 1 and create an oval over the balloon in a different colour.

Convert to Symbol and save it as a button, call it hit button

Double click to go inside it. You are now inside the hit button that is in the balloon movie clip.

Click on the UP frame and drag it to the HIT frame so that the UP/OVER/DOWN are white (blank). You will then see if you click on the UP/OVER/DOWN frames the grey oval (dummy button) is not there, it only appears at the HIT stage so the invisible area that defines when the mouse is over the hit area/balloon

Go back to the balloon movie clip

You are on frame 1 of the Dummy layer, Click on Windows, Actions and click to select the hit button. Type in the code on (press) { gotoAndPlay(2); _root.score++; } See next page for explanation

on (press) { gotoAndPlay(2); _root.score++; } Within the balloon movie clip, on Frame 1 you have said below, if the hit button is pressed go to Frame 2 of the balloon movie clip and play from there it will play to Frame 3 which shows the balloon burst and then it will go to Frame 4 which tells it (in the Actions layer) to go to the _parent which is Scene 1 and carry on from Frame 3 again. It will then go back to Scene 1 and Frame 3 and play from there. If the balloon is clicked on again it will play the movie clip over again. The code also says, if the hit button is clicked on add one to the Variable ‘score’ which can be found in the root (scene 1) – This is the Dynamic text box you created on the Scores layer in Scene 1

Select Frame 2 of the Dummy Button Layer and Insert a Blank Key Frame

Go back to Scene 1, make sure the balloon is selected convert it to a Movie Clip called Balloon Move

In the Properties window, in the instance name call it balloon (case sensitive)

Double click to go inside the Balloon Move movie clip. At Frame 2 insert a key frame

Then go back to Frame 1 and delete the balloon image. If you go to Frame 2 afterwards you will see that it is still there.

Insert a new layer above Layer 1 and call it Actions. In Frame 1 add the action script code stop();

In Frame 2, insert a Key Frame and add the same action script code stop();

In Frame 3, insert a Key Frame and add action script code removeMovieClip("");

Click on Frame 2 and then click on the balloon

Enter the code (click on this link to copy and paste)

Go back to Scene 1. You should be on the Balloons layer, Frame 2. The balloon movie clip now looks like a dot on the stage. Click on it and drag it downwards so that it is below the score area

Use the shape tool to draw a small oval next to the balloon dot.

Save the oval as symbol Movie Clip and call it Trigger

Add the ActionScript code to the Trigger Movie Clip by selecting it and going to Windows Actions.

// if (_root.z%_root.intervalz == 0) This action checks whether the value of variable 'z' is perfectly divisible by the value of variable 'intervalz' // duplicateMovieClip("_root.balloon", "balloons"+_root.z, _root.z); If the first 'if' condition satisfies then this action will create a duplicate movie clip of the balloon movie clip // setProperty("_root.balloons"+_root.z, _x, random(200)+50); This action determines the X position of the duplicated movie clip This action lets the duplicated movie clip to play its second frame // _root.z++; This action keeps on incrementing the value of variable 'z' by 1

Insert a new layer and name it variables.

On Frame 2 insert a Keyframe

Enter the code. Test your movie by clicking to play and then the scores should add up every time you click on a balloon.

You can smarten up your first frame with instructions and a title above the click to play button