Amongst the big announcements last week, you may not have noticed that the Adobe Edge Web Fonts got a huge upgrade too! It’s now easier than ever to browse web fonts and include them into your own HTML experiences. All for free, with no Creative Cloud membership required!
Adobe Edge Web Fonts
Check out the video below to see the new interface in action:
Also shown in the video is Adobe Edge Code for live editing/previewing HTML in the browser.
Enjoy!
If you haven’t already heard of Adobe Edge Code or Brackets, it is a new HTML/CSS/JS code editor that enables a rapid development cycle by connecting directly to your browser for automatic real-time updates to the HTML content running inside the browser. This promotes rapid development, and allows you to focus on writing your code rather than worrying about all the steps required to switch between your editor and browser and step through development and debugging iterations.
In most contexts we talk about the live HTML/JS/CSS development perspective on the client side, but I’d also like to highlight that Adobe Edge Code and/or Brackets can be used to rapidly develop dynamic server-side web code too. Check out the screencast below to see live editing of dynamically generated HTML content using the latest Brackets release (Sprint 23).
This streamlined workflow can be incredibly powerful, especially for rapid prototyping scenarios. You just focus on writing code and creating an experience. Let the edtior offload the work of updating the live content in your browser to keep you focused on the task at hand.
To enable the Edge Code/Brackets preview on a server, just go into “File->Project Settings”, and then specify a “Preview Base URL” string. The preview base URL will be prefixed to the name of the file that you are editing, and will be used for the browser’s URL in the live connection. So, if you are editing “index.html” with a preview base URL of http://tricedesigns.com, brackets will launch the live connection with the URL “http://tricedesigns.com/index.html”.
However, keep in mind that Edge Code & Brackets’ primary use case is editing HTML/JS/CSS, not server-side languages. The editor won’t have code hinting for your server-side code, unless you are using an extension that enables code hinting (with the exception of NodeJS because JavaScript is supported). The current build of Brackets also changes the live preview URL when you change files. So, if you are editing “index.cfm”, and switch to “content.cfm” in the editor, the live preview will follow, and switch to “http://{urlprefix}/content.cfm”. If the files are intended to be separate, this works great. However, if content.cfm isn’t a standalone file, the live preview won’t be as valuable. Meaning: if content.cfm is actually an included file inside of index.cfm, the live preview of content.cfm may not work the way you want it to. In either case, this can still be a very valuable tool with rapid prototyping.
Speaking of extensions… Edge Code/Brackets is built with an extensible plugin architecture. Since the editor itself and all of the extensions are written with HTML/JS, you can easily extend and customize the tool to add any functionality that you want.
if you’re wondering about the difference between the names Adobe Edge Code and Brackets, Adobe Edge Code is Adobe’s distribution of the Brackets editor. Adobe Edge Code has scheduled releases, and includes useful extensions and tie-ins to other Adobe services (for example, Adobe Web Fonts and more). Brackets is the open source project for the core editor itself. Brackets is on a 2-3 week sprint cycle, and is rapidly evolving. Essentially, Brackets is the “engine” that powers Adobe Edge Code.
I chose a simple ColdFusion demonstration because I already had an existing code sample I could reuse, however this will work with PHP, NodeJS, or other server-side scripting libraries. The latest builds of Brackets even have NodeJS built directly into it.
The code that I used in this example is available as a gist for download. This was based on my existing US Census Browser sample PhoneGap application.
Enjoy!
As I mentioned in my last post, I’ve been working a lot lately with Adobe Edge Animate, Adobe InDesign, and Adobe DPS. Here’s another post on that same subject.
Another request that I have gotten from some of our DPS customers is that they’d like to be able to implement gestures inside of the Edge Animate compositions that they are building for DPS publications. This includes double-tap gestures, swipe gestures, etc… Out of the box, these gestures aren’t supported, but you can add them to any Edge Animate composition without too great of an effort.
Below is a quick video showing Edge Animate Compositions that are taking advantage of both double-tap and swipe gestures. Note: I intended these to be used inside of DPS, but I show them in Safari on iOS. These gestures override the default mobile browser behaviors.
As I mentioned above, this isn’t something that is supported out of the box, but it is possible to add gesture features manually.
The links below are for the basic examples that I put in the video. Both should work in desktop and mobile browsers:
For the double tap example, just perform a double tap/click gesture anywhere on the stage (the image area), and the animation will start again from the beginning. For the swipe gesture, just perform a horizontal swipe in either direction with either your finger, or the mouse.
I leveraged the hammer.js JavaScript library to handle gesture detection since these gestures aren’t supported by default. Hammer.js also enables other gestures, like long taps, pinch, rotate, etc… However, I’m only showing double tap and swipe. You can read more about hammer.js using the following links:
I used this exact setup procedure in both the double-tap and swipe examples.
To include this library, I first downloaded the hammer.js file, and saved it inside of the “edge_includes” folder.
Next, you have to disable the web view/browser default double tap behavior, which is to zoom in when double tapped. You can disable the zoom on double tap by adding a viewport metadata tag inside of the Edge Animate project’s html file. Open your project’s .html file (in this case “DoubleTap.html”, and add the following line to the <head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Example:
Next, we have to add the code inside of the Edge Animate composition to enable the gesture behavior. The first thing you have to do is include the hammer.js library. In this case, I wanted to add the gestures to the composition’s stage, instead of a particular element. So, right-click on the stage in the Edge Animate Editor, then select the “Open Actions for Stage” menu option.
This will open the actions for the Stage instance. Next, click on the “+” icon and select “creationcomplete”. This will create a function that gets invoked once the Stage instance has been created at runtime.
In that function, first we need to import the hammer.js library. Edge Animate compositions include the yepnope.js library, which is originally intended to detect if a browser includes a specific piece of functionality. If not, then include a JS library so substitute that missing feature. In this case, I am passing it a blank test to force it to include the hammer.js library. The following function forces loading of the hammer.js library. Once the library has been loaded into memory, it triggers the “init” function:
In the init function, we grab a reference to the stage’s element (div), then use hammer.js to add our gesture event handlers:
Now, we need to start looking at the individual examples…
In the double tap example, we have a simple timeline animation that plays sequentially. At the end of the sequence the animation is stopped by a simple sym.stop() function call. Here’s a quick preview of the setup in Edge Animate:
To add the double tap gesture, all you have to do is add a hammer.js event for “doubletap”. In that event handler, we’re just calling sym.play(0), which restarts playback from the beginning of the composition. The full code for the creationcomplete event is shown below. This is all that is needed to add the double-tap gesture to the composition stage instance:
yepnope({
nope:['edge_includes/hammer.js'] ,
complete: init
});
function init (){
var element = sym.element[0];
var hammer = Hammer(element);
hammer.on("doubletap", function(event) {
sym.play(0);
});
}
In the swipe gestures example, we have a simple timeline animation that plays sequentially. However, at the end of each slide transition, playback is stopped by a simple sym.stop() function call. Whenever we perform a swipe action, we’re either just playing forward, or playing in reverse until the next slide animation stops. Here’s a quick preview of the setup in Edge Animate, note the stop points highlighted by the arrows:
To add the swipe gestures, all you have to do is add a hammer.js event for “swipeleft” or “swiperight”. In those event handlers, we’re just calling sym.play() or sym.playReverse(), depending whether it was a left or right swipe. These play actions progress to the next animation sequence. The full code for the creationcomplete event is shown below. This is all that is needed to add the swipe gesture to the composition stage instance:
yepnope({
nope:['edge_includes/hammer.js'] ,
complete: init
});
function init (){
var element = sym.element[0];
var hammer = Hammer(element);
hammer.on("swipeleft", function(event) {
sym.play();
});
hammer.on("swiperight", function(event) {
sym.playReverse();
});
}
With the swipe gestures, you can get some drag event conflicts on mobile devices. If you run into this and you do not want the page to scroll, the scroll action can be prevented by capturing the touchstart event, and canceling the default behavior. I didn’t add this, just because I wanted to keep this example very simple.
Full source for each example can be downloaded from the links below:
Artwork used in these examples is from the Adobe MAX web site. You should attend MAX, it’s going to be awesome.
When you publish the composition from Edge Animate, the “hammer.js” file won’t be copied automatically, so make sure that you copy it to your publish directory before distributing the composition.
Lately I’ve been spending a lot more time working with Adobe Edge Animate, Adobe InDesign, and Adobe DPS. If you aren’t familiar with these tools, Adobe Edge Animate is a tool that enables the creation of animated or interactive HTML content, Adobe InDesign is a desktop publishing design tool, and Adobe DPS is Adobe’s Digital Publishing Suite, which is used for creating digital publications from InDesign – everything from digital magazines, catalogs, corporate publications, education, and more.
In DPS publications, you can add interactive content inside of your digital publications by leveraging web content overlays. Web content overlays enable the embedding of HTML content directly inside of DPS pages.
So, you might be wondering, how does Edge Animate fall into this grouping? Well… From Edge Animate you can export compositions into a .oam package, which can be imported directly into InDesign for use with a web content overlay. You can read more about this process on Adobe Developer Connection.
I was recently asked by a customer “does Edge Animate support 3D transforms?”. Unfortunately, at this time 3D transforms are not supported in the timeline editor. However, you can add 3D transformations programmatically with JavaScript. Here are some examples showing how to integrate CSS3 3D transforms with Edge Animate compositions:
These can be great additions to the interactive experience, but I also wanted to share that you don’t always need 3D transforms to add dimensionality to an interactive experience. By leveraging 2D translation, scaling, and opacity you can easily create interactive experiences that have a feeling of depth.
Let’s take a look at a quick example. The image below is from screenshots of an Edge Animate Composition that I put together. On the left-hand side there is an anatomical illustration. On the right-hand side, that illustration has been broken out into separate layers, with emphasis placed on the topmost layer.
Edge Animate Composition With 2D Depth
Images borrowed from Ely Greenfield’s awesome FlexBook anatomy demo.
Now, let’s look at that animation in action. Just click the link below to preview this animation in a new window.
Just click or tap on the image to see an animation that transforms the illustration on the left to multi-layered cutaway on the right hand side.
So, while this animation doesn’t leverage any actual three dimensional elements, it leverages those 2D transforms to visually create a sense of depth. Here’s how it works:
Edge Animate – Anatomy Composition
This technique provides the illusion of three-dimensional depth, even though we aren’t actually performing any kind of translation, rotation, or deformation on a three dimensional coordinate system. AND this can be implemented completely with the timeline. So, you don’t have to be a programmer to add a dimensional feeling to you Edge Animate compositions. This effect was achieved simply by using the timeline editor and visual workspace.
You can preview this animation in a new window, or download the full source using the links below:
Enjoy!
Next week I’ll be representing Adobe at GDC 2013, and demonstrating how Adobe Creative Cloud, PhoneGap, and PhoneGap Build can be great tools for building casual gaming experiences. In preparation, I’ve been working on a gaming sample application that shows off the potential of HTML games packaged with PhoneGap.
…and now I’d like to introduce you to PhoneGap Legends. PhoneGap Legends is a fantasy/RPG themed demo that leverages HTML DOM animation techniques and targets webkit browsers. I was able to get some really outstanding performance out of this example, so be sure to check out the video and read the details below. The name “PhoneGap Legends” doesn’t mean anything; I just thought it sounded videogame-ish and appropriately fitting.
PhoneGap Legends
This game demo is an infinitely-scrolling top-view RPG themed game that is implemented entirely in HTML, CSS, and JavaScript. There is a scrolling background, enemy characters, HUD overlays, and of course, our “protagonist” hero – all that’s missing is a story, and general game mechanics like interacting with sprites.
Again, I was able to get some *really outstanding performance* out of this sample, so I wanted to share, complete with source code, which you’ll find further in this post (and I encourage you to share it too). Take a look at the video below to see the game in action on a variety of devices. Every single bit of this is rendered completely with HTML, CSS, and JavaScript – there are no native portions of the application.
Update 3/24: If you’d like to test this out on your own devices, you can now access it online at http://tricedesigns.com/portfolio/phonegap_legends/ However, it will still only work on webkit browsers (Chrome, Safari, Android, iOS, etc…), and is optimized for small-device screens. If you attempt to use this on a very large screen, you’ll probably see some sprite clipping.
Disclaimer: This sample app is by no means a complete game or complete game engine. I’ve implemented some techniques for achieving great performance within a PhoneGap application with game-themed content, but it still needs additional game mechanics. I also wrote this code in about 2 days – it needs some additional cleanup/optimization before use in a real-world game.
Full source code for this demo application is available on GitHub. This code is provided as-is: https://github.com/triceam/PhoneGap-Legends. I will be making a few updates over the next few days in preparation for GDC next week, but for the most part, it is stable.
The PhoneGap Legends application was built following the performance tips that I posted earlier this month. The game is built so that it uses a game loop based upon requestAnimationFrame to perform all UI updates. This gives it a scheduled interval that is in sequence with the browser’s redraw cycle.
In general, the DOM is as shallow as possible for achieving the desired experience. All “sprites”, or UI elements are basic DOM nodes with a fixed position and size. All DOM elements have an absolute position at 0,0 and leverage translate3d for their x/y placement. This is beneficial for 2 reasons: 1) It is hardware accelerated, and 2) there are very, very few reflow operations. Since all the elements are statically positioned and of a fixed size, browser reflow operations are at an extreme minimum.
The background is made up a series of tiles that are repeated during the walk/movement sequence:
Sprite Sheet for Background Tiles
In the CSS styles, each tile is 256×256 square, with a background style that is defined for each “type” of tile:
.tile{
width: 256px;
height:256px;
overflow: hidden;
position: absolute;
top:0px;
left:0px;
background-repeat: repeat;
background-clip:border-box;
}
.tile_0 { background: url('../images/background_tiles.png'); background-position: 0px 0px;}
.tile_1 { background: url('../images/background_tiles.png'); background-position: 256px 0px;}
.tile_2 { background: url('../images/background_tiles.png'); background-position: 512px 0px;}
.tile_3 { background: url('../images/background_tiles.png'); background-position: 0px 256px;}
.tile_4 { background: url('../images/background_tiles.png'); background-position: 256px 256px;}
The content displayed within each of the “sprite” DOM elements is applied using sprite sheets and regular CSS background styles. Each sprite sheet contains multiple images, the background for a node is set in CSS, and the position for each image is set using the “background-position” css style. For example, the walking animation for the hero character is applied just by changing the CSS style that is applied to the “hero” <div> element.
Sprite Sheet for Hero
There is a sequence of CSS styles that are used to define each state within the walking sequence:
.hero_0_0{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 0px;}
.hero_0_1{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 96px;}
.hero_0_2{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 192px;}
.hero_0_3{ background: url('../images/rpg_sprite_walk.png'); background-position:0px 288px;}
...
This game demo extensively uses translate3d for hardware accelerated composition. However, note that the 3d transforms are all applied to relatively small elements, and are not nested. All of the “textures” are well below the max texture size across all platforms (1024×1024), and since it uses sprite sheets and reusable CSS styles, there are relatively few images to load into memory or upload to the GPU.
The following Creative Commons assets were used in the creation of this sample app and the accompanying video:
Image – Grass Texture: http://opengameart.org/content/grass-with-moss
Image - Trees/Bushes: http://opengameart.org/content/lots-of-hyptosis-tiles-organized
Image - Main Character: http://opengameart.org/content/2d-rpg-character-walk-spritesheet
Image - Enemies: http://opengameart.org/content/rpg-enemies-11-dragons
Image - Compass Rose: http://en.wikipedia.org/wiki/File:Compass_rose_en_04p.svg
Font – Avalon Quest: http://www.ffonts.net/Avalon-Quest.font
Note: I used a free/open licensed font that could be embedded in the app for offline usage. This font was converted to a web-font package that can be embedded in the PhoneGap application using http://www.fontsquirrel.com/
Audio – Monster: http://www.freesound.org/people/Erdie/sounds/167890/
Audio – Music: http://www.freesound.org/people/rap2h/sounds/115261/
Again, in case you missed it above, Full source code for this demo application is available on github. This code is provided as-is: https://github.com/triceam/PhoneGap-Legends.