Category Archives: Tutorials

Tutorial: Use Stitcher Unlimited 2009 To Build Interactive Panoramas

Photoshop has been able to produce good panoramas for years with the Photomerge plug-in, and it’s a popular tool for some photographers who use Photoshop to build sweeping vistas from multiple shots. Other users find Photomerge very handy for combining images for use in QuickTime VR (QTVR) projects such as 360-degree online tours and other immersive interactive media.

st-stitcher

I have always used Photoshop and a $49 program called CubicConverter to build QTVR: I combine images in Photoshop and then output the movie file with CubicConverter. However, Autodesk offers an application called Stitcher Unlimited 2009 that handles both functions extremely well. There are some pros and cons to using Stitcher versus Photomerge, but I like the fact that it’s a complete solution for VR professionals.

Create your panorama

In this tutorial we’ll learn how to import images into Stitcher, stitch them together in a panorama, fix any bad stitching or mismatched exposures, and export to QTVR. The five images in this tutorial are of St. Stephen’s Green in Dublin.

st-photos
I stitched these five photos of St. Stephen’s Green.

1. Import your images into Stitcher.

The easiest way to do this is to drag the image files onto the Stitcher interface, but there are also menu and icon commands that do the same thing. I recommend that you make the exposures consistent outside of Stitcher. During the import process Stitcher will detect the lens type and focal length, which you can accept or revise.

2. Use the Stitch Shots command to automatically begin the stitching.

Stitcher does a good job stitching shots together on the fly, every bit as good as Photoshop’s Photomerge feature. You’ll have greater success if your shots have a healthy amount of overlap: in my example, the first and last shots have very little overlap with the image next to them and Stitcher did not attempt to stitch them together.

Photos that are successfully stitched are marked with green in the Thumbnail View strip below the main window. Stitcher uses green, yellow and red to mark successful and problem images. The stitched images show up in their panoramic glory in the main window, and the three tools to move around are in the View menu—pan, zoom and roll. The menu bar doesn’t show it, but there are vital keyboard shortcuts for the Pan (Alt/Opt-drag) and Zoom (Cmd/Ctrl-drag) tools. These shortcuts make moving a lot easier and the menu commands are comparatively slow.

st-auto
The Stitch Shots command is the easiest way to combine photos with Stitcher, as long as they don’t have exposure differences or too little overlap. Click the image for a larger view.

3. Manually stitch any missed images.

I dragged my two missing images from Thumbnail View to the main window. The left image stitches nicely just by dragging the image so it overlaps the image next to it. Stitcher fades the two images together to make a seamless transition, though in my case a man in the left image ended up losing some opacity due to blending with the second image’s background. Unfortunately, Stitcher does not have any retouching tools like Photoshop does, though you can stencil out part of an image and retouch it in Photoshop or another application.

st-left
See the man in the background who is 50% transparent? He’s right on the seam between two photos. These photos aren’t stitched, but Stitcher is smart enough to blend images when they overlap.

The right image is a good candidate for Stitcher’s Manual Stitch command—images that overlap and have common landmarks do well with Manual Stitch. Select the right image and the one to be stitched to it and choose the Manual Stitch icon or menu item. An interface appears that allows you to pin common points on both images. In my example, the statue in the background and one of the railing posts were good common points. Once the pins are in place, click Stitch and Stitcher brings them together. Note that manually stitched images are marked with yellow while non-stitched images (like my left image) are marked with red.

4. Equalize images

There are two methods for equalizing images: use the Equalize All Images command or, if you have 32-bit High Dynamic Range (HDR) images, use the HDR exposure controls in the HDR menu. In my example, the fourth and fifth images have some overexposure compared to the three on the left. However, Equalize All Images doesn’t seem to work with unstitched or manually stitched images and it of course can’t fix incorrect colors like the sky in my fourth photo. The sensitivity of Equalize All Images is also buried in Stitcher’s preferences, making it a chore to tweak it for the best results.

st-right
The transition between the rightmost image and the one next to it. I left the exposure difference in the final product; Photoshop is the best choice to fix this problem.

Photomerge seems to do a better job of automatically equalizing images, though it doesn’t have the specialized HDR features that Stitcher offers. Photomerge produced a fully equalized panorama with the St. Stephen’s Green photos, and even figured out how to stitch the right image so I didn’t have to do it manually.

5. Render the final QTVR output

st-render
Stitcher provides many options when producing the final output.

The real value of Stitcher is in the various formats it can produce: JPEG, QuickTime movies or QTVR, Pure Player Java or HTML and KML. The KML file is suitable for use with Google Earth. To publish a QTVR, select “Cylindrical QTVR” or “Spherical QTVR” from the Type menu and change the various settings as needed. The Render dialog box has four panels full of options for quality, output and scripting so it’s a complicated process but also very robust, and there’s a panel for saving and recalling settings so the process runs smoothly.

Conclusion

The coolest thing about Stitcher Unlimited 2009 is its range of features: there are several I did not write about, including hotspots, stencils, alignment and working with fisheye images and full spherical panoramas. I was impressed by the wide features that Stitcher offers to creators of panoramas and QTVR, and I think there is potential for more interactive images and multimedia with these tools.

Sky’s the Limit: AKQA Shows the Possibilities with Flash CS4 (Part 3 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by AKQA

When trying to imitate nature and real-life motion, a significant understanding of math and physics is necessary. To create realistic fireworks shows in Flash involve some kind of particle effect. Making a particle engine from scratch to achieve the effect is not a particular easy task. It requires a certain level of math knowledge on the part of the Flash developer, and is a meticulous time intensive task.

Like any good cooking show, we cheat a little, and rely on one of the publicly available ActionScript engines that have most of the heavy lifting built-in. For this project we’ve chosen to utilize the Flint particle system, which allow developers of almost all levels to create a variety of particle effects with ease. Flint is also one of the more complete particle engines API made for AS3 that is easy to understand and use. It is an active open-source project with the support of a community on their website. Thanks for lending a hand guys!

In this tutorial, we will show you how to use Flint to easily create a cool fireworks effect that not only seems real, but also forms any desired graphic you specify. To showcase this we’ve chosen the AKQA logo.

akqa-image-1

Setup

1. Go to http://code.google.com/p/flint-particle-system/ and download the Flint Particle System codebase.

2. Create the desired PNG image with transparency for the fireworks to emulate. In this tutorial, we use the AKQA logo:

akqa-image-2

3. Create your class to hold the graphic. Make sure it extends the BitmapData class. In this case we are creating it for our logo:

akqa-image-3

4. Create a new FLA for your fireworks and name it Fireworks.fla.

5. Import your PNG into your library, then link your class from Step 3 to the PNG:

akqa-image-4

6. Create a new class, name it Fireworks.as, and use it as your document class:

akqa-image-5

7. Go to http://flintparticles.org/examples/logo-firework and copy the code from the demo and paste it into your document class from Step 6.

8. We are ready to do some coding.

Coding

1. Before we can edit the code to make the fireworks look right in our file, let’s first see what each line does.

Standard instantiating code:

var emitter:Emitter2D = new Emitter2D();
1500 denotes the amount of particles to create:
emitter.counter = new Blast( 1500 );

The particles use colors randomly picked between the two values given below:

emitter.addInitializer( new ColorInit( 0xFFFF3300, 0xFFFFFF00 ) );

How long this sequence of particles last before getting destroyed:

emitter.addInitializer( new Lifetime( 6 ) );

The DiscZone defines a circular area with a hole in the middle, telling where to start the particles:

emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), 10 ) ) );

