Adobe Edge Animate CC For Dummies (2013)

Part I

Getting Started with Adobe Edge Animate

Visit www.dummies.com for great Dummies content online.

In this part . . .

Cruising the Adobe Creative Cloud

Applying Edge Animate as a solution

Exploring options

Creating a composition

Visit www.dummies.com for great Dummies content online.

Chapter 1

Introducing Adobe Edge Animate CC

In This Chapter

Cruising the Adobe Creative Cloud and where Edge Animate fits in

Using Edge Animate compatibly with Adobe software, tools, and services

Spotting where Edge Animate projects work and don’t work and how Adobe addresses those concerns

Introducing the Edge Animate animation process

Noting how Edge Animate just may eventually replace Flash

In this chapter, I show you the Adobe Creative Cloud and all the tools, services, apps, and software titles available; this includes Adobe Edge Animate CC. Adobe has fully embraced the cloud; now you can get the latest updates and features without having to wait for the next full version. A subscription to the Creative Cloud means access to all the latest developments.

What’s even better is that Edge Animate is fully compatible with many of the titles in the Creative Cloud — with more features added regularly.

Edge Animate uses HTML5, which (even now) not all browsers support. Fortunately, Adobe provides features that help you when your audience isn’t using modern browsers. Most likely you’ll find there’s more support for HTML5 these days than for Flash; the jury is still out on what this means for the future of Flash.

But onward: This chapter also provides an overview of creating a project in Edge Animate. You may recognize this process as being the same you use for many other different types of projects. It’s all about the organization and planning.

Adobe Wants You to Create the Web

As part of introducing Edge Animate, Adobe also announced

Edge Suite: An entire set of tools to help you create your part of the web.

Creative Cloud: Everything you need to use Edge Animate is in the cloud.

Design and development features: Edge Animate is great for both designers and developers.

Compatibility: Edge Animate works with many different software tools.

Web-friendly animation features: Adobe Edge Animate CC comes with a long list of features for creating modern web animations.

Introducing the Edge suite

In late September 2012, at the Create the Web event in downtown San Francisco, Adobe announced its entire suite of Edge tools and software. Through this event, Adobe reaffirmed its commitment to providing the best services for creative artists, web designers, and animators. It also cranked up support for HTML5 as the future of the World Wide Web. Flash animation is fading into the history books.

The Adobe Edge Suite is one part of the Creative Cloud that Adobe announced (as shown in Figure 1-1 and featured in its own sidebar later in the chapter) consists of these tools:

Edge Animate: The main tool for turning static graphics and text into modern web animations.

Reflow (planned for release after the publication of this book): Geared toward helping designers to create a responsive web design.

Code: You can use Code to preview CSS, edit code, and integrate other code for design work.

Inspect: An excellent app that allows you to synch your desktop to your mobile device so you can install updates as they happen.

Web Fonts: Free fonts that you can use with Edge Animate.

Typekit: Another source of fonts that you can use with Edge Animate.

PhoneGap Build: A tool for creating mobile apps with HTML, CSS, and JavaScript.

Figure 1-1: The Adobe Edge Suite is available in the Creative Cloud.

Your tools are in the cloud

All these tools and services are available through Adobe’s Creative Cloud — a one-stop shop for the majority of Adobe’s creative software (including Photoshop, After Effects, InDesign, Illustrator, Fireworks, Muse, and Dreamweaver). Most tools for most of these software products are compatible with Edge Animate.

You can get started with the Creative Cloud with a free membership for 30 days that includes 2GB of cloud storage and limited access to services. You can find more about the Creative Cloud online at http://html.adobe.com.

Creating animated web content

Adobe Edge Animate CC is a brand new software tool that allows everyone from beginners to expert web designers to create animated web content. What separates Edge Animate from other animation tools is that it uses the most advanced standards and methodology in its code. This rampant modernity includes the use of HTML5 and JavaScript — in particular, jQuery.

Adobe is providing the best of both worlds to accommodate all types of animators:

If working with jQuery sounds scary, even if that’s a good kind of scary, it shouldn’t. Edge Animate does all the coding for you. All you have to do is conjure up the creative aspects of your design.

On the other hand, if you do know how to code with jQuery and you like to dive in to the brackets, then Edge Animate provides a very functional code panel from which you can work.

Collaborating with other publishing tools

