A look at Adobe Edge, HTML and Adobe Flash: How they can work together with rich media and mobile tech

A look at Adobe Edge, HTML and Adobe Flash: How they can work together with rich media and mobile tech

During Social Media Week in Chicago, there was the monthly Chicago Flex gathering at the TechNexus downtown. As part of the meeting, the new Adobe Edge was shown off and discussed. During this, several things came to mind of the possibilities with Edge.

The Web design industry and the Web itself is thriving with the news of Adobe Edge as of late. Adobe Edge, now in it's second beta release, has improved since its initial release in July.

Adobe Edge no doubt is a powerful tool, though it seems more geared towards designers and front-end developers at the moment to create animations for Web sites. It creates all of the different elements and pieces needed for full Web sites, and exports them neatly into a folder with all the HTML, and corresponding jQuery files (.min) needed for animations, easing, and other actions.

It even has the ability to edit and add additional interactive features to a web site that's already been created. Feel free to try this out: Open, or drag a pre-made HTML(.htm) file to Edge, and watch what happens. The full Web site opens in a WYSIWYG format within Edge, allowing you to add more interactive features to the existing Website, and its DIVs (such as opacity fades or animations to a menu, picture, or button), then export it back out with the code created for you into the folder. This is all done in a point-and-click graphical WYSIWYG workflow, rather than having to type everything in code.

Here's one more example you can try to create a clickable graphic banner made in Edge. First, go to the Adobe Edge Preview Sample Files (this page has many other Edge samples you can experiment with) and download the Sample Rich Ad (.zip). Unzip this .zip file and extract everything into a new folder. Then, you can open the project file in Edge to take a look at how the animations are done.  To add a "click" function to the ad though, this is currently done outside of Edge, in the jQuery that gets exported when you select "Preview in Browser" option in Edge. So to make the banner clickable like other ads you'll see, you must first open the exported HTML file (Edge_sample_richad.htm) in a HTML editor, then add the below code after:  <!--Adobe Edge Runtime End-->

<script language="JavaScript">
$(window).ready(function() {
$("#stage").click(function() {
window.open('http://www.elitemedia.us');
});
});
</script>

Upon saving and viewing the HTML page, you can see that clicking on the graphic banner will open a new tab in your browser and take you to the specified URL. A little more work that doing the equivalent in Flash, but interesting, nonetheless.

 

For interactive rich media advertisers who were used to creating interactive pieces in Flash, this also may be a useful tool. It may take some getting used to using Edge for this particular area though.

Many Web advertisers are used to building interactive ads in Flash, for instance. And with Flash comes a host of refined tools for creating advanced animations, adding video, sound and many third-party components created over the lifespan of Flash to enhance the product. Also, it's fairly easy to export a simple Flash .SWF file and embed it directly into Web page using a Flash object tag.

It is possible to create and to embed animations from Edge in a Web page, much like banner ads are usually separate .SWF files and embedded in the page separately. It can be done as a DIV, though as of right now the exported code for a simple banner animation, for example, consists of at least five or six includes (jquery-1.4.2.min, edge.0.1.1.min, edge.symbol.0.1.1.min, jquery.easing.1.3, etc.) that must be referenced in the main HTML Web page for the animations to work right. Then the block animation must be inserted into a specified DIV on the page.

These are also areas where is seems Edge is lacking for now. The many extra components and plugins were built specifically for Flash over the years to refine the technology to make banners have analytics features that count how effective they are, and more. Also Greensock Tweens, and other advanced animation plugins are Flash-only.

Ad tracking services such as PointRoll and DoubleClick, for example, have systems built specifically mostly for rich media Flash banners to get and what the value of the ad is by how effective it is for viewers by measuring clicks, as well as effective management and serving of Flash ad units on specific, related pages. An advantage that Flash has is that it's a technology that supports tracking and analytics natively.  Fallbacks can also be set in media queries to fallback to to HTML created designs and technologies that are more compatible with mobile devices, so that is one reason to consider Flash for ads over Edge created ones.

As much as some dislike ad banners, it is still an industry that will not disappear due the the revenue it generates, so expect Edge to only become more integrated with this, as it seems to be a prime tool for those type of ad animations.

 

A point to be cleared up, as much as people believe the idea that Edge currently uses and exports HTML5 for animations, this is a rumor so far as of the writing of this article. Currently it only exports the previous version of HTML, which is because the Edge team didn't want to create a product that exports HTML5 technology that still isn't fully implemented on most systems, and also that HTML5 is slower for most mobile devices.

Mozilla's Chris Heilmann brought up some good points on some negative points of Edge, and the lack of HTML5 in the output code. Mark Anders, an Adobe fellow working on Edge, responded by saying "We needed to start somewhere...The big thing to keep in mind is that this is a Preview 1, not a Version 1, and we will be looking to expand support in future releases". In a forum post he added "We definitely have plans to take advantage of canvas" in the near future.

In future updates to Edge, Adobe will gradually add HTML5 support as it is integrated into current browsers.  Preview Release 2 does support semantic HTML tags (using specific HTML tags for elements, class names, and ids that reinforce the meaning of the content), though, which is an improvement on the original release. Also, expect to see separate coding panels added, much like in the Flash interface.

Future updates to Adode Edge will be added at different increments through the rest of the year into early 2012, where a full version is expected to be released.  A road map image has been released by Adobe which currently is in the process of working on Beta Release 3. Future versions are expected to focus more on the code aspect of Edge, with a potential extra panel for editing code, HTML and jQuery, from within the program itself.

In summary, as a Flash designer and developer personally, Adobe Edge feels like it will have great potential and already seems like a big interest in it from the Web design community. Edge is releasing Beta on a step-by-step process as if to get Flash designers used to creating their designs directly in the Flash program comfortable with the gradual changes. It seems as if Adobe is doing an excellent job in those regards. Take a look at the Edge road map below to see when Adobe plans to roll out some new code additions.

Edge Roadmap

The interface is more suited to animating in Edge, rather than building full Web sites. However, this seems to be just its purpose. Animations exported from Edge can be seen directly on an iPhone, among other tablet devices making it ideal for mobile Web browsing design.

What will this mean for Flash, and will it make Flash go away? This is highly unlikely to happen for some time, but Adobe Edge gives something for Flash designers to get used to gradually as Edge becomes more refined so that it can be used alongside Flash to work as a mobile platform fallback, for example.

There was a new book released by Peachpit on Adobe Edge to keep you busy until the next release. Take a look here.

Until next time, live on the Edge!

Leave a comment