Join Chris Converse for an in-depth discussion in this video Adding a custom CSS class to navigation artwork, part of Create a Homepage Marquee with Edge Animate.
Now we're going to add a rollover to the navigation buttons. But instead of adding a custom rollover…event to each button, what we're going to do is add a custom class and then write a…jQuery script later.…So the first thing we need to do is come into our navigation. Let's double-click one of…the nav buttons. So with this selected--we can see we have the ellipse selected here--…let's come over here in the Properties panel, let's click on the custom class, and let's…add a custom class into this.…So we'll type button_circle and then hit Return.…Now since we are working inside of the nav button symbol, which we can see up here in…the breadcrumbs, that custom class that we just added is going to be added to all instances…of nav button symbol.…
So let's come back to the main stage.…Now, to test this and make sure, let's come into the second instance.…Let's select this, come up to custom class. We can see it's highlighted. And if I open…this up, we can see button_ circles has been applied here as well.…
- 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>