While Edge Animate is a terrific tool for creating online content, it doesn’t actually publish your animation online. Fortunately, Edge Animate is compatible with several publishing tools, applications, and platforms. Here’s a quick look at each tool and application.

iBook Files

If you weren’t already aware, iBooks is one of the most popular and most downloaded apps for Apple devices, including iPhones and iPads.

By using Edge Animate to create your compositions, you can feel confident that your audience will see your animation play flawlessly on some of the most popular phones and tablets around. Even better, you can export your Edge Animate composition in formats that are compatible for use with Apple’s iBook Author.

Adobe InDesign

InDesign is desktop publishing software that is also made by Adobe. It allows you to create pages for print, tablets, and other platforms and devices. InDesign is also part of Adobe’s Creative Cloud and works well with Edge Animate. Exporting files from Edge Animate is a matter of clicking a few menu items and then it’s only a matter of placing the files into InDesign.

InDesign outputs ePUB documents that work on the Apple iPad. The iBook app for the iPad uses the ePUB format. Through these tools, you are provided another way to incorporate your animation compositions into iBooks.

Adobe Dreamweaver

Adobe Dreamweaver has been helping budding web developers create websites since 2005, which is when Adobe acquired Dreamweaver from Macromedia. Using Dreamweaver, a web designer can whip up HTML websites and mobile apps with cross-platform compatibility, loads of features, and multiscreen previews. Now, with the release of Edge Animate 1.0, Adobe has updated Dreamweaver to include support for your animation projects: You can continue building websites in Dreamweaver and import your projects from Edge Animate.

Adobe Fireworks

Adobe Fireworks is another former Macromedia software product that you can use to create bitmap and vector graphics. Web designers use it in combination with Dreamweaver, and now Edge Animate, to create interfaces, onscreen designs, and interactive content for tablets and phones.

Adobe Muse

Adobe Muse is another tool for the website builder, aimed directly at design artists with little or no coding skill. Muse is brand new; a preview was released in 2012.

If you’re a designer who’s comfortable with creating print layouts, then working with Muse should come naturally. Plus, if you want your design site to feature a composition made in Edge Animate, such projects are easy to add to your Muse site.

Adobe Inspect

Adobe Shadow was renamed Inspect in late 2012.

Presently, Flash won’t work on several types of devices — but Edge Animate will — and you’ll want to preview your work on as many different screen sizes as you can. That’s where Inspect comes into play. This tool allows you to view updates that you make to your animation on a variety of devices instantly.

Highlighting the Critical Features

Adobe Edge Animate CC is about more than just web animation. Some advanced web designers have already created entire sites using Edge Animate; don’t be surprised if Edge Animate replaces Flash in the near future. The reason’s a no-brainer: Because Edge Animate uses HTML5 and JavaScript, this expands your potential audience by making your content available to view on modern browsers and a wider range of devices — even those that block Flash.

The Edge Animate features that are most vital to web development include links, loops, interactivity, and a responsive web design. The limits on what you can do with Edge Animate rest mainly within the confines of your imagination. With Edge Animate, you’ll create slide shows, logos, and sites; animated or not, with or without links, all text, all images, or a combination of text and images.

If you have a passion, or just have a passing interest in creating web animation, then you at the very least owe it to yourself to check out Adobe Edge Animate CC — and to continue reading this book.

Maintaining Browser Compatibility

Adobe Edge Animate CC works in all modern browsers — including the most recent versions of Chrome, Firefox, Opera, Safari, and Internet Explorer 9. It also works on all tablets and smart phones that have modern browsers installed. For audiences that don’t use modern browsers, Edge Animate does provide a fallback option that you can use so that your animation does not appear broken. This fallback option is discussed later in this section.

Compatibility is important for web content; if a browser doesn’t support your code, then your animation won’t work. No wonder Adobe Edge Animate CC creates code that works in all modern browsers.

A brief history of HTML

HTML5 is the slowly evolving next iteration of HTML (HyperText Markup Language), the coding language that developers use to create web pages. The very first version of HTML was introduced in the early 1990s. HTML2 was released in 1995. In 1997, HTML3 came out and was closely followed by HTML4 — the version that most web developers are familiar with — which is presently the predominant markup language.

Over the past few years, enterprising developers have turned their attention to creating web content with HTML5, even though it isn’t the new standard for everyone — at least not yet. Modern web browsers, however, are already utilizing HTML5 functionality, and HTML5 will most likely become the norm for web development in the near future. Using and learning HTML5 now will put you ahead of the pack as the future of web development unfolds.

