David Deraedt

To animate DOM elements in a document, you've got two options which are different enough to generate a lot of confusion among developers like myself. Those options are:

• Update a CSS property at a regular interval using javascript.
• Use CSS3 transitions and animations.

For simple little transitions in a web document, things are not that complex. But when your focus is heavy 2D / 2.5D animations for the sake of the animation itself, it gets more tricky.

I spent some time looking at both techniques, their limits, and possible solutions to address them. Let's take a look.

Script-based animation

The first option should be familiar to anyone having already worked with Flash, for instance. Here, the idea is simply to add a value to the CSS property of the animated elements frequently enough to create the illusion of motion.

I'm probably stating the obvious by saying that with the explosion of pixel density in modern screens, now is probably a good time to reconsider the use of vector graphics in the browser.

We've known for a long time that we now live in a multiscreen world where the various screen sizes can be a challenge. But more recently we've witnessed a sudden growth in resolution across all physical screen sizes, with DPI values now typically ranging from 160 to 320+ DPI, which only make things worse.

By now, you're probably aware of the fact that Flash CS6 includes several ways to export MovieClips to EaselJS SpriteSheets, for use with the CreateJS canvas-focused game library. This is great if you work with vector based assets. If this is your focus, I recently blogged about how you can improve the generated code to adapt to your needs.

So, now that you've installed some extensions for Brackets, what about building one?

Since Brackets is built using web standards, this is far easier than you imagine. It's also a very rewarding experience, one you can quickly get hooked to.

Using an extension template

A typical way to begin with extension development is to just copy and paste an existing extension relatively close to what you want to achieve. This is a valid way to get started, but keep in mind that not all extensions are up to date and do not necessary showcase the latest best practices. Also, some can be really hard to read, especially if you're new to extension development.

I tend to think that fonts are as important in video games as they are for print or for web design. However, monochromatic fonts tend to look absolutely horrendous in games. As a player, I much prefer reading colored font which are both more readable and more consistent with the rest of the game aesthetics.

Oddly enough, Bitmap Fonts are only rarely supported out of the box in most game libraries, and CreateJS is no exception. I'm not sure if this is because the implementation of such a feature is considered trivial or for any other (valid) reason.

Following a thread on google+ created by the famous MrDoob, I thought it could be useful to share some thoughts regarding the file size on Edge Animate projects (aka compositions).

Understanding a composition file stucture

If you're not familiar with the file structure of an Edge Animate project, I strongly encourage you to read the first part of my Edge Animate for web developer series.

But as a reminder, here's roughly what it looks like: (assuming your page was named index).

Didn't catch the live stream? Don't want to read super long official announcements?

Here's the short story. We announced:

• CSS Filter lab an experimental showcase for our contributions on CSS filters

• Adobe Edge Animate, the animation tool for the web, is now officially released and temporarly available for free

• Adobe Edge Reflow, a new tool for responsive webdesign. Preview later this year.

I've been using Brackets (the open source foundation for Edge Code) for some months now, and there's a couple of extensions I simply couldn't live without. Note that, if you're using Brackets and you don't use extensions, you're kind of missing the point altogether.

The architecture of the editor is based on the principle that most features should be implemented as extensions. This is a great way to both keep its core as simple as possible and to ensure it's really deeply customizable, and can eventually fit every web developer's needs.

Brackets comes with some extensions by default, such as Quick Open, Quick Edit and HTML Code Hinting. But the editor still might look kind of limited when considered out-of-box.

As any game developer should know, having an efficient designer / developer workflow is absolutely critical to any project. With CreateJS games, a big part of this workflow is about exporting spritesheets to be used for sprite animation. This step is far from trivial, which might be a bit surprising to some, espcially those who come from the flash development crowd.

This post is not intended to be a CreateJS beginner's guide. Here, we'll take a detailed look at how tools such as Flash CS6 generate code to be used for CreateJS game workflows, and, more importantly, how we can improve it, or create our own.

This is a follow-up to my previous post, Edge Animate for developers, in which we covered the technical foundation of an Edge animate composition. In this post, we'll take a closer look at the scripting features of Edge Animate with the basics of Actions and symbol manipulation.

Actions scope

Edge Animate users create code snippets called Actions to be executed in response to some events. Events can be dispacthed by an DOM element (e.g. click), a symbol (e.g. creationComplete). Some events are dispatched by the timeline when the playhead hits a certain point. Those events are called Triggers.