Join Chris Converse for an in-depth discussion in this video Adding a custom CSS class to the caption button artwork, part of Create a Homepage Marquee with Edge Animate.
- View Offline
- Exercise Files
Now to add a custom rollover state to our Learn more buttons, let's go into one of our captions.…I'm going to double-click here and go into panel_03_caption.…If I select the Learn more symbol here, we can see that this is an instance of the learn_more…symbol, and we already created a custom class called btn_learn_more.…Again, we needed to do this because we have a box and a text field inside of this symbol.…So we're going to lock onto the parent container of these items.…So now let's come back to the stage. Let's double-click the Learn more.…
Now we're inside of the learn_more symbol, which is inside of the panel_03_caption.…Inside of here we have our two objects. Inside the Learn more symbol, let's select the blue rectangle.…With that selected, we're going to add a custom class onto this item as well.…So up here in the Properties panel, let's click on a custom class. Let's add button_artwork, then hit Return.…So now since we've added that custom class inside of the Learn more symbol here, that…
- 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
CSS: Transitions and Transformswith Joseph Lowery2h 25m Intermediate
1. Setting Up Your Project
Animating the panel artwork3m 55s
2. Creating and Animating Symbols
3. Setting Custom Variables and Functions
4. Creating and Linking the Navigation
5. Creating Custom Interactions with jQuery
6. Linking the Caption Buttons
7. The Final Details
Removing the debugging code1m 14s
Where to go from here1m 26s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.