Concerns with HTML5 and older browsers

Many web developers are concerned that not all parts of HTML5 are compatible with all browsers. This is especially true with Internet Explorer. Where many features of HTML5 will work in browsers such as Chrome and Firefox, they will not always work in Internet Explorer. This leaves many web developers questioning how widely they should start using HTML5. It isn’t in a web developer’s best interest to create web pages that don’t work in all browsers — but the future is still a bit murky, and lots of folks are content to use old browsers.

Adobe has addressed these issues with Edge Animate. You can feel safe and secure knowing that your Edge Animate web compositions will work in all modern browsers, including the current versions of Firefox, Chrome, Safari, and Internet Explorer 9.

You don’t need to know HTML5, or even HTML, to use Edge Animate. But the more you know, the better off you’ll be if you need to use the code to help implement it for viewing. The Edge Animate software creates the code for you while you build your web animation.

When you save your Edge Animate file, the software creates several different files. One of those files has the .html filename extension. The HTML5 code is within the .html file. You can view this file with any plain text editor such as Notepad. After you're done creating your composition, you can view the animation in a web browser — either from within the software, or by double-clicking the .html file, which opens and plays your animation in your default browser.

Desktop browser compatibility

Compatibility with the Microsoft Internet Explorer web browser is an issue that web developers have to contend with when developing sites. Microsoft has been slow to update Internet Explorer to be compatible with HTML5 — and code that works perfectly fine in Chrome, Safari, and Firefox doesn’t behave well in earlier versions of Internet Explorer.

For example, if you code a border to have rounded edges, then your corners will appear rounded off in Chrome and Firefox; but view that same site in IE and suddenly your rounded edges appear square. Issues like this can ruin a website’s design.

Browsers such as Firefox, Chrome, Safari, and Opera already support many aspects of HTML5. There are no concerns with Adobe Edge Animate CC compositions working perfectly in these browsers. These browsers also have built-in automatic updates for their users. Because of that, web designers and developers can feel certain that their users are most likely using the most current version of that browser.

What to do for Internet Explorer 8 and older versions

In an ideal world, everyone would upgrade their browsers regularly. Unfortunately, not everyone can do that, for whatever reason. Even though Internet Explorer 9 has opened the door to HTML5 compatibility, which means Edge Animate works in that version of the browser, not all IE users have upgraded their browsers. It’s still not uncommon for many IE users to use versions 7 and 8 — and (to many designers’ horror and dismay) IE 6 is still in use by many people.

Adobe Edge Animate CC compositions will not work in Internet Explorer 8 and older versions, just as HTML5 doesn’t work in IE6.

However, the good news is that more and more web users are upgrading their browsers, and usage of IE6 is slowly dwindling. With that said, though, Edge Animate works in all modern portable browsers. If your main goal is to create animated applications for use on smart phones and tablets, then you’re very much in luck.

If you’re creating web animations for an audience who still uses IE8 and older browsers, that lurking obsolescence can be a concern when you’re using Adobe Edge Animate CC. Say that you spend countless hours developing the perfect web animation and then put it online. You tested it in Firefox and IE 9, and it works perfectly. Then you walk across the hall to show it to your boss — and to your horror, it doesn’t work because your boss is using IE 6. Well, in the real world, there’s a good chance many of your clients and customers are also using an earlier version of IE that isn’t compatible with Edge Animate. Fortunately, Edge Animate has you covered with at least two options: You can (a) use Google Chrome Frame support or (b) use down-level browser support — a feature that enables you to create a poster (a static image), or to use static HTML, to replace the animation — which keeps your website from appearing “broken.” Your audience sees an image that looks the way it’s supposed to look, even though it’s not animated. (Chapter 14 details down-level support.)

Google Chrome Frame support

Edge Animate has a feature that enables you to use Google Chrome Frame support for browsers that don’t support animation. As a next step to down-level browser support, you can publish Edge Animate content so that your audience can view it on IE 6, 7, or 8 using Google Chrome Frame. For the user who doesn’t already have Google Chrome Frame, you can also control the experience of installing it.

Edge Animate has down-level Stages

The down-level Stages in Edge Animate are versions of the Stage that you can use to create and publish a down-level version of your composition that will be compatible with browsers that don’t support HTML5 animation. (I go into detail on down-level Stage usage in Chapter 14.) The down-level Stages offer only minimal creation tools, but you can