Pass the PNG to the particles engine to emulate:

var bitmapData:BitmapData = new Logo( 265, 80);

Because the particles are moving according to Flash’s coordinate system, which is based on top left corner, the particles will move in a lower-right direction. Since the fireworks need to explode from the center, the values “-132” and “-300” offset the particles’ direction so that they are shooting out from the center:

emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -132, -300 ) ) );

The following lines do the actual explosion of the fireworks and are pretty self-explanatory (If you’re on Eclipse or Flex, make sure Quadratic comes from the org.flintparticles.common.energyEasing package or it throws a wrong number of parameters compile error if it comes from another package):

emitter.addAction( new Age( Quadratic.easeIn ) );
emitter.addAction( new Fade( 1.0, 0 ) );
emitter.addAction( new Move() );
emitter.addAction( new LinearDrag( 0.5 ) );
emitter.addAction( new Accelerate( 0, 70 ) );

Restart the sequence once this sequence is complete:

emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart );

Tells the engine the area to draw the particles:

var renderer:PixelRenderer = new PixelRenderer( new Rectangle( 0, 0, 500, 300 ) );

Gives it a BlurFilter which seems to emulate fireworks’ sparks:

renderer.addFilter( new BlurFilter( 2, 2, 1 ) );

Gives a ColorMatrixFilter which helps to add to the realistic feel of the fireworks:

renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );

Tie it all together:

renderer.addEmitter( emitter );

Add to display list:

addChild( renderer );

Position the particles emitter:

emitter.x = 250;
emitter.y = 300;

Have to call start() to get it going:

emitter.start( );

2. Now we need to pass our PNG to the fireworks so the particle engine knows what graphic to emulate.

We do this by changing the following two lines of code:

var bitmapData:BitmapData = new Logo( 265, 80);
emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -132, -300 ) ) );

to take our logo:

var bitmapData:BitmapData = new AKQALogo( 0, 0);
emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, -bitmapData.width / 2, -bitmapData.height/2 - 50) ) );

3. Finally, knowing what the other values represent we adjust them to fit our file. The following is the complete source code from the class Fireworks.as:

package com.akqa.tutorials.fireworks
{
import flash.events.Event;
import com.akqa.mvc.AbstractSprite;
import org.flintparticles.common.actions.Age;
import org.flintparticles.common.actions.Fade;
import org.flintparticles.common.counters.Blast;
import org.flintparticles.common.energyEasing.Quadratic;
import org.flintparticles.common.events.EmitterEvent;
import org.flintparticles.common.initializers.ColorInit;
import org.flintparticles.common.initializers.Lifetime;
import org.flintparticles.twoD.actions.Accelerate;
import org.flintparticles.twoD.actions.LinearDrag;
import org.flintparticles.twoD.actions.Move;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.Position;
import org.flintparticles.twoD.initializers.Velocity;
import org.flintparticles.twoD.renderers.PixelRenderer;
import org.flintparticles.twoD.zones.BitmapDataZone;
import org.flintparticles.twoD.zones.DiscZone;
import flash.display.BitmapData;
import flash.filters.BlurFilter;
import flash.filters.ColorMatrixFilter;
import flash.geom.Point;
import flash.geom.Rectangle;
/**
* @author kenny lin
*/
public class Fireworks extends AbstractSprite
{
// how many particles to generate
private var particleAmount:Number = 1500;
// how long the fireworks last
private var lifeSpan:Number = 6; // seconds
// thickness of the area populated by particles
private var thickness:Number = 3;
// the BitmapData used as a guide for the fireworks to generate
private var bitmapData:BitmapData = new AKQALogo();
/*
* The fireworks shoot lower-right by default
* The following correct the direction (try setting them to 0 to see what happens)
*/
private var correctLogoOffsetX:Number = 0;
private var correctLogoOffsetY:Number = 0;
public function Fireworks()
{
correctLogoOffsetX = -bitmapData.width / 2;
correctLogoOffsetY = -bitmapData.height/2 - 50;
}
/*
* Because I want to reference the stage's dimension
* I set up all my stuff after it's been added to stage
*/
override protected function onAddedToStage(e:Event):void
{
// call super to remove event
super.onAddedToStage(e);
// setup starts
var emitter:Emitter2D = new Emitter2D();
emitter.counter = new Blast( particleAmount );
emitter.addInitializer( new ColorInit( 0xFFFF3300, 0xFFFFFF00 ) );
emitter.addInitializer( new Lifetime( lifeSpan ) );
emitter.addInitializer( new Position( new DiscZone( new Point( 0, 0 ), thickness ) ) );
emitter.addInitializer( new Velocity( new BitmapDataZone( bitmapData, correctLogoOffsetX, correctLogoOffsetY ) ) );
emitter.addAction( new Age( Quadratic.easeIn ) );
/*
* Play around the the following to get the ideal effect
*/
emitter.addAction( new Fade( 1.0, 0 ) );
emitter.addAction( new Move() );
emitter.addAction( new LinearDrag( 0.5 ) );
emitter.addAction( new Accelerate( 0, 70 ) );
emitter.addEventListener( EmitterEvent.EMITTER_EMPTY, restart, false, 0, true );
// defines the area to draw all the particles on, in this case the size of stage
var renderer:PixelRenderer = new PixelRenderer( new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ) );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
renderer.addFilter( new ColorMatrixFilter( [ 1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0.96,0 ] ) );
renderer.addEmitter( emitter );
addChild( renderer );
emitter.x = stage.stageWidth/2;
emitter.y = stage.stageHeight/2;
emitter.start( );
}
private function restart( ev:EmitterEvent ):void
{
Emitter2D( ev.target ).start();
}
}
}

