Chapter 3 3 Macromedia Flash Overview o Flash

  • Slides: 34
Download presentation
Chapter 3. 3 Macromedia Flash

Chapter 3. 3 Macromedia Flash

Overview o Flash is one of the leading web game development platforms o Flash

Overview o Flash is one of the leading web game development platforms o Flash MX 2004 Action. Script has all the power and strength of most professional (non-web) programming languages 2

Advantages of Flash o Wide Audience n 98% of web viewers have the Flash

Advantages of Flash o Wide Audience n 98% of web viewers have the Flash player o Rapid Development n Self-contained graphic and code development o Easy Deployment n Flash automatically creates web pages 3

Advantages of Flash o Fast Learning Curve n Programmers and artists alike can learn

Advantages of Flash o Fast Learning Curve n Programmers and artists alike can learn Flash Action. Script in very little time o Easily Applicable to Designers and Programmers n n Action. Script is similar to other ECMA languages Drawing tools are identical to most other graphics applications 4

How Flash Works o Timeline Based n Flash uses a timeline of frames, causing

How Flash Works o Timeline Based n Flash uses a timeline of frames, causing the game to run at a fixed frame rate 5

How Flash Works o Timeline Based n Code is placed on frames of the

How Flash Works o Timeline Based n Code is placed on frames of the timeline n Designers and artists will be more likely to make use of this timeline to draw and animate character animations, motion graphics, etc n Programmers, on the other hand will tend to place all of their Action. Script on one single frame, and keep their timeline only one frame long 6

How Flash Works o Vector Engine n The base graphics engine behind Flash is

How Flash Works o Vector Engine n The base graphics engine behind Flash is a vector engine n All graphics and shapes are defined in terms of mathematical shapes like lines, spline curves, vertices, circles and stroke / fill information n Advantage of using a vector engine is that a game can be scaled to any size, and its graphics will continue to look sharp and crisp 7

How Flash Works o Vector Engine n Shapes can be filled with solid colors,

How Flash Works o Vector Engine n Shapes can be filled with solid colors, radial gradients, linear gradients and even a tiled bitmap n The more complex the vector, the slower it will be rendered in Flash, and the more it will be likely to slow down the game performance n Once a shape is defined, it can then be converted into a movie clip 8

How Flash Works o Vector Engine n n Movie Clips are the base item

How Flash Works o Vector Engine n n Movie Clips are the base item of all game interaction Movie Clips can be moved, rotated, scaled and faded (made transparent) with Action. Script code 9

How Flash Works o Audio Engine n n We can easily create sound effects,

How Flash Works o Audio Engine n n We can easily create sound effects, music or voice-overs in an audio application, and then import these sounds into Flash We can create an instance of the Sound object in Action. Script, and then trigger a sound any time we need it 10

How Flash Works o Audio Engine n n Sound can be compressed as raw,

How Flash Works o Audio Engine n n Sound can be compressed as raw, ADPCM or MP 3 Music loops can be used to create a seamless soundtrack 11

The Scripting Environment o Action. Script n n All coding and scripting is done

The Scripting Environment o Action. Script n n All coding and scripting is done in Flash in a language known as Action. Script Curly Braces for Code Blocks { } Semicolon for Statement Line Endings; if Logic conditions p if n (condition) do. Something(); Loops 12

The Scripting Environment o Action. Script n Loops accomplished with standard for, do or

The Scripting Environment o Action. Script n Loops accomplished with standard for, do or while. p for (j = 0; j < 100; j++) { do something 100 times; } 13

The Scripting Environment o Action. Script n Variable Types p Standards n n Number

The Scripting Environment o Action. Script n Variable Types p Standards n n Number String Array Boolean 14

The Scripting Environment o Action. Script n Variable Types p Flash n n n

The Scripting Environment o Action. Script n Variable Types p Flash n n n n Specific Object Movie. Clip Color Date Camera Microphone Sound Text. Field 15

The Scripting Environment o Action. Script n Classes p In Flash MX 2004, Macromedia

The Scripting Environment o Action. Script n Classes p In Flash MX 2004, Macromedia introduced Action. Script 2. 0 p Action. Script 2. 0 introduced the ability to create true classes with all of the standard class elements available to other OOP ECMA languages p Created in their own files called class files, with the format “classname. as” 16

The Scripting Environment o Action. Script n The Draw API p Flash has a

The Scripting Environment o Action. Script n The Draw API p Flash has a series of Action. Script commands that are available to use at runtime called the Draw API p The Draw API allows us to draw shapes and graphics at runtime by using a few routines n move. To, line. Style, begin. Fill, end. Fill 17

Integrating Graphics and Code o The Main Timeline n This is where we have

Integrating Graphics and Code o The Main Timeline n This is where we have several movie clips on the stage, and we place Action. Script on frame one of the main timeline n All movie clips on the stage can be referred to in this frame by simply addressing their instance names 18

Integrating Graphics and Code o The Main Timeline code example n beachball. _alpha =

Integrating Graphics and Code o The Main Timeline code example n beachball. _alpha = 10; beachball. _rotation = 90; beachball. _x = 214; beachball. _y = 12; beachball. _xscale = 50; beachball. _yscale = 50; beachball. on. Press = function() { this. _y++; } 19

