After 23 months of development and 7 preview releases, Adobe Edge Animate 1.0 is now available. Perhaps even more exciting is that it’s available via both Create Cloud subscription and as a one time, perpetual license (i.e you own it).  Better yet, as a special introductory offer, the perpetual version is FREE! This is a limited time offer – it will eventually cost real money, so grab a copy to own today and forever!

Getting here has been a really exciting adventure.  The first preview was released after just 9 months of development, which, for a 1.0 product of this type was really fast.  While the first version was limited, getting out early was really important because it allowed us to get valuable feedback and improve the product in ways we think really mattered to people.

We made those improvements in the 6 subsequent previews we released over the next 11 months – a release every 55 days or so on average. In case you missed it, here are some of the key features we added to along the way along with with why I think they’re significant.

Preview 1: Native File Formats

While more of a guiding principal than a feature, Edge always stores its data in clean, easy to understand JavaScript and you can always run Edge files directly in the browser. There is no publish or export step required. We wanted to enable people to integrate with complex web workflows and so unlike other tools, HTML, JavaScript and CSS are our native file formats.

Preview 2: Copy and Paste

On the surface, it might seem ridiculous to call copy and paste significant. After all, just about every program supports it. What is significant is how it’s implemented. In EA, you can copy animations from an object and apply them to another, and the paste can be relative to the object. You can even do “Paste Inverted” to reverse an animation.  Copy and Paste enables great reuse and is one of EA’s most powerful features.

Preview 3: Extend with JavaScript

While the first 2 previews just allowed you to create a linear animation, with preview 3 we added the capability to add JavaScript code to a composition to access the animation API as well as integrate standard HTML DOM/CSS manipulation. I should mention that it was always our intent to make code an important part of the product, and the fact that it was initially missing may have given some the wrong impression. This will be an area that gets even more powerful in the future.

Preview 4: Symbols

Symbols are perhaps the single most powerful feature of Edge Animate. It allows you to create definitions of objects that have their own timelines and event handlers, and then to create multiple instances of them on the stage. This allows you to build truly interactive objects that respond to external events like clicks, swipes, timers, data, accelerometer or others, and operate completely independently.

Preview 5: Optimization

One of the things that some discovered is that the files that EA creates are not optimized. They have lots of white space and the way we write the JavaScript code is verbose. This is somewhat intentional – we wanted the files to be easy for humans to understand. With Preview 5 we introduced a publish step which optimizes the output.  This is not just minification. We also rewrite the data into a more optimal format, and I’ve seen it make the output 80% smaller.

Preview 6: Code Panel, SEO and Lessons

Preview 6 added a number of important features. There is a dedicated code panel to make working with JavaScript easier and to provide a more code centric view. We also included a set of in-app lessons to get new users up to speed quickly. One really cool feature is a publish option that converts the HTML markup that would typically be injected by JavaScript at runtime into static markup so it’s searchable. Try it out! (click on the first link returned).

https://www.google.com/webhp?#q=%22adobeedgerocksfitctoronto%22

Preview 7: Scalable Layout

Having designs that can respond intelligently to size changes is an important trend in web design and in Preview 7 we added a number of features to allow designs to resize. You can use % based units as well as switch between top, left, bottom right so that objects remain linked to the desired position of their parent.

Finally….

It was an amazing experience getting to lead the creation of Edge Animate 1.0, and I want to thank two groups – the Edge Animate team and the community that has used it and given us invaluable feedback.

The EA team is not only a phenomenal, extraordinarily talented team that can crank out code, they’re also deeply committed to the customer and the quality of the product and a lot of fun to work with.  As I look back on all of these features that were added, for each one there is a set of individuals whose passion made it happen.

Last but certainly not least is the community. Any time you develop a tool, what is most satisfying is to see what skilled people can do with it and the community that has built up around Edge Animate is inspiring.  Not only have they created incredible things with it, but they’ve provided us with invaluable feedback that has guided our development – a lot of what we added came from feedback and watching how people use the program.  We definitely could not have done it without you!

Adobe Edge Animate preview 7 is available for you to download for free from either Adobe Labs or the Adobe Creative Cloud. As with all of the other previews, I’ve recorded a video that goes the main features of this release for Adobe TV.

