Dynamic Animation, and Subtitle Toggles

NOTE: The Following only applies to AS2

Before reading this, please read my two previous tutorials:

Clovis15 Tutorial-1: Easy Dynamic Sound Control With Resume
Clovis15 Tutorial-2: How to Live Life Without V-Cam

Yes, please read both even if you intend to keep using V-Cam. This tutorial will build off of things covered in both of them, and everything covered in this tutorial should be entirely usable even with V-Cam turned on. Anyways, without any further ado, the lesson.

LESSON-3: The lesson that comes before Lesson 4, but after Lesson 2.

So, perhaps you've tried dabbling in dynamic animation because you wanted to give viewers the ability to advance your animation at their own leisure rather than displaying it through forced pacing. If you don't yet know how that's done, then here's a quickie guide to it:

Put a stop(); in the timeline everytime you want the movie to stop and have a button clickable with this in its action script to get the movie going again:

on (press)
{
play();
}

Yes, I know some people suggest gotoAndPlay() instead of play()... but it's really overkill for simple text advancement. Anyways, not that we're all raring to do some dynamic animation there will inevitably come a time where we hit a brick wall in matters that have never before come up for us when we're doing non-dynamic animation. For instance, let's say you have a group of characters walking along talking in the middle of a conversation. That's easy enough to do on it's own, you have the background as a looped movie object and the characters walking on it as looped movie objects. But now let's say at some point during the conversation someone says something incredibly shocking - or maybe just profoundly stupid - and this causes the entire group to come to a halt... well, now you have a problem. Because you are allowing the viewer to control the pace of the conversation, you can't quite ever know where exactly the background will be in its loop when they stop walking.

Sure, you could just cut to a random still frame of the background and hope your viewers won't notice... but you'll notice, and feel shame deep down inside each time you watch it. Truly, this shame will leave a permanent scar upon your very soul. More importantly, though, at least one viewer will notice and give you a really bad score and badly written review about it... seriously, their grammer will be attrocious.

But, what can you do, it is dynamic after all!?
Fear not, hope still remains!

Click on the movie symbol that represents the scrolling background and bring up the properties panel, like I described in Tutorial-1, and give the background an instance name. In this case, let's call it sceneryLooper. Now, in much the same way you dynamically controlled audio in Tutorial-1, we can now control scenery in Tutorial-3. So, when your character drops the ultimate brainfart revelation of destiny to bring the world to a ringing halt, all you will need to do is add this actionscript to your timeline:

sceneryLooper.stop();

Just like that, the scenery has stopped dynamically where it is at the precise moment the viewer advances the conversation to the moment of ultimate WTF in your dialogue. Also, like with my first tutorial, your group can easily pick up walking again where they left off with:

sceneryLooper.play();

This has been a simple example of dynamic animation. I will next cover a more complex example, but first I will take a little side intermission to cover something similar to what I just explained.

A TOGGLABLE INTERMISSION: Run to the snack room and get you drinks now, but be back before the main show resumes...

So let's say you have Voice Acting in your movie, congratulations! You really should pat yourself on the back for managing to deal with those annoying prima donna wankers most of those VAs can be. However, you've come to a realization: what about people who can't hear your awesomely sexy voice track? Perhaps they're watching some place - like at work, when they really should be doing their job - and can't have the audio up? Or maybe, even worse, they're deaf and can't hear at all ever no matter what. The obvious answer is that you should really add a subtitle track to your movie, but I realize you really don't want tthis as the words can be very distracting to what's going on for people that don't need them and can hear the audio just fine. Must you cut off the deaf in the name of visual integrity, or worse yet sacrifice integrity to please the deaf?

Never fear, Captain ActionScript is here!

