This document provides an overview and instructions for an upcoming final project assignment in an ARTDM 170 class on scripting interactivity in Flash. It outlines the following requirements for the final game project: it must have a start screen, interactivity through key presses, mouse clicks or drags, scoring, a game over screen, and the ability to replay. It also provides a timeline for completing stages of the project and instructions on implementing various interactive elements like buttons, dragging objects, collision detection, and keyboard input. Homework due for the next class is to create a title and description for the project and read assigned chapters in the textbook.

1. ARTDM 170, Week 7:
Scripting Interactivity
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170

2. Homework
• Please put your .swf file in a folder
with your last name and first initial
• Put the folder in my dropbox
• Example:
smith-h
myAnimation.swf

3. Open Flash
• Create a new ActionScript 3.0
document:
MyObject.fla
• Create a new ActionScript file:
MyObject.as

4. Final Projects

5. Requirements
Your final project is to create a game in Flash. Your game must meet
these requirements:
• Start screen
• Interactivity, which could be:
‣ Key press
‣ Space bar
‣ Mouse click
‣ Mouse drag
• Score
• Game over screen, shown when the game ends
• Way to replay the game
• Sound (optional)

7. Timeline
March April May Last day of class
9 16 23 30 6* 13 20 27 4 11 18 25
Create a project title and description
Present final projects
Paper prototypes (two days)
Design background, characters,
and other game elements
Embed game elements in game symbol
Add movement and keyboard interaction
Add Start and Game Over screens
Add scoring and game over trigger

8. Flash Buttons

9. Create a Button
• Create a new symbol in the Library
• Symbol type: Button

10. Button Frames
• Buttons only have four frames
• Each frame is a button state:
‣ Up - no user interaction
‣ Over - user mouse hovers over
‣ Down - user clicks the button
‣ Hit - invisible shape defines whatʼs
clickable

11. Button Event Listeners
• Add a button to the stage
• Name the button
Instance name: myButton

12. Event Listeners
• Add an event listener to the button
myButton.addEventListener(
MouseEvent.CLICK, stopOnEveryFrame);
function stopOnEveryFrame(
e:MouseEvent):void{
removeEventListener(
Event.ENTER_FRAME, onEveryFrame);
}
How would we restore movement?

13. Dragging Objects

14. Dragging
• Objects can be dragged by tying
them to the dragging functions
myObj.startDrag()
myObj.stopDrag()

15. Dragging
• An event listener is added to the
start of the script that is tied to the
object that must be dragged
myObj.addEventListener(
MouseEvent.MOUSE_DOWN,
startDragging);

16. Dragging
• Drag functions are placed in the event handlers as well as
a new event listener to listen for stop dragging
function startDragging(e:MouseEvent) {
stage.addEventListener(
MouseEvent.MOUSE_UP, stopDragging);
myObj.startDrag();
}
function stopDragging(e:MouseEvent) {
stage.removeEventListener(
MouseEvent.MOUSE_UP, stopDragging);
myObj.stopDrag();
}

17. Stage Event Listeners
• Event listeners are added to the
stage to improve performance
stage.addEventListener(
MouseEvent.MOUSE_UP, stopDragging
);

18. Throwing Objects

19. Throwing Velocity
To throw an object, the values for velocity (moveX and
moveY) are updated according to the where the user
has moved the object and its change in location over
time
function trackVelocity(e:Event):void {
moveX = myCircle.x - oldX;
moveY = myCircle.y - oldY;
oldX = myCircle.x;
oldY = myCircle.y;
}

20. Collision Detection

21. hitTestObject sprite1
sprite1.hitTestObject(sprite2) sprite2
• When the bounding
box of one object overlaps
with the bounding box of
another object, a collision is
detected

22. hitTestObject sprite1
• Use an if() statement to do sprite2
something with the collision
if( sprite1.hitTestObject(sprite2) ){
// collision happened
}

23. hitTestPoint sprite1
sprite1.hitTestPoint(x1, y1, true)
• Check if the edge of a shape is near
a point (x1, y1)
• Cannot be used with two shapes,
only a shape and a point
• Can be used with the mouse, using
mouseX and mouseY

24. hitTestPoint sprite1
• Use an if() statement to do something
with the collision
if(sprite1.hitTestPoint(x1,y1,true)){
// collision happened
}

25. Keyboard

26. Listen for Keyboard
stage.addEventListener(
KeyboardEvent.KEY_DOWN,keyDownFunction);
stage.addEventListener(
KeyboardEvent.KEY_UP,keyUpFunction);

27. Checking which key
// key pressed down
public function keyDownFunction(
e:KeyboardEvent) {
if(event.keyCode == 37) {
leftArrow = true;
} else if(event.keyCode == 39) {
rightArrow = true;
} else if(event.keyCode == 32) {
jumpUp = true;
}
}

28. Checking which key
// key lifted up
public function keyUpFunction(
event:KeyboardEvent) {
if(event.keyCode == 37) {
leftArrow = false;
} else if(event.keyCode == 39) {
rightArrow = false;
}
}

29. Key codes
• Spacebar 32
• Left arrow 37
• Up arrow 38
• Right arrow 39
• Down arrow 40
More key codes and constants on
Adobeʼs site

30. Moving an object
// move to the left
if (leftArrow) {
myBrick.x -= speed;
}
• This would allow the user to move
the object to the left at a certain
speed every frame.

31. Stage Focus
• Keyboard input like using the arrow
keys or the space bar arenʼt detected
until you clicked the screen
• Add this line of code before your
keyboard event listeners:
stage.focus = stage;

32. Homework, due March 23
• Create a Title and Description for
your final project
• Read p83-94, Chapter 3: Basic
Game Framework: A Matching Game
in AS 3.0 Game Programming
University
• Next week: youʼll have a subsitute

33. Thank You