The first thing you’ll notice is that we’ve slightly changed the name of the product from Adobe Edge to Adobe Edge Animate.  This was done to give it a more descriptive name though it does do more than animation.

Preview 7 has a ton of new features. The main themes are:

• Overall UI Refinements
• Resizable Layouts
• Warnings and Error Reporting
• Stage Enhancements
• Timeline Improvements
• Code Editor Enhancements
• Content creation improvements

Overall UI Refinements

One of the first things you’ll notice is that Edge Animate looks a lot more refined. The overall look is much crisper and each of the panels have been revamped.  The Properties Panel has been overhauled, with collapsable sections, and provides access to many new properties.  The overall effect is that there’s a lot more information that is available but it takes up less space.

Resizable Layouts

The ability to create designs and animations that respond to size changes was by far the most ambitious feature we added in preview 7.  In a nutshell what it allows you to do is:

• Choose between % and px for many units (location, size, image background, etc).  You can switch back and forth between the unit types to experiment. When the stage is set to %, it responds to size changes of the page it’s in.
• When the stage is set to % for width or height, you get little handles on the rulers – yes, we’ve added rulers and guides! – to test out the resizing.
• By default, objects are positioned relative the upper left of their parent. Meaning, in CSS we use top and left.  You can now pick per object how to position it – via bottom and right, or top right, or bottom left, etc.  As a result, the object can remain a fixed size/position, but stay relative to, for example, the bottom right. This of course can be combined with % units.
• We’ve added more properties for background images that allow you to do interesting effects, such as keeping images centered, scaled, etc.  We also added a “presets” button in the Properties Panel, which adjust multiple properties to achieve certain types of resize behavior.
• We’ve also added new capabilities to symbols so that you can specify how they resize – via scaling or resizing.  This allows you to create things like resizable buttons with centered text.

We also added a new, in-app lesson to demonstrate how to use some of these features.

Warnings and Error Reporting

We now display errors, warnings and status information to alert you to, for example, that text shadows don’t work in IE9 or that you have an error in your JavaScript code.  The errors are shown at the bottom right hand corner of the stage, and code errors are also shown in the Code Panel.

We also changed how errors are dealt with in the runtime. Previously the runtime caught errors which made it impossible for you to do so. We’ve changed this and allow you to catch errors in an event handler that you can add in the Code Panel.

Stage Enhancements

We’ve changed the overall stage look and feel, adding extra room around it and the ability to scroll it in all directions.  We also added rulers and guides, and zoom controls.

Timeline Improvements

One of the big things we’ve added is the ability to deal with keyframes as more of a first class citizen.  You select them, even if they are part of a transition, and copy and paste them.   You can create or remove remove transitions.

We’ve also cleaned up the 3 mode buttons – Auto Keyframe Mode, Auto Transition Mode and “The Pin” so that they work more consistently and intuitively.

Code Editor Enhancements

In addition to reporting syntax errors, we’ve also improved the Code Panel in a number of ways.  Perhaps my favorite thing is the symbol focused editing, where, when you select a symbol or the stage in the left hand outline, we show you the contents of its closure and all of the Actions it contains.  This allows you to add variables and utility functions that are scoped to the symbol or stage.

New Content Creation Features

Finally, we’ve added a number of new content creation features. There’s an ellipse/circle tool, box and text shadows, multiline text and a lot more text attributes to play with.

Finally….

About a month ago, I was trying to figure out when we had shipped which features and I realized that “Edge” was approaching it’s first birthday.  It was August 1, 2011 that we shipped the first preview and I was blown away with how far we had come and by the fact that in 12 months we had shipped 7 versions with a ton of incredible new features. That’s on average more than once every 2 months. Ok, so we missed the 7th preview by a few weeks, but you get what I mean!

Preview 7 is a huge release.  It adds some important new features but more importantly has really turned the corner in terms of fit and finish as we transition towards a 1.0 release.

Along the way, what is most satisfying is the relationship we have built with the community and in seeing what it’s members are doing with the tool we created. We’ve also been listening and learning and have really been taking in the feedback, both in terms where Edge Animate goes feature wise, but also in terms of how it’s made available.

Please download Edge Animate preview 7, and give it a spin.  It’s going to be an exciting next few months!

