Oct 25, 2011
Posted on Oct 25, 2011 in Hints and Tips | 10 comments
I can’t tell you how many articles and tutorials I have come across on how to use symbols in Flash that immediately dismiss the graphic symbol as having no practical purpose, relegating it as just a step above grouping items. This article will attempt to dispel this myth by showing that the graphic symbol actually has some pretty cool and convenient features and knowing how and when to utilize them is a nice tool to have when you’re creating animations in Flash.
I first began using Flash with version MX. And through all the enhancements and added features in every release, one thing that has remained constant is the graphic symbol. But what has also remained constant, surprisingly enough, is how many Flash users don’t know what the graphic symbol actually does. Somewhere along the line, this symbol has received a bad rap as being totally useless. If you’ve ever wondered what exactly the purpose of the graphic symbol is and why the heck Adobe continues to keep it in Flash, this article is for you.
The Basics
We’ll start off with the most known and basic of things you can do with the graphic symbol that are inherent to all Flash symbols. Just like movie clips and buttons, a graphic symbol can have color effects applied to it like alpha and tint, get broken apart into its comprising elements via CMD/CTRL-B, and of course have its properties motion-tweened.
I know that’s far from a revelation, but I mention these attributes because I think it’s important to keep in mind that a graphic symbol at its core is just like any other Flash symbol but with its own unique set of features.
Animation Misconceptions
One of the biggest misconceptions about the graphic symbol is that it cannot contain animation – or that, if it does, Flash will just ignore it at runtime. Not only is that completely untrue, but in actuality graphic symbols are very powerful and flexible when it comes to creating timeline animation.
Just like a movie clip, a graphic symbol can contain nested animations on top of nested animations of other graphic symbols and movie clips. It is the symbol of choice used by most professional Flash animators, especially when it comes to creating complex timeline animation with lots of vector assets. Let’s see why.
Animation and the Properties Panel
The true power of the graphic symbol lies within the Properties panel. This is where you can control the animation inside a graphic symbol, which is one of the hidden, unknown jewels in Flash. The approach that I am about to detail is really an animation technique referred to by many as the Chris Georgenes method.
If you’re not familiar with Chris Georgenes, he is a well-respected Flash animator who innovated this approach to animating with graphic symbols and I was lucky enough to take a character animation course he was the instructor of. I highly recommend you read up on many of his Flash animation techniques and tricks.
That’s enough background information so let’s get cracking with the good stuff. When you create a graphic symbol (Modify > Convert to Symbol), you have three options for handling how the symbol will play back its animation; to see them, with the symbol selected, go over to the Properties panel and look under the Looping category.
When you click on the Options drop-down, you will be presented with three options to choose from: Loop, Play Once and Single Frame. Also below the drop-down, you’ll see a small input field labeled ‘First’. Before we get to that, let’s understand the three looping options – but keep that little input field in mind as we go through each option as it will all tie together.
Note: If you don’t see the Options field, just click on the arrow to the left of Looping to reveal the drop-down.
Loop: Loop is the default setting for every new graphic symbol that is created. Basically this option will constantly loop any and all animation that is nested inside it. So in other words, the symbol’s timeline will play through its duration and then start over again, just like a movie clip.
Play Once: This setting is pretty self-explanatory as well. It will play the symbol’s timeline once through and then stop. Think of it as the graphic symbol’s way of adding a stop() action on the final frame of its timeline.
Single Frame: Single frame allows you to display only a certain frame within the symbol’s timeline. Whereas the symbol’s timeline is actually playing when it’s set to Loop or Play Once, the Single Frame option just jumps the timeline to a specific frame within the symbol and stays there. I like to think of it as the graphic symbol’s version of using gotoAndStop(frame). So how is this done? If you’re recalling that tiny input field labeled ‘First’ that I told you to keep in mind a few paragraphs back, you’re heading in the right direction.
First Frame Input Field
Though very ambiguous and easily unnoticed, this input field is where all the fun happens for controlling the timeline of a given symbol. This is one of my favorite features of the graphic symbol because you can target a specific frame on the symbol’s timeline by typing a frame number in the input field.
When a graphic symbol is first created, the first frame input field is set to 1 by default – as denoted by the 1 inside the field. This means frame 1 on the symbol’s timeline will be the first frame the animation will begin on. That’s where the label First comes in; think of it as the first frame you want to display or the first frame you want to play from. So if you have a symbol set to Single Frame and type 6 in the first frame field, it will display whatever is on frame 6. If the supplied frame number is blank or if the symbol doesn’t even have that many frames in its timeline, then nothing will display.
You can also use the first frame field with the Loop and Play Once options. If you set a symbol to Play Once and type in a certain frame number in the input field it will start from that frame. The same applies if you set it to loop. The symbol would begin to loop starting with the frame number you supplied in the input field. Keep in mind though that if you typed in 6, it will start to loop from frame 6 but once it reaches the end of the timeline it will continue to frame 1 in its usual manner.
But It Still Isn’t Animating
Now, if you took it upon yourself to try any of this out within Flash, you’re probably wondering why your animation isn’t playing in the manner I’ve been describing. Open up the file named looping_basics.fla in the source package. Double-click the graphic symbol that is on the stage to check out the animation that’s inside of it. You’ll see two layers spanning 239 frames on the timeline, with a new keyframe on both layers every 30 frames (i.e. every second). So if you scrub the play head, you’ll see we basically have an 8-second animation in which on every second the number in the center increments by one and the circular background changes color. By all means nothing fancy.
After you have the gist of the animation, return to the main timeline, click on the graphic symbol and check the properties panel to make sure the symbol is set to Loop and 1 in the first frame field. Now test out the movie.
What’s going on here? Our symbol isn’t animating even though we have it set to Loop. Right about now you might want to say you told me so about Flash just ignoring a graphic symbol’s animation. Before you do so, let’s get to the bottom of this.
It’s All About the Timeline
This is the common pitfall most people experience when they create an animation inside a graphic symbol. And it’s probably the reason why the symbol is thought of as useless. You create an animation on the graphic’s timeline then position the symbol on the main timeline just like you would with a movie clip. But when you go to export your movie, the symbol just sits there static on the stage. This is where the misconception lies: we are expecting the graphic symbol to behave just like a movie clip.
The trick to the graphic symbol is that it is timeline driven – meaning its own timeline coincides with the timeline the symbol is placed on. So if it’s placed on the stage, it needs just as many frames on the main timeline as it has on its own timeline in order to play the animation in its entirety. In other words, whereas a movie clip will play independently of the timeline, a graphic symbol will be played only as far as its parent’s timeline will allow it.
In a nutshell, a graphic symbol needs frames.
Give It Some Frames
If you go back to our example in Flash, the reason our graphic symbol isn’t playing is because there is only one frame on the main timeline. So let’s add some frames. Just for demonstration purposes, go to frame 30 and add frames. Now go to frame 60 and do the same. Do you see what’s happening here? Then go to frame 90. Very cool, huh? Keep adding as many frames as you want and test the movie. You should see the animation begin to play, depending on how many frames you have on your main timeline. Remember our symbol has 239 frames on its timeline, so in order to see the entire animation, there needs to be the same amount on the main timeline.
Note: Keep in mind this principal we’ve been discussing doesn’t just apply for the main timeline. The timeline that the graphic symbol is actually placed on will dictate its playback. So for example, if your graphic is inside a movie clip, you need frames on the movie clip’s timeline to render the graphic’s animation. Try it out yourself.
Automatic Playback
As you probably noticed from the example file, you can actually see the graphic symbol animate as you scrub the timeline from the stage. Yes, very cool. This brings us to another unique feature that differentiates a graphic symbol from a movie clip and you’ll probably find it to be its most useful. Since the graphic symbol is timeline driven, a benefit of that is having your animation automatically update within Flash. As long as you have ample amount of frames on the timeline where your symbol is located, you can always see your graphic symbol animate live.
Case Study: Facial Expressions
Let’s explore these techniques a little more to give you another look on how you can incorporate a graphic symbol into a project. Open up the file named facial_expressions.fla that’s in the source package. You will be greeted with a nice smiling face on the stage that was part of an illustration for an animated character I created a few years back.
If you click on the symbol, you’ll see it’s a graphic with a library name of expressions, and that it is set to Single Frame 1. Go inside the symbol and you’ll see three layers: eyes, mouth and head, each of which contain graphic symbols. The head layer contains all the other elements that comprise this little guy’s smiling face, and if you unlock the layer and double-click the symbol you’ll see are all graphic symbols as well. For our purposes, though, we are going to be focusing on the graphic symbols for the mouth and eyes. Go inside the mouth symbol and you’ll see it contains various different mouth shapes at various points on the timeline, and the same goes for the eyes. Let me point out that the left and right eyes are instances of the same exact symbol.
Go inside both the mouth and eye symbols and take a look around. You’ll notice that I have a frame labels layer corresponding to each facial expression and that I chose to put each of them on a keyframe that are 10 frames apart. There’s no reason for having the timeline set up like this other than it’s my own way of trying to keep it clean and organized. I probably wouldn’t use the frame labels in ActionScript (though I could if I converted my graphic to a movie clip) but having a label for every new expression lets me know at a glance where a certain expression is on the timeline. And besides giving me some space so the labels can actually be read, the 10 frame gap between each keyframe simply makes it easy for me to remember where a new mouth or eye expression occurs on the timeline.
Now jump back one level to the expressions graphic where we just have our three layers of the mouth, eyes and head, and start using these symbols to create some animation. There’s a lot of different ways you can set things up here, depending on what you want to do, but let’s just keep it simple and make our guy blink.
Insert a new frame on all three layers. Check that both the mouth and eye symbols are set to Single Frame 1 and then insert a new keyframe on the eyes layer and set both eyes to Single Frame 10.
Go back to the stage, give yourself about 45 or so frames, make a new keyframe on frame 30 and change the 1 in the first frame field to a 2. Remember your keyframes should be set to Single Frame. Now test it out and your guy should be blinking. I know that’s nothing fancy but the point here isn’t so much about what can be created with the graphic symbol, but rather about the convenience and flexibility it provides you. We’ll get to more on this in a bit but hopefully this example has your gears turning.
When Would You Use a Graphic Over a Movie Clip?
Personally, any time I am working on a project that calls for creating numerous timeline animations, I consider using the graphic symbol. Any Flash user who has ever spent countless hours tinkering with numerous movie clips that all contain their own animations has probably run into a situation where they wish they could pinpoint where something was occurring on a certain movie clip’s timeline from another spot in the movie. From my own experience, there have been many times in which I have an animation inside one movie clip and want to use it within another clip but needed to know when a certain point in my animation was reached so I can have something else happen. I would have to resort to a tedious process of jumping back and forth between movie clips and counting frames so I could figure out where to place it on that second clip’s timeline. Using my animation as a graphic would allow me to see everything without having to export my entire movie.
Tip: Even when I am using a movie clip for a timeline animation, I sometimes temporarily set it as a graphic in the properties panel just so I can view the animation playback while other objects are animating around it. I can then get a better sense of the overall timing and do some tweaks; when I’m done, I set it back to act as a movie clip.
To do this, just click on your symbol, go to the top of the Properties panel and click on the drop down. This is where you can change your symbol’s behavior on the fly, toggling it between a movie clip and a graphic. This is very useful when you want to use the same symbol as both a movie clip and a graphic throughout your project. Note: This technique will not work if you try to change between a movie clip and a button or between a graphic and a button.
Practical Uses
Here are some other practical uses of when you might want to consider using a graphic symbol:
Animated Presentations: Presentations are the projects where I find myself using graphic symbols the most. Most flash presentations tend to be heavy on animation and syncing visuals to a script. The graphic symbol lends itself well to projects like these that are in linear in nature and have limited user interaction.
Syncing audio with an animation: This is an extension of the previous point. Anytime you want pinpoint synchronization between a sound and an animation, running your audio alongside your animated graphic symbol will give you that type of control. Many voiceover presentations that I have been involved in have employed animated graphic symbols.
Character animation: Anytime you are going to create intricate animations with vector artwork that has lots of layers, the graphic symbol is the way to go. Many cartoon animations have been made with flash and I would bet anything that if you were to examine the FLA they were made in, the library would be packed to the brim with graphic symbols. Just like facial expressions, creating sequences for walk cycles and lip syncing sequences are ideal jobs for using the graphic symbol.
Creating multiple variations of a symbol: We already touched on this notion throughout the article but I think it’s worth further explanation. If you recall in our facial expressions example from earlier, the mouth and eye graphic were used to house all our different mouth and eye shapes for easy animating. Well, sometimes I use the graphic symbol to just hold a bunch of similar movie clips that are just slightly different, or what I like to refer to as poses.
In some cases, I’m not looking to sequence these poses for an animation like in the facial expressions example but to act as a holder of my elements, which will simplify the process of accessing them later on. I find it much easier to refer to each pose if they are all on their own frame inside a graphic instead of having to sift through one long movie clip timeline with numerous layers. All I have to do is target the frame number of the one I want inside the first frame field like we did in the facial expressions example. And if I need to control any of my poses with actionscript, I just turn my graphic into a movie clip.
Limitations
The graphic symbol is not without its limitations and drawbacks. While the graphic symbol can be very useful in certain situations, by no means am I advocating it as a replacement to the movie clip. In most situations, a movie clip will be your symbol of choice and will do just fine even for creating most timeline animations. Here are some things to keep in mind when using the graphic symbol:
Can’t be controlled by ActionScript: This is an obvious point but it’s a biggie. Unlike a movie clip, you can’t assign a graphic symbol an instance name and any script you place on its timeline will be ignored. Keep in mind though you can still use a movie clip that has ActionScript on its timeline as a graphic and it will play back normally.
Can’t apply filters: For some reason, Flash doesn’t allow you to apply any of the filters or blending modes to a graphic symbol. To get around this, you can simply put your graphic symbol inside a movie clip and then apply the filter to the clip.
Classic tweening graphic symbols with nested animation can be problematic: This is one I learned the hard way and it’s an issue that can happen quite easily without you even realizing. Let’s say you have a graphic symbol with a pretty involved animation inside it, and you want to tween the symbol on the main timeline from left to right across the stage as your nested animation plays. You create your first keyframe on the timeline and you set it to Play Once starting on frame 1 in the Properties panel. When you create your second keyframe, Flash will automatically set it to Play Once and update the first frame field accordingly with the correct frame number in sequence.
So using the above example if your first keyframe is on frame 10 on the main timeline and your next keyframe is on frame 40, the graphic symbol on this frame would be set to Play Once with the first frame field already set to 30. Get it? It inserted the frame number you left off from? Now if you were to add or delete frames within the tween, the symbol on that second keyframe will still have 30 set as its first frame to play from thus completely throwing off the order of your nested animation. It’s just something to keep in mind; when you initially create keyframes, the first frame number will update correctly, but once you start moving keyframes up and down the timeline, things will get thrown off.
Note: This only applies to classic tweens. If you are using the method for creating motion tweens that was introduced in Flash CS4, this won’t be an issue.
Conclusion
Hopefully after reading this article you have a different opinion of the graphic symbol. Though it may not be something you can see yourself using all that frequently, the thing to keep in mind with the graphic symbol is that it’s about knowing when to use it. As a developer, I don’t use it all that often but I know I have it as an option if the situation calls for it. Like with most things in Flash, it comes down to a matter of personal preference. If you pick and choose your spots wisely, using the graphic symbol can be convenient and a time-saver.
I know a lot was covered in this article, but the best way to really understand what the graphic symbol can do is to spend some time playing around with it in Flash. Change its looping options, target different frame numbers to start your animation on and toggle back and forth between using it as a graphic and a movie clip to really see what works and what doesn’t. So maybe the next time you hit F8 and you are planning on creating a timeline animation, remember the graphic symbol might not be that useless after all.
View full post on Activetuts+
Oct 21, 2011
Posted on Oct 21, 2011 in Hints and Tips | 10 comments
In this Quick Tip, you’ll learn how to construct a reference to a class from a String, and then create an instance of that class, using a built-in AS3 function called getDefinitionByName(). You’ll also learn the best methods for using this in different situations.
Why Is getDefinitionByName() Useful?
getDefinitionByName() is very useful if you need to make new instances of classes by using a String. For example, if you had seven different tiles – each represented by a class called Tile1, Tile2, etc – and you needed to create an instance of each, you would have to write the following code:
private function createTiles():void
{
var tile1:Tile1 = new Tile1();
var tile2:Tile2 = new Tile2();
var tile3:Tile3 = new Tile3();
var tile4:Tile4 = new Tile4();
var tile5:Tile5 = new Tile5();
var tile6:Tile6 = new Tile6();
var tile7:Tile7 = new Tile7();
stage.addChild( tile1 );
stage.addChild( tile2 );
stage.addChild( tile3 );
// You get the idea, it is very lengthy!
}
getDefinitionByName() allows you to solve this problem!
How to Use It
Now, the above code was a little messy and we had to type many lines just to make a few different tiles. This is how we could achieve the same goal using getDefinitionByName():
private function createTiles():void
{
for( var i:int = 1; i < 8; i++ )
{
var tileRef:Class = getDefinitionByName( "Tile" + i ) as Class;
var tile:tileRef = new tileRef();
stage.addChild( tile );
}
}
In line 6, getDefinitionByName() returns a reference of the class called “Tile + the current value of i in the for-loop“. So, when i is equal to 1, getDefinitionByName("Tile" + i); returns a reference to the class Tile1. We then create the tile and add it to the stage.
However, when you run this code, it will not work! You’ll get a variable is undefined error message, in most cases, because “Tile1″ might not be enough information for Flash to find the class. Let’s look at some workarounds.
Make It Work
There are a few commonly-used methods to solve the problem of the variable is undefined error you’ll get when you run the above code, and I am going to teach you what they are. I would also like to give credit to Gert-Jan van der Well of Floorplanner Tech Blog for this blog post.
Here are some of the methods you can use:
- Use a Dummy Variable
- Use short notation of Class name
- Include the full path in the String
- Include the class’s SWC in your project
Using a Dummy Variable
In this method, you just create some dummy variables with references to the classes you want to refer to with getDefinitionByName() later:
private var dummyTile1:Tile1;
private var dummyTile2:Tile2;
//etc
private function createTiles():void
{
//Create the tiles
}
This works, but it is very ugly. If you have the Tile classes in another package, you would also have to import them!
Short Notation
This is much like the Dummy Variable method, but you don’t bother setting up a dummy variable for each class; you just drop a few explicit references to the classes themselves:
Tile1;Tile2;Tile3;Tile4;Tile5;Tile6;Tile7;
//etc
private function createTiles():void
{
//Create the tiles
}
Now, this may look neater, but the fact that you will have to update this list everytime you make a new Tile remains.
Including the Full Path Name
Another method, which is the tidiest (if you have classes in another package) is to include the full path name in your String:
//Let's say my Tiles are all in the package 'project.Tiles'
private function createTiles():void
{
for( var i:int = 1; i < 8; i++ )
{
var tileRef:Class = getDefinitionByName( "project.Tiles.Tile" + i ) as Class;
var tile:tileRef = new tileRef();
stage.addChild( tile );
}
}
Much tidier! However, this only works if the classes are in a separate package from this class.
Using a SWC
If the Tiles are held in an SWC, you can make this much easier, without needing to use any imports or dummy variables. I would like to give credit to v0id from Dreaming in Flash for this blog post that explained to me how to use this method:
- In the project properties choose “ActionScript Compiler”
- To the “Additional compiler arguments” field, add the following:
include-libraries PATH_TO_SWC
The PATH_TO_SWC must be the absolute path and not the relative path!
Great, all these methods have now been explained. Unfortunately, there are no fantastic magical methods to use if you have all the tiles in the same package as all the other AS Files. I would recommend you make a new package called Tiles or something if you want to use the good methods!
Conclusion
Well, today you should have learnt how to use getDefinitionByName() and the best methods of using it. I hope this will help you in any future projects and if you have any questions, leave them in the comments section below!
View full post on Activetuts+
