Programming games

Flash drawing trick(s). Past due: Your completion of rock-paper-scissors)

Classwork: Bouncing ball: read tutorial. Start coding.

Flash drawing

• segmentation of drawing: – select parts, – add on by using shift key– also use lasso or rectangle select tools

• move

• modify (transform)

Flash

You can• change position and dimensions selecting an object and using

the Properties panel– W– H– X– Y

Try this!You can use this• to make sure an oval is a square.• to get the origin (cross-hairs) where you want them to be.• to line up and space out related objects.

Flash distinctionsIn [my] rock-paper-scissors,• instances of scissors button present on Stage in

each frame• scissors button in Library

– graphical material in each of the 4 frames of the scissors button in Library

For making the animated sequences, I copied-and-pasted from the graphics in the Up frame of the scissors button in the Library. I then modified the graphics on the Stage. There was no change in the scissors in the Library.

Show your work

• Reminder: slow and steady

• Get logic working and then add/enhance the graphics and add animation

• Don't be skimpy on frames

• Put in stop(); in the last frame of each animated sequence.

Common problems

• Forgetting to insert keyframe

• Using the whole button instead of graphics that were in a frame of the button

• Working on different layers

• Omitting stop();

Random

• This is the same as JavaScript!• Math is a class. Math.random is the name of one of the

class methods. Math.random() is a call to the class method. [This is the jargon—learn it!]

• Math.random() produces a random fraction from 0 up to (but not including) 1

• Math.floor(Math.random()*n) [assuming n is a variable holding a positive

integer]produces integers from 0 up to (n-1)

Symbols• Movie clips• Button• GraphicsSymbols are created and remain in the Library.

You bring instances to the Stage.Note: you can draw directly on the Stage (just like

you draw to make a movie clip). Create graphics symbols in the Library when you

want to repeat a symbol. You bring instances to the Stage.

Changing the symbol in the Library changes all instances on the Stage.

Flash publishing• Save As/Save: saves the source aka

development version .fla file• Publish: creates .html and .swf versions. You

can examine any of the .html files• Make sure your saved .fla and the published

files are the same version.• You can upload the .fla file to your website for

storage.– I sometimes do this to make the source

available to students.• You upload the .html and the .swf to

share/show to everyone on the Web.• The file to be linked to is the .html file.

Bouncing ball overview

• Three layers (board, interface, actions)– Can also make a ball layer underneath the

board layer holding the walls OR make sure you bring the ball to the Stage before any wall instances.

• 1 frame

• Use Timer object to produce an event every so often– Recall setInterval

Animation in bouncing ball (and cannonball)

Code• Changes the Stage, that is re-positions the

ball instance every interval of time.• Just one Timer object

– Don't blindly copy code!

• Uses the running attribute of the timer object to determine if 'in flight‘.

• Uses variables and calculations to determine horizontal and vertical position changes (aka displacements)

Interface

• Button (shows either Stop or Start)– Component instance. Note: you could make

your own button.

• Input Text field– Input means the player can change it– Note: Use speed.text to access what the

player typed in.

Warning

• We are using ActionScript 3.0. There were significant changes from ActionScript 2.0 to 3.0. Not so significant from CS3 to CS4.

Timer object• var mytimer:Timer= new Timer(200);This creates a Timer object that will have a timer

event every 200 milliseconds.The new is what creates a new object.• var timer1:Timer= new Timer(5000,3);This creates a Timer object that will have a timer

event every 5 seconds, and stop after 3 of them….

The mytimer and the timer1 are my names for these variables.

Note: the bouncing ball application did NOT use anything named or similar to timer1.

Event handling

At this point, the Timer objects exist but neither one has been started and no event handling has been set up.

mytimer.addEventListener(TimerEvent.TIMER, moveball);

This sets up the event handling: when the TIMER event happens, the moveball function will be invoked.

The moveball is my name for a function I wrote!One more thing to do:mytimer.start();

What to do?

• I want to move the ball, that is, the movie clip instance on the Stage that I have named ball.

ball.x += xd;

ball.y += yd;

Walls

• Remember: there are no walls!!!• However, you can write code to do a calculation.

if rightwall.hitTestPoint(ball.x, ball.y, true) {

…

}

This asks the question: is the x,y location of the ball (where this is depends on how you drew the ball) within the non-blank pixels of the rightwall.

Button

• There is a button to start and stop the action.

• It has a label that the code changes.

• Much of this is the same as you have already done!

Speed field• This is an INPUT text field, meaning that the player

can change it as well as code. The value is accessed using

= speed.text• Need to convert from text to number

= Number(speed.text);• Make sure the initial text has no blanks and

represents a positive > 0 number!– Dynamic text fields can be changed by code.– Static text fields cannot be changed after set at Design time.

• Think about design time versus runtime

• This value is used to set the xd and yd values.

Now…

• Read whole tutorial and build your own bouncing ball

General concept: Objects• Objects are objects of a specific class.• So far, we've only used built-in classes.• Objects have

– properties Also Known As attributes AKA data AKA information

– methods AKA code AKA behavior

• Examples– head.visible, ball.x– mytimer.addEventListener– In cannonball: target.goToAndPlay(2);

• In rps, we used gotoAndPlay("breaks") for the main movie so we didn't need the dot (.)

Classes

• Built-in classes include– movie clip– Timer– FLVPlayback– Sound

• Programming defined classes– See their use in other examples

• bouncing things• shooter• jigsaw puzzle

Demonstrate

• Bouncing stuff (different size and color balls)

• Bouncing things (3 different shapes, different size and colors)

• Makes use of external .as files.• Bouncing things demonstrates use of

common code for some aspects of 'thing' creation and behavior

• You can come back to this later for your special Flash project.

Classwork/Homework

• Complete bouncing ball

• Preview: Read cannonball tutorial

• Will discuss cannonball issues next class.