Click here to see the final result!

And there you have it, a short and simple way of creating a spectacular fireworks show. Now go ahead and try, write your loved one’s name in the sky, or shamelessly promote yourself and use your company logo. Play with colors and shapes to create something just right for you!

Sky’s the Limit: AgencyNet Shows the Possibilities with Flash CS4 (Part 2 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by AgencyNet (Flash 10 required)

Step 1: Preheat oven to 350 degrees.

Firstly, let’s setup the Flash stage and main FLA:

  1. Create a new Flash File (ActionScript 3.0).
  2. Set the size of the stage to 1000 x 500 (although your favorite size will work just fine).
  3. Set the background color of the stage to black or your preferred night sky color.
  4. Set the FPS to 30.
  5. Save your file as Fireworks.fla in a clean folder.

Now create a new Symbol (Insert > New Symbol):

create

  1. Name the symbol Firework Particle.
  2. In the Linkage group, check Export for ActionScript.
  3. Enter the Class name FireworkParticle (should be filled-in by default!).
  4. Click OK.

On the symbol, create a star by drawing a 2×2 yellow circle, and two 0.5 lines forming a cross, like so:

star

Alternatively, you can insert your favorite star bitmap, preferably no larger than 5×5 pixels or so.

Step 2: Bake until golden brown.

Now that we’re all setup, let’s create three .AS files in the same directory as the FLA. (File > New > ActionScript File):

  1. Fireworks.as – This will be our new stage class.
  2. Firework.as – This class will represent one launch/burst of a single firework.
  3. FireworkParticle.as – This class will support the Firework Particle clip we created earlier.

Briefly jump back to your Fireworks.fla file, and (ensuring nothing is selected), set the Document Class to Fireworks.

setup

In Fireworks.as, paste the following code:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.utils.Timer;
// Stage class, handles creation of fireworks and main timer
public class Fireworks extends MovieClip
{
public static const TIMER_BASE:Number = 900;
public static const TIMER_RANDOM:Number = 200;
public static const MAIN_TIMER_UPDATE_INTERVAL:Number = 20;
public static const MAX_FIREWORKS:Number = 7;
private var launch_timer:Timer;
private var main_timer:Timer;
// Stage class constructor
public function Fireworks()
{
startTimer();
main_timer = new Timer(MAIN_TIMER_UPDATE_INTERVAL);
main_timer.addEventListener(TimerEvent.TIMER, handleRuntime);
main_timer.start();
}
// Handler: TimerEvent.TIMER (main_timer)
private function handleRuntime(event:TimerEvent):void
{
for(var i = 0; i < numChildren; i++)
{
var firework = getChildAt(i) as Firework;
firework.update();
}
}
// Handler: TimerEvent.TIMER (launch_timer)
private function handleTimer(event:TimerEvent):void
{
launch_timer.removeEventListener(TimerEvent.TIMER, handleTimer);
// Prevent from having too many at once
if(numChildren < MAX_FIREWORKS)
{
var firework = new Firework();
firework.addEventListener(Event.COMPLETE, removeFirework);
addChild(firework);
}
startTimer();
}
// Launch new firework
private function startTimer():void
{
var duration = TIMER_RANDOM * Math.random() + TIMER_BASE;
launch_timer = new Timer(duration, 1);
launch_timer.addEventListener(TimerEvent.TIMER, handleTimer);
launch_timer.start();
}
// Handler: Event.COMPLETE (removes firework after it is completed)
private function removeFirework(event:Event):void
{
var firework = event.target as Firework;
removeChild(firework);
firework = null;
}
}
}

In Firework.as, paste the following code:

package
{
import flash.display.Bitmap;
import flash.display.BitmapData
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.ColorTransform;
import flash.geom.Vector3D;
// Firework explosion and launch
public class Firework extends MovieClip
{
public static const GRAVITY:Vector3D = new Vector3D(0, 0.018);
public static const LAUNCH_SPEED_X:Number = 0;
public static const LAUNCH_SPEED_Y:Number = -7;
public static const LAUNCH_PARTICLE_ALPHA:Number = 0.03;
public static const PARTICLE_RANDOM:Number = 30;
public static const PARTICLE_BASE:Number = 10;
public static const BITMAP_SIZE:Number = 300;
public static const BITMAP_OFFSET:Number = 150;
public static const DISPERSION_MULTIPLIER:Number = 1;
private var exploded:Boolean = false;
private var launching_particle:FireworkParticle;
private var particle_count:Number;
private var blit_array:Array;
private var trail_bitmap:Bitmap;
private var completed_particles:Number = 0;
private var particle_transform:ColorTransform;
private var transform_colors:Array = new Array
(
new ColorTransform(1, 1, 1, 0.92), // White
new ColorTransform(1, 0.9, 0.9, 0.92), // Red
new ColorTransform(0.9, 1, 0.9, 0.92), // Green
new ColorTransform(0.7, 0.9999, 1, 0.92), // Blue
new ColorTransform(1, 1, 0.9, 0.92), // Yellow
new ColorTransform(1, 1, 1, 0.5) // Black
);
// Firework constructor
public function Firework()
{
// Pick a random particle count and a random color for the trails
particle_count = Math.round(Math.random() * PARTICLE_RANDOM + PARTICLE_BASE);
particle_transform = transform_colors[Math.floor(Math.random()*transform_colors.length)];
addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
addEventListener(Event.REMOVED_FROM_STAGE, handleRemovedFromStage)
}
// Update: called by main timer
public function update():void
{
if(exploded)
{
for(var i = 1; i < numChildren; i++)
{
var particle = getChildAt(i);
particle.update(GRAVITY);
if(particle.alpha <= 0 && particle.alive)
{
particle.alive = false;
completed_particles++;
if(completed_particles >= particle_count)
{
dispatchEvent(new Event(Event.COMPLETE));
return;
}
}
}
}
else
{
launching_particle.oscillate();
launching_particle.update(GRAVITY, LAUNCH_PARTICLE_ALPHA);
if(launching_particle.y < BITMAP_OFFSET)
{
removeChild(launching_particle);
explode();
}
}
// Blitting
var newBitmapData:BitmapData = new BitmapData(width, height, true, 0x000000);
newBitmapData.draw(this, null, particle_transform, null, null, true);
blit(newBitmapData);
}
// Handler: Event.ADDED_TO_STAGE
private function handleAddedToStage(event:Event):void
{
// Initialize random target position on stage
x = (stage.stageWidth) * Math.random() - BITMAP_OFFSET;
y = (stage.stageHeight) * Math.random() - BITMAP_OFFSET;
// Initialize bitmap and container
trail_bitmap = new Bitmap();
addChild(trail_bitmap);
blit_array = new Array();
launching_particle = new FireworkParticle();
launching_particle.y = stage.stageHeight - y;
launching_particle.init(LAUNCH_SPEED_X, LAUNCH_SPEED_Y, false);
addChild(launching_particle);
}
// Handler: Event.REMOVED_FROM_STAGE
private function handleRemovedFromStage(event:Event):void
{
destroyBitmaps();
}
// Explode firework
private function explode():void
{
// Initialize particles
for(var i = 0; i < particle_count; i++)
{
var explodeworkParticle:FireworkParticle = new FireworkParticle();
explodeworkParticle.init(Math.sin((Math.PI*2 / particle_count) * i + Math.random()*DISPERSION_MULTIPLIER), Math.cos((Math.PI*2 / particle_count) * i + Math.random()*DISPERSION_MULTIPLIER));
addChild(explodeworkParticle);
}
exploded = true;
}
// Update trail_bitmap with fresh BitmapData
private function blit(bitmapData:BitmapData):void
{
trail_bitmap.bitmapData = bitmapData;
if(blit_array.length < 1)
{
blit_array.push(bitmapData);
}
else
{
blit_array.push(bitmapData);
// Destroy old bitmap data
var oldBitmapData:BitmapData = blit_array.shift();
oldBitmapData.dispose()
oldBitmapData = null;
}
}
// Clean up any lingering bitmaps after being being removed from stage
private function destroyBitmaps():void
{
var imagesLeft:int = blit_array.length;
for(var i = 0; i < imagesLeft; i++)
{
var img:BitmapData = blit_array[i] as BitmapData;
img.dispose();
img = null;
}
}
}
}

