Keyframe Caddy Pro Support

CK_Blog_KeyframeCaddy_v01

Since launching Add-ons/tools in the Adobe Add-ons, we’ve been getting a flurry of emails from folks who have had trouble installing the software, learning how it works, and getting it to work flawlessly. While most are related to Adobe installation issues, we’ve been hard at work on improving the Keyframe Caddy Pro user experience. In doing so, there’s a new version in the Adobe Exchange that fixes the pesky “disappearing window” bug. We also created a series of handy materials—a tutorial video, a user guide with tips, tricks, and troubleshooting, as well as as sample Flash file so folks can use Keyframe Caddy with little to no setup. We hope the latest version and materials are useful for our current and future users, especially as we continue to refine our tools.

As always, if you have any questions, comments, or tips regarding any of our tools, Add-ons, or libraries, feel free to reach out to us at support@cloudkid.com.

Introducing PixiParticles

In the last few years, CloudKid has made a transition into the exciting (and admittedly sometimes frustrating) world that is HTML5 game development. While we don’t have a favorite framework, we’re big fans of Pixi.js. We’ve used this super-fast 2D renderer on Jessica’s Joyride, Gover’s Winter Games and Fizzy’s Food Truck.

One of the disadvantages of developing with this new platform is the surprising lack of tools for non-technical people. In the days of Flash publishing, if a designer wanted to move a text field 3 pixels to the right or an animator needed to add a little more breathing room for a settle, they could simply re-publish the source file. Not a problem.  Now, however, typically a programmer is needed to help integrate, implement or adjust–which requires time and patient programmers.

There aren’t a lot of visual tools available for Pixi.js (one wonderful exception is Spine) so we decided to make one! We’d like to introduce PixiParticles, our extensible, light-weight (a svelte 12KB!) particle emitter with online editor. PixiParticles is available through Bower (if you’re into that sort of thing), fork-able on Github and fully documented. We made PixiParticles with both artists and developers in mind and we hope you have fun playing with it.

We’re constantly trying to improve our tools so if you find issues with the editor or with the library, please let us know through Github. Both editor and library are MIT licensed.

Here are some live examples: rain, smoke, pixie dust, snow, flame and more.

Explosion

Star

Snow

Smoke

Sparks

Megaman

Apple Shakes Up iOS with Redesign

NewiOS

iOS, the heart and soul of Apple’s wildly popular iPhone and iPad, has looked basically the same since the phone first launched six years ago. We’ve been yearning for a change. Now we finally have one, and we couldn’t be more excited.

Meet iOS 7. We’re happy to see the departure of glossy icons and “skeuomorphic” textures (think the yellow lined paper in the Notes app or the green-felt table in Game Center). These designs seem dated and look bloated in comparison with the sleek hardware design of modern iOS devices. The new version uses “flat” graphics and thinner typefaces, making for a more streamlined look. We also love the bright new colors and the increased use of white. Simplicity and friendliness is a winning combination in our book, and iOS 7 nails it.

The new iOS looks flat, but it also utilizes depth. Translucent panels slide over your screen, giving the impression that multiple flat layers are sitting on top of one another. The display even changes as you move your device to create depth effects. We were concerned that a flatter iOS might end up looking like a knock-off of Microsoft’s new tile-based “Metro” design, but this layered style looks unique and adds a feeling of orientation within the various screens. Cool!

And, of course, big changes to iOS mean big changes to its ecosystem of apps. We think developers will need to match Apple’s refined functionality and ease of use in addition to its new aesthetic. That may be a liability for some, but we see this as an incredible opportunity for creativity. Utility apps as well as games could use the new layered style to change the ways we interact with content.

The bottom line: iOS 7 looks like a beautiful and modern refresh of the popular mobile operating system. It seems familiar yet new, stylish yet unique. And it holds promising opportunities for innovation from app developers. Great job, Apple; we can’t wait to get our hands on it this fall!

Keyframe Caddy Update

It’s been almost two years since we released (for free) our in-house Flash extension called Keyframe Caddy. Since its release, we’ve heard from many animators and Flash studios that they love our keyframe animation tool. Today we’re releasing version 1.1.0 for Flash CS3+. The most significant change is that we added a scroll-bar to the layout as well as fixed some pesky bugs. You can download here.

Seamless Audio Loops with Flash

Most of the games that we create use looping audio, either for music or as a sound effect. One of the limitations of the MP3 audio format is that it adds a fraction of a second of silence at the beginning of a file. For most audio this is tolerable and imperceptible, however, if you need a perfect loop for something like music, then you’re going to have to find a better solution.

MP3 Waveform

We looked at all the alternatives that searching Google had to offer (i.e., special exporting software, fancy AS3 runtime code, etc) and after all this it seemed the best solution was also the easiest. If you import raw audio such as a WAV or AIF file into Flash Professional and embed the sound into your SWF (either as a timeline loop or with an exported class), it will not add the previously mentioned bit of silence. We call these undocumented Flash gems, “Flash magic”.

This is good news except that it’s a pain to manually import each audio file into an FLA and then export if all you need is a SWF. We created a Flash plugin (also called extensions or commands), which automates this process. Select a raw audio file, choose the bit rate and file name, then presto, SWF created. No need to save an intermediary FLA or fuddle with publish settings. The SWF file that’s been created is special in that it only contains a single Sound object with a class name that matches the file name. For instance, if the SWF file name is “gameplayMusic.swf” there would be a single AS3 Sound object with a class name “gameplayMusic” inside the SWF. We can then create a special loading utility for these types of sounds (see AS3 code below).

The only downside to this method is that you can no longer stream in the audio, which would save on up-front loading. Instead, the entire SWF needs to be preloaded before you can have access to the Sound object.

The Generate Audio Loop tool can be downloaded from the secret Tools section of our website.

Here is a sample utility for loading the Sound object.
[cc lang=”actionscript3″]package com.cloudkid.util
{
import flash.media.Sound;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;

/**
* Utilities for dealing with sounds
* @author Matt Moore
*/
public class SoundUtils
{
/**
* Load a sound for an external SWF
* @param The path to the SWF file to load
* @param The callback when the sound has been loaded
* @param The name of the sound class (defaults to filename without “.swf”)
*/
public static function loadExternalSound(url:String, callback:Function, className:String=null): void
{
if (className == null)
{
className = url.substring(
url.lastIndexOf(“/”),
url.lastIndexOf(“.”)
);
}
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(
Event.COMPLETE,
function(ev:Event): void
{
var s:Sound;
try
{
var clazz:Class = loader.contentLoaderInfo.applicationDomain.getDefinition(className) as Class;
s = new clazz;
}
catch(e:Error)
{
trace(“Error: class doesn’t exist ‘” + className + “‘ in ‘” + url + “‘”);
}
callback(s);
}
);
loader.load(new URLRequest(url));
}
}
}
[/cc]

And a sample implementation:
[cc lang=”actionscript3″]function onSoundLoaded(sound:Sound): void
{
if (sound == null)
{
trace(“Unable to load sound”);
return;
}
sound.play();
}
SoundUtils.loadExternalSound(“drive.swf”, onSoundLoaded);[/cc]

Keyframe Caddy

Today we are releasing one of our in-house Flash production tools called Keyframe Caddy. Our animators use this tool to assist in doing some of the more menial animation tasks like lip-syncing. We did a little demonstration video as well as made the tool free for download from our website. Click here for more information.