Edge Animate

Farewell to the Edge…

Adobe Edge Preview

Adobe announced today that it was ending their Edge Tools and Services experiment. I use the term experiment, as these products were built as part of a transition period for Adobe, shifting away from the Flash Platform toward a web platform stack. I was fortunate enough to be a part of the early development of many of these tools (as an Adobe Community Professional), but their usefulness as stand-alone elements was always troublesome.

For example, there was never a simple workflow to take your Edge Reflow work into a larger web project. Nor was it easy to fully interact with Edge Inspect from your system and devices.

But these experiments did lead to some tangible enhancements in Adobe’s main product lines. The responsive media query tool in Dreamweaver CC is a direct result of the groundwork laid by Reflow. The device preview features in PhotoShop and Illustrator are based in part on Edge Inspect.

But the mother of the Edge Tools and Services was Edge Animate (for those who remember, it was just Edge at first). EA was a interesting tool, focusing on animating the DOM rather than just painting to the HTML canvas. The timeline explored new ideas for animation control. Part of its appeal was that it was not Flash, which carried a dreaded (and partially unwarranted) stigma for many. But like all technologies, the web and its tools evolve. Although you could create some incredibly rich and interactive animations, EA never seemed to fit in. That Flash Professional app kept evolving as well, supporting more formats as publishing options (Canvas, WebGL, OAM). Take a look at last year’s Adobe MAX conference, and you can see that Flash’s animation roots were still strong and growing (judging by the number of sessions).

I have given several web animation talks, and could never quite explain how both tools fit under the Adobe umbrella. With today’s announcement, I will no longer be faced with that issue. Edge Animate’s development has been ended. It is still available as part of your CC subscription (heck, Fireworks is still there!), so you can continue to use it on your projects. However, as the web evolves with new browsers, standards, and libraries, EA will not be updated.

In its place, we can turn to Animate, the renamed Flash Professional. Like a phoenix rising from the ashes, Flash has really returned to its roots as a first class animation tool and is now reborn.

Now, designers can use a tool that they are all probably comfortable with, without worrying about backlash from managers or clients who didn’t understand that the tool was more than just a SWF creator.

I am looking forward to exploring Flash’s Animate’s new future as part of my design toolkit. To all those at Adobe who worked on these products, thanks for the efforts and experiments.

 

Making Things Move!

ocmma-logo

On Tuesday, April 21st, I will be leading a hands on session on animating with CSS for the Orange County Multimedia Association. Although our phones and tablets may not be able to run Adobe Flash-based animations, the mobile web is far from static! This presentation is going to explore the use of CSS-based animations as a way to bring motion back into your web design.

We are going to explore using CSS to bring your web-based projects to life. I am also going to demonstrate some additional solutions that you can explore to help bring the web to life!

Details here: http://www.ocmma.org/

Edge Animate & PhoneGap Build: part 2

In a previous post I wrote on how to convert the audio playback that Edge Animate uses into some that PhoneGap is able to use.

It that post I had this function:

function getPhoneGapPath() {
   var path = window.location.pathname;
   path = path.substr( path, path.length - 10 );
   return 'file://' + path;
};

There a first a slight error that I introduced. When finding the path name, I stripped out 10 characters. This was based on the test case being based on index.html. So if you happen to bring this function into another page with a different file name it would break. Rookie mistake. Actually more like too much prototyping and not enough ‘real’ coding…

Also we actually don’t need the entire path, so based on the platform we can locate our ‘root’ directory and go from there. Here is a revised version of the function:

function getPhoneGapPath() {
  var devicePlatform = device.platform;
  if (devicePlatform === "iOS") {
    path = "";
  } else if (devicePlatform === "Android" || devicePlatform === 'android') {
    path = "/android_asset/www/";
  }
return path;
};

Now two things to note here. 1) I am ignoring other platforms, so if you need to support one of the other platforms that PhoneGap does support, add in the proper if clause. 2) Every time this function is called, I query the device.platform. Now using your phone is actually a Transformer, this value is not going to change. I would recommend making this query once, say upon deviceReady() and storing the value in a variable and referencing it within this function. Also note that you will need to make sure you also include the device plugin in your PhoneGap app as well.

 

Edge Animate & PhoneGap Build

On the PhoneGap Build forum, someone was inquiring about how to have an Edge Animate animation play audio when used within a PhoneGap application. For those who are not familiar with Edge Animate, it is an animation design tool from Adobe that uses web standards for the animations. Their most recent release added the ability play audio with the animation.

Since I am familiar with both tools, I thought I would create a simple demonstration of how to have an Edge Animate composition working in PhoneGap.

Although HTML5 does have an <audio> element, PhoneGap’s web view will not enable the audio to function. Instead we will need to rely on the Media API to do the actual audio playback.

EdgeAnimation

I first created a simple animation. A cloud floating across the screen, and when the Starling bird is tapped, it will play a tweet sound effect, and fly off screen. Once I have my animation completed, the next step is to publish it for the web.

We can now make some various edits to the index.html file and the index_edgeActions.js file.

Let’s update the index.html file first.

Within the <head> portion of the file, include a meta viewport element. This will ensure that the webview will be properly sized.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Next, we need to include the reference to the PhoneGap library. Add the following at the end of the <head> section.

<script src="phonegap.js"></script>

Go ahead and save this file.

Now, we need to make some changes to the index_edgeActions.js file. Depending on how complex your animation is this file might be quite complex, but I kept this animation very simple so you can understand what you have to modify.

We first need to comment out the audio playback calls that Edge Animate uses.  Comment out this line of JavaScript:

sym.$("tweet")[0].play();

Now add this JavaScript:

