Flash Alternative – Adobe Edge HTML5 Animation Tool, First Impressions

Flash Alternative – Adobe Edge HTML5 Animation Tool, First Impressions

Posted by Rainey

So Adobe is making the move that I had hoped they would and is offering an alternative for Flash, Adobe Edge.

Adobe Edge Preview is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

http://labs.adobe.com/technologies/edge/?sdid=JAXXJ&skwcid=TC|23230|adobe%20edge||S|b|8333479386

A HTML5 Tool that offers an easy way to create HTML5/CSS3/JavaScript animations?? (wow that is a mouthful) Sign me up!

Out of the “box,” my first impression on Adobe’s HTML5 animation tool is great.  It features a sleek, dark charcoal color scheme, a semi familiar tool set and a timeline similar to the one used in Flash. Each tool works great, but I cannot find an easy way to align divs and cannot find guides anywhere, maybe these are coming. Learning to use Adobe Edge as a Flash replacement will be quick and easy if you are familiar with how Flash works.  This is not to say that it works just like Flash, because it is quite different, for obvious reasons. Within an hour and a half, I had learned the basics and built the example ad (will not work in some browsers like IE 8 and under, sorry not taking the time in this post to provide alternative content code). I had that early 2000’s Flash high when I saw my animation come to life in all it’s HTML, JS and CSS glory!

After refreshing the screen a couple of times to watch my simple animation play, it was time to look at the code.  The first thing I noticed was the link to the auto generate javascript file, cool Edge didn’t just puke code into my page. But, wait a minute, where is the content in the HTML file? All I see is this div with the id of “stage.”

<!DOCTYPE html>
<html>
<head>
	<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="themeSpectrum_edge.js"></script>
    <link rel="stylesheet" href="themeSpectrum_edge.css"/>
<!--Adobe Edge Runtime End--> 

</head><body>
	<div id="stage" class="symbol_stage">
	</div>
</body>
</html>

So much for searchabilty… but at least people running iOS devices can see the animated content now right? This solution is fine if I do not mind my content not being searchable, but that is certainly not always the case. SO, I set out to see how hard it would be to “make this right.”

First order of business is to remove the javascript generating the content:

content: {
      dom: [
        {
            id:'Logo',
            type:'image',
            rect:[0,0,262,29],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum%2Dlogo.png'],
        },
        {
            id:'Screen6',
            type:'image',
            rect:[0,0,69,179],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum6.png'],
        },
        {
            id:'Screen5',
            type:'image',
            rect:[0,0,60,189],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum5.png'],
        },
        {
            id:'Screen4',
            type:'image',
            rect:[0,0,70,203],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum4.png'],
        },
        {
            id:'Screen3',
            type:'image',
            rect:[0,0,70,212],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum3.png'],
        },
        {
            id:'Screen2',
            type:'image',
            rect:[0,0,85,225],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum2.png'],
        },
        {
            id:'Screen1',
            type:'image',
            rect:[0,0,341,236],
            fill:['rgba(0,0,0,0)','images/theme%2Dspectrum1.png'],
        },
        {
            id:'Slogan',
            type:'text',
            rect:[126.66665697098,335.83331346512,0,0],
            text:"WordPress Themes for Artists & Designers",
            align:"-webkit-auto",
            font:["Verdana, Geneva, sans-serif",16,"rgba(0,0,0,1)","normal","none","normal"],
        },
      ],
      symbolInstances: [
      ],
   },

Next, I need to put the content where it should be, on the page. Now I am able to add things like individual anchor tags, alt tags, title tags, etc.

<!DOCTYPE html>
<html>
<head>
	<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
    <script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="themeSpectrum_edge.js"></script>
    <link rel="stylesheet" href="themeSpectrum_edge.css"/>
<!--Adobe Edge Runtime End-->

</head>
<body>
	<div id="stage" class="symbol_stage">
		<a href="http://themespectrum.com" title="Premium WordPress Themes">
			<img id="Logo" src="images/theme-spectrum-logo.png" alt="Theme Spectrum" />
		</a>
		<div id="Slogan">WordPress Themes for Artists & Designers</div>
		<img id="Screen6" src="images/theme-spectrum6.png" alt="Premium WordPressTheme - Stack Screenshot Partial" />
		<img id="Screen5" src="images/theme-spectrum5.png" alt="Premium WordPressTheme - Stack Screenshot Partial" />
		<img id="Screen4" src="images/theme-spectrum4.png" alt="Premium WordPressTheme - Stack Screenshot Partial" />
		<img id="Screen3" src="images/theme-spectrum3.png" alt="Premium WordPressTheme - Stack Screenshot Partial" />
		<img id="Screen2" src="images/theme-spectrum2.png" alt="Premium WordPressTheme - Stack Screenshot Partial" />
		<img id="Screen1" src="images/theme-spectrum1.png" alt="Premium WordPressTheme - Stack Screenshot" />
	</div>
