July 28, 2014 - Tareq Aljaber

Entertaining To Drive Awareness

 

Interac e-Transfer service in Canada

Interac e-Transfer service in Canada

With a little imagination, even the topic of electronic money transfers can be entertaining. When the creative minds at Zulu Alpha Kilo and Secret Location were challenged with increasing awareness of the new Interac e-Transfer service in Canada, they developed www.makecashandchequeshistory.com. The interactive website spoofs the history of money exchange while encouraging users to try the convenient services.

The agencies combined video and rich Edge Animate CC animations to create a site that is visually compelling, yet still quick and responsive for users. In addition to simplifying the HTML animation process, the software speeds up workflows by giving more creative control to designers.

Ryan Andal, technical director and vice president at Secret Location, says, “In the past, creating animations was a lengthy process that took the time of both designers and developers. Adobe Edge Animate CC helps our designers regain control over all aspects of visuals, including animations, without needing to rely upon developers.”

The campaign has received positive reviews, and the agencies are continuing to explore how additional apps and services available through Adobe Creative Cloud can benefit their workflows and help them deliver more creative client projects.  http://adobe.ly/1pgHXiv

1:47 AM Comments (0) Permalink
June 18, 2014 - Tareq Aljaber

Unleash Web Interactivity With The 2014 Release Of Edge Animate CC

The 2014 release of Edge Animate CC

Edge Animate lets web designers create interactive HTML animations for web, digital publishing, rich media advertising and more, reaching both desktop and mobile with ease.

 

The 2014 release of Adobe Edge Animate is finally here! This release offers a rich set of features such as support for HTML5 video, importing sprite sheets from Flash Professional and Photoshop, linking support for DPS articles, a designer friendly action editor, and the ability to copy and paste SVG artwork from Illustrator, and more.

Create engaging and inspiring content with the new HTML5 video support in Edge Animate. You can now import, control, and add interactivity to your videos without any coding experience. With the newly designed actions editor, you’ll be able to add interactivity using the new video media actions window.

New video media actions window.

New video media actions window.

Who says books, articles and magazine can only be static!? With the new DPS article linking feature, you can link to your InDesign or DPS Folio articles from Animate without writing a single line of code, to build more interactive title pages, table of contents, and advanced navigation to target articles.

Vector, vector, vector!

Bring your vector graphics from Illustrator and paste them into your compositions! No magic or special skills are required. Simply copy and paste shapes from Illustrator into Edge Animate compositions.

 

SVG Import

Copy and paste shapes from Illustrator into Edge Animate compositions

 

Did I hear support for importing sprite sheets? Yes, you heard it right! You can now import your sprite sheets from Flash Professional or Photoshop and import them with a few clicks, and add advanced, multi-frame animations to your compositions.

Sprite sheets support

Import Sprite sheets from Flash Professional or Photoshop with a few clicks

The team has been hard at work to deliver features that will help you to deliver interactive HTML mobile and web content reaching both desktop and mobile with ease. Ready to boost your creativity? Download Edge Animate now and unleash your creativity.

 

 

12:12 PM Permalink
May 7, 2014 - Tareq Aljaber

Create Visuals that Communicate Ideas Quickly

The ability to create visuals that communicate ideas quickly, and get from strategy and ideation to the approval phase is a very long and expensive road. Jim McArthur, Senior Vice President of Digitaria, shares how his agency utilizes the power of animation to easily create quick interactive prototyping which helps cut costs and improve your creative workflow.

 

2:31 PM Permalink
April 14, 2014 - Rich Lee

Coachella and Edge Animate CC

Vibrant energy captured for any device

Coachella_EdgeAnimate

As one of the hottest festivals on the national music-and-arts circuit, the Coachella Valley Music and Arts Festival attracts 90,000 fans on each of its two weekends. No doubt many of them got information on the event lineup from the festival’s official website, which features interactive animations by Heavenspot that reflect the round-the-clock energy of Coachella.

The digital agency spent two weeks designing and developing animated headers using Adobe Edge Animate CC in Adobe Creative Cloud. To capture the energy and creativity of Coachella on any device, Heavenspot used Adobe Edge Inspect CC for rapid testing on multiple devices, which cut development time by 20%.

“Most people still aren’t used to experiencing this depth of animation, especially in a mobile-friendly format,” says Tim Jaramillo, a lead developer at Heavenspot. “Adobe Edge Animate CC makes it easy for us to develop animations with impact that strengthen our client relationships and enable our clients to more fully engage and inspire their audiences.”

Visit the Coachella website to view the animations, which change depending on the time of day.

Read the full story here (PDF).

9:43 AM Permalink
February 26, 2014 - Lewis Haidt

Adobe SXSW 2014 Creative Camp – Edge Animate in the House

Adobe is traveling to SXSW for our Annual Creative Camp, Friday March 7th at the Radisson Town Lake, Riverside Ballroom and Edge Animate is in the house. Our Product Manager, Sarah Hunt shares how to create dynamic, interactive infographics. All of our sessions dive into topics shaping the modern web. Plus, you’ll need your fuel to make it through SXSW and we’ve got you covered all day with lunch, and snacks galore – flavored popcorn, mini-burgers and petit BLT’s plus a happy hour during our final session of the day.