Right on the heals of rolling out Adobe Edge preview 5 on Sunday night, today we released a minor but important update – Adobe Edge preview 5.1. Preview 5.1 fixes 2 bugs that were reported by users. First of all, we are sorry that the bugs passed through testing undiscovered, but thought they were important enough to warrant a quick fix and release.

The first bug concerns a “blank” error dialog that is displayed when deleting an image from the images folder while still referencing the image from the composition.

The second is an issue where existing HTML files that contained unclosed <li> tags would not be displayed correctly.

Both are now fixed, and you can download the update from the Edge page on Adobe Labs.

For the launch of Edge preview 5, I was at SxSW where I presented Edge with Paul Trani as part of the day long Adobe Creative Camp.  The feedback was great and I spent a bunch of time talking with people afterwards, getting their thoughts on what we are doing.

One of the things I always do as part my sessions is to show some examples of what the community has done with Edge thus far.  In a lot of ways, this is the most motivational part of the session as it shows what’s possible, where my demoing the tool simply explains what’s there and how to use it.

I had a few requests from attendees afterwards and one who commented on my blog to post the samples I showed and so I thought I would do it here.  Here’s the list!

1. Getting Jumpy #1
2. Getting Jumpy #2
3. German Wedding Photographer
4. Google+ follow me button
5. Patrick MK Williams Portfolio Site

Dave Nibley’s Bouncy Examples

The first time we saw Dave Nibley from Rain’s Getting Jumpy #1, was in mid-July, a few weeks before Preview 1 was released. Dave posted it to our pre-release forum noting that it was his first Edge animation.  Everyone on the Edge team was in shock.  We had never seen anything created with Edge before that looked so smooth and refined.  Since most of our time was spent animating gray rectangles and text, it was incredible to see what someone who really knew how to animate could do with it.  Dave is a great motion designer with a strong background in After Effects, he found Edge really intuitive and easy to use and seeing his work was a great motivation for us.

A week later, Dave came by our office as part of our early access program, I got to meet him, and we gave him a new build of Edge.  In about an hour or so, he created Getting Jumpy #2, which we liked even more than the first one!  It reminded us of the well known Pixar animation and made great use of the easing equations.

Berlin Wedding Photographer

Edge Preview 1 went live on Monday August 1st at 12:01 EST or New York Time, as I like to think of it, being a native New Yorker. For me, it was 9PM on a Sunday in San Francisco and so I spent the night blogging, tweeting and answering the first questions on the Edge Forums.  When I woke up the next morning, there was a post from a wedding photographer in Berlin who basically said that they downloaded Edge, figured it out right away, created an animated content rotator for their site and deployed it!  They said that they had wanted to do something like this for a while, but didn’t know Flash and wanted it to run on an iPad.

The Edge animation is on the homepage of the site.  What amazed me was that in the time it took me to get a night’s sleep, they were able to find Edge, try it and be successful.

Roman Liutikov’s Follow Me

At the time Preview 1 went live, Roman Liutikov was a 19 year old student living in the Ukraine and on August 1st he posted a video of an animation he did in After Effects  planned to recreate with Edge.  It took him a whole 3 days, but on August 4th, he posted a very wild animation done with Edge for a Google+ follow me button.

In addition to being really cool and stretching the boundaries of what Preview 1 could do, what was interesting was that it was the first example to incorporate sound, even though Edge didn’t support audio and in fact still doesn’t as of Preview 5.  But because Edge files are just HTML, he just hacked it in and it worked.  The funny thing was that when you opened the project in Preview 1 and maybe even Preview 2, the audio would play – continuously, as he had it in a loop, because the Edge design surface is WebKit.  We have since disabled audio from playing.

Patrick MK Williams Portfolio Site

The final example I showed was really cool portfolio site created by Patrick MK Williams.  It’s beautifully designed, has lovely motion and advanced interaction.  It’s definitely one of the most complete examples I’ve seen done in Edge.  While the previous examples were all done with the preview 1, this one could not have been.  It really requires the Symbol capability, which was introduced in preview 4 back in January.  Symbols are independent objects with their own timelines, and Patrick’s site makes great use of them. Try it out and definitely explore the various interactive elements of the site.

Just Scratching the Surface

Of course, there are a lot of other great examples that I didn’t show, due to time.  In the SxSW presentation, we had a lot to cover with Preview 5 and so I only picked a few , but ones that I think tell an exciting story about Edge and what you can do with it.

