Ajar Productions » design

Article Round-up

Justin — Tue, 19 Oct 2010 17:37:55 +0000

We’re keeping quite busy around here! Here’s a quick round-up of some recent articles that I’ve published.

5 Flash Animation tips in 5 days on the Peachpit blogs:

Also on the Peachpit site, there’s an excerpt on Character Animation from our recent book with Chris Georgenes.

I also have a new video tutorial over at ActiveTuts+ on Creating Advanced Motion Presets in Flash with JSFL.

In addition to the recent advice page I added on Learning Flash, I’m working on a page about becoming a graphic designer/Flash animator/digital artist. It includes some of my background and lessons learned. That article is pretty much on hold as we work toward the SmartMouth release (hopefully just another week), and I will pick it up after that.

Animation with Scripting for Adobe Flash is now shipping!

Justin — Mon, 13 Sep 2010 19:08:02 +0000

I recently completed a book with with star animator Chris Georgenes entitled Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques. My wife AJ, the other half of Ajar Productions, also served as Technical Editor on the book. As you can imagine, we’re very excited about this book’s release!

Here’s the info from the back cover:

In Animation with Scripting for Adobe Flash Professional CS5 Studio Techniques, top animation designer Chris Georgenes and designer/developer Justin Putney reveal how to create and successfully animate characters in Adobe Flash Professional CS5 and how to push the limits of timeline animation with stunning visual effects using ActionScript® 3.0.

This Studio Techniques book is designed for intermediate or advanced users who understand the basics of Flash and want to create a more immersive interactive experience. The book includes coverage of storyboarding, 2D character design and rigging, character animation, visual FX with code, workflow automation, and publishing your animation on the web and to mobile devices.

You can order the book from these fine retailers:

Peachpit | Amazon | Adobe Press

Let us know if you have any questions about the book. We hope you find it useful!

Adobe Flash Learning Links

Justin — Fri, 20 Aug 2010 22:49:27 +0000

I’ve had a number of users contacting me regarding ways to learn Adobe Flash Professional. There are a lot of great resources available for users interested in animation, design, and development in Flash. Whether you’re an advanced user, or totally new to Flash, there are tons of resources available. Over the years, I’ve read dozens of books and visited hundreds of sites. So, I decided to put together a single page with many of my favorite Flash learning links. Enjoy!

MergeTextFrame for InDesign has new features!

Justin — Sat, 03 Apr 2010 03:48:36 +0000

Version 1.1.0 now has the ability to batch-merge textframes within every page of the current document. I had several requests for something like this (including from a recent donor). Here it is! The download links above have been updated.

The new version now has the “Apply to” and “Ignore locked layers” as shown in the image below.

Note that any warning messages about having too few textframes selected have been delayed until after the dialog box appears to reflect the new options.

Downloads of the new version are available on the original post.

Want a good way to move your extension request to the top of the list?

Flash Extension: Set Instance Name on Multiple Frames

Justin — Tue, 30 Mar 2010 23:44:55 +0000

Here’s a quick extension by request. This extension adds a command that can batch name instances in multiple frames. Just select the frames and run the command.

Download
(Compatible with Flash MX 2004 & later)
INSTANCE – multi-name.mxp

Convert Illustrator Point/Path Text to Area Text

Justin — Sat, 07 Mar 2009 01:38:21 +0000

Point text in Illustrator is a text field that is generated by a click of the text tool. Area text is generated by dragging a rectangle with the text tool. You can scale a area text to make room for more text or to control where the lines end. When you try to scale point text, however, the text itself grows or shrinks to fill the rectangular area. If you inherit a file with lots of point text, it can be difficult to edit.

This script will convert point text and text on a path into area text. You select multiple text fields and the script will convert them all. It does not take into account stories (linked text fields), so use with caution in those cases.

Download
(Compatibility: Illustrator CS – CS5.5)
Convert to Text Area.js
[right-click (ctrl-click on Mac) and choose Save Link As...]

Installation Instructions

Place the Convert to Text Area.js file into the Scripts directory within your Illustrator application directory:

Windows > C:\Program Files\Adobe\Adobe Illustrator {version}\Presets\Scripts
Mac OS X > Applications/Adobe Illustrator {version}/Presets/Scripts

Note: In CS4, the directory path will include a region directory (e.g., Adobe Illustrator CS4/Presets/en_US/Scripts).

Usage

Select text field(s), choose File > Scripts > Convert to Text Area.

