Oftentimes, I like to trace pieces of data as I’m programming just to make sure everything is on track. When you’re trying to trace data using E4X (XML in Actionscript 3), don’t forget the toXMLString() function. In many cases, you won’t see anything if you forget to call this function. Your code will see the data just fine, but you might not think it’s working and spend time trying to diagnose a non-existent problem.

trace(xml.children()[0]) //empty trace
trace(xml.children()[0].toXMLString()) //now we see it!

Careful with this one. It’s easy to miss if you’re accustomed to Actionscript 1 or 2.

stage.width will return the width of the content on the stage and ignore any empty pixels around the edges. So if you only have a 100 px wide rectangle on stage, your stage.width will be 100.

stage.stageWidth will give you the size of the stage, more like Stage.width in Actionscript 2. Use stage.stageWidth if you’re trying to position elements relative to the stage.

Same goes for stage.height and stage.stageHeight.

Here’s a quote from an email I sent to Chris Georgenes and David Stiller on 9/29/08 about an extension idea that I had using the new motion tweens in Flash CS4 (before I’d even used the application):

Given that the new motion tween creates a bezier path, I’m guessing that we’ll have access to creating such a path with JSFL. Which led me to think about creating that path in real-time, similar to the real-time drawing that I’d seen from ScribbleBot on Chris’s blog. Instead of scribbling a line in real-time, I’d be sketching a motion path. There would be a variable to determine “smoothness” so that it doesn’t create an unmananageable amount of new motion keyframes. And it could probably be done with a custom tool rather than a panel, so that the sketching could be done directly on the stage.

That also leads me to wonder if there’s a way to record the armature animation in real-time and convert it to a motion tween, similar to the feature that already exists in After Effects CS3.

I know, I’m a nerd. The first idea there became MotionSketch. I haven’t yet found a way to accomplish the second idea with the armature, but I have a few ideas.

Prior to the release of Flash CS4, I had gotten a little hooked on creating Flash extensions. It’s quite easy to create a classic motion tween with JSFL (Flash Javascript), you can simply make the following call: timeline.createMotionTween(). It was likely that createMotionTween() would remain for legacy support even though the name of the tween had changed from “motion” to “classic.” I’d seen all of the great new motion features demonstrated online, and I expected there might be an equivalent call for a new motion tween. When Lee Brimelow linked to the CS4 documentation, I went right to the Extending Flash section to see what had been added. I didn’t see any additions for the motion features, but I had also previously seen Lee’s post on Flash Camp in San Francisco. Fortunately, I live close to San Francisco and I decided to head over try out the application early, and maybe get a chance to talk with some of the Flash team about any undocumented features.

While at Flash Camp, I spoke with Richard Galvan and he directed me to John Mayhew, the engineer behind the new motion model in Flash. John was very affable and willing to follow up with me, but he didn’t know of any undocumented features offhand. Unfortunately, adding features to the JSFL API is usually somewhat of an afterthought because so much of the development time is spent on the new features themselves. I had a few ideas to use the new 3D features while at Flash Camp as well, but they were similarly left out of the JSFL API.

So I let those ideas go for awhile and focused on a different extension as my Flash Camp project. A few weeks later, I got a little antsy and I starting digging around in the Flash configuration directory for clues. I noticed two files in the Javascript directory named MotionXML.jsfl and MotionClipboard.xml. I started looking around in the JSFL file for undocumented commands that I could use, but to little avail. I think I even put some trace calls into the JSFL to spit out info when copying motion from the Flash IDE. I noticed that even though copying and pasting a new motion tween appeared to work the same way in the Flash interface as copying and pasting a classic tween, a new motion tween was not triggering the calls in the JSFL file. Looking at the XML file, I found that even though copying a motion tween wasn’t using the same JSFL calls, it was saving XML to the same file…just different XML. The classic tweens were generating XML with a root tag of <Motion> and the new tweens were generating a root tag of <AnimationCore>.

Flash seemed to be able to discern which type of motion it was copying or pasting and acting accordingly. So it occurred to me that I could grab the data from the motion clipboard and alter it before pasting it back. Additionally, if I wanted data from an existing tween, I could run a Copy Motion command, available to JSFL as of Flash CS3 thanks to Robert Penner’s Copy Motion feature, then go about altering and pasting. These are the extensions that I’ve created thus far using that very technique:

• EaseCaddy
• MotionSketch
• MotionBlur

Below is a rundown of the steps I used in the extensions mentioned above. This technique can be used in lieu of the non-existent timeline.createMotionObjectTween() command. I refer to this as a “hack” because it’s an unsupported method, but given the complexity of what can be created with this new motion model, editing the XML is actually a fairly efficient way to go about creating/editing a tween. If the XML is not properly formed, it can cause Flash to crash when you try to paste the motion, or it can create some funky bugs in the Motion Editor. Be sure to test your code thoroughly before releasing anything for public consumption. The language is JSFL (used to automate and manipulate the Flash authoring environment). There’s a link to documentation for the AnimationCore XML listed in step 3.

