Some of the goals I have for this site include demystifying Actionscript for the artists out there who are struggling to learn it. Most of the tutorials out there are aimed at programmers and don’t speak to artists, many of whom have learned just enough to get by and don’t understand the concepts of classes, events, instances, scope and other programming wizardry.

With respect to building games, it’s also a goal of mine to help artists and programmers work together more easily. One way to do this is to help give artists a better understanding of how programmers use their art and animation. Understanding the context of the work you’re doing is key to collaborating with someone who is doing the other half of your work. Another way to help programmers and artists work more efficiently is to create tools to aid the development process, which is what I’ll be doing in this article.

Artists often need to demo character designs and other layouts or animations through the course of a project. I’ve seen them struggle to build PowerPoint-esque demos so others can review their work, usually by copying and pasting next and back buttons from a previous project. Hardcoding, typos and other needless errors can steal valuable time while the artist tries to figure out why their next and back buttons aren’t behaving as they expected. There must be an easier way ;)

I’ve built a very simple MCStepper class that will allow you to create demos of a movieClips very quickly. Simply create an instance of the class then pass it the instance name of a movieClip. Next and back buttons will be automatically generated for you. The user can then flip through the frames of the movieClip. One line of code and you can easily demo your character designs and animations. Here’s a few examples of what it looks like.

This movie requires Flash Player 9

The class is meant to be a quick utility for demonstrating work, though there are a few “features”

  • Buttons are automatically generated for you. However you can choose to have them displayed above, beside or below your movieClip.
  • You can change the color of the buttons so that they stand out against the background of your movie.
  • A frame counter will be auto-generated as well, so the user knows how many frames are in your movieClip. This textField will be hidden if there isn’t enough room between the buttons or if you opt to have them beside your movieClip, rather than above or below it.
  • If you define frame labels, they will be displayed as tooltip rollovers when the user hovers over the movieClip. This feature was included as a quick and dirty way to add basic info like “hero #1” or “main boss” to your demo, for reference purposes. Be aware that these can run off the right of your movie…

Besides the insert statement to include the class, you only need one line of code to create each of the above examples.

1
2
3
4
5
6
7
8
9
10

// create blue buttons above the movieClip "dude0"
var stepper0:MCStepper = new MCStepper(dude0,"top",0x255396);
// create red buttons on either side of movieClip "dude1"
var stepper1:MCStepper = new MCStepper(dude1,"sides",0xff0000);
// create default buttons for movieClip "dude2", below and black
var stepper2:MCStepper = new MCStepper(dude2);
// to change the color of the button but keep them below the movieClip,
// use "below" as the second argument
// besides omitting frame labels, you can suppress the tooltip by
// setting the showLabels to false. ex: stepper1.showLabels = false;

As I intend to do with all my Actionscript for Artists articles, I will include 2 sample implementations. The first a pure actionscript example, showing the way a programmer would likely use this class. The second is an approach that an artist, more likely to do most of the setup in the Flash IDE, would be more comfortable.

For Programmers: Download the pure actionscript demo and files here.
For Artists: Download the “artists” demo and files here. – you will want to put the baconandgames folder in the same folder as your fla

Note: These sample files are in CS4. The MCStepper class will work with older versions but will throw a reference error if published for Flash Player 9 or earlier due to ghd MCStepper’s use of the currentFrameLabel property.

I encourage artists to spend some time with both implementations and see if they can make sense of the pure actionscript approach. Here’s a tip to get you started. The Document class, in this case Main.as (defined in the Property Inspector), is run immediately after the swf loads, as if it was code written on frame 1 of the main timeline. If you can understand that, the implementation is the same as the timeline version. You just have to sort out what’s setup (attaching and positioning visual assets) and what part handles the MCStepper functionality.

Whether you take the pure actionscript approach, using external .as files or follow the IDE-reliant timeline approach, I hope people will find this class useful in future collaborations. If you have questions or find bugs, please leave comments and I will follow up. Fun Fact: The art in this demo is from a little side project I’m working on with some friends, so stay tuned :)