Introducing Adobe Edge
Tutorial Details
- Difficulty: Basix
- Topic: Adobe Edge
- Screencast duration: 25 mins
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.
2. Animation
In this quick screencast we’re going to check out the timeline and get animating.
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.
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: [
],
}
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Pingback: Introducing Adobe Edge | Shadowtek | Hosting and Design Solutions