(more…)

If you’ve opened Extension Manager CS4, you might have noticed there’s a longer list of products available than there have been in previous versions.

You can now package Illustrator, InDesign, Photoshop, InCopy, and Bridge scripts and SWF panels (yes, most of these apps can have SWF panels now!) as Extension Manager packages. Flash, Fireworks, and Dreamweaver have worked with Extension Manager for years (since they all used to be Macromedia products). Extension Manager comes free with any Adobe CS4 application, so CS4 users will already have it installed. So far, I haven’t noticed Adobe making a big deal about this, but this is a great new capability for Adobe users and developers.

(more…)

A while back, someone tipped my off to the Activity Window in Safari. This window is fantastic if you doing Flash development and need to debug on a live website. It will show you any images, videos, XML files, or anything else that’s getting loaded into your page.

I’m a Firefox user, so I went looking for an add-on that would do the same thing in Firefox. While it’s not quite as organized (i.e., it isn’t structured in a tree menu like the Activity Window), the “generate” tab of livehttpheaders is a pretty close substitution.

Originally found on What Do I Know.

UPDATE:  As Tim notes below, Firebug also has this capability. It’s under the ‘net’ section of the Firebug window. You have to choose to enable this feature before you see anything.

Even though the original Adobe Creative Suite applications (Photoshop, Illustrator, InDesign) and the original Macromedia Studio applications (Flash, Fireworks, Dreamweaver) don’t speak the same language, they’re both versions of javascript. You can send code from Extendscript (used in PS, AI, ID) as a string to another Adobe application’s native scripting language, like Flash’s JSFL scripting language. The process of creating these strings is much like sending JSFL from Actionscript, long code strings have to be created. String assignments don’t take kindly to hard returns, so to make this code readable, the string containing the script can be broken into lines by appending using the += operator, similar to this pseudocode:

var codeString = "function myFunction() {";
codeString += "var myVar = 10;";
codeString += "for(var i=0; i < myVar; i++){";
codeString += " var newVar = i;";
codeString += "}";
codeString += "}";
sendStringToOtherLanguage(codeString);

While this is more readable than one string of text, it’s still a pain to edit. All code highlighting is lost. On top of that, you’re debugging across languages, so it slows testing even more. While working on a script recently I discovered a workflow that allows me to maintain code readability while working across multiple Adobe applications.
(more…)

Following the merge text extensions for Flash, Illustrator, and InDesign, Keith Gilbert wrote me wondering about getting swatch information from InDesign to Flash via XFL or by way of importing an Adobe Swatch Exchange (ASE) file into the Flash swatches panel. There are several stumbling blocks in the way of such an extension. First, finding a way for extendscript or JSFL to read the contents of an ASE file (which is not open source and not plaintext) proves to be quite difficult. Second, JSFL (the Flash scripting language) doesn’t have any access (currently) to the swatches panel.

—
BREAKING NEWS (12/6/08): I noticed that the new Kuler extension for Flash CS4 has an “add to swatches” button, and it actually adds swatches to the swatches panel. After some decompiling and a lot of detective work, I found an undocumented JSFL call that was added to CS4. The feature is undocumented for a reason: it sends encoded XML data, and if the data is faulty, it crashes Flash. I have a few test cases working and I’m confident that I can add it to this extension, so the swatches will go right in the Flash swatches panel, rather than onto the stage, though it will only work in CS4. Be on the lookout for an update in the next few days.

UPDATE (12/7/08): Updated to version 1.1.0. If you have Flash CS4, the swatches will now go right into your Flash Swatches panel. Hooray!
—

There does seem to be a lot usefulness to such an extension, since XFL creates a new workflow between InDesign and Flash, and the Illustrator importer for Flash is fantastic, but neither one loads any of the swatches from the original document. I’ve certainly spent my fair share of time opening up the swatch properties, making sure the swatch is RGB or hex and copying all three fields one at a time.

So, I decided to plow ahead and see what I could come up with. The results are below. This extension takes the swatches from your current InDesign or Illustrator document and sends them to a new layer on the Flash stage. You can then use the eyedropper to pick up the colors, or you can add them to your swatches panel individually (similar to this demo of the Kuler panel).
UPDATE (12/7/08): If you have Flash CS4, you can skip the step above. Version 1.1.0 of this extension will send the Illustrator or InDesign swatches right to your swatches panel in Flash.

This extension will transfer spot and process colors of all varieties (RGB, CMYK, LAB, HSB). Rather than converting the CMYK with my own function, I used the applications themselves to convert the colors to RGB for Flash, so the transfer fidelity is quite good. It will ignore gradients, tints, patterns and fancy stuff like that. If you want to get your gradients into Flash see the bonus tip below.

InDesign to Flash CS4

Or, here’s what InDesign to Flash CS3 would look like.

Illustrator to Flash CS4

Or, here’s what Illustrator to Flash CS3 would look like.

Downloads and more below the fold. (more…)