Here’s the info on Sarah’s session:

The Onions of Interactive Infographic Design 3:30 – 4:30
 
Interactive infographics make it possible for you to truly capture your audience and engage with them in a manner that simply is not possible when merely citing dry facts or statistics. This session will cover the value of creating animated, interactive infographics with HTML your readers care about using Adobe Edge Animate with Product Manager, Sarah Hunt.
 

And come for our full session line up:
 
What Do We Build Next? 11:00 – 12:00
 
Get behind the scenes at Adobe and learn how our product development teams go from just an idea to a functional prototype ready for testing with real users in a matter of weeks for their newest web authoring tools. Devin Fernandez, Principal Product Manager, and Winsha Chen, Senior Computer Scientist will show examples of real projects under development right now.
 
5 Things Developers Need to Know About Design 12:30 – 1:30
 
In this session you will learn with Adobe Evangelist Paul Trani the techniques designers use as well as the things they wish every developer knew about design. Understanding these 5 things will not only make you better at design, it will help you work better with designers. We’ll also be serving lunch during this session so make sure you come early to grab a sandwich and get a seat.
 
Rich Web Experiences & the Future of the Web 2:00 – 3:00
 
We’re reaching a point where ideas we could only dream of in the past from interactive film to global multiplayer 3D gaming can become a reality, all living inside of your browser. We’ll explore inspiring examples of how the web can be used to create rich media experiences and what’s possible in the future with Adobe Creative Technologist CJ Gammon.
 

The Ultimate Developer’s Tool: Theory & Discussion 5:00 – 6:00
 
What do iOS, Android, and the Internet all have in common? They were all built using source code editors driven. But what qualities are needed in a modern code editor? Enjoy some cold beer and snacks while you engaging in a discussion with Senior Product Manager, Jonathan Dunlap, on how we can use our present knowledge to build the ultimate source code editor.

10:35 AM Permalink
February 13, 2014 - Rich Lee

A Re-imagined Annual Report and Edge Animate CC

cups

When the not-for-profit Calgary Urban Projects Society (CUPS) wanted a new way to promote its initiatives and attract donations, its marketing agency, ZGM, suggested creating an animated digital annual report using Adobe Edge Animate CC, part of Adobe Creative Cloud.

“We used many tools in Adobe Creative Cloud for teams, but Adobe Edge Animate CC really stood out in helping us achieve our vision,” says Peter Bishop, creative director at ZGM. “Adobe Edge Animate CC breaks new ground in HTML animation and lets designers make a simple transition from traditional motion graphics to web animation without heavy coding or a steep learning curve.”

Read the full story here (PDF).

Cheers,
Rich Lee
Sr. Product Marketing Manager

10:17 AM Permalink
January 21, 2014 - sahunt

Did you hear that? A new version of Edge Animate CC is here!

Hello Edge Animate fans!

After months of intensive development from the Animate team, we’re proud to release a major update to Edge Animate CC (3.0) available right now with your Creative Cloud membership. This release comes jam-packed with brand new features, giving you the tools you need to keep pushing the boundaries of animating with HTML.

What will you find in this release?

Audio Support (!!)

Sound can be an essential component of any interactive multimedia experience. Whether it’s adding subtle sound effects or creating animated stories, audio will help you bring your narrative to life to enhance the experience of your viewer. We’re quite excited to bring you audio support using all the native HTML5 audio capabilities. This will let you import audio into your projects, synchronize sound with your timeline and easily control audio events with new snippets and playback controls. Since we’re using the browser as the player, anything you can do with sound in the browser you can do inside of Animate. Cool right?

We’ve put a lot of love into this feature and put together some documentation to help get you started. Check out Adding Audio to Your Animations to learn more.

Responsive Scaling

Creating motion for multiple screen sizes can be difficult. This is why we’re brought you responsive scaling to help your Animate projects scale up and down to fit different viewports. With this feature enabled, your projects will resize to fit whatever container you place it in and scale up and down as the container or browser resizes — keeping the aspect ratio of all your animations in place. To try it out, just check “Responsive Scaling” for the Stage properties, preview in the browser and watch the magic happen.

Script Loading

The web is beautiful in that there’s countless JavaScript libraries available which help you create anything you can imagine without having to write it yourself from scratch. If there’s anything we’ve learned from how you guys use Animate, it’s that you love bringing in JavaScript libraries to extend your compositions. Since Animate uses the open web to create your projects, it only made sense for us to easily allow you to bring in all your favourite libraries like Greensock, Edge Commons, jQuery UI and many more. In the library panel you’ll find a new section called “Scripts” — click the plus button to bring in that favourite JS library from your hard drive, or point to an online source. 

But wait, there’s more! Also included in this release are enhancements to OAM publishing, usability improvements for motion paths and object alignment, and other goodies to make your editing experience even better. To see an overview of all the new features, check out What’s New in 3.0.

