Advertisement
Applications and Tools

Introducing Adobe Edge

by

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? Download the video, or 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? Download the video, or 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? Download the video, or 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: [
      ],
   }
Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Code
    PhoneGap
    PhoneGap: Build a Feed Reader - Project StructurePhonegap feed reader@2x
    Although not specifically created to work together, jQuery Mobile and Cordova (also known as PhoneGap) are a very powerful duo to create hybrid, mobile apps. This series will teach you how to develop a feed reader using web technologies and these two frameworks. Over the course of this series, you'll also become familiar with the Cordova Connection and Storage Core Plugins and the Google Feed API.Read More…
  • Web Design
    General
    Making Web Icons SmarterIconic retina
    This article is the first in a three-part series showing the new approaches to iconography Iconic will be delivering. If you like what you see in this article, please consider backing Iconic on Kickstarter.Read More…
  • Code
    JavaScript & AJAX
    Integrating a JS Build Process Into MSBuild in Visual Studio 2012 ExpressMsbuild retina preview
    I've been working with ASP and ASP.NET for about ten years now, starting with ASP classic and settling on .NET 2.0 as my favorite. My new year resolution this year (2013) was to upgrade my .NET work to .NET 4.0 using Visual Studio 2012 Express and really get to grips with MSBuild, so that I can concatenate and minify my JavaScript files as part of the normal build process of a .NET project, in Visual Studio. My first love is to use Ant in NetBeans with a PHP or JSP platform for this kind of work, but my company's main website runs on a .NET platform and it's time to update it, so I decided to bite the bullet and dive back in to some serious study of creating a fully integrated build process using MSBuild. This tutorial will show you how to edit your Visual Studio 2012 Express project file to include your own separate build file which will perform the now widely familiar process of concatenating and minifying a set of JavaScript modules into one file ready for deployment. Read More…