Adobe Edge Animate CC For Dummies (2013)

Part VI

The Part of Tens

Enjoy an additional Adobe Edge Animate Part of Tens chapter online at www.dummies.com.

In this part . . .

Discover ten great ways to use Adobe Edge Animate successfully.

Explore the tools that can make any Adobe Edge Animate experience heavenly.

Enjoy an additional Adobe Edge Animate Part of Tens chapter online at www.dummies.com.

Chapter 22

Ten Users of Edge Animate

In This Chapter

Students learning

Teachers teaching

Hobbyists playing

Professionals working

Adobe Edge Animate CC has many more uses than just ten, but here I list the top ten that immediately rise to the top of my mind. You may find some of them elementary, whereas others may evoke fresh ideas for things you can do with Edge Animate, from creating basic slideshows, to creating advertisements, to creating an e-learning tool. You may even come up with a way to animate a game with Adobe Edge Animate CC.

Animating with Edge Animate

Yes, you can animate with Edge Animate. Shocking, I know. But if I didn’t list animating as a use for Edge Animate, I’d be missing a big one. The animations that you create can be as simple as a sun rising over a hill or as complex as all the stars and planets moving through the universe. The only limitation is your own imagination as to what you want to create and put into motion.

Designing with Edge Animate

You can also design with Edge Animate. Although Edge Animate is not necessarily a design tool, designers can work with Edge Animate rather easily, so designing with Edge Animate is a legitimate use. You may not draw overly complex illustrations with Edge Animate, at least not with 1.0, but you can place and move elements about the Stage in a simple way to create works of art. And that, to me, is designing.

Developing with Edge Animate

Good developers who know their code wouldn’t let this missing feature stop them from adding sound to their Animate project. Instead, developers who know their stuff can dive in to the JavaScript and add the code necessary to incorporate sound into their animation.

The persistent code window, as I discuss in Chapter 2, is there for developers to take full advantage of when they want to edit or add to the code. Edge Animate’s code window allows you to view all the available code or just the relevant parts for a particular element. Either way, Adobe made it easy for developers to dive in and work their magic.

Learning from Edge Animate Projects

E-learning specialists and teachers may delight in knowing that it’s possible to create animated tutorials with Edge Animate. In Chapter 18, I explain how to build an example of what an interactive and animated tutorial can look like. Everyone, from kids to adults, can benefit from an easy-to-use and intuitive touch-screen interface on their tablets and phones.

You can create animated tutorials that teach everything from how to use a remote control for your television to how to use a tablet. If someone needs to become skilled at something, there’s a good chance you can make an animated and interactive tutorial to instruct them.

Working with Edge Animate as a Professional

As a web professional, you’ll find Edge Animate useful for an endless list of items. If you have a site that needs a little energy injected, Edge Animate is a great tool for you to:

Build animated logos.

Build slideshows (refer to Chapter 16).

Build one-page sites such as for a restaurant or an interactive brochure (refer to Chapter 20).

Animate a children’s book (refer to Chapter 19).

If you decide to animate your company’s logo, try to keep it simple. Overdoing an animation and making it more complex than necessary can do more damage than good. You don’t want to confuse your visitor by a logo dancing and bouncing across the screen, if there’s no apparent purpose. On the other hand, giving your logo a nice little spin can gain the attention that it deserves.

Animating as a Hobby

Animating as a hobby is my favorite use for Edge Animate. While I was learning to use the tool, I made several animations for my other favorite hobby, playing video games. I created a site called GoozerNation, where a team of contributors and I discuss all things video games. After Edge Animate came out, this site started boasting Edge Animate projects in addition to just articles. Figure 22-1 shows a still shot of an animation I created using Commander Shepard from the popular video game franchise Mass Effect. When “Mass Effect 3” released, an Internet meme characterized a phrase that the Commander repeats during the course of the game (that is, he endorses a particular store and repeats ad nauseum that store is his favorite). My twist on the meme was that Commander Shepard’s favorite site on the Internet was my own. The animation was cheesy and badly done. It mostly consisted of the Commander’s mouth opening and closing, which was supposed to represent him speaking the words that appeared to his right. I even added a Play Again link so that people could watch it over and over.

You can view the animation here: http://goo.gl/vuNsV (I used Google's URL shortener to save you a bunch of typing)

Figure 22-1: Don’t hold back from making cheesy animations as well as good ones.

Selling with Edge Animate

Creating advertisements with Edge Animate is another excellent use for the tool. Unlike Flash, Edge Animate uses HTML5 and JavaScript, so your audience can view your ad on Apple devices. That way, you know your ad can appear on iPads and iPhones.

Popular advertisement sizes include

Leaderboard: 728 x 90

Medium rectangle: 300 x 250

Wide skyscraper: 160 x 600

Full banner: 468 x 60

Large rectangle: 336 x 280

Rectangle: 180 x 150

Button: 120 x 60

Square button: 125 x 125

When making your advertisement in Edge Animate, try designing it with a responsive web design. That way, no matter the screen size, your ad looks good.

Specializing Your Content

I read an article the other day about how using a tablet is a great way to create an economical kiosk for customer use. For example, say that you work in a car dealership; what if you provided a tablet for customers to preview cars, features, and options while they peruse the showroom floor. You can create an Edge Animate project that allows customers to do exactly that.

Here’s another example. Restaurant employees can use an Edge Animate composition on a tablet to show customers images of the day’s specials. Instead of using a paper menu, the tablet can display vibrant images of the dishes, which the customer can then sort though.

Gaming with Edge Animate

You might consider making games with Edge Animate a stretch. After all, a key component to most games is sound, which Edge Animate lacks in the initial version. However, I don’t think making games with Edge Animate is entirely impossible. It just takes a ton of extra coding. So, making games with Edge Animate is most likely geared toward hardcore developers and not necessarily designers or hobbyists.

With that said, I made a sort-of game using Adobe Edge Animate. The game, if you want to call it that, involves the audience clicking a basketball to make a basket (see Figure 22-2). When the audience clicks the ball, the ball launches up toward the basket with flames shooting out from it. The ball then swishes through the hoop and lands with a bounce. The audience is then invited to shoot another basket. Again, as with the Commander Shepard animation, it's completely cheesy, but in a fun kind of way. To play the game yourself, you can find it online athttp://goo.gl/9B8xg.

Figure 22-2: You can make games with Edge Animate, if you want to.

Using the Responsive Web Design Tools

A great use of Edge Animate is making responsive web designs. I go into detail on how to create a responsive web design in Chapter 21. This feature allows you to create animations that respond to different browser and screen sizes. I can envision a future in which many web-design jobs will make responsive web design a mandatory requirement; just think of all the different screen sizes on the market today. You have your 4-inch to 6-inch phones, 7-inch and 10-inch tablets, and any number of dimensions for laptops and desktop monitors.

Learning how to create a responsive web design may very well become essential for all web enthusiasts. If this is something that interests you, check out Adobe Edge Reflow, which is in development as of this writing but should be available sometime in 2013