Design Story – Working with Adobe Edge Animate

mediaman Art Director, Nesta Li, gives you a brief introduction to the animation software Adobe Edge Animate.

In the process of designing a website, designers work on a set of static pages while imagining and drafting many kinds of interactive animations. However, a common challenge for the designer is that he can only provide the front-end developer with static pages, but not interactive animations. This often results in an increase of communication and production costs, as well as in dissatisfaction with the final realization of the project. In consequence, what we are looking for is a software that accurately transmits the expected animation effects.

So let’s have a look at the latest mainstream animation software and compare their advantages and disadvantages:

Adobe Flash

Adobe Flash is an American multimedia platform (acquired by Adobe in 2005) used for creating two-dimensional animation, mobile applications, vector graphics etc. It makes videos and games available to everyone and is rather easy to use, which quickly made it one of the most popular animation softwares.

Advantages:

• early involvement in the field of animation
• overall implementation of the animation features
• provision of many interactive effects
• many designers can use it

Disadvantages:

• the output, including interaction effects, must be swf format and requires the support of a flash player
• since flash is not well-supported in the current market, the output file cannot immediately be used for the respective project

 

Adobe Photoshop

Adobe Photoshop is a photo-editing and designing software, mainly used for correcting image imperfections and for adding special effects. It was historically bundled with ImageReady, a program focusing on Internet gif animation, but through constant updates Photoshop now integrates almost all ImageReady functions. The latest version, CC 2015, was released in June 2015.

Advantages:

• the animation function is embedded into Photoshop
• convenient for simple animation as well as frame by frame animation

Disadvantages:

• lack of slow motion curve
• the simulation of slow motion needs to be adjusted frame by frame
• the output format doesn’t provide interactive features

 

Adobe After Effects

Adobe After Effects, called “AE”, is a graphic video processing and digital visual effects software released by Adobe for organizations working in design and video effects, for example television, animation production companies, post-production studios, and personal multimedia studios. It allows users to edit, animate and compose in 2D and 3D space with many different built-in tools and effects. It definitely adds a refreshing effect to your work.

Advantages:

• very powerful animation features
• support for codes embedded
• professional level animation tool

Disadvantages:

• requires much effort to learn and understand program
• the implementation of the effects cannot immediately be used by the developer

 

Adobe Edge Animate

Adobe Edge was introduced as Adobe’s multimedia authoring tool. It allows designers to create and animate websites and even simple games by using HTML5, CSS or JavaScript. The tool mainly focuses on the animation engine, but Adobe promised to add more HTML5 features, such as Canvas, HTML5 audio / video labels. It supports Android, iOS, webOS, BlackBerry PlayBook, Firefox, Chrome, Safari, IE9 and other platforms. The software is currently not actively being developed, but got a lot of promising features.

Advantages:

• easy to operate
• the output can immediately be used by the developer
• supports the display of a flexible structure
• supports embedded codes
• provides obvious advantages for APPs

Disadvantages:

• some output codes are not suitable and cannot be used

Adobe Edge aims at facilitating the development of website animations and even simple games for professional designers. Currently, the tool solely focuses on interactive compositions. However, Adobe promised to add more HTML5 features such as Canvas, HTML5 audio / video tags as well as supports for Android, iOS, webOS, blackberry PlayBook, Firefox, Chrome, Safari, IE9 and other platforms.

Weighing the pros and cons of the software against each other, I came to the conclusion that Adobe Edge is the most convenient software. First, it is easy to operate. Second, it allows an efficient and smooth workflow between designer and developer since interactive animations can already be developed at an early stage.

 

Let’s Have a Closer Look:

Imagine the following case, where we want to develop a new 320x480px effect for the main screen displayed on an iPhone6. However, the resolution of the iPhone6 is 375x615px which means that the effect will be too small for it. It is therefore necessary to determine different screen sizes for different devices, especially if the effect has to be zoomed in.

Let me now show you how to use Adobe Edge Animate in order to produce content on the example of the mobile version of our company website.

Step 1 –Develop the navigation (the navigation structure should be adaptive in its width and have a height of 80px, logo left floating, icon right floating). The distance of the logo icon from the screen’s edges should be about 5%.

Step 2 – Insert the title.

Step 3 – Insert the content description.

Step 4 – Fill the navigation field with further content. Merge the text and icons within the navigation into one element.

Step 5 – Add a proper interaction to the navigation button.

Step 6 –Determine the interactive animation of the navigation.

Step 7 –Save and export. The final version can be tested in the simulator immediately.

Done!

I hope this article gives you a decent first insight into how to work with Adobe Edge Animate. Of course, the software has far more functions than that. If combined with the use of JS code, it can actually provide a whole lot of interactive animations. So have fun testing it yourself!

 

 

 

About The Author of This Article:

Nesta, Art Director at mediaman, knows everything about Internet standardization process integration, the newest design software trends and the latest FIFA soccer results.