Book Image

Learning Adobe Edge Animate

By : Joseph Labrecque
Book Image

Learning Adobe Edge Animate

By: Joseph Labrecque

Overview of this book

<p>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.<br /><br />Learning Adobe Edge Animate will detail how to use this professional authoring software to create highly engaging content which targets HTML5, CSS, and JavaScript. Content created in Adobe Edge Animate does not rely on a plugin &ndash; so it can be run within any standard browser&ndash; even on mobile.<br /><br /><i>Learning Adobe Edge Animate</i> begins with providing a complete overview of the shifting web landscape and the Edge Animate 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 Animate.<br /><br />The book presents the reasoning behind engaging, standards-based web content and how Edge Animate fills the need for professional tooling in this area. In the book, we&rsquo;ll examine content creation, the importing of external assets, how to achieve fluid animation and advanced transitioning through the Edge Animate timeline. The book also covers some cool topics such as interactivity through Actions and Triggers, and it examines workflow options across Adobe Creative Suite applications. Sprinkled throughout the book are tips and references for those coming to Edge Animate from a background in Flash Professional. Towards the end of the book, the reader will explore a variety of more advanced topics such as the Edge Animate Runtime APIs and how Edge Animate can interface with other Creative Suite applications for a full workflow.<br /><br />Whether the reader is coming to Edge Animate from Flash Professional or is totally new to motion graphics on the web, Learning Adobe Edge Animate will provide a solid foundation of motion and interactivity concepts and techniques along with a set of demo assets to build upon. In the end, you&rsquo;ll have a firm grasp of what it takes to create engaging content for the web and the familiarity with Edge Animate to actually get it done!</p>
Table of Contents (18 chapters)
Learning Adobe Edge Animate
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Animating a website header


One of the basic use cases for Adobe Edge Animate is the creation of a simply animated website header. We will be authoring such a composition for a studio recording project of the name An Early Morning Letter, Displaced, who wish to have images of each of their releases animate in on the header itself. Thankfully, they have provided us with all of the assets necessary for the construction of this animated header.

Note

These assets are included as part of the files for this chapter and are in the folder named banner_assets.

Project setup, asset import, and general layout

The first step in this composition will be to set up our Edge Animate project, import all of the assets, and arrange them upon the Stage. We will begin by arranging the assets in their final form, as they should appear at the end of the animation once it has completed playback. The Pin makes it quite easy to animate "backwards".

  1. Create a new Edge Animate project and save it onto the local disk.

  2. Adjust...