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!

Rain is an agency that has been doing the some of the most advanced creative work with Adobe Edge since even before the first preview was made public.  They were added to our Customer Advisory Board just a month or so before Preview 1 was released, but when Dave Nibley showed us the first animation he did with Edge, which you can see here, we were blown away.  It was beautiful, had a naturalness to the motion, and just seemed so smooth and refined that for us it set a new bar as to what our baby could do.  A few days later, during a visit to our offices he built another one right in front of us that was even better!

Recently, Dave and others at Rain were working on a game for the iPhone, iPod Touch and iPad called “The Adventures of Timmy: Run Kitty Run” and decided to use Edge for the “cut” scenes that take place between the levels of play.  The results are phenomenal.  The game is only $.99 on the iTunes App Store, so I would definitely recommend picking it up.

However, no purchase is required to learn more about what they did and how they did it.  Rain has kindly put up a site, also built with Edge, that shows you the production process, how they used Edge and other Adobe tools, and the finished results.  I would definitely recommend checking it out here.  If you’re coming to MAX, please consider attending one of Dave Nibley’s sessions.  It’s guaranteed to be a great source of inspiration and knowledge from someone who really knows how to do incredible stuff with Edge!

It’s been a busy couple of weeks on the Edge Team as we get ready for our Adobe MAX conference that takes place Oct 3-5.  We have been hard at work on what I think is going to be a killer set of features for Edge and have also preparing for sessions, labs and other stuff that I can’t talk about.

I arrived in LA this afternoon and it should be a great show.  I will be doing two presentations of “Everything You Wanted to Know About Edge” and I think it should be really good.  Though I’ve been presenting Edge a lot lately, whether that HTML5 Camps in San Francisco, New York and London or at Flash on the Beach in Brighton, this will be different.  I’ll be going over all of the different areas of the tool, including things you haven’t seen before and explaining how they work and the details behind them.  I will also be demonstrating how to use them effectively for common use cases.  Given all of the new stuff I’ll be showing, if you’re interested in Edge, I would definitely recommend attending.

Josh Hatwich, who is one of the lead Architects on Edge and also one of the co-founders of the team is also doing a session that I think is going to be killer! Josh and I have been working closely on Edge since the original prototype last year – a prototype that Josh built, for the most part.  His session picks up where mine leaves off and he shows what you can do with what comes out of Edge.  He will cover how to handle downlevel browsers, how to host multiple Edge compositions on the page and how to bind to dynamic data and a ton of other great stuff.  DEFINITELY check out Josh’s session if you’re at MAX!

Devin Fernandez, who is the Edge Product Manager will be presenting a hands on Lab that should also be really great.  He’ll bring you through all of the latest features of Edge and lead you through building cool, interactive content.  He’ll be joined by a bunch of other Edge Team members so if you can make it, it should be a lot of fun.

This should be a great MAX overall and a really exciting one for Edge!  You might be wondering, when can you get your hands on all of this exciting stuff I’m alluding to?  Unfortunately, I’m not allowed to say.  What I can say though, and I really mean this, is – your guess is as good as mine!

If you’re at MAX, please say “Hello!”