If you are interested in checking out what people are doing with Edge beyond these, there’s a thread that I started back in August called “Post Your Edge Animations!“.  While not everything will amaze you – after all, a lot of what’s there are people’s first Edge creations, it is a lot of fun to see all of the passion as people discover what you can easily do with HTML5, CSS3 and JavaScript using Adobe Edge.

Enjoy!

Adobe Edge preview 5 is available for you to download free from Adobe Labs: http://labs.adobe.com/technologies/edge/ I’ve also done a video that covers some of the main features of preview 5 that you can see on Adobe TV http://tv.adobe.com/watch/adobe-edge-preview/introducing-adobe-edge-preview-5/

The features of Edge preview 5 were developed primarily around 4 main themes, some of which have many features and enhancements.  In addition there are some other great new features and a ton of bug fixes. The main themes are:

• Publish Optimization and Preloader Design
• Support for non-HTML5 browsers
• Animation productivity
• On stage manipulation

Here are a few details about each of these areas.

Publish Optimization and Preloader Design

One of the things we’ve heard loud and clear from the community is that they want the code to be as compact as possible.  With preview 5, we’ve taken the first steps toward providing an optimization workflow.  You do this via the Publish command on the File menu.  In Publish Settings, you can specify the directory and whether you want jQuery downloaded from CDN.

What we’ve done is to create an alternate data representation for the JavaScript that we design, which is much more compact, and then run it and the other JavaScript code through a minifier.

We don’t quote numbers, because it varies greatly depending on the content.  In my experience, I’ve seen _edge.js files (the ones that have the timeline and dom injection code) that are between 33% and 20% of the original size.  So for example, I took the MAX example from preview 3 which was originally 37K and after publishing it was 6K.  So there are real savings, though again, it depends on the content, and your mileage may vary.

Note that publishing is OPTIONAL!  Edge saves its files natively as HTML, so you don’t have to publish.  However, there are savings if you do so.

We will be doing a lot more in the publish workflow in future previews, but definitely check out what we’ve done here.  We think you’ll like it!

Support  for non-HTML5 Browsers

This is a first cut at enabling you to create content that will run on IE8 and below.  One of the main scenarios for this is ads, and one of the things suggested by a number of early users is the ability to specify a static representation of the design.

For preview 5, we have enabled you to do this by providing a downlevel stage that you can design that gets shown to browsers that don’t support CSS3.  To make it easy, we’ve added the ability to capture a poster image of your composition at any point on the timeline.

We plan on doing additional work on downlevel support in the future, but one question people may have is – why can’t you just make animations work on IE8?

The answer is that we have tried, and have some things working.  However, when you get into the complete range of what Edge can do – nesting, symbols, etc, you start to run into a ton of bugs, because IE 8 (and earlier) are just very old browsers.

So the good news is, we’re trying, and have some other ideas for the future, but this is a great first step!

Animation Productivity

This is an area where we put in a TON of work.  In a nutshell here are the main things we did:

1. Make “the Pin” (the feature formally called “the Mark”) more intuitive and less error prone.
2. Enhance playback so it enables more rapid iteration.
3. Make it easier to control the easing equation.

Introducing “the Pin”

Previous versions of Edge had a feature known as “the Mark”, and we have made significant improvements to it.  First,  we have renamed it  “the Pin” because it more accurately describes what it does – when you make an edit, the Pin “pins” the current value while the new value is set at the Playhead. Improvements to the usability of the Pin include:

• Activation:The Pin can be activated/deactivated in a number of ways:
  • Double-click the playhead or the Pin itself
  • Hotkey: P
  • Pin button in the Timeline control strip
  • Menu: Timeline  > Toggle Pin

• Location: The Pin is now located above the playhead, and is a gray rectangle when not activated.
• Color: When activated, the Pin is colored blue.  It also has a new, rounded shape that looks like the head of a pin.
• Visualization: When you drag out the Pin, we now visualize the region using color and a pattern to communicate what will happen.  A yellow region pointing forward will animate towards the playhead, where the edit is being made.  A blue region pointing backward will animate from where the edit is made, to how the object appears prior to the edit.

Playback

We have made a number of changes to how playback works, especially when the Pin is engaged, to make easier to use and to iterate.