Finally, in FireworkParticle.as, paste the following code:

package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Vector3D;
// Firework particle
public class FireworkParticle extends MovieClip
{
public static const NORMALIZE_POSSIBILITY:Number = 0.7;
public static const SPEED_MULTIPLIER:Number = 1.2;
public static const OSCILLATE_AMPLITUDE:Number = 3;
public static const OSCILLATE_FALLOFF:Number = 150;
public var direction:Vector3D;
public var alive:Boolean = true;
private var frame_counter:Number = 0;
// Constructor
public function FireworkParticle()
{
x = 150;
y = 150;
cacheAsBitmap = true;
}
// Initialize particle direction and normalize
public function init(direction_x:Number, direction_y:Number, possible_normalize:Boolean = true):void
{
direction = new Vector3D(direction_x, direction_y);
if(Math.random() < NORMALIZE_POSSIBILITY && possible_normalize)
{
direction.normalize();
}
direction.scaleBy(SPEED_MULTIPLIER);
}
// Shake particle side to side
public function oscillate():void
{
direction.x += Math.sin(frame_counter / OSCILLATE_AMPLITUDE) * (frame_counter / OSCILLATE_FALLOFF);
}
// Update position, alpha, and framecounter (called by parent)
public function update(gravity:Vector3D, delta_alpha = 0.005):void
{
direction = direction.add(gravity);
x += direction.x;
y += direction.y;
alpha -= delta_alpha;
frame_counter++;
}
}
}

And voila! Make sure to save all files, and publish the Fireworks.fla to see some fireworks!

Step 3: Add salt and pepper to taste!

Now that you have some fabulous fireworks, turn your attention to the static constants (THEY_LOOK_LIKE_THIS) towards the top of the Fireworks.as, Firework.as, and FireworkParticle.as. These are constants that modify the behavior of the fireworks—feel free to tweak them to get the desired effect!

To kick things up a notch, you can also add a quick starfield, so that the fireworks have a nicer backdrop than plain black!

Here's one we put together (save it as Starfield.as):

package
{
import flash.display.Bitmap;
import flash.display.BitmapData
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
// Starfield backdrop
public class Starfield extends MovieClip
{
public static const STAR_AMOUNT:Number = 500;
public static const STAR_ALPHA_MAX:Number = 0.4;
// Constructor
public function Starfield()
{
cacheAsBitmap = true;
addEventListener(Event.ADDED_TO_STAGE, handleAddedToStage);
}
// Handler: Event.ADDED_TO_STAGE
private function handleAddedToStage(event:Event):void
{
var bitmap:Bitmap = new Bitmap(new BitmapData(stage.stageWidth, stage.stageHeight, false, 0x000000));
var star:FireworkParticle = new FireworkParticle();
var translation_matrix:Matrix = new Matrix();
var color_transform:ColorTransform = new ColorTransform();
for(var i = 0; i < STAR_AMOUNT; i++)
{
var scale = Math.random() * 1.5 - 0.5;
translation_matrix.a = scale;
translation_matrix.d = scale;
translation_matrix.tx = Math.random() * stage.stageWidth;
translation_matrix.ty = Math.random() * stage.stageHeight;
color_transform.alphaMultiplier = Math.random() * STAR_ALPHA_MAX;
bitmap.bitmapData.draw(star, translation_matrix, color_transform, null, null, true);
}
addChild(bitmap);
}
}
}