Can’t wait to get your hands on it? Click on the “Install” button beside Edge Animate CC in your Creative Cloud desktop app to install, or visit creative.adobe.com and select “Download”.

Thanks to you, our loyal fans, for your ongoing feedback and support which help us drive what happens with each release. You rock. Happy animating!

Sarah Hunt
Product Manager, Adobe Web P&A

10:39 AM Permalink
November 4, 2013 - sahunt

Want to relink AN project files on a CDN? It’s easier than you might think.

It’s not uncommon to find yourself wanting to deploy an Animate project online and have control over where your scripts and images are linked from. There’s several situations where you might want to do this:

  • Loading multiple Animate projects with shared resources and you want to avoid duplicate loading
  • Managing multiple Animate projects across your server and you want to point to a single JS folder to save on load time
  • Content needs to be dynamically packaged and loaded from a single source due to CMS or other server-side requirements

Whatever environment you’re working in, you may want the option to control the source of Animate dependent files. This post will describe how to point to your own CDN source and the files to edit to do so. The below writing is fairly technical and assumes you have some fundamental knowledge about Edge Animate and JavaScript.

Overview of Required Files

An Animate composition has the following file dependancies for the composition to run:

  • edge.2.0.1.min.js – This is the Animate runtime and remains static. This file is hosted on our Akamai-powered CDN so you essentially get this for free. By default it is not included in a published project as it loads from the CDN.
  • jquery-1.7.1.min.js – We use jQuery to power bits and pieces of the Animate runtime. This file is hosted on Google via ajax.googleapis.com. By default it is not included in a published project as it loads from the CDN.
  • xxx_preload.js – This is the Animate preloader and is used to load all dependent project files. This file changes based on the content of your project.
  • xxx_edge.js – This file contains the DOM information for your animation. This file changes based on the content of your project.
  • xxx_edgeActions.js – This file contains all the actions and user-created code within your Animate file. This file changes based on the content of your project.

Changing the Source

Due to the way Animate project files are dependent on one another, we can’t simply change “mysite.com/myfile/preload.js” to “mysite.com/mydifferentfile/preload.js” in the HTML and call it a day since the links go deeper than the initial load of preload.js. The two files we need to edit are preload.js (to redirect the scripts) and edge.js (to redirect the images).

Note: This method is NOT roundtrippable. Animate will overwrite these changes when resaving a .an file. Only use this step when you’re ready to deploy your project online. Resaving the project will require you to re-edit the files.

Step 1 – preload.js

Editing preload.js will repoint the dependent Javascript files. This is necessary to ensure all dependent files get loaded via the preloader.

Open xx_preload.js in a text editor. Towards the bottom you’ll see the following lines:

preloadnocdn

We’ll be adding a new variable to point to the location we want to load these files from:

preloadwcdn

In the above example I’ve done two things:

  • Line 46 – Created a new variable called CDN_URL. This points to the URL I want my JS files to link from. Change this to your own domain; be sure to add the backslash at the end of the path!
  • Lines 50-52 – Added the CDN_URL var to the file path. This allows you to edit the URL at your leisure and have the new path apply recursively to the linked JS files. If you’ve just dumped your local files onto your server be sure to be aware of any changes you’ve made to subfolder directories.

Step 2 – edge.js

Editing edge.js will repoint the images folder. This is necessary to ensure all required images get loaded with the composition.

Open xx_edge.js in a text editor. At the top you’ll see the following lines:

edgejsnocdn

We’ll be adding a new variable to point to the location we want the images folder to load from:

edgejswithcdn

In the above example I’ve done two things:

  • Line 7 – Created a new variable called CDN_URL. This points to the URL you want the image folder to source from.
  • Line 8 - Added the CDN_URL var to the image path. This will link the “images” folder from “http://www.mysite.com/newsource/images”.

The last step is changing the URL for xx_preload.js in your HTML file (if you choose to do so).

preloadlink

In the above step, I’ve changed the source of xx_preload.js to point to a new directory.

(Optional) Step 3 – Changing Fonts

If you’ve linked to a local font source via CSS using the Custom Font feature, you may also want to change the reference of your fonts folder to reflect the new source.

fontsbefore

In the above untouched example, this is what a local font reference looks like. In this example, my stylesheet points to “fonts/bebasneue.css”.

fontsafter

In the above step I’ve included the CDN_URL variable to in the href, so “bebasneue.css” is now sourced from “http://www.mysite.com/new_source/fonts/bebasneue.css”.

Save, close, and you’re done!

In the above examples I used unpublished versions for readability. This method can be applied to minimized published Animate output, however you may want to run it through a JS beautifier for readability. You can also use the above technique to redirect edge.min.js and jQuery if you choose to host these on your own servers. If at first you don’t succeed, double-check your file paths to make sure they align.

In the future we’ll be looking for ways to make this easier for Animate users, but if you’re in a pinch this method will get you started. Good luck!

3:10 PM Permalink
October 24, 2013 - Rich Lee

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 - Chris Converse

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