• Ghost Pin + Region: When the Pin is active and you press play, a “ghosted” region remains visible. You can return the playhead to its original position, and reactivate the pin, with the Returncommand:
  • The Return button in the Timeline control strip
  • Menu: Timeline > Return
  • Hotkey: Return/Enter
• Ghost Playhead: Similar to the Ghost Pin+Region, when there is no Pin and you press play, a “ghosted” playhead remains visible. The return command will return the playhead to this position.

Easing Tool

The easing tool, located on the timeline control strip, allows you to select the easing equation you wish to use prior to creating an animation, and to edit them for selected transitions.  We have also reorganized the selection easing equations and provided a visualization to more effectively communicate what they do.

You can also use the Easing Tool to change the easing for a select transition or set of transitions.

On Stage Manipulation

• Transform Tool and Selection Tool Changes: Edge now has a transform tool, located next to the selection tool.  Experiment with moving the cursor along the edge of a selected object. It will change appearance, allowing you to skew, scale and rotate the object. As part of the design of this too, we’ve made some changes to the Selection tool: we have removed access to the corner roundness controls and the transformation point. These are now available when using the Transform tool.

• Clip and Background Position Tool: Edge now also has a clipping tool.  When an object is selected, the green rectangle and grab handles allow you to control the clip area.  When clipped, the black outline allows you to control the size of the element.  A center content grabber control allows you to move the position of the image within the div.

• Stage Editing with Overflow Hidden Improvements: When editing a composition with overflow set to hidden, we now show the contents outside of the div area that would normally not be visible.  This allows selecting and position objects. These elements are hidden on playback, so you can see how they look like at run time.

One final thing that we did that doesn’t fall into any category is an image swap command.  It’s a little button located next to the image source property on the property panel.  It’s easy to miss!

Overall, Preview 5 has a ton of new feature and I and the rest of the Edge team hope you really like it!

Adobe Edge Preview 4 is available now and you can download it from Adobe Labs, http://labs.adobe.com/technologies/edge/. Also check out the video I did to highlight a few of the features on Adobe TV, http://tv.adobe.com/watch/adobe-edge-preview/introducing-adobe-edge-preview-4/.

Given that the first three previews were released a month apart and it has been over three months since Preview 3, a logical question is: “What took you so long?”

There are a couple of reasons. The first is that we work in one month sprints that are aligned on the month boundry and both Oct, Nov and Dec were all shorter than normal due to MAX, Thanksgiving and Christmas. Additionally, we added a number of features that took multiple sprints to implement.

The result is that Edge Preview 4 this is a MAJOR release. At a high level, here are the features you will find in it.

• Symbols – Reusable objects with their own Timelines, Actions, Triggers and Labels. You no longer have a single timeline and can create multiple instances and dynamically control them from code or on the timeline. This opens up a ton of new capabilities.
• Web Fonts – import and use fonts from any service on the web or bring your own to get the exact font you want. You can download font packages from services like FontSquirrel, or link to fonts from Google Web Fonts, and of course, leverage Adobe TypeKit. When you add a Font to your project, you define the font fallback list, and after that, it appears in the list of fonts just like the built in ones.
• Element Display – This allows you to control an element’s “display” attribute. Setting display=none (“Off” in Edge’s UI) means the element is removed from the browser’s rendering tree and increases efficiency. When Elements are “Off”, there is a nice cross hatch pattern that lets you easily see this on the timeline.
• Library Panel – This allows you to see and manage the images, symbols and fonts used in your project. Symbols and images can be dragged from the Library Panel on to the stage to create new instances of them.
• Drag and Drop from the File System - you can now import images simply by dragging them them from the file system and dropping them onto the stage where you want them.
• Reparenting of Elements – you can reparent Elements in the Elements Panel using drag and drop.
• Transform Tool – For Preview 4, this allows you to scale objects, instead of resizing them. In the next preview, you will be able to do on stage rotation.
• Transform Point Improvements – while a minor feature, you can now place the transform point of an element outside of the element. This allows you to do things like have an element orbit a specific point just by doing a rotation.
• Color tools – located on the toolbar, this allows you to select the stroke and fill color for a shape before you draw it.
• Clip and background position – you now have access to these properties which allows you to do interesting masking and panning effects. You can even load Sprite sheets and animate them.
• Composition ID – This is now editable in the Stage Property panel and is the ID that appears in the script files that you use as the class name of the host div in your HTML page.
• Composition “autoplay” control – If you want a composition not to play automatically, rather than having to put a “stop()” command at 0.0, you can now just uncheck the autoplay property. Note that all symbols have this property for you to use.