To add it to stage, save the file in the same directory then, in the Fireworks constructor (public function Fireworks()), add the following code after the {

addChild(new Starfield());

Then, in the handleRuntime function, change the line that reads for(var i = 0; i < numChildren; i++) to:

for(var i = 1; i < numChildren; i++)

This ensures we ignore the starfield when updating the fireworks.

Have fun, and enjoy the show!

See the final result!

Sky’s the Limit: Vasava Shows the Possibilities with Flash CS4 (Part 1 of 3)

NOTE: This is one of three articles commissioned by Adobe and written by separate design agencies to demonstrate the variety of techniques available in Flash CS4 Professional. In these examples, three techniques are shown for creating realistic fireworks effects; all require intermediate to advanced ActionScript 3 skills. Enjoy! —Jeremy Schultz

Introduction by Kristan Jiles, Senior Product Marketing Manager, Adobe Systems Incorporated

Three design agencies that are given an identical initial directive, using the same tool, will return with very different project results. The creative process is essential in determining the end result; it’s how professionals use their tools to bring their work to life. We asked design agencies AgencyNet, AKQA and Vasava to develop a tutorial on how to create a fireworks display using Adobe Flash CS4 Professional to demonstrate how the same tool used to design the same project can yield such unique and differing results. At Adobe, we’re inspired by seeing how each creative uses their knowledge of the product to create amazing and fun projects that can be shared with others. Flash was developed to provide a variety of design and development options for any project and this is only one example. With animation, 3D transformation, rich drawing capabilities, and ActionScript development, we encourage designers and developers to continue experimenting with Flash to produce amazing work!

Tutorial by Enric Godes, project manager, Vasava

To develop the fireworks we used the Tweener caurina Stable version 1.33.74, ActionScript 3 (Flash 9+) library. This library can be downloaded from http://code.google.com/p/tweener/downloads/list. And, of course, we used Adobe Flash CS4 Professional.

1. Change the flash movie to 800×600 and 65 FPS (see below).

vasava-image-1

2. Draw a 4 px circle and transform it on symbol by pushing F8.

3. Edit the MovieClip and animate it from left to right on a straight line: These are the sprinkles going away from the center of the firework. We used a shape interpolation; later you can try some different animation types and change the timing to see new results. Insert a stop on the last frame (see below).

vasava-image-3

4. Find the MovieClip on the library and use the right button to open the properties window on the class field and change it to “Particle.” (See below).

vasava-image-4

5. Make a new symbol and put it on the scene. On the properties window change it to “nightSky.” This is where we will put the fireworks.

6. And now the coding. First, import the classes we are going to use:

import caurina.transitions.Tweener;
import flash.events.*;

7. Next, define the movie vars:

var fwParticlesCount:uint=200; // particles in each explosion
var fwTimer:uint=2000; // time between explosions
var timer:Timer = new Timer(fwTimer); // this adds a timer, in each step of the timer it will call fire() function
timer.addEventListener(TimerEvent.TIMER, fire);
timer.start();

8. We want to use a lot of random numbers, so we created the following function to save some time:

function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.random() * (max - min + 1) + min;
return randomNum;
}

9. And now the main function which is putting the particles in a circle, animating them, and setting their opacity and position:

function fire(event:TimerEvent){
// the origin coordinate for the firework
var x0:uint=randRange(100,700);
var y0:uint=randRange(100,500);
// now i'm going to create and define the properties of each particle in the firework
for(var i:uint=0;i var tempParticle:Particle=new Particle();
tempParticle.x=x0;
tempParticle.y=y0;
tempParticle.rotation=randRange(0,360)
tempParticle.scaleX=tempParticle.scaleY=randRange(.3,1)
//add to the stage
nightSky.addChild(tempParticle)
//the particle is going to start with the animation you prepared on the Movie Clip
//then with a little delay the Tweener animates the y an opacity,
//onComplete remove the mc from stage and deletes the particle
Tweener.addTween(tempParticle,{y:y0+200+randRange(-50,50),alpha:0,delay:1,time:2,transition:"easeInSine",
>> onComplete:function(){nightSky.removeChild(this);delete this}});}
}

See the final result!

Enric Godes is a project manager at Vasava. Started in Barcelona in 1997, Vasava is a communication studio with 18 young designers who specialize in cross-media projects: print, web, motion, 3D animation, and video. To unleash creativity and meet the deadline-driven demands of clients, Vasava relies on the integrated, cross-discipline tools found in Adobe Creative Suite Master Collection software.

Making PDF Porfolios With Adobe Acrobat Pro 9

One of the most exciting and fun-looking parts of the new Adobe® Acrobatâ„¢ Pro 9 is the ability to make slick-as-anything PDF Portfolios with a minimum of effort. After reviewing how to do it, I really wanted to make one of my own. Here’s how it all went down.

(If you want to get a look at the PDF Portfolio that results from all this play, go to this link at Acrobat.com and click “Download”. It will require Acrobat Pro 9 to be viewed).

Starting It Off

Starting off the fun isn’t terribly difficult. All one needs to to is go to the File menu and select Create PDF Porfolio. A window opens with a large blank area on the left and a sidebar on the right. The instructions in the gray area are simple and direct … Drag Files Here. Do so. That’s all I had to do.

First, of course, I had to choose the kind of Portfolio I wanted to create. I’ve always been a fan of Apple’s “Cover Flow” model, and the “Revolve” option is kind of cover-flow-ish.

Then all I had to do was drag files in from the Finder, and it was off to the races.

I even added a Flash video file that I had converted from a QuickTime movie I’d done. It took no trouble at all.

Populating PDF Porfolio

Populating the PDF Portfolio is as simple as dragging your files into the interface from the folder.

A Cover To Judge The Book By

The tautology is worn rather shiny, but true nonetheless; first impressions mean so much. PDF Portfolios give you a special chance to make a first impression: you can have a custom splash page, or a Start Page.

This is kept simple as well. On the Edit PDF Portfolio sidebar, clicking on the Welcome and Header tab causes that part to spring open. You have options to customize the Welcome Page and add a header to it as you see fit. I decided to go without the header and just come up with a welcome message and background image. Clicking in the resizable text box I typed in a short, friendly welcome message, and resized it a bit. Clicking on the image box brought up a file-open dialogue where I could search my drive and find a graphic. The text can be styled and colored with basic styles and controls, and the size of the illustration can be quickly scaled up and down. The pertinent controls appear when the appropriate object is selected.

Since I like a big splash, I really scaled up the image. The text had to be colored black in order to stand out against it. It was quickly and simply done with the controls.

Acrobat 9 PDF Portfolio Start Page

Type text, import image, style, scale, adjust. All very simply done.

I can’t go past this without pointing out that you have a good number of options for customizing this. You can have text only, text and picture, even a flash movie … or no welcome page at all.

Now, from here you can add a similarly-customizable header, but I chose not to do that, as the design really doesn’t depend much on such a thing and it would have been a bit cluttered.

In the final PDF Portfolio, the page has a “Get Started” Button at the bottom which takes you on to the rest of the document. As I said, very slick indeed.

Coloring Your World

