Introduction

My interest in Edge Animate started when my editor at HTMLgoodies.com sent me an e-mail asking if I was interested in covering a couple of new software titles that Adobe was working on. The first title was Adobe Muse, a website creation tool aimed primarily at designers. The other title was Adobe Edge, which was later renamed as Adobe Edge Animate CC. As a person who prides himself on always wanting to learn new things, I took up my editor’s offer, and I downloaded a free preview of Edge. From there, I wrote several articles for HTMLgoodies on how to use Edge and what it could do. My interest became so deep that I wanted to pursue writing a book on the topic. Now, more than a year later, you’re holding that book in your hands.

I was lucky enough to be involved with the Adobe developers who created Edge Animate. I attended the Customer Advisory Board meetings online and took careful notes for each new preview release. I had to keep my mouth shut under terms of an NDA, and it was tough to not start writing articles right away on new features that were about to be announced. It was very exciting watching the software develop over the months. I saw new features added, then removed, then implemented back in. I provided some of my own input on what features I would like to see added and how the tool could be used.

Hopefully, through this book, I can convey everything I learned over the past year to you in a simple, easy-to-understand format that even the most inexperienced designer, animator, developer, or hobbyist can learn from and appreciate. It is my sincere wish that you learn how to use Adobe Edge Animate CC so that you can use it effectively in your day-to-day work. You can find me on both Facebook (www.facebook.com/AdobeEdgeAnimateForDummies) and Twitter (https://twitter.com/AnimateDummies).

Foolish Assumptions

I assumed absolutely nothing when I wrote this book. Except for maybe that you are a die-hard web content creator who yearns to learn the most advanced web techniques on the planet, which of course, this book provides for you. On the other hand, you really don’t even have to be all that die-hard about wanting to find out how to make animations using HTML5, JavaScript, and CSS without even knowing how to code. All I ask for is at least a mild curiosity on what Adobe has built with Edge Animate and what it can do for you.

If you picked up this book looking for a replacement for Adobe Flash, then you may want to keep searching. Although it may be true that Edge Animate may eventually replace Flash, that isn’t going to happen now or in the next year or two. I wrote this book assuming that you’ve never worked in Flash or even know the first thing about Flash. In fact, just forget about Flash altogether. You will never read a sentence that begins with, “Just like in Flash, you can. . . .” Adobe Edge Animate CC For Dummies is focused on the future, and there is very little discussion on the past.

How This Book Is Organized

This book was painstakingly organized, then torn apart, then put together again. The end result is a highly polished, extremely well put together book that will have you jumping from one chapter to the next. The editors did an excellent job of trying to make me, as the author, look good. Here’s what we wound up with.

Part I: Getting Started with Edge Animate

In the first part of this book, I walk you through the background of the Edge suite of tools that Adobe has put together as a means for web developers to help create the web. I also discuss browser concerns and compatibility, which, I hope, becomes an obsolete chapter in the coming years.

I also go into detail on how you can design interactive and adaptive presentations using Edge Animate. This includes the ability to reuse symbols for multiple projects, incorporating a responsive web design, figuring out the multi-featured publishing options, and more.

Also included in the first part is a process for creating an animation project with ideas on how to present your project online. After all, what good is an animation that lives only on your desktop — put it online and let the world see your creation!

The first part concludes with you actually using Edge Animate by drawing and editing elements. Hopefully, you find the entire book is filled with functional and effective instruction that you can use in your everyday work (or fun).

Part II: Adopting Tools and Techniques

The second part of this book dives in to a discussion on the tools and features of Adobe Edge Animate CC. I go into detail on using the Timeline, working with keyframes, and understanding how the Stage works.

I also start discussions on working with triggers, actions, labels, and adding attributes to cursors. All these features enable you to make animations that your audience can interact with.

Part II finishes with details on using the workspace and customizing it as you prefer. You can manipulate all of the frames and panels to appear to your liking. What’s more, you can save your own custom layout for use with future projects.

Part III: Formatting and Animating

The third part of this book is all about the formatting and animating. At this point, you really get to the meat of the Edge Animate software. I go into detail on the Transform tool, setting visibility, positioning, and sizing. In addition, there are whole chapters on animating color, borders, corners, shadows, and more. This includes animating and formatting text boxes.

This part concludes with chapters on using the Elements panel, the Library panel, and even more on fonts. There’s a ton you can do with Edge Animate, and these chapters are geared to make it all the more user-friendly.

Part IV: Putting Your Animation to Use

All the formatting and animating in the world would be pointless if you couldn’t put your animation to use. That’s where Part IV comes into play. I devote pages of text to explaining about the Edge Animate project structure and the files that Edge Animate generates, including files for use with Apple iBooks and Adobe’s InDesign.

Getting your animation ready for publication goes beyond just clicking Save. You can set up several different types of publishing options depending on how and where you want to use your project. If you want to put your animation online, this part has you covered with discussions on putting your project into an existing web page, into a Joomla! or WordPress site, or on putting it online as a stand-alone page.

Part V: Creating Sample Projects

Part V was my favorite to write. This is where I could put to practical use everything taught in all of the proceeding chapters. While writing these sections, I tried to go as step-by-step as possible, but I also assumed that you took the time to become familiar with the basics. After all, you have to crawl before you can walk, and you have to walk before you can run.

After you start running through this part, you will be creating slideshows, interactive tutorials, and even animated children’s books. You also find out how to synchronize elements and how to use easing and rotating effectively. In addition, I present examples on how to create navigation for one-page sites such as infographics or even a restaurant site. I even include how to incorporate your slideshow as a symbol into another site. I found it very cool to tie so many different aspects together for a cohesive project.

The last chapter in this part may prove the most beneficial in terms of discovering some very cutting-edge web techniques in terms of developing a responsive web design. Creating animations that can respond to screen size is a growing trend in web development, and the very first version of Adobe Edge Animate CC has you covered.

Part VI: The Part of Tens

The “Part of Tens” rounds this book out with a couple of top-ten lists. What For Dummies book would be complete without this section? Here, I present one list of the top ten users of Adobe Edge Animate CC and follow that up with a list of resources that are sprinkled throughout this book.

Icons Used in This Book

I use several icons throughout this book as a way to draw your attention to special information. Depending on the icon, this information is the type of stuff you can skip right over or give a quick glance, or in some really special cases, it’s the type of information that you may want to study closely.

The Technical Stuff icon mainly refers to code that developers may like. These are the icons that many of you may want to glance over briefly, whereas others of you, perhaps the Cliff Clavens out there, might relish.

This entire book is full of Tip icons, ranging from special shortcut keys to performing tasks a different way than presented in the main text. Some tips contain useful information that doesn’t quite fit with the other text but that I still want to get across to you.

Ahhh, the dreaded Warning icon. This icon lets you know when pirates are about to attack. Whoops. Nope, that was for my other For Dummies book about sailing the high seas (that book doesn’t exist, at least, not yet). The Warning icon mostly denotes when things may not work or when you could be in danger of losing your project. I recommend reading the warnings.

The Remember icon presents information that’s useful keep in mind for other times. You own the book, so you don’t actually need to remember most of the stuff that’s in it. Just open the book and follow the instructions when you need to.

Where to Go From Here

This book works a couple of ways. If you want to comprehend the capabilities of Edge Animate and make projects with it, simply start at the beginning and follow through, page by page, until you reach the Index at the back. It’s worth the trip.

If you have a question about a feature, find it in the Index and jump straight to that page.

Occasionally, we have updates to our technology books. If this book does have technical updates, they’ll be posted at www.dummies.com/go/edgenaimatefdupdates.

I can’t promise that every word will have you riveted to your seat with hands trembling in anticipation as you turn the page, but I can sincerely tell you that I wrote this book to show you, in the best possible way that I could, how to use Adobe Edge Animate CC.

If you’re ready to see all about Adobe Edge Animate CC, turn the page. It’s time to start!