Start out by making your entire movie with the subtitle track however you want it to appear when it's on. Once that's done, make a layer above the subtitle track and turn it into a masking layer. In the masking layer draw a big rectangle that covers all of the subtitle text at any point in time during the movie, now turn this rectangle into a movie symbol. Now go inside that movie symbol and add a second frame to it's timeline that doesn't have a rectangle on it. Afterwards, add a stop() command to both the first and second frame of this movie symbol. Finally, leave the movie symbol and give it an instance name in the properties panel.

Let's say we named it: toggler, then all we need to do is have a button (possibly invisible) with this code in it:

on(*)
{
toggler.play();
}

Replace the * with whatever sort of trigger you want it to be, such as a letter based trigger, and now you have a sexy togglable set of subtitles that can be turned on and off at any time you want to your heart's desire... and everyone, both the audio have and have-nots, will rejoice and throw their panties at you... or maybe just rejoice, your mileage may vary.

INTERMISSION END: Welcome back, I hope you remembered to flush.

Okay, before I cover the second part I want you to watch something on Newgrounds first: http://www.newgrounds.com/portal/view/517519 (you don't have to watch the entire thing, you could select scene 3 from the menu at the beginning to cut to the important chase for this matter). What I want you to pay attention to here is how the character pose animations, which are controlled by the user manually advancing the conversation, never interferes with their floating animations.

Okay, at this point it's going to be important to remember what we covered in Tutorial-2... except this time it's for stuff you can use ALONG SIDE V-Cam, rather than against it. Also, some of the stuff I just mentioned in the Subtitle Toggler will come into play as well.

Okay, so, this is what I did for this effect:

Step 1: I had a symbol with the entire sequence of poses and actions the characters were going to take on a timeline, and the end of each animation vignette they could take when the conversation advanced there would be a stop() command. I also gave this symbol an instance name, lets just call it innerSymbol now for simplicity's sake. In this case, unlike tutorial-2, the symbol was left as a movie symbol instead of a graphic symbol.

Step-2: I place the innerSymbol inside of a new symbol, this symbol contained nothing but an animation of the innerSymbol bobbing up and down in and endless floating loop. This outter symbol is the one that ended up on the master timeline, also let's give it the instance of outterSymbol just to make things easier.

So now, everytime I wanted to modify the state of inner symbol, without disrupting the animation of the outter symbol, I simply used the following:

outterSymbol.innerSymbol.play();

Whenever you reference a symbol by it's instance name, flash will claim it can't find it if it's burried within another symbol. This is why you also gave the outter symbol an instance name as well, so you could tell flash where to look for the inner symbol. In practice, though, since there was more than one character in the scene it's really going to be something more like this:

outterCrono.innerCrono.play();

If you ever need to make a symbol chain even deeper, just be sure to give each symbol along the way it's own instance name and mention them all in order - with a period between each one - in the action script command.

REMEMBER: There are many other ways you can use action script - and symbols within symbols - to achieve seamless animation effects when allowing the viewer dynamic control of your animation, these examples were merely meant to get you started. Also, do note that when you animate like this you will have to make a test swf every time you want to check to see if things are working as looking at the timeline inside of flash won't show if it's working right or not.

I knew how to do the toggleable subtitles one. Still, it's a good techinique and you explained it well.

But I didn't know the second part. Great job.

And I definetly lol'd when I did read the first part.

You are helping a lot, Clovis. Even though you use a older version of Flash, your tutorials are explained so well that I could adapt these things to AS3.

Now all of this i believe is AS2.
You gotta put that there or a lot of people using AS3 or above will be very confused.

This is fantastic, and I did remembered to flush!

I added the notice about all of this being intended for AS2.

Leo do you think you'll be able to translate this in AS3?

I don't know. I don't use AS3 you know but I could try. Why?

I use AS3 more often then AS2 thats why > .>

Clovis your tuts are awesome but for godsakes you need some pix.