playPGAudio(getPhoneGapPath() + 'audio/tweet.mp3');

For your animation will need to locate all the instances where Edge Animate plays audio and make the change from calling it’s playAudio function to our PhoneGap friendly audio function. This sample animation only has one audio event.

This new function will use the Media API plugin to play the audio instead. At the end of the file, we need to add two functions. The first function is the playPGAudio. Since the Edge Animate library already uses playAudio, we need to have our function use a different name.

This function will take the url of our media file, then trigger the play method.

// Play audio
//
function playPGAudio(url) {
 // Play the audio file at url
 console.log('playPGAudio');
 var my_media = new Media(url,
   // success callback
   function () {
     console.log("playAudio():Audio Success");
   },
   // error callback
   function (err) {
     console.log("playAudio():Audio Error: " + err);
   }
 );
 // Play audio
 my_media.play();
}

The other function we need to include a helper function that will assist in locating the audio file’s full file path.

function getPhoneGapPath() {
var path = window.location.pathname;
 path = path.substr( path, path.length - 10 );
 return 'file://' + path;
};

Save this file.

The final piece of the puzzle is to ensure that our config.xml has to include the Media plugin and the File plugin references, as well as enabling any device permissions that might be needed. I naturally used ConfiGAP to create my config.xml file. I opted to skip defining app icons and splashscreens.

The entire project is then uploaded to PhoneGap Build and a native app generated. Once installed on my devices, I have a bird animation flying, tweeting away.

This sample project is available from my GitHub repo.

UPDATE:

I posted an update on this here.

 

Adobe CreateNow Camp Orange Country!

Had a wonderful time presenting at Adobe CreateNow Camp Orange Country. They certainly know how to run an event!

It was a pleasure talking with so many of the attendees about the various Edge Tools. As promised here is the presentation that I gave:

http://aj-software.com/presentations/edgetools/#/

If you have any questions on any the tools and services, please ping me. Also if you want to know more about the mobile schedule site I wrote, ask way…

Here are the urls that I used as well:

Edge Animate

http://pmkwilliams.com/
http://www.projectluna.com/

Edge Reflow

http://adventurecodemo.com/

TypeKit

http://welcometotakeout.com/
http://lostworldsfairs.com/eldorado/
http://lostworldsfairs.com/moon/
http://www.newyorker.com/

Adobe CreateNow Camp – Orange County

Adobe CreateNow Camp | June 1, 2013, 8:30 AM to 4:00 PM, Anaheim

Come hear the latest about Creative Cloud and new features in some of your favorite, or soon-to-be favorite, software applications!
They’ve pulled out all the stops to gather a great group of speakers for you!

They will have a morning keynote from Colin Smith of photoshopcafe.com, and then an afternoon of two concurrent sessions packed with information. Detailed schedule on Eventbrite! I will be presenting on the Edge Tools and Services. Come learn about Edge Animate, Edge Reflow, Edge Inspect, and more!

Lunch is included, parking is free, raffle prizes too! Including one 12-month subscription to Adobe Creative Cloud!

You won’t want to miss this special Orange County Adobe Community Meet-up!

Adobe Edge Animate 1.5 released

animate-logoThere has been an update to Edge Animate! This release adds some new CSS capabilities and enhanced text support and improved gradient support. But best of all, it’s still available for free through any subscription tier of Creative Cloud.

Here is a recap of all the new features and capabilities to Edge Animate 1.5:

Edge Web Fonts

You can now browse the Edge Web Fonts library within Edge Animate and apply collection fonts to your compositions. Fonts can be browsed by style and added to the font library at the document level.

CSS Filter Support

The cutting edge of CSS capabilities is making an appearance in the Edge Animate. CSS filter support for:

  • Blur
  • Greyscale
  • Sepia
  • Drop-shadow
  • Brightness
  • Contract
  • Hue-rotate
  • Invert and,
  • Saturate

Are available in the properties panel as animatable effects. Please note: CSS filters are a cutting edge spec and support is only available in Chrome 18 and later, Safari 6, iOS Safari 6 and Blackberry 10.

Gradients

Apply both radial and linear gradient styling to your elements through the new gradient tool. The new gradients feature allows you to:

  • Add multiple gradient stops to your elements
  • Create animation tweens for gradient colors and positioning
  • Repeat gradients infinitely based on defined color stops
  • Gradient transitions are available in either linear or radial (linear and radial gradient transitions cannot be mixed)
  • Specify CSS properties for radial gradients such as ellipse-farthest-corner, circle-farthest-corner, etc.
  • Control gradient positioning in rotation degrees for linear and x/y percentages for radial.

New Color Picker

The color picker has gotten a refresh to allow for easier color editing.

New Color Modes

Colors can now be defined for both gradients and color using RGBa, HSLa and HEX.

Color Sliders

Color can be easily controlled and applied using new color sliders available in both the color and gradient panels.

Reusable swatches

Swatches can be saved and reused for both gradients and color at the document level.

HiDPI iconography

High resolution icons have been implemented when using Edge Animate on high resolution displays.

CDN Runtime Hosting

Users now have the option of hosting Edge Animate runtime files on the Adobe CDN, allowing caching for faster composition loading. Runtime files with this option selected will not be included on publish export.

Iframe Friendly Preloaders

Preloading is now optimized to work within iframes for coordinated resource loading. Animate compositions contained within iframes can wait for the document to load before signaling the composition to execute, allowing polite preloading for advertisements.

Symbol editing mode preservation on Preview

No longer does your Animate composition return to the stage when previewing in browser. Animate will preserve your current editing state on each preview.

For more information, visit http://html.adobe.com/edge/animate/