The default color on startup is the sort of usual gray that you find in Creative Suite’s Bridge and on the Adobe hosted web services such as Acrobat.com. It’s not a bad choice, but if you’re a designer, you’re rarely satisfied with complete default. I thought a blue would be proper choice.

Clicking on the Select A Color Scheme tab on the Edit sidebar springs open access to a modest palette of preset color schemes … and, of course, the option to create your own.

acrobat 9 palette

Not happy with the default color choices? Use one of Acrobat Pro 9’s suggestions – or customize your own.

After applying my choices and clicking the “home” button on the top to go back to the files display, I found I was very pleased with the dark blue which allowed the content to stand out in front.

Acobat 9 PDF Portfolio Blue

The color scheme … just what the designer ordered.

May We Take Your Order?

The last tab in the Edit sidebar, Specify File Details, gives the tools necessary to add descriptions, titles, view file information and compression information, and arrange the files the way you want them to be presented. It’s easy understand and easy to use.

Clicking any Description field enables you to enter a witty, succinct, compelling description. You can select which fields you want to include in the table in the sidebar, and generate new columns as well. You can of course sort the table in any order the columns provide.

Acrobat 9 PDF Portfolio List

Information and arranging … power at your fingertips in the penultimate step


Setting It Loose In The Wild

The last step, Publish is what seals the deal for your PDF Portfolio. The Publish step allows you to either create a PDF on your desktop, go direct to email with your Portfolio, or if it’s a large one, upload to Adobe’s hosted service at Acrobat.com (you may have to create an Adobe ID for this, but that’s quick, easy, and integrated.

The PDF Portfolio functionality of Acrobat Pro 9 makes a lot of sense for those who are looking for a quick way to produce really good-looking PDF showcases. Sharing is easy, and assembling the Portfolio allows enough customization to make each one a unique piece. All anyone will need to view your PDF Portfolio is Reader 9, which should be available soon as a free download. Additionally, the PDF Portfolio interface is a full-featured one, including a search box that will search all documents, making it potentially a very powerful promotional and information delivery platform.

In extending the PDF into multimedia in this way, Adobe has given digital designers a wide range of powerful ways to exhibit their content and sell themselves. And it’s all very simple, indeed.

O’Reilly’s Fonts & Encodings Book Offers Much For Web Designers Too

fonts-encodings

If you haven’t read Samuel John Klein’s review of Fonts & Encodings, click here and take a look at the full range of this book. This article here is not another review, but a more detailed look at one particular chapter that will be interesting to web designers: Chapter 10, “Fonts and Web Pages.” I consider myself a typophile but I am also a web designer, and rarely do the two disciplines ever meet due to the limitations of the Internet, with its user-controlled presentation and weak typographic controls (it has gotten better with CSS, but it is still far away from the controls one has in print apps like InDesign).

The dilemma of type and web design

We web designers are in this predicament because a typeface is the only element of a webpage that does not actually belong to the author of that page: the font of that typeface is licensed, and while you can use it as needed you cannot distribute it freely, in the same way purchasing a license of Photoshop does not allow you to distribute it to whoever you wish. The webpage visitors needs his own legal copy of the font in order to display it in his/her browser. Technology has tried to get around this in three ways:

  • Tags: HTML, XHTML and CSS offer tags for font selection and formatting. While this gives the designer some control over typography, it still requires the end user to have the font handy either on his/her computer or downloaded from the Internet (more on this later).
  • Plug-ins: Microsoft, Bitstream and em2 Solutions have all produced plug-ins that enable browsers to pull the fonts they need to display webpages. This is maybe the best solution for displaying fonts perfectly but each plug-in has its limitations and requirements.
  • SVG: Adobe’s Scalable Vector Graphics format is emerging as a new W3C-supported standard for defining type geometry. It’s a promising alternative to plug-ins but not all browsers support it.

Each technological solution has its pros and cons. Let’s look at each one.

Tags mean nothing to fussy browsers

I’m sure many of you already know of or already use CSS so I won’t waste time here with typographic rules from CSS1 and CSS2 (if you don’t know anything about CSS, click here for a primer). Fonts & Encodings focuses on CSS3, the latest iteration of CSS that really comes into its own in terms of typographic rules. Here are some up-and-coming CSS rules:

  • font-size-adjust: When a preferred typeface is not available, this rule will change the type size on the fly so the font substitution still produces close to the same x-height on the page. For instance, the book shows that if your preferred typeface for a page is Centaur (which has an x-height of 0.366) and the substitution font will be the system’s serif typeface (usually Times) then specify the font-family as "Centaur", serif and font-size-adjust as .366, then when performing the substitution the browser will calculate what size Times should be displayed in so it has the same x-height as Centaur.
  • font-stretch: This controls the characters’ horizontal scale. You can use keywords from ultra-condensed to ultra-expanded and everything in between.
  • font-effect: Emboss, engrave, or outline type.
  • font-smooth: Smooth characters’ edges, similar to anti-aliasing. This one can actually make type look worse at small sizes, so a font can be set to smooth only when larger than certain sizes.
  • font-emphasize-style and font-emphasize-position: These two rules apply to ideographic languages (Japanese, Chinese and Korean) and allow use of the ideographic emphasis mark, a small circle placed next to a glyph to show emphasis. These marks are similar to the Western bold and italic for showing emphasis. These two rules control the style and placement of these marks.

All these CSS3 rules are wonderful, but I regret to inform you that none of these are supported by any web browser as of yet. It is yet another case of real-world technology not quite up to speed with the specifications being created by the W3C and other groups. I’m sure we will see these rules in a few years, but not now.

Now on to the fonts themselves: did you know CSS3 allows for controlled font substitutions, font downloading and even on-demand font synthesis? It’s true, and Fonts & Encodings shows how:

  • Substitutions (in CSS3) can do much more than just swap one font for another. You can actually place a typeface’s stem heights, slope, cap-height, x-height and other measurements along with its Panone-1 classification, and browsers that understand the code can select a local font that matches the data or comes close. If you don’t know what a Panose-1 classification is, pick up the book at your local bookstore and check Chapter 11 (hint: Panose-1 classifications look something like “2 0 5 3 0 0 0 2 0 4″).
  • Download a font with a simple src URL. This is easy enough to execute and takes the least code.
  • Synthesizing a font takes place within the browser, where data on units per em, bounding box coordinates and specific Unicode character widths are processed and used to create a typeface that fits the webpage. The best analogy for this process is PDF: a PDF that doesn’t have its fonts embedded will substitute Adobe Sans or Adobe Serif, modifying the characters’ widths and geometry so it fits the page correctly.

This is wonderful technology, but browsers do not yet support it as far as I can tell. In conclusion, tags are slowly developing as a robust method to control type in webpages but it has not been successfully implemented yet.

Plug-ins for downloading fonts

The idea of downloading fonts is not new: plug-ins have been available for awhile that do basically the same concept you see in the CSS3 method above. The idea is to download an encrypted font for use in displaying a webpage (the encryption is required so users can’t extract the font for unlicensed uses), and there are three products for this:

  • Bitstream’s TrueDoc. TrueDoc technology has been supported by only two products, one now defunct and the other out of distribution though still supported by Bitstream. The idea is to save a font in PFR (“Portable Font Resource”) format and then access it with an XHTML tag that supplies the URL of the PFR file. Note that this tag is not supported by CSS. Not surprisingly, browser support seems to have died off: the last browser that looks to have supported it fully was Netscape 4.
  • Microsoft’s Font Embedding. Font Embedding techology is not much better than TrueDoc. It works only with Windows (naturally) and the EOT (Embeddable OpenType) format that makes it work is not documented and is therefore unavailable to anyone other than Microsoft (of course) and is operational only with Internet Explorer (figures). It appears EOT files are created by the designer by scanning webpages and then selecting glyphs to go into the file. Other than the monopolizing actions of Microsoft, Font Embedding is a decent solution that is efficient and free to users.
  • em2 Solutions’ GlyphGate. em2 actually produced the technology behind Font Embedding, and they improved on it with a server-side plug-in that generates fonts in real-time for users and browsers on demand. The real beauty of this solution is that it works for every browser out there: if it can’t generate a font for a webpage, it will generate a graphic instead and substitute that for the text. GlyphGate can also apply advanced type features (ligatures, old-style figures, etc.) and even kerning, which browsers can’t even do yet. There’s no real downsides to this solution other than the fact that it needs to be set up on the web server: if you publish website through third-party hosts, GlyphGate will not be an option.

Using SVG to create type

Did you know SVG is a W3C standard based on XML? That web-friendly pedigree makes SVG very desirable:

  • SVG is readable and editable by human beings. There’s no proprietary formats or hidden technology involved with SVG, and SVG files can also be indexed like regular HTML pages.
  • XML tools are all you need to create and edit SVG graphics, and there’s plenty of options for such work.
  • SVG images can be indexed with metadata, making it easy to search and find graphic elements.

SVG graphics are described fairly simply with code in XML syntax. It looks like a bunch of numbers to regular folks (see page 350 in Fonts & Encodings) but at least it’s clean and organized. SVG type is even more clean because there are already several XML elements that can describe text: font-family, font-style, font-weight, font-size and more. These are all based on CSS and SVG defers to CSS specs when it comes to these properties. SVG also has a kerning element that can kern type, something that CSS can’t do. Entire fonts can be coded as SVG, plain-text files that dispense with the whole copyright issue altogether because it alone can’t be made into commercial font files (the W3C is encouraging developers not to write tools that do just that). A complete description of SVG fonts and their elements can be found in Fonts & Encodings.

Conclusion

Typography, fonts and the Web almost contradict one another. Fonts are a licensed product, purchased by one person and for use by only one person. Browsers and webpages are free and available anywhere. The conundrum is in how to allow users to have a font handy for browsing a website without actually purchasing the license. So far the solutions have come from various companies, each with their own agendas, and no one solution is perfect. However, I think a solution is not far away.

To Catch A (Twirled) Criminal

You’ve surely seen the news reports here, here and here: a Canadian pedophile was depicted in a bunch of photos online, but they were digitally altered to disguide his identity. German authorities magically restored the photos (almost) and were able to bring the man to justice. I remember watching the TV news when the story broke, and they made a big deal about the photos’ transformation from a swirled mess to a recognizable person. However, anyone who has experience with Photoshop and its filters can restore a photo like this quite easily.

About the Twirl filter

Photoshop achieves the swirled effect with the Twirl filter, available in Filters –> Distort –> Twirl…. As the name implies, the filter twirls the pixels around a center point. I don’t use the filter a whole lot, mostly in conjunction with other filters and other layers if I want some swirling motion. The twirl can be made clockwise or counter-clockwise, which is the key to reversing the effect: simply run the Twirl filter on a previously twirled photo in the opposite direction of the first twirl. The two cancel each other out and you end up with the original image. The reversal does degrade the resulting image somewhat, introducing some blurriness and possibly some artifacts, especially if the photo is in a lossy format such as JPEG (which would surely have been what the authorities were working with in this case.

Let’s try one

Twirled Spidey

Figures 1, 2 and 3: The original photo, the retouched photo, and the restored photo.

Twirled Spidey 2

Figure 4: Restoring a smaller photo does not work as well.

Figure 1 (left) is a mug shot of Spider-Man, which I chose for this example because he’s easily recognizable to everyone and has some details in the face such as the lines and eyehole shapes. Figure 2 (center) is the twirled photo, and to make things easy I’ve twirled the entire photo (you can twirl a selection if you choose) and used the maximum setting. To restore the photo in this case, selecting the entire image and using the maximum twirl setting in the opposite direction returns Figure 3 (right), which you can still recognize easily as Spidey and facial features are restored. One of the keys to retrieving a clear image is to start with the largest original you can find: the smaller the photo, the more pixels Photoshop needs to modify in order to create the twirl and the less data there is to recreate the original, unretouched photo. Figure 4 is the same restoration of the Spidey photo, but it is executed at a smaller size. The pixels on the edge of the twirl were so blurred and warped that Photoshop could not rebuild the original’s features.

Let’s see one of the real ones

Neil

Figure 5: One of the actual pedophile photos. The restored photo is at left, the retouched photo at right.

Figure 5 is an actual photo from the Canadian pedophile case (restored photo at left, original retouched photo at right). There are a few differences between this and the controlled Spidey experiment:

  • Only a portion of the photo is twirled—you can tell because the twirl effect is not reaching all the edges
  • The epicenter of the twirl is not on the center of the photo
  • This photo is from a news website and it’s quite small

The last one is really a killer: I can’t achieve the same results the authorities did because my photo is too small. I’d bet the photos the authorities used were large JPEGs posted on some message board or something. The other two factors—the location and position of the twirl—are not hard to overcome. The twirl’s epicenter is easy to spot—look for the “eye” of the storm—so if you use the Rectangular Marquee Tool, and drag from the center while holding Shift and Opt/Alt you will get a perfect square centered around the center spot. In this case the twirl ends on the left edge of the photo so drag the marquee until it can’t go any farther on the left. Once the selection is made, use the Twirl filter. Some tweaking of the controls may be needed.

Using Photoshop’s Color Settings To Generate A Plain Black Channel

The idea for this quick tutorial came from an article I wrote about converting CMYK images to spot color images with transparency. That article is fairly old but still gets some attention, and a reader wondered how to bring a duotone image into CMYK with proper channel separations. As you might know, by default Photoshop will create CMYK black with a combination of cyan, magenta, yellow and black ink even though the original document (a duotone in this case) uses a plain black ink. You can get around the problem by isolating the duotone channels:

  1. In Photoshop, make the duotone a monotone by selecting Image –> Mode –> Duotone… and changing the Type from Duotone to Monotone. This will leave you with only one ink.
  2. Create a new CMYK file and copy the monotone’s pixel data into one of its channels. If your monotone image displays the black ink, paste it in the black channel.
  3. In the monotone image, recreate the ink settings for the second color and then convert the image to CMYK. If the second ink is actually a process magenta, cyan or yellow, you can simply copy and paste the pixels into the corresponding CMYK channel.

There is an easier alternative to this method of mode conversion, copying and pasting: make Photoshop understand that black should separate as 100% black ink (plain black) and not a combination of CMYK inks (rich black). Here’s how:

Black Generation max

Figure 1: The Color Settings dialog box with the Black Generation drop-down menu set to Maximum.Insert caption here

  1. Go to Edit –> Color Settings…
  2. Click the CMYK drop-down menu and select Custom CMYK…
  3. In the Separation Options area, click the Black Generation drop-down menu and select Maximum (see Figure 1). The gray ramp graphic will change to show a single black line (actually, the black line is overlapping the CMY lines).
  4. Click OK twice to exit Color Settings.
  5. To convert the duotone to CMYK, just use Image –> Mode –> CMYK as usual.

That’s all there is to it: Photoshop will now generate as much black in the black channel as possible, which means rich blacks will be interpreted as plain blacks during CMYK conversion. The cool thing about this trick is you can set up a color settings preset to remember this setting, and you can even create an action that changes it at the push of a button. Let’s see the technique in action below on a logo for Imagetek, a digital document storage and management company in Des Moines. This logo works really well for the tutorial because it uses two colors, black and red. I’ve made this a Photoshop duotone graphic with process black and PANTONE Red 032. Standard Photoshop color settings will create the channels seen in Figure 1a: the red is separated into magenta and yellow but the black has been separated and added to all four channels. Figure 1b is what you get after setting the black generation to maximum: the red is separated into magenta and yellow but the black is in its own channel, leaving the cyan blank and the others untouched. This makes work much easier when working with spot color or CMYK printing!

Imagetek seps

Figures 2a and 2b: The Channels panel show the separations with conventional color settings (left) and with maximum black generation (right).Insert caption here

Illustrator CS3 Gets Kuler

The online color community from Adobe Labs delivers themes right into AICS3-via RSS

Many illustrators and Illustrator users now make use of an innovative new venture from Adobe Labs–Kuler. This is more than a source for inspiration. From your web browser you can compose, share, get feedback on, give feedback on, rate, and generally contribute to a color-interested community.

Kuler Web InterfaceThe Adobe Kuler web interface. It’s available to all–but Illustrator CS3 users are luckier than most, because Kuler is now a panel in AICS3.

Kuler on the web is definitely–well, cool, and a great place to get inspiration. That you can join for free and download the themes as Adobe Swatch Exchange files for use in Illustrator is icing. We don’t know about you, but we’d guess that the best way to make Kuler even more useful to Illustrator fans is to make it even more accessable–working around the web browser, for instance. And that is just what Adobe Labs have done.

Cutting Out The Middleman

Using Kuler via Adobe Illustrator CS3 is quite simple-though there might be a bit of trouble finding the panel. It’s found, from the Menu Bar, via Window>Adobe Labs>kuler. Kuler is still somewhat in an experimental stage, so Illustrator will courteously flash you a disclaimer caution before you get to use it. Carefully read and make sure you understand what it’s saying, then, if all is copacetic to you, click ok to accept the terms, and you’re on your way.

The Kuler panel shows you, based on RSS feeds from the Kuler web site, color themes from the Highest Rated, Newest, and Most Popular classifications; you can also create customized feeds. You can choose any individual feed, all feeds, or, via the search box, narrow it all down to just certain themes. Since you won’t need to fire up your web browser, load Kuler, download a swatch set, and import it, you’ve cut out at least a step or two.

A panel with the name ‘kuler’ on the tab will enter your workspace; it can be opened, closed, docked, maximized, and bucked about just like any other CS3 panel.

Kuler AICS3 PanelThe Kuler AICS3 Panel–Abstracting Kuler to a familiar form

Parts Is Parts

At first glance the interface may seem intuitive, and largely it is, but a bit of orientation may be in order. The Dropdown, at top, allows for quick selection between the RSS feeds that inform the panel. The search box works pretty much in the standard way (as illustrated, we searched with the word “sand”, and the panel returned us many sandy things). The small triangle at the left end of the theme name fires up your default browser to the the Kuler page on that particular theme. The buttons across the bottom allow you to, respectively, get the previous set of results (double-left triangles); get the next set of results (double-right triangles); Refresh feeds; Edit any custom feeds you might have; add a selected set to the Swatches panel, and upload any interesting sets you may have created to Kuler.

The flyout menu consists of two choices–Refresh Feeds and Edit Custom Feeds. In all, there are two ways to refresh RSS feeds and three ways to create custom feeds or open existing feeds for editing.

This article is meant to illustrate how you might fetch a set from Kuler, so lets go on to that.

Getting What You Need

After all this exposition, getting a Kuler set into your swatches panel is absurdly easy. Here’s all you need to do:

  1. Open the Kuler Panel (Window>Adobe Labs>kuler)
  2. Locate a theme you like, and click on it to highlight it.
  3. Click the “Add To Swatch Panel” button on the button bar on the bottom (second in from right)

That’s all there is to it; the selected theme should pop up as a swatch set, downloaded to your Swatches panel. The swatches are now yours to play with, save, move around, delete, or what-have-you.