You're right. I'll make sure to get pictures next time. As for next time, I'm currently at a loss as for what to write about next... unless there's a need for a tutorial about flags. I did see a lot of people suggesting the use of gotoAndPlay(); and yet I didn't see anyone mentioning that people should flag name their frames rather than using the specific frame number. I guess I'll cover that next time, but with pictures to go along with it.

Wow the Lange was impressed.

Clovis15 wrote:As for next time, I'm currently at a loss as for what to write about next... unless there's a need for a tutorial about flags. I did see a lot of people suggesting the use of gotoAndPlay(); and yet I didn't see anyone mentioning that people should flag name their frames rather than using the specific frame number. I guess I'll cover that next time, but with pictures to go along with it.

Oh these stuff I remember them.

This is what im going to need for my new Sprite animation series! Thanks :)

Clovis15 wrote:NOTE: The Following only applies to AS2

Before reading this, please read my two previous tutorials:

Clovis15 Tutorial-1: Easy Dynamic Sound Control With Resume
Clovis15 Tutorial-2: How to Live Life Without V-Cam

Yes, please read both even if you intend to keep using V-Cam. This tutorial will build off of things covered in both of them, and everything covered in this tutorial should be entirely usable even with V-Cam turned on. Anyways, without any further ado, the lesson.

LESSON-3: The lesson that comes before Lesson 4, but after Lesson 2.

So, perhaps you've tried dabbling in dynamic animation because you wanted to give viewers the ability to advance your animation at their own leisure rather than displaying it through forced pacing. If you don't yet know how that's done, then here's a quickie guide to it:

Put a stop(); in the timeline everytime you want the movie to stop and have a button clickable with this in its action script to get the movie going again:

on (press)
{
play();
}

Yes, I know some people suggest gotoAndPlay() instead of play()... but it's really overkill for simple text advancement. Anyways, not that we're all raring to do some dynamic animation there will inevitably come a time where we hit a brick wall in matters that have never before come up for us when we're doing non-dynamic animation. For instance, let's say you have a group of characters walking along talking in the middle of a conversation. That's easy enough to do on it's own, you have the background as a looped movie object and the characters walking on it as looped movie objects. But now let's say at some point during the conversation someone says something incredibly shocking - or maybe just profoundly stupid - and this causes the entire group to come to a halt... well, now you have a problem. Because you are allowing the viewer to control the pace of the conversation, you can't quite ever know where exactly the background will be in its loop when they stop walking.

Sure, you could just cut to a random still frame of the background and hope your viewers won't notice... but you'll notice, and feel shame deep down inside each time you watch it. Truly, this shame will leave a permanent scar upon your very soul. More importantly, though, at least one viewer will notice and give you a really bad score and badly written review about it... seriously, their grammer will be attrocious.

But, what can you do, it is dynamic after all!?
Fear not, hope still remains!

Click on the movie symbol that represents the scrolling background and bring up the properties panel, like I described in Tutorial-1, and give the background an instance name. In this case, let's call it sceneryLooper. Now, in much the same way you dynamically controlled audio in Tutorial-1, we can now control scenery in Tutorial-3. So, when your character drops the ultimate brainfart revelation of destiny to bring the world to a ringing halt, all you will need to do is add this actionscript to your timeline:

sceneryLooper.stop();

Just like that, the scenery has stopped dynamically where it is at the precise moment the viewer advances the conversation to the moment of ultimate WTF in your dialogue. Also, like with my first tutorial, your group can easily pick up walking again where they left off with:

sceneryLooper.play();

This has been a simple example of dynamic animation. I will next cover a more complex example, but first I will take a little side intermission to cover something similar to what I just explained.

A TOGGLABLE INTERMISSION: Run to the snack room and get you drinks now, but be back before the main show resumes...

