Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Introducing Adobe Edge

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Edge is the latest design tool to hit Adobe Labs. It allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

During this introduction we're going to make acquaintance with the interface, examine the timeline and apply some animation to a real project.


1. User Interface

We'll begin by getting to know the application interface.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


2. Animation

In this quick screencast we're going to check out the timeline and get animating.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


3. Getting Real

During this third exercise we're going to take what we've learned in the previous two videos and make it real.

Don't like ads? Subscribe to Webdesigntuts+ screencasts via iTunes!


Output

What exactly does Adobe Edge generate in terms of files and code? Well, a small Edge project churns out a folder which looks something like this:

You can clearly see the Edge project file plus all the deployment content. There's an html file with its accompanying css and js files, then a whole load of assets including jQuery, some js tools and whatever imports you made in the project.

In terms of the code generated, check out the source for the base html. Couldn't be simpler!

<!DOCTYPE html>
<html>
<head>
	<title>test</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="edge_test_edge.js"></script>
    <link rel="stylesheet" href="edge_test_edge.css"/>
<!--Adobe Edge Runtime End-->

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

The content is all added to the stage through the javascript file and manipulated thereafter.

content: {
      dom: [
        {
            id:'Rectangle1',
            type:'rect',
            rect:[88,82,119,106],
            fill:['rgba(192,192,192,1)'],
            stroke:[0,"rgba(0,0,0,1)","none"],
        },
        {
            id:'Image1',
            type:'image',
            rect:[0,0,755,600],
            fill:['rgba(0,0,0,0)','images/Image.png'],
        },
        {
            id:'Text1',
            type:'text',
            rect:[155,77,0,0],
            text:"bit of text",
            font:["Arial Black, Gadget, sans-serif",[24,""],"rgba(0,0,0,1)","normal","none",""],
        },
      ],
      symbolInstances: [
      ],
   }
Advertisement