Create a Homepage Marquee with Edge Animate
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.
- 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
Previewing the final project
- [Voiceover] Hi, I'm Chris Converse, and this is a course I'm creating ia animated homepage marquee for your website using Adobe Edge Animate. This project's gonna feature a few nice, interactive user experiences, one, if the users rolls their mouse inside of the marquee, it will stop the automatic animation, so the user can interact with the navigation buttons or the Learn More buttons. When we re-size the browser, the design is also gonna conform to the browser size, giving us a responsive design technique that's gonna be useful for multiple-sized screens. And we'll also be linking the navigation to the timeline, so users can click on the navigation items and jump to any panel that they want to see.
So I hope this course sounds interesting to you, and if so, let's get started.
Creating Interactive Projects with Edge Animate69,583 Views
Web Motion for Beginners: Final Project15,925 Views
Getting Started with Dreamweaver CS5 and Business Catalyst193,241 Views
Flash Professional: Creative Cloud Updates48,962 Views
Create a Rotating Carousel with jQuery and Dreamweaver87,725 Views
Illustrator CC 2013 One-on-One: Fundamentals1,676,368 Views
Edge Animate Essential Training630,358 Views
Illustrator CC 2013 One-on-One: Mastery301,789 Views
Muse Essential Training1,469,007 Views
PHP with MySQL Essential Training4,259,922 Views