So let's say you have Voice Acting in your movie, congratulations! You really should pat yourself on the back for managing to deal with those annoying prima donna wankers most of those VAs can be. However, you've come to a realization: what about people who can't hear your awesomely sexy voice track? Perhaps they're watching some place - like at work, when they really should be doing their job - and can't have the audio up? Or maybe, even worse, they're deaf and can't hear at all ever no matter what. The obvious answer is that you should really add a subtitle track to your movie, but I realize you really don't want tthis as the words can be very distracting to what's going on for people that don't need them and can hear the audio just fine. Must you cut off the deaf in the name of visual integrity, or worse yet sacrifice integrity to please the deaf?

Never fear, Captain ActionScript is here!

Start out by making your entire movie with the subtitle track however you want it to appear when it's on. Once that's done, make a layer above the subtitle track and turn it into a masking layer. In the masking layer draw a big rectangle that covers all of the subtitle text at any point in time during the movie, now turn this rectangle into a movie symbol. Now go inside that movie symbol and add a second frame to it's timeline that doesn't have a rectangle on it. Afterwards, add a stop() command to both the first and second frame of this movie symbol. Finally, leave the movie symbol and give it an instance name in the properties panel.

Let's say we named it: toggler, then all we need to do is have a button (possibly invisible) with this code in it:

on(*)
{
toggler.play();
}

Replace the * with whatever sort of trigger you want it to be, such as a letter based trigger, and now you have a sexy togglable set of subtitles that can be turned on and off at any time you want to your heart's desire... and everyone, both the audio have and have-nots, will rejoice and throw their panties at you... or maybe just rejoice, your mileage may vary.

INTERMISSION END: Welcome back, I hope you remembered to flush.

Okay, before I cover the second part I want you to watch something on Newgrounds first: http://www.newgrounds.com/portal/view/517519 (you don't have to watch the entire thing, you could select scene 3 from the menu at the beginning to cut to the important chase for this matter). What I want you to pay attention to here is how the character pose animations, which are controlled by the user manually advancing the conversation, never interferes with their floating animations.

Okay, at this point it's going to be important to remember what we covered in Tutorial-2... except this time it's for stuff you can use ALONG SIDE V-Cam, rather than against it. Also, some of the stuff I just mentioned in the Subtitle Toggler will come into play as well.

Okay, so, this is what I did for this effect:

Step 1: I had a symbol with the entire sequence of poses and actions the characters were going to take on a timeline, and the end of each animation vignette they could take when the conversation advanced there would be a stop() command. I also gave this symbol an instance name, lets just call it innerSymbol now for simplicity's sake. In this case, unlike tutorial-2, the symbol was left as a movie symbol instead of a graphic symbol.

Step-2: I place the innerSymbol inside of a new symbol, this symbol contained nothing but an animation of the innerSymbol bobbing up and down in and endless floating loop. This outter symbol is the one that ended up on the master timeline, also let's give it the instance of outterSymbol just to make things easier.

So now, everytime I wanted to modify the state of inner symbol, without disrupting the animation of the outter symbol, I simply used the following:

outterSymbol.innerSymbol.play();

Whenever you reference a symbol by it's instance name, flash will claim it can't find it if it's burried within another symbol. This is why you also gave the outter symbol an instance name as well, so you could tell flash where to look for the inner symbol. In practice, though, since there was more than one character in the scene it's really going to be something more like this:

outterCrono.innerCrono.play();

If you ever need to make a symbol chain even deeper, just be sure to give each symbol along the way it's own instance name and mention them all in order - with a period between each one - in the action script command.

REMEMBER: There are many other ways you can use action script - and symbols within symbols - to achieve seamless animation effects when allowing the viewer dynamic control of your animation, these examples were merely meant to get you started. Also, do note that when you animate like this you will have to make a test swf every time you want to check to see if things are working as looking at the timeline inside of flash won't show if it's working right or not.

SOME NEEDS TO MAKE A VIDEO OF THIS SHIT CAUSE THIS IS JUST TOO MUCH TO READ!! now I want to learn how to toggle through text but Goddammit that is just waaaaay to much to read so....shorter ver please.with video help appreciate it