Flash Training

Recently I did a flash training at my office,  there were 10 attendants, but I guess that’s not bad for beginner. here is the presentation I used for the training.

Intro to AS3 using Flash CS3

Flash Document

When we create a new file in Flash IDE, we save it in “.fla” document. We call this fla document as a Flash Document.

Every flash document got it’s  own time-line, Stage of given width and height.

We can think of a flash document like a real-world stage play. Both got stages, here actors are symbols. we can add, remove, change, modify actors through out the time line. Every Symbol has it’s own behavior, but we can customize and change as per the requirements.

By default document time line got one layer, we can add or remove layer as per the requirement. We add symbols to layers. Flash time line can contain 2 kinds of frames, Keyframes and Regular Frames.

Key frame: is a frame whose on-Stage content differs from the preceding frame.

Regular frame: by contrast, is a frame that’s on-Stage content is automatically carried over (repeated) from the preceding closest keyframe

Symbols and Instances

Flash support three types of symbols.

• Movie Clip (for animations with programmatic content)
• Graphic (for nonprogrammatic animations that can be previewed directly in the Flash authoring tool)
• Button (for simple interactivity)

When we create a symbol master copy of that symbol is stored in library. Whatever we see on the stage is instance of those symbols, aka related copies of that symbol. changing symbol affect all instances, but change instance doesn’t affect symbol.

Accessing child clips of a movie

getChildAt()
getChildByName()

Timeline Control

• play( )
• stop( )
• gotoAndPlay( )
• gotoAndStop( )
• nextFrame( )
• prevFrame( )
• currentFrame
• currentLabel
• currentLabels
• totalFrames

Drawing API

ActionScript allows us  to create primitive vector shapes and lines via Graphics class. Each ActionScript class that supports drawing creates an instance of Graphics class through which we care add graphical elements into it.

Say for example you have a class by name Ball.

you create a new instance of ball like

var smallBall:Ball = new Ball()

assuming that Ball is of width and height equal to 100px, to draw a border around the ball you can you code like this.

smallBall.graphics.lineStyle(1, 0x000000);
smallBall.graphics.moveTo(0, 0);
smallBall.graphics.lineTo(100, 0);
smallBall.graphics.lineTo(100, 100);
smallBall.graphics.lineTo(0, 100);
smallBall.graphics.lineTo(0, 0);

you can categorize methods of Graphics class as follows:

Drawing lines
curveTo( ), lineTo( )

Drawing shapes
beginBitmapFill( ), beginFill( ), beginGradientFill( ),  drawCircle( ), drawEllipse( ), drawRect( ), drawRoundRect( ),
drawRoundRectComplex( ), endFill( )

Defining line styles
lineGradientStyle( ), lineStyle( )
Moving the drawing pen
moveTo( )

Removing graphics
clear( )

Data Types

Primitive:

• Boolean
• int
• null
• Number
• String
• uint
• undefined

Complex:

• Object
• Array
• Date
• Error
• Function
• RegExp
• XML
• XMLList

* type that is used to represent any data type. This should be used instead of omitting typing information for your variables.

Casting is treating variable of one type as variable of another type.

example:

int(true) //results 1

Key Board Events

• KeyboardEvent.KEY_DOWN
• KeyboardEvent.KEY_UP

Global Keyboard-Event Handling: Flash player by default doesn’t dispatch Global keyboard events, where as by adding key listener to Stage you can handle global key board events.

MovieClip Properties

In flash we can create 3 types of symbols.

1. MovieClip

2. Button

3. Graphic

Whenever we create a Symbol that Symbol will get added to the Library. Symbol in a Library is like master copy, we can drag Symbol from Library to create instance of the Symbol on stage. Here one thing we should remember is changes in library effect all instances on stag, where are changes to instances doesn’t. We can identify every instance of symbol with unique name called “Instance Name”.

MovieClip is the most used symbol in flash, in Flash almost every thing is a MovieClip. MovieClip is basically nothing but a container, similar to div in HTML, the only difference is it has it’s own time line. By that I mean, you can create n number of nesting MovieClips. Using property inspector we can assign an instance name for a MovieClip.

Flash doesn’t through error if you name two instances by same name, by default it assumes that name to the latest instance.

Button is used to define any click-able area. A Button is special kind of MovieClip, it has predefined 4 states.  Up, Over, Down, Hit.

Graphic is used to group shapes that doesn’t require it’s own time line.

Below are common properties of MovieClips which we can control using Actionscript.

• x
• y
• width
• height
• scaleX
• scaleY
• rotation
• alpha (transparency)

x, y take any negative or non negative integer, scaleX, scaleY, alpha take values between 0 and 1. width and height integers >= 0;

Flash CS3

Flash CS3 is a powerful authoring tool with powerful drawing capabilities helps you in creating Animations, Websites with audio and video, Ad Banners, Games, Guided\Auto-run tutorials and Data-Driven applications.

Flexibility, strong control over visual and audio elements, provide scalability, lower footprint, resizabilities, internal scripting language, highly integrated with other Adobe tools are major features of Flash IDE.

New features in flash CS3

• Animation to ActionScript conversion
• Standard Adobe Interface
• Advanced Debugger
• Rich Drawing Capabilities
• User Interface Components
• QuickTime Export

Introduction to ActionScript 3 using Flash CS3

Coming days I am going to post tutorials on Introduction to ActionScript 3 using Flash CS3, Here are the topics I am planning to cover. for that sake we can keep flex thing aside for now, I will take it up later.

• Overview
• Introduction to Flash CS3
• What’s new in ActionScript 3
• Operators, Conditional Statements, Loops
• Data Types
• MovieClip Properties
• Understanding Events, Listeners, Handlers
• Mouse Events, KeyBoard Events
• EnterFrame, Timer
• Drawing API
• Filters/Effects
• Drag & Drop, Collision
• Using Audio and Video
• Simple Click-Through Prototype

Please feel free to comment