Join Chris Converse for an in-depth discussion in this video Animating the navigation indicator, part of Create a Homepage Marquee with Edge Animate.
Now to animate the indicator, let's come up to the stage. Let's select the indicator artwork.…This will also select this in the timeline.…Now, it is behind the very first one, which is the first panel, and we need this to stay…in place until we transition to the second panel, which happens at the 6-second mark.…So let me scroll down in the Timeline window here. So at the 6 second mark, with the indicator…selected, let's activate the left or X property.…So we added a keyframe here. Let's move this out to the 7-second mar. This is the same…duration that the second photograph takes to fade in.…
So at the 7-second mark let's activate another keyframe.…Let's come up to the stage. Let's move this over so that it's behind the second navigation item.…Let's come down to the timeline, select the first keyframe, right-click, and choose Create Transition.…With this selected, let's come up to Easing, choose Ease Out > Quadratic, hit Return.…So now if we scrub the timeline, we can see when the photography changes from panel 1…
- Setting up your project
- Creating buttons and converting them to symbols
- Animating symbols
- Detecting a mouse rollover on the stage
- Creating custom interactions with jQuery
- Styling buttons and navigation elements with CSS
- Creating a rollover effect with jQuery
- Adding and removing custom debugging code
Skill Level Intermediate
Q: I can't get the code to detect a mouse rollover on the main stage to work in Edge Animate 2014.1.
<div> A: Adobe removed jQuery from the default set of files in Edge Animate. If you use click the + icon in the Scripts panel, select the "from URL" option, and link to a URL version of jQuery, such as the one listed here, the course will work fine.</div><div> </div><div><font style="font-family:Tahoma,Geneva,sans-serif;font-size:10pt"><a href="https://code.jquery.com/jquery-1.11.0.min.js" target="_blank">https://code.jquery.com/<wbr>jquery-1.11.0.min.js</a></font></div>