Programming games

1
Programming games

• Flash overview
• Show examples
• Homework Help/Flash Developer Center/Drawing.
  Start rps project.

2
Flash

• Powerful system for creating animations,
  interactive applications.
• We will be using only a portion of the
  functionality.
• Not much tweening
• Drawing is vector graphics.
• Practice and listen/take Drawing Tutorial.
• We will be creating action scripts
• In the .fla file for the first projects. Then in
  a separate .as file for jigsaw.
• ActionScript is similar to JavaScript in syntax
• ActionScript 3.0 is similar to Java
  strongly-typed, use of objects.

3
Common concepts

• A function in computing is code (sequence of
  statements) generally given a name and a list of
  parameters (list may be empty)
• Function flip() statements
• Yes, a function does perform a function (in the
  English meaning of the term)

4
Common concepts, cont.

• A method is a function associated with an object
• Math.random and Math.floor are functions
  associated with the Math object
• Notice dot syntax
• Will use methods associated with particular movie
  clip instances
• test.goToAndPlay()
• test.stop()
• Can define your own methods for objects
• More later.

5
Common concepts, cont.

• Variable (in computing) associate name with
  value so the code can refer to the variable by
  name and access or set its current value
• Yes, variables (in computing) are variable. That
  is, the values can change.

6
Common concepts, cont.

• Things need names!
• Recall the ltimg gt elements needed to have names
  so the src attribute could be set (to display a
  specific image)
• In Flash, things need names.
• In particular, the instance on the Stage of a
  movie clip (from the Library) needs its own name.
• More later.

7
Common concepts, cont.

• Event handling
• Certain events are defined already, such as the
  Mouse events
• Register event listener tells Flash to invoke
  code, generally a function, when the event
  happens. Need to write this function!
• Some events, such as timing events, require
  declaring a timer variable, creating the timer,
  registering the event listener

8
Flash features

• Stage
• graphic and also sound video material
• Movie clip symbol instances defined in the
  Library
• Timeline sequence of frames
• Divide into layers, mainly for organization, but
  also to make sure things are in front of other
  things
• A frame can hold ActionScript
• Library of symbols
• graphics, buttons, movie clips
• Movie clips can be quite small, maybe even empty

9
Flash development

• Create .fla file
• In some cases (jigsaw for us), create .as files
• The .fla and the .as files are SOURCE
• I have uploaded some source files for you to
  examine and build on.
• Test program in Flash environment
• When done, File/Publish
• Produces .swf and .html files. These are the
  files typically uploaded to the web.

10
CS3 vs CS4

• No big differences that we can see (so far)
• Screen shots will be mixed, some from CS3 and
  some from CS4

11
(No Transcript)
12
Opening screen

• We will create a new Flash ActionScript 3.0 file
  (first choice under New)

13
(No Transcript)
14
General procedure

• Insert New symbols
• Movie clip, graphic, or button
• Insert Timeline keyframes
• Must be keyframes
• Add (rename) layers. These are my names!
• board (plus others if you need things on top of
  other things) for the 'material', the graphics
• actions reserve for the ActionScript
• Flags or Labels (names of keyframes)

15
Symbols

• Created and stored in Library associated with the
  file.
• There is also a Common Library
• You move an instance of a symbol to the stage at
  a given frame, given layer
• 'Stage' can be off-stage.
• Name the instance
• You can use ActionScript to modify attributes of
  instances, including position, visibility, and
  size.

16
Code

• Can be
• Frame code
• Frame code can be function definitions and
  variable 'declarations' (var statements)
• Frame code that is NOT function definition is
  executed each time frame is entered.
• External code (external file)
• Defining classes. Classes define the properties
  and the methods of objects and for the class
  itself.
• Preview the Piece.as file contains code
  specifying the behavior of jigsaw puzzle pieces
  as well as class methods such as mixup for
  shuffling up the pieces
• Preview the shooter application will have files
  for Gun.as, Bomb.as, Aa.as, Ground.as.

17
Flash examples

• Rock paper scissors (animated, partial)
• Bouncing ball, bouncing things
• Cannonball
• Play (playback) video clips
• Jigsaw puzzle
• Completed puzzle becomes video clip
• Shooter
• Survey

18
Comment

• Characteristics of games (other interactive Flash
  programs)
• Library symbols including movie clips
• Explicitly control visible property (and
  placement)
• Fewer frames
• Note finished Flash application as well as
  certain objects in an application are termed
  movie or movie instances

19
Follow along exercise

• Create coin toss
• Like HTML/JavaScript, use built-in random
  function and if statement
• Unlike HTML/JavaScript, make one of two movie
  clips be visible, the other invisible
• Symbols
• button
• USE BUTTON IN LIBRARY
• movie clip for head,
• movie clip for tail
• 2 layers, 1 frame

20
(No Transcript)
21
Will change the text from Enter to Flip
22
Notice2 layers
Notice ButtonInstance named
23
Select the Button (now in Library)
24
(No Transcript)
25
Take T (text tool). Will need to okay opening up
layer. Delete Enter and type in Flip.
26
Go back to Scene 1.Notice that button now says
Flip.
27
Create symbols

• Insert / New Symbol
• Make sure Movie Clip selected
• Type in the name head
• Now on Stage for head
• Set the stroke and the fill color
• Select oval (may need to switch from rectangle)
• Hold down CTL to get a circle

28
(No Transcript)
29
Creating symbols, cont.

• Use pencil tool set to smooth option (or whatever
  you want!)
• Bring instance of head symbol to Stage.
• Give it an instance name.
• Make a duplicate (right click) and change name to
  tail.
• This is to get the same size
• Draw a tail coin
• Bring instance of tail symbol to Stage give an
  instance name.

30
Need to giveInstance name
31
Select and erase strokes that formed the picture
and draw tail image.
32
(No Transcript)
33
Code Actions Panel, actions layer
34
Event handling

• Need to know the name of events, in this case
  MouseEvent.CLICK
• The addEventListener registers the event for the
  button named flipbtn and makes the handler be the
  function flip.
• NOTE need to specify a parameter (name does not
  matter and it isnt used in this function)
• flipbtn.addEventListener(MouseEvent.CLICK, flip)

35
Comment

• Old style Flash is to write code 'in' the
  objects SO you will see this in my old examples
  and elsewhere
• New style is to avoid putting code in different
  places. Instead write code in the frames to
  associate code with objects AND write code in
  separate files.

36
Homework

• Practice drawing
• Help Flash Developer Center Tutorials/Videos
  Drawing
• Key skill is drawing with vector graphics
• Graphics segmented can manipulate parts
• Stroke and fill
• Segments made by additions
• Start rps