2014
Lynda
Chris Converse
1:08
English

This step-by-step project demonstrates how to create an interactive homepage marquee using Adobe Edge Animate, a tool for creating smooth motion and transitions for multiple screen sizes, and a combination of HTML5, CSS, and a little custom jQuery. Author Chris Converse shows how to build the buttons, captions, and navigation elements; detect rollovers and other interactions; animate the artwork and effects; and ensure your design works equally well with mobile and tablet layouts.

Introduction
Previewing the final project
About the exercise files
1. Setting Up Your Project
Creating a new project in Edge Animate
Adding images to your project
Creating symbols for the panel artwork
Animating the panel artwork
Setting the animation to loop
2. Creating and Animating Symbols
Creating the caption box background
Creating button artwork for captions
Converting a custom button into a symbol
Animating the caption symbols
Duplicating symbols for the second caption
Animating caption two
Duplicating symbols for the third caption
Animating caption three
3. Setting Custom Variables and Functions
Setting a custom variable
Detecting a mouse rollover on the main stage
Creating a custom JavaScript function
Running a custom JavaScript function
4. Creating and Linking the Navigation
Creating navigation button artwork
Linking the navigation to panels
Creating the navigation indicator
Animating the navigation indicator
5. Creating Custom Interactions with jQuery
Adding a custom CSS class to navigation artwork
Create a navigation rollover effect with jQuery
6. Linking the Caption Buttons
Linking the caption buttons to web pages
Adding a custom CSS class to the caption button artwork
Create a button rollover effect with jQuery
7. The Final Details
Making your design responsive
Removing the debugging code
Conclusion
Where to go from here

Download File Size:311.07 MB

---