New Extension: Send Colors from InDesign and Illustrator to Flash

Justin — Fri, 05 Dec 2008 22:27:37 +0000

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.

Downloads

Send Swatches to Flash.jsx (CS3, CS4)
Send Swatches to Flash (ID).mxp (CS4)
Send Swatches to Flash (AI).mxp (CS4-US only)

Installation

JSX file:

Place the JSX file into the appropriate directory:

InDesign CS3/CS4 > {application directory**}/Scripts/Scripts Panel
Illustrator CS3 > {application directory**}/Presets/Scripts
Illustrator CS4 > {application directory**}/Presets/{language/region}/Scripts

**Application Directories:
Windows > C:\Program Files\Adobe\{application name + version}\
Mac OS X > Applications/{application name + version}/

MXP file (CS4 only):

Double-click on the MXP file to install using Adobe Extension Manager CS4.

Usage

InDesign: make sure the scripts panel is open, Windows > Automation > Scripts, locate the Send Swatches to Flash.jsx script and double-click to run the script. If you installed the script using the MXP file, the script with be in the Ajar Productions subfolder.

Illustrator: Select Send Swatches to Flash from the File > Scripts menu.

Bonus Tip: Transferring Gradients

You can get a gradient from Illustrator to Flash by applying the gradient to a rectangle, copying the rectangle and pasting into Flash (CS3 or later). A dialog box will appear in Flash, make sure “Paste using AI File Importer preferences” is selected and it will retain you vector artwork, including the gradient! To get the gradient from InDesign to Flash, create the rectangle with the gradient in InDesign, copy and paste it into Illustrator, then copy and paste it into Flash using the instructions in the previous sentence.

FYI

I’ve added a donate button to the bottom of the navigation on the right-hand side of the page. If you’d like to help us spend more time making stuff that we can share with you, you’re welcome to leave a tip. Paypal is not required to donate. Donations are not tax deductible.

Announcing Merge Text Extension for Adobe Illustrator

Justin — Sun, 23 Nov 2008 23:17:35 +0000

Following the release of my Combine Textfields extension for Flash, I’ve put together a similar extension for Adobe Illustrator. This extension installs a script that will merge text (including text on a path) into one text object, while retaining the style attributes of the individual pieces, including character styles as well as paragraph styles (if the separator includes a return character).

Anyone who’s tried to edit text from a PDF opened in Illustrator knows how frustrating it can be to make simple text edits when the text is broken up. This extension reduces that headache.

Special thanks to David Van Brink for posting the Omino Dialog Maker. His time-saving code was used to produce the dialog box in this extension.

Download Options

MergeText_AI.jsx (CS2 & up)
MergeText_AI_CS1.js (CS1)
MergeText_AI_en.mxp (CS4 & up – US English)

Installation Instructions

JSX or JS file:

Place the MergeText_AI.jsx (or MergeText_AI_CS.js) into the Scripts directory within your Illustrator application directory:

Windows > C:\Program Files\Adobe\Adobe Illustrator {version}\Presets\en_US\Scripts
Mac OS X > Applications/Adobe Illustrator {version}/Presets/Scripts

Note: In CS4, the directory path will include a region directory (e.g. Adobe Illustrator CS4/Presets/en_US/Scripts).

MXP file (CS4 only):

Double-click on the mxp file to install using Adobe Extension Manager.

Usage

In Adobe Illustrator, select the text the you want to merge together and go to File > Scripts > MergeText_AI. If you’re using Illustrator CS3 or CS4, you will be prompted with a dialog box where you can choose your sorting orientation and a custom separator. If you’re using a version earlier than CS3, you will not be prompted with a dialog; the script will run using the default settings sorting topmost, then leftmost, with a separator of “[><]“. You can then run a Find and Replace and replace the separator with the characters of your choice.

PNG vs. JPG

Justin — Thu, 13 Nov 2008 02:22:02 +0000

I’ve long thought that PNG has been an underused format, especially among designers who should know better. This illustration explains the strengths of the PNG format quite well.

The one thing that it doesn’t mention is that PNG is the only common (web) image format that supports 8-bit transparency. GIF only supports 1-bit transparency (transparent or opaque). So if you want a non-rectangular shape with a transparent background or a nice smooth drop shadow around the edges, PNG is the format for the job.

Flash Player Gets Color Management

Justin — Wed, 29 Oct 2008 20:24:03 +0000

Looks like there’s now a way to avoid that pesky color shift when bringing artwork into Flash. John Nack has the details.