Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When it comes to defining transitions inside of Flash Catalyst, you can really have a lot of fun, because there are many different types of transitions that you can apply. We've already seen things like fading in and fading out, moving or resizing. Well how about Rotation? Let's take a close look at how we might use the Rotation attribute when defining rollovers for buttons. So I'll click on this button here and let's define exactly how the rollovers are going to work for this button. I'll double click to enter Isolation Mode and on the Over state here, I'll go to the Layers panel, turn off the Monochromatic layer, but turn on the Color and the Growing layer here.
So now when I go from the Up state to the Over state, the button will change to a color version and the word Growing will appear. In the Timelines panel I'll select the Up to Over transition and I'll click on Smooth Transition, and preview the effect. So basically, when I mouse over this, the black version of the logo fades out and the color version of the logo fades in. Well let's say I also want that color version of the logo to kind of rotate into place. So what I'll start off by doing here in the Over state is coming to the Layers panel and click on that entire color group.
Now with it selected, I'm going to come down to the Timelines panel and I want to add an action, and what I'm about to do now is different than what we've done before. You see until now, we've taken two pieces of artwork on the artboard and Flash Catalyst kind of figured out what needed to change. But instead of me actually rotating this artwork on the artboard, I'm going to have Flash Catalyst do that for me and I'm going to do it through the Timelines panel. So with that color artwork selected, I'm going on the Add Action button and I'll specify Rotate. Notice now the color group not only will Fade In, but it will also rotate as it does so.
Right now this rotate will only take half a second, the default setting. So to make it match the rest of the actions, I'll just extend it out here for a full second. Let's preview how this will look by clicking on the Play button here in the Timelines panel. Notice now that button kind of rotates, but it doesn't rotate completely. The reason why is because by default the Rotate is set to rotate at 90 degrees. So you'll note that when I have the rotate action actually selected here inside of the Timelines panel, I can also look at the Properties panel to see the settings for that particular effect.
Right now that rotate is set relative to the object and it only rotates 90 degrees. Well I want to do a full rotation, so I'm going to change this value here of 90, I'll just click on it to highlight it and I'll type in 360. I'll hit Enter to accept that value and now I'll preview this effect. And you can see that now, the button actually completely rotates into position. So we've manually added this rotate action onto our Timeline. We've adjusted its duration and we've also changed the Angle setting inside the Properties panel. What I really like about working with Flash Catalyst is how easy it is to make adjustments to these settings.
I can quickly iterate on my design and preview it right here inside of my project.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.