Join Chris Converse for an in-depth discussion in this video Converting a custom button into a symbol, part of Create a Homepage Marquee with Edge Animate.
Next, we'll create a text label for the Learn more button.…So we want to make sure we're still inside of panel_01_caption, inside of isolation mode.…Let's come up to the tools. Let's grab the Text tool. Let's click and drag.…Let's type in Learn more.…With the text selected, let's come down and choose center.…Let's change the type size from 18 to 14 pixels.…Let's move this over top of the button.…I am going to resize this, and I'll use my arrow keys to just move this into the center…of the blue box. So now if click away, we can see our Learn more button.…
So what I'm going to do is come in here, select the text, hold the Shift key, and select…the blue rectangle.…With both of these selected, let's right-click and choose Convert to Symbol.…Let's name this learn_more, then click OK.…Now we have an instance of the learn_more symbol placed inside of the panel_01_caption symbol.…Next, let's grab the symbol. Let's align it to the left of the type.…I am going to hold the Shift key, hit the down arrow twice, which will nudge the button…
- 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>