Introduction

It is somewhat ironic that I am writing this on November 9, 2012, which is one year, to the day, after Dan Winokur, vice president and general manager of interactive development at Adobe, turned the Flash community inside out and rearranged its molecules when he posted this to his blog:

Though the Flash community reacted rather predictably to this announcement, I wasn’t really surprised. I was having fun with Flash—teaching it, writing tutorials, producing three Flash books for friends of ED—but I had concluded Flash was a mature product, and that the sense of wonder and joy that had marked the Flash community from the first version of Flash to Flash CS5 was disappearing.

About seven months earlier in April 2011, I happened to be wandering the floor at FITC, one of the more important Flash conferences, when Doug Winnie, an Adobe product manager, asked me to sit in a corner of the exhibitor area with him while he showed me something he was working on. That something was an app he called “Edge.” Rather than walk me through what I could do with the app, he simply plunked his computer on my lap and told me to play around with it. For the next 20 minutes, as I shoved boxes and text around the screen, nothing existed in my universe other than this interesting app. When I passed the computer back to him, rather than tell him what he wanted to hear—Nice product—I simply looked at him for a second and said, “The magic is back.”

So much of what intrigued me and others in the early days of Flash 2 and Flash 3 was there in Edge, and I made it quite clear to Doug, “I want in.” Three months later, I was at Adobe headquarters in San Francisco with six others and spent three of the most incredible days of my association with Adobe huddling with the Edge team, creating amazing HTML animations, and discovering this was not going to be the usual product development cycle. The community and the team were going to be working together to develop Edge. For the next 18 months, that is exactly what happened, and the result of that partnership is Edge Animate. It will become an important tool in your web design and development toolbox, and I hope you have as much fun with this application as I am having.

This book is also a bit different from any Edge Animate book you may have read or considered purchasing. From the very start of the process, Mike and I put ourselves in your shoes and asked a simple question: What do you need to know and why? This question led us into territory that we didn’t quite expect. As we were grappling with that question early in the process, we kept bothering our network of Edge Animate friends to be sure we were on the right track.

One other aspect of this book is that we had a lot of fun developing the examples and exercises. The fun aspect is important, because if learning is fun, what you learn will be retained. Anyone can show you how to shrink and rotate objects in space. It is more effective when you do exactly that by dropping an anvil on a rabbit. Anyone can dryly explain type, but it becomes less techie when you apply text formatting and Web Fonts to a single word sitting on a horizon line. Nested symbols are a “yawner” at best, but when they are related to a starfield and a shooting star in a twilight sky, the concept becomes understandable. Need to experience how to create image flips with hyperlinks? Why not move into the Swiss Alps?

As you may have guessed, we continue to exhibit a sense of joy and wonder with Edge Animate, and we hope a little of our enthusiasm rubs off on you as well.

Book Structure and Flow

To start, this is not a typical Foundation book. There is no common project that runs throughout the book. Instead, each chapter contains a number of exercises to help you develop some “Edge Animate chops,” and every now and then we turn you loose in a “Your Turn” section.

We start by dropping you right into the application to create a small Edge Animate movie we call “Big City Cuisine” (told you we were having fun). This chapter familiarizes you with the Edge Animate workspace and the fundamentals of using Edge Animate. Chapter 2 introduces you to working with the interface and finishes with dropping that anvil on a rabbit.

Chapter 3 introduces you to symbols and nested elements in Edge Animate. In this chapter, you learn how to create and use symbols, and we even create a series of planets and moons to show how nesting elements works, and a sports car is used to show how nested symbols work. Along the way, you travel from the Swiss Alps to the Toronto subway, discovering how to create some rather powerful effects in your Edge Animate compositions.

After Chapter 3, you have pretty well mastered the fundamentals of motion in Edge Animate. Chapter 4 focuses on how content for Edge Animate is created in Illustrator, Photoshop, Fireworks, and Flash. The rest of the book builds on what you have learned. Chapter 5 walks you through the typographic aspects of Edge Animate, including how Web Font technology can be used in Edge Animate.

Chapter 6 picks you up and throws you into the Edge Animate coding pool. Don’t worry if you’re not a programmer! Edge Animate is designed to appeal to all programming skill levels from neophyte to “give me a blank page and I’ll write some magic.” Chapter 7 is one of the more important chapters in the book. Its focus is on the end game: getting your compositions ready for everything from web pages to DPS. We even walk through how you deal with browsers that can’t display your compositions and wind up by showing you how easy it is to add YouTube and Google Maps content to your compositions. Here’s a hint: if you can copy and paste, you are in the game.

With all of the fundamentals out of the way, we know you are just itching to take your new skills out for a test run. Chapter 8 is designed to do just that. You will be creating assets in Fireworks and putting them in motion in Edge Animate. You will be creating magnets and letters in Illustrator and having the letters zip up to the magnet heads in Edge Animate as the magnet passes over them. You will create an Edge Animate preloader in Flash and finish up by creating a pop-down menu created solely in Edge Animate.

Chapter 9 shows you how to add Edge Animate content to DPS publications and iBooks, and we finish the book by showing you how to create Edge Animate compositions destined for a mobile and responsive universe.

Finally, Michael and I are no different from you. We are learning about this application—what it can and cannot do—at the same time as you are learning about it. Though we may be coming at it from a slightly more advanced level, there is a lot about this application we’re still discovering. If there is something we have missed or something you don’t quite understand, by all means, contact us. And here are our final words of advice for you:

The amount of fun you can have with this application should be illegal. We’ll see you in jail!

Layout Conventions

To keep this book as clear and easy to follow as possible, the following text conventions are used throughout:.

• Important words or concepts are normally highlighted on the first appearance in italics.
• Code is presented in fixed-width font.
• New or changed code is normally presented in bold fixed-width font.
• Menu commands are written in the form Menu > Submenu > Submenu.
• Where I want to draw your attention to something, I’ve highlighted it like this:
• Ahem, don’t say we didn’t warn you.