Integrating Graphics and Code o The Main Timeline code example n All of this

Integrating Graphics and Code o The Main Timeline code example n All of this code would apply to the movie clip beachball n It would set the _alpha transparency to 10 percent, making the beachball almost invisible n Then it would set its _rotation to 90 degrees, its _x position to 214, _y position to 12, and then set its scale to 50 percent by adjusting _xscale and _yscale to 50 n Would create an on. Press function on the beachball, which would be triggered whenever the user clicked the mouse on the beachball 20

Integrating Graphics and Code o The Movie Clip timeline n n Its also possible

Integrating Graphics and Code o The Movie Clip timeline n n Its also possible to place code on the first frame of a movie clip itself We can go into its timeline and place code on any one of its frames, just like the main movie 21

Integrating Graphics and Code o The Movie Clip timeline code example n this. _alpha

Integrating Graphics and Code o The Movie Clip timeline code example n this. _alpha = 10; this. _rotation = 90; this. _x = 214; this. _y = 12; this. _xscale = 50; this. _yscale = 50; this. on. Press = function() { this. _y++; } 22

Backend and Server Connectivity o Other powerful feature of Flash is its ability to

Backend and Server Connectivity o Other powerful feature of Flash is its ability to load external files and resources at runtime, from a URL o Can be used to load data from a server through ASP, JSP, PHP or any other scripting language 23

Backend and Server Connectivity o load. Movie n n The design of Flash is

Backend and Server Connectivity o load. Movie n n The design of Flash is so modular that we can actually load other SWF movies into other SWF movies The load. Movie method can also be used to load JPEG images at runtime 24

Backend and Server Connectivity o get. URL n We can use the get. URL

Backend and Server Connectivity o get. URL n We can use the get. URL command to open up a link in a browser. For example, we can have a movie clip that displays the text “Click here to open somenewsite. com” n get. URL("http: //www. somenewsite. com", "_blank"); 25

Backend and Server Connectivity o Load. Vars n The load. Vars object is an

Backend and Server Connectivity o Load. Vars n The load. Vars object is an Action. Script object that is capable of sending and receiving data to and from a URL. The URL would normally contain an ASP, JSP or PHP script that we had written. n We can use the load. Vars object to send and load variables to and from a backend script. We could use this to load game data like a list of online users, or a list of high-scores. 26

Where Flash Struggles o Flash does not have the ability to do serious real-time

Where Flash Struggles o Flash does not have the ability to do serious real-time 3 D graphics o Flash also struggles when we have too many things going on at once n When we have hundreds of movie clips, all running their own on. Enter. Frame code, with user interaction and sound, Flash will have difficulty keeping all of this going, and still maintaining our desired frame rate 27

Where Flash Struggles o Flash doesn’t actually compile the Action. Script to a low-level

Where Flash Struggles o Flash doesn’t actually compile the Action. Script to a low-level machine language form n n Instead Flash converts the Action. Script into codes that are several bytes in size (bytecode), and then parses them at runtime In essence, a SWF file still contains scripted code, even though it has been compressed 28

Where Flash Excels o Physics and Motion n Given the x, y grid-based design

Where Flash Excels o Physics and Motion n Given the x, y grid-based design of the Flash stage p We can apply all sorts of standard physics concepts to Flash games p We can easily do things like translation (movement), collision, gravity, bounce and friction 29

Where Flash Excels o Bitmap-based Tile Games n n With a few careful tricks,

Where Flash Excels o Bitmap-based Tile Games n n With a few careful tricks, Flash can be used to recreate all of the bitmap games of the 1980 s and early 1990 s Re-creating a Super Mario Brothers type of platform game is relatively easy using bitmap tiles and it will run very, very fast 30

Where Flash Excels o “Old School” games n We can use Flash to easily

Where Flash Excels o “Old School” games n We can use Flash to easily recreate all of the games of the early 1980’s, like Pac Man, Galaga, Asteroids, etc o Popular Puzzle Games n Flash excels at puzzle games, like the ones found online at shockwave. com 31

Where Flash Excels o Games for Devices n n Flash player is available on

Where Flash Excels o Games for Devices n n Flash player is available on dozens of platforms, so we can technically create games that work on all of these platforms Can create games that play on devices like the Pocket PC, cell phones and watches 32

Macromedia Flash: Summary o Flash games n Have an instant potential audience of millions

Macromedia Flash: Summary o Flash games n Have an instant potential audience of millions n Can be rapidly and easily developed n Can be deployed easily and quickly o Both programmers and artists can learn flash quickly and easily o Flash moves along based on a timeline that proceeds at a specified frame rate 33

Macromedia Flash: Summary o Flash is a vector-based graphics engine n Supports lines, fills,

Macromedia Flash: Summary o Flash is a vector-based graphics engine n Supports lines, fills, gradients and bitmaps o Flash has strong support for audio n MP 3, ADPCM and RAW compression o Flash uses a powerful scripting language called Action. Script to o o program the game Action. Script 2. 0 has a powerful class structure Graphics and code are integrated into one unit in the Flash IDE The Draw API can be used to create graphics at runtime Flash can communicate with external servers to retrieve files and data 34