• Simplified Script Include – to include your composition in a page, you now have to copy just a single line of code.
• Option/Alt drag to duplicate – if you want to copy something on the stage, just hold down the Option (Mac) or Alt (Windows) key and drag the selected objects.
• Insert Time – this allows you to insert time, shifting transitions to the right of the playhead or stretching transitions that overlap the playhead.

These are the main features, though there definitely are some others in there. In addition, we’ve done a couple of things to improve the performance of the tool.

First, we are using a new version of WebKit that is the same on both Windows and Mac. This provides a big speedup for Windows user. We’ve also re-writteen the “actors list”, which is the list of animated elements and properties on the left hand side of the Timeline Panel and it’s a lot faster, more responsive and keeps in sync with the rest of the timeline when scrolling.

Lastly, we’ve fixed lots of bugs and made a number of incremental refinements so it should feel a lot better than Preview 3.

Overall, this is a huge release for Edge and makes it much more powerful, but we’re not done! We’re hard at work on Preview 5 and have a lot of cool stuff in store for you.

So download Edge Preview 4, give it a try and let me know what you think. Also, follow me on Twitter – @markand, and stay in touch!

Enjoy!

I’m currently on a week long tour of Europe, presenting Edge at “Back From MAX” events in Antwerp, Paris and Berlin.  It’s a great opportunity for me to present some of what we showed at MAX a few weeks ago, to see old friends, and meet lots of new ones.

Yesterday was my first day presenting and I did two sessions.  The first was at Howest University College in Kortrijk that was set up by my friends Koen De Weggheleire and Klaus Delanghe and it was great!  The room was packed with almost 300 students and based on feedback from Twitter, they really enjoyed it and were impressed with Edge.

That evening, I did a another presentation at an Adobe User Group Belgium meeting.  Smaller room, but lots of excitement and some great discussion.

Throughout, I was chauffeured around Belgium by my friend Serge Jespers who will soon be leaving Belgium to join us at Adobe in San Francisco!

Watch Out for Syntax Errors!

The one thing that didn’t go well was that at the end of the demo at Howest, my composition didn’t work properly – none of my Actions or Triggers executed, so it wasn’t “interactive”.

What I was doing was showing the pattern of using setParameter and getParameter to store off the label to jump to when animating things you click on.  Josh presented this in MAX talk that you can read about here (item D).  Though things had worked while building it, at the end it failed.

At the time, I thought it might be a bug with Edge – it is still just a Preview, but after looking into things AFTER the talk, I discovered the error I made, and it’s a good thing to be aware of.

Basically, what happened was that, while editing one of the Triggers, I added an erroneous character right before a comment – most likely by hitting a key by mistake.  This rendered the syntax of the function invalid, so the file wouldn’t parse.  As a result, the animation ran – all of that code is produced by Edge and didn’t have any issues, but none of my code executed.

The way I discovered this was by using the JavaScript Console in Chrome, which showed the Illegal Token syntax error.  Of course, I didn’t discover this while on stage, because instead, I went to the Developer Tools and View Source perspectives.

So… if you ever run into a situation where your animation works but your Actions and Triggers don’t, check out the JavaScript console because it may not be an Edge problem!

This experience has led me to think about what we can do to help alert users to syntax errors, because of course the browser doesn’t do all that much to let you know what’s going on!

Next Stop Paris

Today, I’m heading to Paris on the really nice Thalys high speed train.  It has excellent food, and wonderful WiFi. In fact, I’m posting this while speed along the beautiful French countryside.

Tomorrow, I’ll be presenting at Back from MAX Paris, which should be an awesome event.

Till then…

Josh Hatwich, who is one of the lead architects of Adobe Edge, just posted the first article on the official Edge Team Blog. MAX Wrap: Interactivity and Real-World Use covers a lot of the key information Josh presented in his excellent session at MAX.

In his session not only did he show how to build content, but perhaps more importantly, how to deploy it – the page he built actually had 3 Edge compositions in it, and how to present a view compatible with downlevel browsers by integrating the excellent modernizr JavaScript library.

