Archive for October, 2013

October 24, 2013

Rush Movie Companion Site and Edge Animate CC

Rush of a Lifetime

Websites that help build buzz for Hollywood movies are nothing new. But what is new is how they are created. For Universal Pictures’ new film Rush, the studio wanted a site that would build excitement for the movie. Concept Arts created a site that highlights famous daredevils and rivals in history using a parallax scrolling timeline created with Edge Animate.

“Edge Animate enabled us to cut our previous parallax development cycle in half,” says Aaron Nicholson, developer on the project. “Without it, we would not have been able to address this project’s business requirements while handling its complexity.”

Edge Animate enabled the team to cut its previous parallax development cycle in half. Developers were up to speed quickly, and even with the addition of new features were able to complete the site in less than four weeks. The parallax technique enhances rather than overwhelms the experience and social media integration makes it easy for users to share their own sports stories.

Read the full story here (PDF).

Cheers,
Rich Lee
Sr. Product Marketing Manager

7:24 AM Permalink
October 8, 2013

Motion graphics in a mobile world

The spectacular popularity of mobile devices means interactive designers need to extend their skills beyond the desktop to embrace the universe of HTML5. Among mobile devices, including tablet computers, smartphones, and interactive books and magazines, HTML5 is the common denominator.

With HTML5 comes the need to find new ways to integrate interactive media. Specifically built to meet web standards, Adobe Edge Animate provides a way to create interactive and animated content using HTML, CSS, and JavaScript with confidence that it will look and behave how you want it to no matter what device you’re using.

Now I know there are a lot of people who don’t think HTML animation is very robust. They imagine type and div boxes animating and fading in and out, which I agree is less than optimal. But when you start combining that functionality with CSS3 and some of the styling and imagery, it starts to get compelling— you’re only limited by the browsers. Android and iOS devices have latest CSS3 capabilities that support features such as blurring, so it’s possible to offer a more sophisticated animation experience on these devices.

Animated illustrations in HTML5

Recently I created a course for the annual conference of the Association of Medical Illustrators that covered how to simulate illustrations in HTML for use in iBooks and digital magazines or for viewing on websites or mobile devices. While the subject matter experts were all medical illustrators, the session itself focused on making content today—easily digestible to readers—something that spans across industries. How do you capture your consumers’ attention with animation, and across various devices?

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

Interactive project for Association of Medical Illustrators deigned and created by Chris Converse.

For the class, I created an animated interactive graphic that compares a healthy eye to an eye with glaucoma. The illustration shows how an eye with glaucoma can’t properly drain fluid, and includes a vision simulator that displays the effect of this condition on a person’s vision. The animated droplets are actually a series of nested animated symbols that create the constant, flowing effect. Edge Animate is able to replace a time and labor intensive coding process with one that is both easy and affordable.

One of the keys to easily creating interactive components in Edge Animate is how the symbols talk to each other via targeting. You can associate an interactive element, such as a click, with a symbol. In the glaucoma example, the user clicks the words Affected by Glaucoma, which then tells another symbol (in this case, the sunset photograph) to change its state. It is this ability to combine the functions and the order of symbols—each with their own timelines—that enables us to create these engaging animations. In the relatively short two hour class with 20 participants, it was exciting to see how quickly attendees were able to create their own animation projects using Edge Animate.

Animation is fun again

A few years ago, the web was full of animations and cool interactions, but those faded away as more attention turned to offering content that behaved consistently across devices and platforms. But people are starting to get excited again about adding it back into projects, and with Edge Animate we can combine styling and imagery with cascading style sheets and simple animation to once again create content that is exciting, engaging, and fun.

Learn even more about Edge Animate with Chris Converse on lynda.com. Get a free 7-day trial with this link: lynda.com/trial/chrisconverse.


Chris Converse is a partner at Codify Design Studio, which has a unique focus on both design and development. Chris develops across such languages as PHP, ActionScript, HTML, CSS, and JavaScript, making his design execution optimal across various media. Chris is a featured speaker at various industry conferences, including the How Design and Interactive Conferences, AIGA, Adobe MAX, and EMERGE. Chris has also written, designed, and hosted video training titles on lynda.com, Udemy.com, Amazon.com, HOW Design University, and Adobe KnowHow. Chris graduated from Rochester Institute of Technology with a BFA in graphic design.

12:41 PM Permalink