Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When working with projects in Flash Catalyst it can be easy to get caught up with defining multiple pages and then defining Interactions and transitions to occur between those pages. However, don't forget that every component that you have in Flash Catalyst is usually made up of multiple states. You can also define transitions to occur when you transition from one state to the next. For example, let's take a look at some of these buttons that we're using here for navigation. Now at the moment, they're just several pieces of artwork that have been defined as a Button component.
However, we'd like to define some rollovers to occur when people move their mouse over this Button. So, let's first start by defining the actual states for this button. I'm going to double-click here on the artboard on the button to bring us into Isolation mode for this button. Notice now that my project olive_tour_ buttons is right here and I'm currently in the GrowingButton component within that project. Remember that these breadcrumbs here, as they're called, will always let me know exactly where I am in my project. I'd like the Up state to appear like this, but now I'm going to click on the Over state.
In the Layers panel I'll reveal all of the objects inside of the Growing Layer and I'll turn off the Monochromatic version of that art and I'll instead display the Color version of it. I'll also choose to view the Growing text that appears next to it; this identifies which step in the process this Button represents. By the way here for the Down state I want to make sure that the Monochromatic version is turned Off and the Color version is On, but I don't really need to see the text here. Now, let's go back over here to where it says Over. Right now there is this little white tab that identifies what number or what step this is in the olive oil manufacturing process.
But maybe I'd like that little tab to actually grow to include the word Growing as well, when I'm in the Over state. So, I'll select it by clicking over here on the tab setting inside of the Layers panel and I'll just use my regular Selection tool to resize it here. Now, let's take a look at the Timeline. Remember that before we've always been seeing pages displayed inside of the Timeline, but now since I'm inside of a component, I'm viewing the different states of that component. For example, there's a transition that specifies what happens when I move from the Up state to the Over state in this Button.
Let's click on it to view those settings right now. So, you can see that Flash Catalyst has already started to put certain things in motion for me. When I move from the Up state to the Over state, the Monochromatic Group fades out, so that it's not visible on the Over state. The Color version of that artwork, which is not visible in the Up state but is visible on the Over state, fades in. Likewise the text fades in as well and the Tab, that's the little white rectangle that I have, does appear in both of those states, both the Up state and the Over state.
However in this case though, it resizes itself to match a new size in the Over state. I can preview that by clicking on the Play button right here, however you'll notice that it just snaps from one state to the next. Remember how we created Smooth Transitions between pages. Well, we can do the same here between states. For example, I'm going to click on Smooth Transition, now notice what happens when I preview it. You can see that button now slides open. That's because Flash Catalyst defined an action to Resize that artwork as it appears over time.
Now, when I remove my mouse from on top of the button, I don't want the Over state to simply snap back to the Up state, I'd like it to transition smoothly as well, so I'll click on the Over to Up transition that appears here in the Timeline, and I'll choose a Smooth Transition for that as well. That means that when I move my mouse off of the artwork and I'll play this to preview it, I can see that the tab actually reduces back to its original size. So, all I had to do was take a single object and change its size across two different states. By using the Smooth Transition option, I've created a Button that appears to grow and shrink as I interact with it.
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.
Your file was successfully uploaded.