Definitely check out Josh’s post for that and other great information and keep an eye on the Adobe Edge Team Blog!

http://blogs.adobe.com/edge/

I just saw this very interesting article in Wired magazine on Run Kitty Run, the new iOS game that features cut scenes created in Adobe Edge and wanted to pass it along.  It’s an interview with Adam Kahn, who developed the game.

There’s lot of great information about some of the choice they made, such as the importance of the star rating system, of leveraging the graphics system, and why in World 2, Timmy is not back at his mother’s!

Of course, what I found most interesting was the angle of piece expressed in the first paragraph.

We got the chance to have a chat with Adam about the game and what Adobe Edge means for developers and the future of gaming on iOS, what it can do that makes things better.

Working on Edge, we’ve been really excited about all of the possibilities of what people could do with it, but honestly, I hadn’t thought of it as something that could make iOS games richer.  However, Adam had this to say.

If it hadn’t been for Edge, we would have had to do a comic book style cutscene that pans from side to side, like Angry Birds or a million other games out there. But this way we got to communicate the story more effectively with awesome moving graphics all without making the game 200MB+.

Check out the full article at Wired.com.  Also, check out the site that Rain did on how they used Edge to create the cut scenes in Run Kitty Run.  You can see that here.

To coincide with the kickoff of Adobe MAX in LA, we are releasing Preview 3 of Adobe Edge.  You can download it from Adobe Labs here.

Preview 3 is what I would call a major release.  It adds what we have referred to internally as “interactivity”, but it’s more than that.  It’s the ability to add JavaScript code from within Edge to do a whole range of things.  This has been the #1 requested feature from the community, so we’re really excited about finally being able to deliver it and to see all of the amazing things that people do with it.

In a nutshell, what it allows you to do is add JavaScript functions to handle DOM and animation events.  So, for example, you can handle when the user clicks or touches an element – we support both mouse and touch events.  In response, you can kick off an animation, modify part of the DOM or do anything else you like – it is HTML after allo.  Animation based events are those such as the animation is complete, or doing an update, etc.  This allows you to do looping or stopping playback at a certain point or a range of other things.

We’ve also added Labels that you can put on the Timeline.  These can help organize the timeline, but can also be used in the API and then referred to in API that accept timecodes.  Triggers are points on the timeline that fire an event that you can handle.

At the heart of these features are Actions, which are functions that you add to handle a single event. You can edit actions with the Actions Editor, which pops up to allow you to enter the code for the function. It also provides access to a library of snippets, which are useful not only for easily adding code to do common tasks, but also for learning the Edge API.

For objects that dispatch a range of events, such as DOM Elements (including the Stage), and the Timeline, you also have the ability to add handlers for different events – you pick the event and then add the code for that event handler.  For Triggers, which currently fire just one event, you can immediately enter the body of the event handler function.

As part of this, we’ve also opened up the Edge animation framework API.  Previously, we hadn’t documented it, though we did post some snippets to help people do simple things, such as looping or handling clicks.  A key reason we had held back was that we had wanted to simplify how to use it and we’ve done that.  For example, previously to play the timeline, you would do something like the following:

      $.Edge.symbol.get($(“#stage”)).play(“Default Timeline”);

We’ve now simplified it so that it looks like this:

      this.play();

All of the code that you create is stored in a JavaScript file that is separate from the one that Edge creates to store its timeline animation and content to inject.  The file only contains Actions code.  We did this so that you can edit this code outside of Edge, in the editor of your choice. In fact you can do so while Edge is running – just save it and Edge will prompt you as to whether it should load the updated file.  Give it a try!

In addition to the coding features, there are a bunch of other great things that we’ve added as well.   Copy and paste has been enhanced so that it’s more reliable and you have more control, and you can even copy transitions from multiple objects to multiple objects, which is really useful. We’ve also modified the way that we bind to elements to support hosting multiple Edge compositions on an HTML page.  One of my favorite new features is a set of commands to toggle whether the selected animated elements or all elements are expanded or collapsed in the Timeline Editor.  Very useful for working on large animations!  You can read about the complete list of features here.

Overall, this is great release with a lot of features that have been asked for since day one.  You asked we delivered!

So check it out and let me know what you think!