Moving to a New Website

Hi folks,

My new blog can be found at http://www.dehats.com/blog/ 

This one stays at the same place and will be kept for reference.

Anatomy of a Creative Cloud Extension

alt text

In the first part of this series, we've seen that extensions are zipped packages which can include many kinds of files installed in the user's system through the Extension Manager application.

Here, we'll take a closer look at how installed extensions work at runtime. For the sake of simplification, we'll focus on extensions containing a script and / or a panel.

Please keep in mind that we're only talking about applications supporting the common extension infrastructure for creative applications, which is not the case of all CC applications. For instance, Edge Code, being based on Brackets, has its own extensibility model.

Overview of Adobe Creative Tools Extensibility

Adobe Creative Tools Extensibility

In those times of important changes, I think it's a good idea to take a moment and think about the present and future of extensibility in Adobe creative tools.

This whole extensibility story has always been a bit confusing, so let's start with the big picture.

What is an extension anyway?

Extensions contents

First, keep in mind that Extensibility refers to all the elements you can use to augment the capabilities of your softwares. It should not be confused with Extensions, which, as we'll see, are technically just a package including those elements.

As it turns out, there are many kinds of things you can add to your softwares, including:

A closer look at animation techniques for the web

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.

The vector advantage in a retina world

alt text

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.

Generating CreateJS SpriteSheets from Photoshop

alt text

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.

Tutorial: Creating Brackets Extensions

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.

Bitmap Font Support for CreateJS

SNK Metal Slug

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.

Some thoughts on Edge Animate projects file size

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). alt text

Create the Web 30 seconds summary

alt text

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

Here's the short story. We announced: