Introduction to Flash and Actionscript

S3 - Using Buttons, Keyboard, and HitTest

 

Tutorial 1 - Creating a Basic Button

Step 1

Open a new Flash document.
Draw a rectangle and add text to it.



Convert your rectangle to a button symbol. Name the button and the instance of the button

   

Step 2

Double click on your button and you should notice the timeline changes. There are now 4 frames:



Up -The appearance of the button when the movie loads up.
Over - The appearance of the button when the mouse is over.
Down – The appearance of the button when it is clicked.
Hit – This state determines where the hotspot of the button will be active. This state is important for buttons which just contain text.


Step 3

Select the over state and insert a new key frame. You can now change the colour of your button, if you wish. This will be the colour when your mouse passes over the button.

Now repeat this for the down and hit state, inserting a new key frame and adjusting the colour of the rectangle.


Step 4

Double click anywhere on the stage and to return to the main timeline.
Test your movie clip Ctrl + enter. Move your mouse over and click you button and you should notice the colours changing.


Step 5

To test when the button has been clicked we use an EventListener.

EventListeners wait until something happens and then run the code that is associated with the action.

Add the following code to the actions layer.

 

 


Using Buttons to Control Animations

Tutorial 2 - Start and Stop Buttons

Create 2 Buttons one for Start and one for Stop

Create a tween to move an object left and right. (Code or Tween)

If you are using a new Scene instead of a new file at the end of you tween return to frame 1

this.gotoAndPlay(1)

 

 If you are using a built in Tween

If you are using code 

To stop the Tween use

myTween.stop()

 

 

 

Assignment 1 - Moving/Resizing objects using Buttons

Example from student work

a) Move a Symbol up and down using arrow buttons

Note:

instancename.y -=5; //moves up

instancename.y +=5; //moves down

b) Add left and right buttons

c) Resize a Symbol

Use .width and .height

 

d) Rotate a Symbol

Use .rotation

 

 

 

Assignment 2 - Next and Previous

To move to a specific scene we use (gotoAndPlay(1, "Scene 1")) where 1 is the frame and "Scene 1" is the scent

a) Create at least 4 additional scenes in your Assignment 1. Each scene must include buttons that modify the scene in some way. The modifications should be different on each scene. (Changes alpha, colour, background, etc. be creative and try something different)

Add Next and Previous Buttons to change between scenes.

Also add a goto beginning and goto end option on each scene



b) Adding sound to a button

Add different sounds to your buttons

Step 1

Import your audio file into the library by selecting File > Import > Import to library then select your audio file and click ok.


Step 2

Create your button on the stage

Convert it into a symbol, then give your symbol an appropriate name and check the “button” button then click ok.


Step 3

Double click on your sound button and your timeline should look like below:


Now select the down state and create a new key frame by selecting F6.


Step 4

First add your sound file to the library.

With the down state selected go to the bottom of screen and choose your audio file from the library menu.






 

Assignment #3 - Pacman Menu Screen

Create a new menu scene in your pacman game. This will be between your morphing titles and your first simulation. Include the following buttons:

1. Tween Simulation

2. Code Simulation

3. Play the Game

Each Simulation/Game should return to the menu when complete

 

st

Assignment #4 - Play Pacman using Keyboard Commands

- create a new scene where pacman is controlled by the user using the keyboard. In order to hittest the walls you will need to draw the maze yourself. Each wall will need a different instance name.

- at the end of the scene display ending scene with the option to play again or return to the main menu

Below is an example of KeyboardEvent.Key_Down works, you will have to rotate your images in each function

 

Import your Keyboard Events at the top of the first frame in your imports section

To avoid having to click on the stage

//focus the screen

stage.focus=stage;

 

 

 


 

 

 

Assignment 5 - Ghosts and Event Listeners

 

We will move the ghosts using EventListeners and Functions so that we can collide with them later.

 

 

To Move to a New Scene

 

 

 

Using Hittest

Tutorial 3 - Drag and Drop

Create 2 squares and convert them to movie clips.

Type in the code below and test

Document each section of code so that I know you understand what is happening.

This tutorial will be marked for documentation only

 

 

 

 

 

 

Assignment 6 - Pacman Collisions

Delete the dots when pacman hits them.

End the game when pacman hits a ghost. (You will need to have the last ghost event listener call the first)

 

 

 

 

 

Quit will Only work when the game has been compiled not in Testing Mode

 

Above and Beyond

For both of these you will need to use a variable. See next section! Hints below but I will not solve this for you. (That is why it is above and beyond)

ICS3C students only need to do 1 of the items below. Bonus if you do both. Also I will help if you need an explanation.

1. Add a scoring system

Use a printScore function to initialize score and print it in a text box

// Initialize score variable

var intScore:int;
intScore = o

On your dots hittests add one to the score

// to add to score

score +=1;

 

To exit a a certain score put an if condition in the printScore function

// add an if to your printScore function

remove the event listener
call your endScreen function

 

2. Hittest your walls in you hittest function, so that pacman cannot travel through them.

if (pacman_mc.hitTestObjec(wall1_mc))
{

hit = true

}

else if (pacman_mc.hitTestObjec(wall2_mc))
{

hit = true

}

// Keep going for all your walls

// last condition is an else if no wall is hit

else

{

hit = false

}

 

At the start of your program initialize hit

var hit:Boolean;
hit=false;

 


In the KeyDown Function modify your controls for hit true, or hit false

if (hit == false)

{

// All your normal commands

}

if (hit == true)

{

// move in opposite direction (incease number slightly)

}

 

 

 

Embed all tutorials, assignments, and code.

Attach your .swf files

Link to your .fla files

Copy the Evaluation Sheet to your google drive and post the link at the top of your webpage.