Import graphics and create text elements.

Import a poster from the main composition.

Basically, the animations that you create and place online can detect the browsers your audience is using. If the code detects that someone is using a non-compatible browser for your animation, then it reverts to showing a poster image instead of the animation. This saves your website from appearing broken. Instead of seeing an animation that doesn’t work, the audience sees a poster — a still frame — that you create from the animation.

Again, you don’t have to know code for the down-level Stage support to work. Although coding for browser detection can be tricky, Edge Animate has that capability built in — and it’s an option you can choose when you’re ready to publish.

Compatibility with tablet and mobile browsers

Where Adobe Flash fails, Adobe Edge Animate CC works. It’s well known that Apple doesn’t allow Adobe Flash animation to work in its portable devices — and that includes the iPhone, iPod touch, and iPad. Steve Jobs, before his passing, stated that Flash had too many security vulnerabilities and other negative aspects for Apple to allow Flash to work with iOS.

Edge Animate, on the other hand, doesn’t suffer from those issues. Your Edge Animate compositions will work just fine on Apple products — and on Android devices — whether tablets of all types, smart phones, and other devices that use modern mobile browsers.

Creating an Edge Animate Composition

The process for creating an Edge Animate CC composition isn’t too different from creating any other type of content. When starting, you should consider what, where, and how you want your animation to appear. Will your animation be part of an existing website? Are you adding an animation to complement a book? Is your client requesting a brand new animated logo? Perhaps you want to create an advertisement to appear on the web? You can create all these projects using Edge Animate.

Here’s the basic outline for creating an Edge Animate composition:

1. Determine how you and your audience will use this animation.

2. Collect your images and other assets.

3. Write an outline.

4. Create and save commonly used elements such as buttons for re-use later.

5. Start animating.

6. Save and export your finished animation.

Before you start animating, consider whether your animation will be viewed in an e-reader, in the browser, in iBooks, or be an app for use on both iOS and Android devices.

No matter the device, if it supports HTML5 and JavaScript, your Edge Animate project will run smoothly.

Gathering your assets

After you know what you want to create and where you want it to appear, it’s time to start gathering your assets — electronically drawn images, photographs, paragraphs of text, or a combination of all three — that will make up the final animation. Edge Animate makes it easy to import or create these assets.

Creating an outlined approach to your animation

At this point you have defined the purpose of your animation and the art to make it beautiful. Now you need to create a wireframe, essentially an outline of how you want your animation to play. Sure, you can wing it and make it up as you go along, but an excellent idea is to picture your animation in your head, and then put down on paper how you imagine your animation will play from start to finish. This outline provides a base from which you can work.

Making symbols for frequently used elements

If you know your animation is going to contain many similar elements, or the same elements repeated over and over, you want to create those elements first. Elements are the different pieces that make up your animation. An element can be a box that you draw, a text box that you specify, an image that you import, and so on.

An element that you may want to reuse can be a button, or an asset that you re-use throughout the animation, or any type of navigation the audience can use.

After you create this element and have it behaving the way you want, you can then save it as a symbol. You can then export this symbol for use in other projects. That way, if this animation becomes a part of a series of animations and you want to re-use the same symbols, you’ll be ahead of the game by having some assets already saved and ready to go when you create the actual animation.

You can even save an entire animation project as a symbol. For example, if you create a slideshow animation, you can save that entire slide show as a symbol, which you can then export from Edge Animate — and then import into a different Edge Animate project. (Chapter 12has the details on creating and working with symbols.)

Animators, start your animating

When you have a purpose for your animation, all of your assets are lined up and ready to go, and you’ve saved your multi-use elements as symbols, it’s time to start animating.

To start animating, you import your assets onto the Stage. Then you use the Timeline to create keyframes. A keyframe represents an animation sequence. For example, if you animate a box moving from one side of the Stage to the other, that animation is represented in the Timeline as a keyframe. (I go into the details of working with keyframes and the Timeline in Chapter 4.) From there, you add actions to your elements for interactivity. As you create your animation, you can preview it to make sure the animation is behaving as you expect it to behave.

Saving and exporting your animation

When you finish creating your animation project, you want to save or export your composition for use by your audience or for use in another project or design tool. Edge Animate provides many options to export and save your work. Likewise, there are multitudes of options on how you can present your work both online, or in iBooks, or for use with other design tools. Chapter 15 has the details for putting your project online.