Introduction to Flash

CSC361/661Digital MediaSpring 2007

Burg

Designed for vector graphics

• Vector graphic images save objects as lines, geometric shapes.

• Vector graphic files are usually smaller than bitmap files.

• Good for web applications, where it’s better to have small files

• Good for cartoon or poster-like images.

• It’s easy to animate.

Drawing

• You can draw vector graphic objects directly in Flash.

• You can also create them in Illustrator or Freehand and import them.

• You can also import sound and bitmap images.

Flash’s Stage vs. Director’s Stage

• Both the Director and Flash Stages are laid out in frames horizontally

• The Stage in Director is organized into Channels (vertically). Only one sprite can be on a channel at any moment in time. But more than one sprite appears on Stage if one sprite is on Channel 1 and another on Channel 2 in the same frame.

• The Flash Stage is organized into Layers (vertically). You can draw more than one vector object onto the same Layer. But sometimes it’s easier for tweening to have one object per Layer.

Layers in Flash

• Layers in Flash are like pieces of acetate laid one over the other. They are transparent except for where you put objects.

• You can animate Layers separately.

Programming in Flash vs. Programming in Director

• As is true with Director, in Flash you can make a lot of things happen without doing any programming. You can insert objects into layers and tween their shapes, sizes, and colors.

• As is true with Director and Lingo, you can do have even greater control over the animation if you use Flash’s scripting language, ActionScript.

• Like Lingo, ActionScript can be used in an object-oriented programming style (but you don’t have to use OOP).

Lines, Strokes, and Fills

• You can make vector objects that are just lines or strokes. They don’t have any color fill in them.

• You can also fill vector objects with color, so they have both an outline (lines and strokes) and a fill color.

• You can also have objects that have fill but no outline.

• The outline and fill are treated separately unless you group them.

Multiple Objects

• When you draw or drag one object over another, it cuts the other into pieces (unless the object has been “grouped”).

Things to Experiment With

• Gradients

• Pens and brushes

• Color mixing

• Bézier curves

• Try to make four cards by Friday – A club, heart, diamond, and spade of whatever value.

File Types for Distribution

• .fla is the native Flash environment. You have to have the Flash authoring program installed on your computer to play this file.

• .swf is the web-version. You can play this via a web page or import it into a Director movie.

• .exe is a stand-alone projector, executable on the platform for which it was compiled (Windows or Mac versions).

Keyframes

• You begin with a blank keyframe on a layer.• Blank keyframes are represented by hollow circles.• When you put something on the blank keyframe, it

becomes a keyframe and is represented by a black circle.

• If you add more frames after a keyframe, they will contain what is on the previous keyframe.

• If you add a keyframe, it will have what was on the previous frame, and you can change this and then tween between the last keyframe and this one.

• If you add a blank keyframe you’ll get a blank frame and can start a whole new animation.

Shapes and Shape Tweening

• You can create shapes on the stage using Flash’s vector graphic tool.

• Shapes can be “shape tweened.” Shape tweening doesn’t just change the shape. It also can change color, scale (i.e., size), rotation, skew, position, and gradient.

• You can’t use shape tweening with grouped objects, symbols, or text that is not broken apart.

Symbols

• Once you’ve made a shape on the stage, you can convert it to a symbol if you want to. Then the symbol becomes part of your library.

• There are three kinds of symbols:– Graphic – has its own timeline, but the main timeline

must be at least as long– Button – has its own timeline defining up, over, down,

and hit states– Movie clip – has an independent timeline

• You can make multiple instances of a symbol. The symbol serves as a template. It’s like a class in C++ or a cast member in Director.

More about Tweening

• You can “motion tween” grouped objects, text, and symbols. You can’t “motion tween” shapes.

• You can’t “shape tween” text without breaking it apart.

• You can “motion tween” along a path by inserting a path layer and connecting an object’s registration point at the beginning and end of the path.

Bitmaps

• Flash will compress any imported bitmaps when it publishes the movie. The choices are PNG/GIF (lossless) or JPEG (lossy).

• You can make global settings under File\Publish Settings.

• You can make settings for individual bitmaps under Bitmap Properties. These override global settings.

• You can import numbered sequences of images and they’ll play like a movie (if they are sequential images like movie frames).

The equivalent of Director’s frame markers

• There are two ways you can create points that are like Director’s frame markers:– Scenes – Frame labels

• You can go to these places with goToAndStop() or goToAndPlay()

Variables

• Only movie clips can be given instance names. You can then refer to them in ActionScript and make things happen dynamically.

• To create a global variable, use _global. as the prefix on the variable name.

Script

• You can put a script on a frame or on an object on stage.

• Make an actions layer where you put the frame scripts.

• When you click on the frame that has a script attached to it, you’ll see the script in the Actions panel.

• When you click on an object that has a script attached to it, you’ll see the script in the Actions panel.

Buttons

• Buttons have an up, over, down, and hit state. You define these states in the button’s timeline.

• Use the on (release) event handler to define what happens when the mouse is released (you click on the object).

Constructing a Blackjack game in Flash

• Make the card objects. Each is a movie clip so that it can have a name. They are all in the library.

• Create a layers in this order (from top down):– Actions– Button– Cards– Background

• Lock the Background layer since you’re not going to change it.

• Put all 52 cards on the Cards layer, in the “off stage area.” Give each one an instance name.

• Put a face-down card in the middle of the stage, as if it’s a deck face down.

A script for initialization

• Put a script on the first frame. stop() will make the movie stop on the first frame and wait for you to click a button.

• Global variables in the frame script ：– _global.deck, _global.player, _global.discard,

_global.maxDepth

• Put the 52 card instances in an Array which is the deck. Shuffle the deck.

• Initialize the other global variables.

Starting the game and dealing the cards

• Deal out the first four cards.

• Click the “deal card” button to deal a card.

• The “deal card” button has an on (release) event handler on it.

• Make sure the cards are at the right depth so each will be laid on top of the previous one.

Other details

• Make sure the card is placed on the correct side of the table.

• Calculate the score at each card dealt.

• Give some indication of the winner.

• This description assumes only two players. Change the implementation so that more players can join.

• Change to an object-oriented design.