(28 votes, average: 4.11 out of 5) 
Loading ...Making image galleries in flash is very common. There are lots of different approaches, but the basic concepts stay the same. They’re usually XML driven and they usually have external image files that are dynamically loaded into Flash. This post contains an image gallery shell that builds off of the Grids: Arranging Clips post. This post assumes you are familiar with that post, and with AS3 XML parsing. We won’t be building this image gallery from scratch. Instead, I’ll walk you through the key aspects of the code This post also contains source for the shell with some TweenLite animation added.
Archive for the 'Ch07: Motion' Category
(39 votes, average: 4.28 out of 5) 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
Understanding the basic display object properties like x, y, width, height etc… is imperative for anyone interested in intermediate level ActionScript. It’s important to practice using properties until you understand them well enough to solve problems using them. If you’re not comfortable with properties yet, you should read through Chapter 3 and then try the exercises in the Property Practice (simple motion) post.
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
}
Chapter 7 of the book contains an overview of motion programming techniques. This post expands on some of these techniques.
In Chapter 7 we talked extensively about programming motion with AS3, and created a basic particle system. This post contains source for a more complex particle system, based on the book example.
