Adobe Edge has released Preview 4 with a ton of new features that were requested by fans of the software. If you haven’t heard of Edge yet, this is Adobe’s tool-in-development that allows website designers and developers to create animations using HTML5, CSS3 and JavaScript.
Edge itself is WYSIWYG software, so you don’t have to know how to code to create animations and projects. If you are a developer, then Edge creates files that you can open and edit on your own.
Now in Preview 4, Edge is already a powerful tool with much functionality. As the author for Adobe Edge for Dummies, I have been in a complete deep dive on the software, documenting its robust features and presentation abilities. With the release of Edge Preview 4, I now have a few more chapters of content to write.
How Edge Animates Text Translation From Black to Red
For this article, I thought I’d present some example code that shows how Edge animates the transition of text going from black to red. Using the software, I was able to create this effect in a matter of seconds. Literally. I don’t think it took me more than a minute to open Edge, create a new project, draw a text box, type in a couple of words, and then click a few items to create an effect in which the text went from black to red. As a result, Edge created several files for me, including a JavaScript file (and several compressed .js files), an HTML file written in HTML5 and a CSS file. Surprisingly enough, the CSS file remained blank. While I am not a developer by trade (I’m a writer who happens to know some code) I’m assuming Edge was able to transition the color of the text all through JavaScript. If the CSS file was populated, it would have been in CSS3.
The rest of this article will contain three sets of code. The first set of code is the JavaScript that Edge created to transition black text to red text over the period of two seconds. The second set of code is another JavaScript file with what Edge refers to as Actions. The last block of code is the HTML5 file that Edge creates for you when you save your project. Within the HTML5 code, you will notice there are references to several compressed .js files, which will not be presented here in the interest of saving space.
While Adobe Edge does not have an official release date, it is expected to launch this summer, however it is still in Preview mode and not even in beta. You can download the most current version of Edge from here.
The JavaScript Code
/**
* Adobe Edge: symbol definitions
*/
(function($, Edge, compId){
var symbols = {
"stage": {
version: "0.1.3",
baseState: "Base State",
initialState: "Base State",
content: {
dom: [
{
id:'Text',
type:'text',
tag:'div',
rect:[160,96,407,222],
text:"Black to Red",
font:["Arial Black, Gadget, sans-serif",[24,""],"rgba(0,0,0,1)","normal","none",""]
}],
symbolInstances: [
]
},
states: {
"Base State": {
"${_stage}": [
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "width", '900px'],
["style", "height", '500px'],
["style", "overflow", 'hidden']
],
"${_Text}": [
["color", "color", 'rgba(0,0,0,1)'],
["transform", "translateY", '55px'],
["transform", "translateX", '74px']
]
}
},
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 2000,
labels: {
},
timeline: [
{ id: "eid3", tween: [ "color", "${_Text}", "color", 'rgba(248,14,14,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(0,0,0,1)'}], position: 0, duration: 2000 },
{ id: "eid1", tween: [ "transform", "${_Text}", "translateX", '74px', { fromValue: '74px'}], position: 0, duration: 0 },
{ id: "eid2", tween: [ "transform", "${_Text}", "translateY", '55px', { fromValue: '55px'}], position: 0, duration: 0 }]
}
}
}};
var comp;
Edge.registerCompositionDefn(compId, symbols);
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
comp = new Edge.Composition(compId, {stage: "." + compId}, {});
/**
* Adobe Edge Timeline Launch
*/
comp.ready(function() {
comp.play();
});
});
})(jQuery, jQuery.Edge, "EDGE-11091858");
The Actions Code
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
//Edge symbol: 'stage'
(function(symbolName) {
})("stage");
//Edge symbol end:'stage'
})(jQuery, jQuery.Edge, "EDGE-11091858");
The HTML5Code
<!DOCTYPE html> <html> <head> <title>Untitled</title> <!--Adobe Edge Runtime--> <script type="text/javascript" src="edge_includes/jquery-1.6.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.3.min.js"></script> <script type="text/javascript" src="edge_includes/edge.symbol.0.1.3.min.js"></script> <script type="text/javascript" charset="utf-8" src="black%20to%20red_edge.js"></script> <script type="text/javascript" charset="utf-8" src="black%20to%20red_edgeActions.js"></script> <link rel="stylesheet" href="black%20to%20red_edge.css" /> <!--Adobe Edge Runtime End--> </head><body style="margin:0;padding:0;"> <div id="stage" class="EDGE-11091858"> </div> </body> </html>
