Learning ActionScript 3.0

One of my favorite things to do in Flash is to program different types of motion. From particle systems to the boss at the end of an advergame—the basic principles for moving things around the screen with code are the same. There was a time when all the different types of motion that I saw happening—back in the Flash 4 days—were a complete mystery to me. I remember spending a long time reverse engineering open source examples from ultrashock.com.

Motion Myth

For some reason lots of people seem to think that ActionScript animation creates smoother animation than the Flash timeline. This is simply not true. The timeline is just as capable of creating “smooth” animations as ActionScript is.

On the timeline, if you want a smoother animation, use a framerate around 30fps and put more space between your keyframes.

ActionScript vs. Timeline

Students sometimes ask me when to use coded animation and when to use timeline animation. The answer is more complicated than you might expect. Here’s a basic set of rules:

TIMELINE ANIMATION IS FOR:
- animation that is always the same (static animation)

ACTIONSCRIPT ANIMATION IS FOR:
- interactive animation
- random animation
- animation driven from an outside source like an rss feed
- complex, static physics simulations that would be hard to animate on the timeline
- complex interactive physics simulation
- time-based animation—that is, animation that always runs at the same speed independent of framerate

Continue reading ‘TweenLite Introduction’

It’s extremely common to need to position display objects in a grid formation. I usually find myself doing it when displaying thumbnails for an image gallery. This post will take you through the process step by step.

Continue reading ‘Grids: Arranging Clips’

Having a good grasp of the basic properties of display objects is extremely important for anyone interested in intermediate level ActionScript. This post assumes that you’ve taken the time to read through Chapter 3. If you’re new to ActionScript, it will likely help with this post if you read up to Chapter 7.

This post contains a few short exercises that will put your knowledge of properties to the test.

As a guide, here are the properties that you will need to be familiar with:

x
y
scaleX
scaleY
height
width
rotation

For each example you’ll need to use the properties in conjunction with an enterFrame event:

addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);

function onLoop(evt:Event):void {
  // change properties over time
}

Continue reading ‘Property Practice (simple motion)’

Over the past two weeks I’ve taught two different lessons covering the basic ins and outs of the Graphics class (Drawing API). Something I noticed is that it’s not always immediately apparent when you’re starting out that the clear() method can be used to animate dynamically drawn vector graphics. That is, in both my class demos I introduced clear() by using it to erase a canvas when a button was clicked. When I described the idea of continuously clearing and redrawing graphics to create an animation there was some confusion, so I created a simple demo on the fly:

addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);

function onLoop(evt:Event):void {
	graphics.clear();
	graphics.lineStyle(1,0x000000);
	graphics.moveTo(100,100);
	graphics.lineTo(mouseX, mouseY);
}

Copy this into your timeline if you’re not sure what it does.

Continue reading ‘Graphics Class clear() Method’