Join Chris Converse for an in-depth discussion in this video Creating button artwork for captions, part of Create a Homepage Marquee with Edge Animate.
Now we're going to create the artwork for the Learn More button, so let's come into panel_01_caption. Let's double-click this on the stage. This will bring us into Isolation mode. Here we can see that we're inside of panel_01_caption, which is inside of the main stage. So inside of this symbol, let's come up to the Rectangle tool. Let's click and drag. Once we've drawn a rectangle let's come over to the Properties panel. Under Width, we're going to set this to 110, and for the Height, we're going to set that to 25.
Once that's in place, let's come up to Color. In here we're going to add a custom color. It's going to be #0366a9. Let's set the Alpha up to 100. Let's hit Return. Let's come up here and let's activate the border. So under None, let's come down and choose solid. We'll leave this at 1 pixel. And for the Color we're going to pick a slightly lighter blue. So under custom color let's start with #299ae0, then hit Return.
Now, if I click away, you can see this slightly lighter border around the darker-blue button, and this will act as the artwork for our call-to-action button. Next we'll add a text to label and then we'll convert that into a symbol.
- 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>