Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Adobe Edge Quickstart Guide
  • Table Of Contents Toc
Adobe Edge Quickstart Guide

Adobe Edge Quickstart Guide

By : Joseph Labrecque
4.3 (4)
close
close
Adobe Edge Quickstart Guide

Adobe Edge Quickstart Guide

4.3 (4)
By: Joseph Labrecque

Overview of this book

With the advent of HTML5 and CSS3, web designers can now create sophisticated animations without the need of additional plugins such as Flash. However, there hasn't been an easy way for creating animations with web standards until now. This book enables even those with little knowledge of HTML or programming web content to freely create a variety of rich compositions involving motion and interactivity.Learning Adobe Edge will quickly get you up and running with this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge does not rely on a plugin ñ so it can be run within any standard browserñ even on mobile.Learning Adobe Edge begins with an overview of the shifting web landscape and the Edge application. We then move on through the variety of panels and toolsets available, and explore the many options we have when creating motion and interactivity using Edge.The book presents the reasoning behind engaging, standards-based web content and how Edge fills the need for professional tooling in this area. In the book we'll examine content creation and how to achieve fluid animation and advanced transitioning through the Edge timeline. Sprinkled throughout the book are tips and references for those coming to Edge from a background in Flash Professional. Whether you are coming to Edge from Flash Professional or are totally new to motion graphics on the web, Adobe Edge Quickstart Guide provides a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon.
Table of Contents (12 chapters)
close
close

Example: Adding interactivity to a website header


Now that we've had a solid overview of how to apply interactivity through Actions within an Edge composition, let's revisit our example project from the previous chapter. If you recall, we have created an animated website header for a studio recording project of the name An Early Morning Letter, Displaced.

They like what we've done with the composition so far but now request that we make it a bit more interactive. Specifically, they want a hover effect where rolling over each piece of album art brings up some basic information about that release. Additionally, they would like to have their website open when a user clicks upon the title text and direct links to each album page when the album art is clicked.

Creating the Text element

First we must open the project and create a new text element on the Stage to contain the hover text, which they wish to display.

  1. 1. Open the website header project from the previous chapter. If desired, a completed...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Adobe Edge Quickstart Guide
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon