Join Chris Converse for an in-depth discussion in this video Linking the caption buttons to web pages, part of Create a Homepage Marquee with Edge Animate.
Now we're going to add hyperlinks to our learn more buttons. So what we're going to do here on the stage, I'm going to zoom out to 100%. You can type in 100 here and hit Return or you can hit Command+1 or Ctrl+1. I'm also going to come down here and center the stage. And I'll scroll out here a little bit, since my screen is a little bit smaller. And down in the Timeline panel, I'm going to jog the playhead out to the five-second mark so I can see the caption on the stage. Next, let's double-click. This will brings us inside of panel_01_caption, and we have the Learn more symbol instance selected.
Now, with this selected, the first thing we want to do is indicate to our user that they can click on this. So in the Properties panel, let's come down to the Cursor Setting. Let's turn on the Pointer and hit Return. Next, we're going to right-click, come down and choose Open Actions for "learn_more." Inside of here, what we're going to do is come down to click, then on the right-hand side, under the Snippets, let's come down and choose Open URL. So inside of here, we're going to change adobe.com to lynda.com, and then inside of self, we're going to put blank.
That way when we click this link, it will open a new window with the lynda.com website in that new tab. Next, let's copy this line. Let's close this. Let's come back out to the main stage. Let's scrub the Timeline. Let's come out to the 11-second mark. Let's double-click inside of panel_02_caption. Let's select Learn more buttons inside of here, come over to cursor in the Properties panel, select pointer. Then we'll right-click, choose Open Actions for "learn_more", choose a click event. Let's paste in our code.
This one we'll just link to Adobe. Let's close that. Back to the main stage. Let's scroll the timeline out, then scrub it out to the 17-second mark, double-click panel_03_ caption, select Learn more. Assign the pointer cursor, right-click, Open Actions, click event. Let's paste in our script.
We'll type in codifydesign. So now we have our setting cursor setting and a hyperlink activated for each one of the buttons inside of our three captions. Command+S or Ctrl+S to save, and then let's preview in browser. Now, inside of the browser, let's come down and click on the button for Learn more inside of caption 01. That will open lynda.com in the new tab. Let's close this. Let's come over, let's activate panel two.
We'll click this one. This will bring up adobe.com. We'll close that. Come over to the third panel. We'll click Learn more, and this will bring up my company, Codify Design Studio. So now we have activated not only the pointer tools for the buttons but hyperlinks for each one of these individual buttons. Now that we have those in place, next we'll activate a hover state using the same technique we used for the navigation.
- 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