</body>
</html>

Next, I need to set each element’s postion to be absolute and while I was in there I rearranged them to be in a halfway logical order. Oh, and I had one element, the slogan, set to a negative number related to, what appears to be, the exact point in Edge that was clicked to create the text, or graphic I later found. To get around this you can create all text and images from 0, 0 on the stage.  And, to fix this if you did not create them this way, you will need to enter these numbers by hand in the CSS and JS files…. Bummer.

 

/**
 * Adobe Edge(TM): Generated CSS
 * Do not edit this file. <=== BAH!
 */

#stage {
    height: 400px;
    background-color: rgba(255,255,255,1);
    width: 600px;
}

#Slogan {
    position: absolute;
    color: rgba(187,187,187,1.00);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 20px;
    -webkit-transform: translateX(87px) translateY(236px);
    -moz-transform: translateX(87px) translateY(2369px);
    -ms-transform: translateX(87px) translateY(236px);
    -o-transform: translateX(87px) translateY(236px);
}
#Screen6 {
    position: absolute;
    opacity: 0;
    -webkit-transform: translateX(146.6972px) translateY(60.49713px);
    -moz-transform: translateX(146.6972px) translateY(60.49713px);
    -ms-transform: translateX(146.6972px) translateY(60.49713px);
    -o-transform: translateX(146.6972px) translateY(60.49713px);
}
#Screen5 {
    position: absolute;
    opacity: 0;
    -webkit-transform: translateX(146.21843px) translateY(56.92033px);
    -moz-transform: translateX(146.21843px) translateY(56.92033px);
    -ms-transform: translateX(146.21843px) translateY(56.92033px);
    -o-transform: translateX(146.21843px) translateY(56.92033px);
}
#Screen4 {
	position: absolute;
    opacity: 0;
    -webkit-transform: translateX(146.77227px) translateY(49.28641px);
    -moz-transform: translateX(146.77227px) translateY(49.28641px);
    -ms-transform: translateX(146.77227px) translateY(49.28641px);
    -o-transform: translateX(146.77227px) translateY(49.28641px);
}
#Screen3 {
    position: absolute;
    opacity: 0;
    -webkit-transform: translateX(146.20939px) translateY(44.48581px);
    -moz-transform: translateX(146.20939px) translateY(44.48581px);
    -ms-transform: translateX(146.20939px) translateY(44.48581px);
    -o-transform: translateX(146.20939px) translateY(44.48581px);
}

#Screen2 {
    position: absolute;
    opacity: 0;
    -webkit-transform: translateX(146.33585px) translateY(38.07031px);
    -moz-transform: translateX(146.33585px) translateY(38.07031px);
    -ms-transform: translateX(146.33585px) translateY(38.07031px);
    -o-transform: translateX(146.33585px) translateY(38.07031px);
}
#Screen1 {
    position: absolute;
    opacity: 0;
    -webkit-transform: translateX(118.53906px) translateY(54.19531px) scaleX(0.5) scaleY(0.5);
    -moz-transform: translateX(118.53906px) translateY(54.19531px) scaleX(0.5) scaleY(0.5);
    -ms-transform: translateX(118.53906px) translateY(54.19531px) scaleX(0.5) scaleY(0.5);
    -o-transform: translateX(118.53906px) translateY(54.19531px) scaleX(0.5) scaleY(0.5);
}
#Logo {
    position: absolute;
    opacity: 0;
    -webkit-transform: translateX(169px) translateY(180px);
    -moz-transform: translateX(169px) translateY(180px);
    -ms-transform: translateX(169px) translateY(180px);
    -o-transform: translateX(169px) translateY(180px);
}

