Hangman: Importing a design in Flash CS3

Starting with phase 2 of the Hangman Game project, we’ll be importing a design made in Photoshop to Flash CS3. This won’t be a step-by-step tutorial on how to export Photoshop layers to jpg’s and png’s. It’s more of a guide on what choices to make, and which techniques you can use to do that. We won’t be writing any Actionscript either. At the bottom of the page you can download a zip file which contains the fla flash library. The library itself is useless for now as I haven’t linked any classes to it… yet.

I started making a design for a Hangman game in “Hangman Game” post. Today we’re going to port that design to a Flash environment. No programming yet, though I have already decided to make the game using the Pure MVC framework. I’ve also decided to make the game in Flex. I realise the game itself won’t really use the benefits of Flex, but here are a few reasons why I decided to do so anyway:

  • I want to show you how you can import graphical assets in Flex through a fla library because it’s perfectly possible!
  • I’m thinking of adding some extra functionality like a highscore and want the luxuary of the Flex components.
  • I also want to show you how to skin these components to match the hangman design later on.

So what is an external flash library? It’s a swf-file which contains graphical assets, linked to Actionscript classes. Once this library is loaded inside your application you can display your custom graphics by instantiating the classes you linked them to. “That is awesome Jovan, show me how!”. That’ll be covered in the next post I’m afraid.

What goes inside a library and what doesn’t?

So what graphics are we going to put inside our Flash library? It’s an external library so it’s the kind of file you load at runtime and is not really necessary at the initialization of the application. So all the graphics you don’t really need at the beginning of your application, you might consider putting it in a flash library. Remember you can have as many libraries as you want. Suppose we have bunch of games packed inside 1 application and Hangman is one of those games, you would put all those graphics inside a Hangman.swf library and only load that library when the user decides to play that particular game. That way the size of the main application file remains small and the user doesn’t have to wait long before he or she can choose which game to play.

A graphic you wish to put inside your library should also be linked to a class, or belong to another graphic that is linked to a class. If for some reason you do not wish to make a whole class for a tiny little graphic, you can always load that jpg- or png-bitmap with Actionscript.

If you open the fla file that you can download here, you’ll see that I have split up the design in 5 main chunks. The background (chalkboard), the score, the hangman drawing, the word to guess, and the used letters for that particular word. This will define my class structure more or less, and say I want to remove the ‘used letters’ part later on, it shouldn’t be a problem. You should always think ahead when you export your design, and wonder: “what class will this belong to?”, “Is this graphic specific to 1 part of my application or will it be re-used in other parts?”, “If the designer decides to alter this graphic, will I be able to change that without breaking a sweat?”. You get the picture.

Tip: Notice that I have added a reference.jpg to the library and put it at the bottom layer of the document. This layer is a guide layer, so it will not be exported. This reference is an image of what the design should look like, and it really helps when you import the seperate graphics and need to position them inside Flash.

Vector versus Bitmap

You might say: “Oh it’s Flash so definitely vector”. But that isn’t always the case. Both have their advantages and disadvantages:

Vector graphics are

  • Scalable. It doesn’t matter how big your graphic is, the file size won’t go up!
  • Easy to animate. There is no loss of detail when moving, rotating or scaling the graphic in an animation.
  • Groups. You can make groups of graphics inside your graphic that can be manipulated seperately.

But vector graphics can also:

  • Increase your filesize when there are a lot of vector coordinates inside that graphic
  • Reduce performance on the client. If a vector graphic is very complex and you try to animate it, you’ll notice it will run rather slow on many machines.

So if your graphic needs one of the 3 advantages mentioned above, you should go for vector, otherwise create a bitmap. These advantages and disadvantages are things a designer needs to know when creating the graphics as it already defines how the application will perform on certain machines. It will also make your job a lot easier!

As you can see in the hangman fla, I have chosen to import the background as a bitmap which makes perfectly sense since you can’t really get the same result in vector format. The same goes for the wipe effect of the chalk. For other parts like the hangman drawing and the scoreboard, I have chosen to make them vector graphics. The reason is obvious; I needed to animate, scale and group them. They are also fairly simple shapes so there won’t increase filesize or reduce performance.

If you can’t get enough of this, you should read this article on vectors and bitmaps.

Keeping classes in mind

So…we have our graphics inside flash. Now we need to make MovieClips out of them. First of all, we need to animate the hangman drawing and second, classes need to be linked to them. This is a very important part of the process. It’s actually the moment where a designer or animator sit down with the programmer and discuss how they proceed. If you are both, you can avoid the hour long discussions and make the decisions yourself ;). If the movieclips are made up logically, the programmer will have little to no trouble writing the classes.

In the hangman fla, there are a bunch of movieclips but not all of them will have a class linked to them. For example: The movieclips inside the “drawing parts” folder exist so we can animate the graphics inside. All these mc’s are a part of the HangmanDrawing movieclip. It’s a composite of movieclips and it will be linked to a HangmanDrawing class. That class will then contain variables for each part of the hangman, but more on that in the next article. Just remember what the blueprint of your application looks like. It’s best practice to sketch down a class-structure of your application, and try to fit your graphics inside these classes. Not the other way around.

Animating on the timeline

Some people may frown when they see animations on the timeline, and say they ‘code’ everything in actionscript. First of all, there is nothing wrong with timeline animations! Some animations are just more flexible in code. Let’s say an alpha tween of a graphic inside our library. Animating this would be 1 line of code, and you have the advantage of adjusting the speed and easing of that animation with parameters. It’s still fairly easy to do this on the timeline though, but you lose some of that flexibility. Now imagine, you want to add a blur and glow animation in the middle of the alpha animation. That would be rather complicated on the timeline, so you should consider code. Also if you decide to adjust the speed of the animation, you have to start moving keyframes around and all that is very clumpsy.

If you look in the library, the only animations I made were those of the chalk lines that make up the hangman, and the score. By masking the chalk lines and animating the masks, you get the effect of writing. I’m sure some alpha tweens will be added to smooth things in the game but those I’m going to script. Most of the time, and certainly in the case of simple alpha and move animations, you should use code. Just don’t forget the timeline exsists. Flash started out as animation software you know ;)

If you’re still new to the whole “animating with code” thing, check out the TweenLite classes. They are compact, fast and very easy to use.

Preparing for the next phase

When you export the library fla, things aren’t all that impressive but remember this is an important part of the project. Taking the time to draw a sketch of the class structure of your project and preparing a good flash library will pay off in the end. We’re almost ready to start programming! There’s just one little thing we need to set in the Actionscript 3.0 settings of our fla file: Go to the publish settings, and press the actionscript 3.0 button. Now uncheck ‘automatically declare stage instances’. It’s very important to do this, because I have dragged movieclips onto the stage and therefore made instances. Once we link our movieclips to classes, those classes will actually exist in code when we load our library. We can’t have that, so we uncheck that property. I want to instantiate these classes myself. The only reason I dragged them onto the stage was to have a clear overview of all my items when I open the library file.

So that’s it, the library is ready. In the next article i’m going to explore the Pure MVC framework and tell you how the class structure of the Hangman game looks like. I’ll create all the base classes for my library items, and try to avoid writing any game logic for now. My goal is to set up the framework, and add our library items to the stage with code. After that we’ll dive into the logic.

download the Hangman flash library package

This entry was posted on Tuesday, October 21st, 2008 at 9:09 pm and is filed under Actionscript 3.0, Design, Flash, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply