Click on any phrase to play the video from that point.
[ADOBE DEVELOPER CONNECTION] [Peter Flynn] [Computer Scientist] Hi. I'm Peter Flynn with the Adobe Flash Catalyst team. I'm going to talk to you today about some of the new and improved timeline animation features in Flash Catalyst CS5.5 We've done a lot of work in this release to add new features. So some of the things I'm going to talk to you about are the ability to create mirrored forward and backward transitions without doing all the same work twice, the ability to specify the behavior of an animation when it's interrupted by another transition, the ability to animate many different properties of different types of objects-- many more than was possible before, and finally the ability to cause an animation sequence to repeat over and over--potentially even indefinitely. So let me show you the example that we're going to build, and then we'll walk through how to build it. Okay, so we have a simple mock up here, and you can see in this you can click on Post Screenshot, we get an upload dialogue here, we get sort of a fancy transition into a second state of that dialogue, and then we can move into the third dialogue, and you see this upload progress bar sequence that repeats over and over, and then we can also cancel that, navigate back to the dialogue. So just a quick soapbox--you want to be careful to always use animation judiciously and not have it be overbearing. Like in this example, it's probably just a little bit too much for the sake of demonstration purposes, but the use of animation in a user interface can actually be very positive. It can, for example, draw a user's attention to changes that are important, it can give the user a sense of space, as it navigates throughout the UI, and it can serve valuable branding purposes. But just always be sure to have your animations as short as they can be. Okay. So the first thing I want to show you in Flash Catalyst is how to create a forward and backward transition. So in this case, I have the dialogue box control here. It's a custom component with 3 states for each of the 3 parts of the views of the dialogue that you can visit. And you can see here in this example, I've created a fairly elaborate transition from the Info--the Enter Info--to the Pick File state. You can see this down here in the Timelines panel. The horizontal scrolling, by the way, that you see here is also a new feature in Flash Catalyst CS5.5 Now if I preview this, so you can see that that's the transition you saw before with everything flying off and things sliding around, you can see that I put quite a bit of work into creating that transition, and I really don't want to do all that same work, but in mirror image for the backward transition. So right now if I look back down to the Pick to Info transition, you can see I haven't even bothered to build anything there. Everything here is just a jump--it just snaps back. And I would like it to do the exact thing as the Info to Pick transition, except in reverse. So in Flash Catalyst CS5, I would have had to actually author that entire transition in mirror image. In CS5.5, I can click over here in the Timelines list-- in the transition list--and you'll see in the Properties panel on the right there's actually now a set of options that I can apply to the entire transition. And if I just click this Automatic Reverse checkbox, you'll notice the icon on the left in the transitions list has now changed to a double headed arrow, and the Pick to Info transition disappeared from the list, and that's because Flash Catalyst is now automatically managing that transition as a mirror image of the other one. And so if I now run this from Info to Pick, you see everything flies off the top as you saw before. And if I play the same transition from Pick back to Info, you see everything flies in from the top, so it's automatically created a mirror image of that transition for me. So the second thing I want to show you is how you can specify the behavior of an animation when it's interrupted by another transition. In Flash Catalyst CS5, you only had one option in which it was that the first transition that was currently playing would instantaneously jump from wherever it was to the end point and then begin the next transition. In Flash Catalyst CS5.5, that default behavior is actually different. It's to have a smooth animation from wherever the first transition was-- from where it left off--to smoothly animate toward the end point of the next transition. And you can actually control CS5.5 whether you want that new default behavior versus the old behavior. So let me show you an example of that. Here's the default behavior in CS5.5. Just watch the sliding dot at the top of this dialogue as I hit Next, and I'm going to hit Next again before it's made it all the way across to the Pick File dot. So here's Next, and so you notice that when I hit it a second time, it just smoothly kept on sliding. And I'll do it again in reverse here. We'll start moving toward Pick File, and then I'll hit Cancel again so that we go back to Enter Info. Begin sliding, then I hit it again, and you can see there's no sort of jump or hitch or anything like that, it just smoothly moves across. I'll show you the behavior that would have been the default in an earlier version. Again we'll look at the transition properties over here, and where it says Interruption Appearance, I'll change it from Smooth to Snap to End. If I run this now, you'll now see that if I hit Next twice too quickly, you'll see an actual jump. So you notice how when I hit Next a second time, it just jumps to the end point of the first transition. Not the behavior that you usually want to see. Okay. So next I want to talk about how to build a repeating animation that involves color and filter animation which are the last 2 features that I was talking about originally. Here's an example of what we're going to build. You can see this progress bar has a colored dot that is moving repeatedly over and over. It's also changing colors as it moves. You can see it starts out gray over here and turns green by the end, and there's also a filter where the blur of the filter is increasing as the animation continues. So that's going to pull in a couple of new CS5.5 features, and I will show you how to do that right now. So if we go to the upload state of this component, I have this progress bar custom component that I've built, and we'll just edit into that, and you can see it has 2 states; the beginning of the sequence and the ending of the sequence. And if I look at this component, you can see that the Glow is actually a filter effect that I have applied has a really large blue in the ending state, and then the beginning state has a really small blur and a lower opacity as well, so it's virtually invisible. And we can look at this dot here, and we can see in one state it has a gray scale gradient, and in the ending state, it has a green color gradient. Now in CS5 you weren't able to animate properties like fill, stroke, color, and filters. The new capability we added into CS5.5 is that you can control those properties with all the same Timeline features that you can control other properties. So in this example, you can see in the Timeline panel there are now, in additon to the move effect for the dot moving to the right, there is a Gradient Fill effect bar, and there's a Glow effect bar. So I can actually just hit Smooth Transition; that's a little bit longer than I'd like, so let me shorten that. So I can just hit Smooth Transition, and now you see I actually have a effect bars that cover the Gradient Fill color changing as well as the Glow changing. And if I preview that animation, you can see it looks exactly like what you saw before with the Glow filter smoothly animating outward, and the color of the dot smoothly changing as it moves. But right now this animation only plays once, so the last thing I'm going to show you is how to cause this animation to repeat indefinitely like we saw in the demo before. So again I click on the transition in the transition's list which causes the properties panel to display properties and settings for the overall transition. I can just click this Repeat checkbox here, and instead of it repeat a set number of times, I can check Forever and have the transition now repeat indefinitely. And if I preview that, you can see that occur again. You can also use the same repeat control to have action sequences repeat as well as Timelines. Okay. So just to summarize what we talked about today was how to build a forward and back transition that are mirror images without having to author the same content twice, how to control the interruption behavior when an animation or transition is interrupted by another transition, how to animate properties such as fill, color, and filter effects that were not possible to animate before, and finally, how to cause an animation sequence to repeat--even to repeat indefinitely. [Flash Catalyst Developer Center] [adobe.com/devnet/flashcatalyst] So thank you for watching, and if you're interested in learning more, please visit the Flash Catalyst Developer Center. [ADOBE DEVELOPER CONNECTION]