.default_end_Default_Timeline #stage {
    width: 600px;
}
.default_end_Default_Timeline #Slogan {
    color: rgba(187,187,187,1.00);
    opacity: 1;
    font-size: 20px;
    -webkit-transform: translateX(87px) translateY(331px);
    -moz-transform: translateX(87px) translateY(331px);
    -ms-transform: translateX(87px) translateY(331px);
    -o-transform: translateX(87px) translateY(331px);
}
.default_end_Default_Timeline #Screen6 {
    opacity: 1;
    -webkit-transform: translateX(1.15466px) translateY(60.49713px);
    -moz-transform: translateX(1.15466px) translateY(60.49713px);
    -ms-transform: translateX(1.15466px) translateY(60.49713px);
    -o-transform: translateX(1.15466px) translateY(60.49713px);
}
.default_end_Default_Timeline #Screen5 {
    opacity: 1;
    -webkit-transform: translateX(40.6231px) translateY(56.92033px);
    -moz-transform: translateX(40.6231px) translateY(56.92033px);
    -ms-transform: translateX(40.6231px) translateY(56.92033px);
    -o-transform: translateX(40.6231px) translateY(56.92033px);
}
.default_end_Default_Timeline #Screen4 {
    opacity: 1;
    -webkit-transform: translateX(69.05191px) translateY(49.28641px);
    -moz-transform: translateX(69.05191px) translateY(49.28641px);
    -ms-transform: translateX(69.05191px) translateY(49.28641px);
    -o-transform: translateX(69.05191px) translateY(49.28641px);
}
.default_end_Default_Timeline #Screen3 {
    opacity: 1;
    -webkit-transform: translateX(114.53893px) translateY(44.48581px);
    -moz-transform: translateX(114.53893px) translateY(44.48581px);
    -ms-transform: translateX(114.53893px) translateY(44.48581px);
    -o-transform: translateX(114.53893px) translateY(44.48581px);
}
.default_end_Default_Timeline #Screen2 {
    opacity: 1;
    -webkit-transform: translateX(150.99937px) translateY(38.07031px);
    -moz-transform: translateX(150.99937px) translateY(38.07031px);
    -ms-transform: translateX(150.99937px) translateY(38.07031px);
    -o-transform: translateX(150.99937px) translateY(38.07031px);
}
.default_end_Default_Timeline #Screen1 {
    opacity: 1;
    -webkit-transform: translateX(206.96318px) translateY(33.19531px) scaleX(1) scaleY(1);
    -moz-transform: translateX(206.96318px) translateY(33.19531px) scaleX(1) scaleY(1);
    -ms-transform: translateX(206.96318px) translateY(33.19531px) scaleX(1) scaleY(1);
    -o-transform: translateX(206.96318px) translateY(33.19531px) scaleX(1) scaleY(1);
}
.default_end_Default_Timeline #Logo {
    opacity: 1;
    -webkit-transform: translateX(169px) translateY(296.16406px);
    -moz-transform: translateX(169px) translateY(296.16406px);
    -ms-transform: translateX(169px) translateY(296.16406px);
    -o-transform: translateX(169px) translateY(296.16406px);
}

 

So, after a bit of tweaking I have a Flash-like animated ad that includes searchable content with linked elements, alt tags, title tags, etc. To be fair, I did lay everything out in Adobe Edge to see how it would do.  Adobe does say that Edge will play nice with preexisting HTML files. However, part of the appeal for a product like Adobe Edge is to lay things out visually.

See the Example Image 
(will not work in some browsers like IE 8 and under, sorry not taking the time in this post to provide alternative content code)

Adobe Edge is already a great first step in the right direction toward an alternative for Flash animation and I can’t wait to see how this tool evolves. However Adobe does still have some work to do before this HTML5 tool is ready for primetime.  Edge is already great if you are looking to create HTML5 animated content that does not need to be searchable/accesible. If however, you would like it to be searchable, you will need to do a little work. If Adobe irons out some of the kinks before this product launches, I will certainly be buying it.

I recommend checking out Adobe Edge, now in preview when you get a chance.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - Tools
    Tagged | , , ,

    • Odt

      If you wanted to go a little further, you could remove all the repeated position and opacity rules and make three groupings (one for position, one for opacity:0, and one for opacity:1).

      • Rainey

        Good point! I was just happy to be able to dig in and change things the way I wanted them.

    • Gordy

      Has anybody tried Hippo Animator yet? It’s like adobe edge but it works in all browsers including iPhone and IE6. http://www.hippostudios.co.uk

      • Rainey

        Edge’s output, HTML5 and CSS3, works on iPhone too. Probably does not work on IE6, but I do not design for that browser anymore except by special request and extra cash ;)