Tag Archives: CS4

Interview with Heavenspot’s Chevon Hicks

heavenspot

While at Adobe MAX in Los Angeles I had the great opportunity to interview Chevon Hicks, a creative professional who is Founder, Creative Director and President at the highly regarded digital ad agency Heavenspot. Heavenspot gained a niche producing websites for motion pictures and Adobe is now their largest client. Creative Suite users will recognize their work: Heavenspot produced the demo materials for CS4 (“Double Identity”) and CS5, and helped develop Photoshop.com as well as Adobe’s “Brilliant” site that recently won a People’s Choice Webby.

I wanted to distill some of Chevon’s ideas and comments into tips you can easily remember and apply to your own creative work or life.

Look for the best learning experiences when starting out.

Chevon started interning at a creative agency when he was 15 years old, and he credits that experience as a big help when starting Heavenspot. Interning is not a glamourous start to a career but if it provides an awesome learning experience and lots of “learning by observation” then it can be worth it in the long run. My own first job was as an ad designer at a daily newspaper, which set me up to be a very productive designer for the rest of my career.

Be a big fish in a small pond.

Chevon said running an agency is Los Angeles is tough—there are more high-profile clients but also a lot more talent in the city. It’s a lot more easier to be an expert in a smaller market, and while that might also mean smaller and less prestigious clients Chevon says overall it is easier to be successful in the smaller markets. Even where someone gets their start is not necessarily a big factor: Chevon hails from Gary, Indiana and came to Los Angeles later.

chevon

Be creative in other ways.

Chevon is a musician, DJ and animator as well as a designer. He used to play in a band with Amanda Ghost, now president of Epic Records. Chevon’s point is that great designers and creative professionals are often creative in more than one way and can leverage that experience in different ways that make their work better.

Find a niche—and stick to it.

Chevon says success often depends on gaining a specific niche for your work or business. Heavenspot started out as a website to showcase Chevon’s artistic work but eventually the firm gained a niche for developing websites for movies. Being at the top of that niche gives them a strong brand presence. Some creative professionals—including myself—will also say that a successful designer can generalize instead of specialize if the final product is solid.

Designers are sometimes tempted to take projects that don’t quite fit their niche, and Chevon says at least a few projects should not be taken if they don’t fit. “If you don’t say no now and then, your yeses are meaningless,” he says.

Be cool and be good.

Of all the factors for success, it’s not surprising that simply producing great work that turns heads is the largest. Chevon and Heavenspot produce very striking, sometimes Flash-intensive work and it always looks cool. It would be hard to judge whether their work is the best on the Internet but it’s definitely good and the combination of good and cool is a winning one.

Photoshop/Premiere Elements 8: New technologies, same ease of use

pepe_8_boxshot_3in

Photoshop Elements 8 and Premiere Elements 8 are interesting upgrades because some cutting-edge technology from the professional-grade Creative Suite 4 (CS4) has migrated to the Elements consumer lineup. CS4 users like myself who have used this new technology for a year now know that consumers will be excited about the new features because they represent the most jaw-dropping advances found in CS4.

The first basic difference previous users will notice is a change in the interface: Elements 8 applications now use the same panel-based system in CS4. This includes the tabs, buttons and double arrows familiar to CS4 users. This interface was met with some debate a year or two ago but I think people have become used to the interface and I don’t hear any complaints about it. Perhaps this is because it’s easy to maintain the same palette layouts longtime users are used to (including myself). Elements users should feel pretty comfortable with the new interface, though it does function differently.

Auto-Analyzer and People Recognition

One of the major additions to Elements 8 is the Auto-Analyzer, an automatic tagging and rating system that analyzes images upon import. Metadata handling and tagging is probably the most tiresome aspect of digital asset management and professional workflows for products like Photoshop Lightroom have always assumed photographers would be looking at every photo, rating or flagging every one. The Auto-Analyzer and the “Smart Tags” it adds to images is designed to do all this automatically.

pse8-analyzer

I think the Auto-Analyzer works very well: imported images are given quite a few tags and the keyword make sense most of the time. If anything, the Auto-Analyzer can add too many tags to an image, even ones that are debatable. But the Auto-Analyzer generally gave appropriate tags to almost all images and made it very easy for me to separate good and bad photos. When used in tandem with other keyword tags, the Smart Tags helped me find good photos for specific subjects very quickly.

pse8-tagcloud

Quick Tip: It’s easy to miss the Keyword Tag Cloud feature, new to the Keyword Tags panel in the Organizer. An image’s tag cloud can help you differentiate between an image’s major tags and minor tags.

The Find Faces feature in the Elements 7 Organizer has been replaced with a People Recognition feature in Elements 8. Find Faces was simple and easy face recognition but People Recognition is smarter: it finds more faces and it also tags names to images in a more intuitive way. This is done by asking the user who people are—the more people the user confirms, the smarter People Recognition gets and the more images are tagged automatically by the Organizer. It’s an improvement over Find Faces and the “Who’s this?” questions don’t get annoying, but I find that People Recognition can be easily thrown off by a variety of things such as changes in headwear, photo angles, stuff on the lens (like water droplets) and others. The Organizer recognized many more people in still portraits and not many at all in candids and active shots.

pse8-peoplerecog

Quick Fix is surprisingly helpful

pse8-quickfix

I say “surprisingly” because I’m an experienced professional so I am used to seeing sliders labeled “Vibrance” or “Midtone Contrast,” but I still fiddle with sliders often because I’m unsure what modifications a slider will produce. Enter the Quick Fix previews, a set of nine icons that appear below a slider to show potential results (very similar to Variations in Photoshop). Sliders in Photoshop Elements 8 now have an icon beside them that reveal the Quick Fix previews. Click a preview and the modification is applied to the image. You can also click and drag within a specific preview to tweak its settings. This is a great consumer addition, and also helpful for professionals. Photoshop Lightroom could benefit from a similar preview feature.

Stealing from CS4, Part 1: Photomerge Exposure

I believe it was Picasso who said, “Good artists copy, great artists steal,” and I have no quarrel with products that borrow great features from other products. Photoshop Elements 8 has borrowed two great features from Photoshop CS4, both of which were exciting when released over a year ago and still excite CS4 users.

pse8-exposure

The first is Photomerge Exposure, which borrows technology from Photoshop CS3 and CS4’s Auto-Blend Layers feature. The original feature was designed to composite images with different depths of field but Photomerge Exposure uses it to automatically composite images with different exposures. The user marks the foreground object with the Pencil Tool; Photomerge Exposure transfers it to the image with the good background. The result avoids the poorly exposed images that are hard to avoid at night or in odd lighting situations.

Stealing from CS4, Part 2: Recompose

pse8-recompose

Photoshop Elements 8 offers Recompose, which Photoshop CS4 users will immediately recognize as Content-Aware Scaling. Content-Aware Scaling predicts which objects belong in an image’s foreground and manipulates the background for seamless stretching and resizing. The end result is magical. Recompose uses the same technology and even offers a couple improvements:

  • Protect and Remove brushes help fine-tune the Recompose process: paint over objects you want to keep or lose and Recompose will get a better result. This gives Elements users the added ability to remove people or objects during the process.
  • Select a print size from the Preset pull-down menu and Recompose will make the image the proper size, removing and protecting pixels where needed. This feature makes Recompose even smarter.

pse8-protect

The only downside to Recompose is its interface, which you have to use in order to apply Recompose to an image. I’m not used to it because Content-Aware Scaling in Photoshop CS4 doesn’t have one—it’s built into the general editing interface. However, Photoshop Elements has always been designed around multiple interfaces for things like this so I’m not surprised, and regular users of Photoshop Elements will only be blown away by Recompose.

Premiere Elements now integrated with Organizer

In the past, the Organizer was exclusive to Photoshop Elements and Premiere Elements had a different organization tool built into the application. Adobe has moved away from that arrangement and Premiere Elements 8 now shares the same Organizer as Photoshop Elements 8. I think this is the right approach and now Premiere Elements users can organize assets, auto-analyze clips and more. The Organizer can also do a few nice tricks with video clips, such as full-screen previewing with sound and transition options for quick and dirty slideshows. It didn’t make much sense for Premiere Elements not to share the Organizer with its still-image counterpart, so I approve of this change.

Making things easy with Online Albums

pre8-album

The Premiere Elements team really focused on making things easy and “smart” in version 8. One of the new features designed to make things easy is Online Albums, basically online templates for building simple video albums. They’re easy to produce and the album designs remind me of iMovie’s album designs. There are a lot of designs to choose from (and more on the way for Plus members) and in the usual categories (fun, family, travel and more) but while iMovie merely makes designs difficult to modify it seems Online Albums can’t be customized at all. Users select their images or videos, select an Online Album and then publish to FTP, hard drive or a couple other options. It always surprises me how users almost always want to use canned designs like this but then modify the heck out of it, so I am disappointed Online Albums have no customization options.

A suite of “Smart” adjustments

Premiere Elements has gone “Smart,” introducing three adjustment features with the “Smart” moniker and one, motion tracking, that could have been. These four new features are designed to “make video editing less work” for customers.

  • pre8-smartfix

    SmartFix is basically an automatic exposure and camera shake adjustment tool. Premiere Elements will change brightness and contrast levels in a clip for optimum exposure, highlights and shadows, and it will also reduce camera movement. Exposure adjustment is often hard to pull off realistically so I found that SmartFix worked well for minor cleanup of video clips or to increase contrast, but caused some unwanted effects when handling very underexposed or overexposed clips. These effects included murky or shifted colors, plugged shadows and other problems. I think SmartFix does as good a job as it can but it shouldn’t be counted on to save bad clips.

  • pre8-smarttrim

    Smart Trim is a very convenient tool for trimming boring or poorly shot segments of a clip, or trimming to fit a specific duration. Thanks to the new Organizer and its Auto-Analyzer, Smart Trim can use the clip’s Smart Tags to decide what to cut and what to keep. The result is a more interesting video, and it does a really good job. I like to use Smart Trim to cut clips to a specific duration. Smart Trim also handles fade transitions around each cut so the automatic trimming is seamless.

  • pre8-smartmix

    SmartMix maintains a healthy volume when sound and video tracks play together. This is probably the easiest of the “Smart” tools to apply: Audio Tools > SmartMix > Apply will take care of it, and it does a great job of reducing the audio clip volume so it doesn’t drown out audio brought in with the video clip. There’s also a SmartMix Options window for fine-tuning the results, but I didn’t need to really use it to get a good result.

  • pre8-motiontrack

    Motion tracking should have been named “SmartMotion” or “SmartTrack,” because it’s another new feature that automatically analyzes and applies effects to your video clips. In this case, motion tracking finds movement in a video clip, defines the moving object and then will track another object to the same motion path for synchronized motion. Premiere Elements 8 has new libraries of clip art that make this easy but I prefer to add color keyed video that has had its background removed. In any case, it works well and it’s a very exciting addition for consumers. As with Photoshop Elements 8, Premiere Elements 8 has outdone itself in terms of the intelligence and jaw-dropping effects of its new features.

Now synchronize content across multiple computers

The Elements Organizer has had a backup/sync feature that takes advantage of the 2GB of space offered for free with Photoshop.com membership, included with Elements 8. 2GB isn’t much space anymore but it can be helpful and it can be upgraded to Plus, which provides 20GB.

pre8-sync

With Elements 8, backups can now sync across multiple computers—this is handy for multi-computer families and users with multiple computers such as a laptop and a tower. There’s also a new Backup/Sync icon at the bottom of the Organizer. It’s at the bottom of the interface and not very visible, but it gives access to all the backup and synchronization preferences, allows manual syncing and resolves conflicts manually among other things. Handling backups is one of the major pain points of consumers, who don’t often see the need for backups until personal photos are lost for whatever reason. Any tool that helps make backups easier and personal photos safer is a major benefit.

Pricing and conclusion

The cost of Elements has remained the same:

Standalone products (Photoshop Elements 8 or Premiere Elements 8)

  • $99.99 full
  • $139.99 full, includes Plus

Bundled product (Windows only)

  • $149.99 full
  • $179.99 full, includes Plus

There are also some holiday deals coming soon, see below!

Black Friday (Nov 23-30)

Holiday – North America (Dec 7-21)

There aren’t a whole lot of new features for either application, but what’s been added are major advances in organization and in ease of use for consumers. In particular, cutting-edge technology that Adobe has acquired or developed is now paying off for Elements users as much as CS4 users—Recompose and the “Smart” tools in Premiere Elements 8 are prime examples.

Some of the new technology, such as People Recognition and SmartFix, are solid but not foolproof, and I’m not sure they can ever be foolproof. I do think they can and should be improved in the next release. But both Elements applications are excellent consumer choices and a good value for the money.

Photoshop Elements 8
Adobe Systems
Rating: 9/10

Premiere Elements 8 (Windows)
Adobe Systems
Rating: 9/10

Photoshop/Premiere Elements 8 Bundle (Windows)
Adobe Systems
Rating: 9/10

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> 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.

BOOK REVIEW: ActionScript 3.0 Classroom In A Book

as3-classroom

Remember “Training From The Source”? This was the name of Macromedia‘s official line of training books for Dreamweaver, Flash and other design applications. When ActionScript 2.0 was released I bought the book Flash MX 2004 ActionScript Training From The Source to learn that new version of the Flash programming language. I carried that large book through many airports and conferences, chipping away at its pages over the course of a few years.

By the time I was finished with that book, ActionScript had moved forward again to version 3.0, Macromedia was no more (having been acquired by Adobe) and “Training From The Source” was folded into Adobe’s own “Classroom In A Book” series. I thought it fitting to review the series recently with a look at ActionScript 3.0 for Adobe Flash CS4 Professional Classroom In A Book.

Small, compact, solid

Compared to the Training From The Source book, which was a large book in both page count and size, Classroom In A Book is smaller in both respects. I actually appreciate the smaller size because it increases portability. The book design is sharp, with a matte finish cover that is easier to handle and a clear layout design that aids learning. I was surprised the author, Chris Florio, had a laid-back, informal writing style—one would expect a workbook like this to have a no-nonsense tone—but I could appreciate a bit of levity after working on the exercises for hours at a time.

A different approach to ActionScript training

Classroom In A Book has roughly half the pages of its Training From The Source predecessor, so either ActionScript 3.0 is less complex than version 2.0 or the book doesn’t cover everything. It’s actually a combination of three things:

  • ActionScript 3.0 really is less complex than ActionScript 2.0, though it’s more verbose; the distinction is comparable to HTML and the more strict XHTML. Syntax is streamlined and coding skills apply to everything in a more uniform way.
  • Classroom In A Book doesn’t cover everything. Some topics such as CSS aren’t covered at all, while others (like classes) aren’t covered in their entirety. That might be a good thing, since ActionScript has always been a large language with many classes and elements. It seems this book is designed to teach essential ActionScript skills and leave minutiae to other resources.
  • Classroom In A Book is project-oriented, while Training From The Source was skill-oriented. Both books have projects to work on (and ship with a CD-ROM full of good project materials) but Training From The Source focused on skills such as handling text fields, XML, conditional logic, debugging and so on. Classroom In A Book thinks more in terms of building preloaders, loading content, creating quizzes and working with XML and video. Both approaches are good and Classroom In A Book teaches a great deal if one completes the exercises, but it’s not necessarily a compendium of ActionScript knowledge like Training From The Source was. It complements other sources such as the ActionScript 3.0 reference files, accessible directly from Flash.

Conclusion

ActionScript 3.0 for Adobe Flash CS4 Professional Classroom In A Book is worth buying, and particularly helpful for new Flash users who don’t know ActionScript or experienced Flash users who have not yet upgraded their skills to include ActionScript 3.0. The language really has made a sea change from ActionScript 2.0 and learning it requires training. Classroom In A Book is a good place to start.

ActionScript 3.0 for Adobe Flash CS4 Professional Classroom In A Book
Published by Adobe Press
US$54.99
Rating: 9/10

REVIEW: Adobe Captivate Fills The eLearning Niche

els

I am sometimes hired to produce electronic learning (eLearning) products such as demonstrations, quizzes and “textbooks on a screen.” In the past I have used Flash and the other Creative Suite applications to create these products, mostly because there’s no other good application for building eLearning tools such as these. I’ve always thought Director would be a good choice for this, but Adobe has only updated the application twice since acquiring it from Macromedia and eLearning is not its primary focus.

I was naturally surprised when I stumbled upon news that Adobe had an application called Captivate and a suite called the eLearning Suite that did focus on eLearning, and just a few months ago Captivate was upgraded to version four (the eLearning Suite is a new product). I’ve been covering Adobe Creative Suite apps for years now and this was one suite that had escaped my attention! This is because it’s targeted to PC-using eLearning professionals and not available for Mac users, which I really can’t understand: Mac-loving designers are often called to produce eLearning products, and unfortunately most of them aren’t aware of the great capabilities the eLearning Suite offers. Fortunately, Adobe tells me a version of Captivate for Mac is already in the beta testing stages, so I hope to see a Mac version released in the future.

The sum of its parts

What struck me about the eLearning Suite was how similar it is to the Creative Suite 4: other than Captivate 4 and some other features, the eLearning Suite consists of CS4 applications including Flash, Dreamweaver, Photoshop, Soundbooth, Bridge and other supporting applications, including Device Central for developing eLearning products for mobile devices. Acrobat 9 Pro and Presenter 7 (normally available in Acrobat 9 Pro Extended) are also included.

The eLearning Suite distinguishes itself from CS4 by a few unique applications and features:

  • Captivate 4,
  • A “Learning Interactions” library available in Flash CS4 Professional. This library includes movie clips for drag-and-drop questions including multiple choice, interactive, true/false, sequential, yes/no and several other formats. Each movie clip comes with detailed instructions so any intermediate Flash user should be able to handle them, but total novices may find them difficult.
  • CourseBuilder Extensions available in Dreamweaver CS4. The extension adds a “CourseBuilder Interaction” item to the Insert panel, which can create the same types of questions produced by Flash’s Learning Interactions but built with HTML and JavaScript. CourseBuilder Extensions is more robust and shows a gallery of question formats to choose from (and some formats have more than one layout and button design). CourseBuilder Extensions produces a lot of code for what it does but it works well for drag-and-drop functionality.

These features, along with the integration inherent between the CS4 products, help optimize the eLearning Suite for eLearning productions.

Adobe is assuming that eLearning producers are not web designers or Flash programmers, and drag-and-drop tools are needed for them to produce successful projects. I would agree with this if their assumption is true that the eLearning community is a separate market from the creative professional market. However, I believe the eLearning and creative professional markets are much closer than that. Designers and multimedia producers using CS4 now will be very comfortable with the eLearning Suite. It’s likely Captivate 5 will be developed for both Mac and Windows, and I hope Adobe Presenter will be as well—if so, it would be great to see the eLearning Suite become a part of the Creative Suite product family. I think it will happen—you heard it here first!

Two workflows

The eLearning Suite is a full complement of applications, so Adobe wisely emphasizes workflow as the key to successful eLearning production. There are two ways to do it:

  • Rapid authoring workflow revolves around Captivate 4 as the primary authoring tool (with Presenter 7 as an auxiliary tool) while the CS4 applications produce content such as graphics, audio and interactivity.
  • Traditional authoring workflow revolves around Flash CS4 Professional and Dreamweaver CS4 as the authoring tools for interactive and online eLearning products, complemented by their Learning Interactions and CourseBuilder Extensions. Captivate and the other CS4 apps are relegated to content production roles.

Both workflows deploy content through a variety of methods, and I think deployment is the killer feature of the eLearning Suite. It supports all the best formats for eLearning deployment, including SWF, HTML and interactive PDF (made possible by Acrobat 9’s SWF support). eLearning products can be deployed via CD-ROM, the World Wide Web, e-mail, mobile devices or local network. Even better, the eLearning Suite can aggregate and package content so it complies with the Sharable Content Object Reference Model (SCORM), the standards for web-based eLearning. All this can be delivered with a learning management system (LMS) or an online presentation tool like Acrobat Connect Pro.

Adobe’s holistic approach to content deployment aligns well with today’s technology: companies and employees use many different kinds of devices to receive and send content. If the eLearning Suite focused on CD-ROM or online deployment I don’t think it would be as successful, but the convergence of Flash, PDF and online technologies makes it possible for learning to take place anywhere, on one homogenous platform, and in adherence to the industry standards represented by SCORM.

Captivate 4: Powerful application with familiar features

captivate-box

Working with Captivate 4 was an enjoyable experience, which is not always the case with applications designed only for Windows. Captivate 4 is a power application thanks to elements borrowed from several familiar applications:

  • PowerPoint: The slide-based structure and video/audio support makes Captivate a smart choice for presentation design as well as eLearning production.
  • Flash: Each slide has a timeline so elements can be interactive (and should be if successful learning is the goal).
  • Presenter: Presenter is basically a PowerPoint-to-Flash application anyway, and Captivate imports PowerPoint in the same way.
  • Acrobat: The interface design is mostly influenced by PowerPoint and Flash, but the main toolbar has the same look and feel as that in Acrobat 9.

captivate-screen

The round-trip PowerPoint functionality is excellent: users can import PowerPoint presentations and add content and interactivity not available in the PowerPoint application. I expected a method to export back to PowerPoint, but it seems this is not the case. The next best thing is a dynamic link between Captivate and PowerPoint projects, so elements of the project design can remain in PowerPoint and be updated as needed. However, I’m not sure why anyone would do this because Captivate’s functionality and ease of use is superior.

The coolest feature in Captivate 4 is on-the-fly converting of slide notes to speech! Only two voice are available (“Kate” and “Paul”) and they must be downloaded separately from the Adobe website, but it is a thrill to hear your notes read aloud. The voices are electronic, much better than MacInTalk’s monotone but not up to par with a real human voice—but it’s a helpful feature nonetheless. Paul’s voice seems a little more natural than Kate’s, which is ironic because my clients tend to want female voices in their presentations and eLearning materials.

captivate-reviewer

Captivate 4 includes a Send For Review feature to make it easier for instructional designers and subject matter experts to collaborate on eLearning products. This is facilitated by an AIR-based Captivate Reviewer app so collaborators can view Captivate projects and comment as needed. Adobe has really focused on big-picture improvements over the last few years, such as collaboration and productivity improvements, and the good news is that such improvements are applicable to a wide range of products including Captivate 4.

captivate-timeline

Audio and video is very important to Captivate and the eLearning Suite. Soundbooth CS4 ships with the eLearning Suite and helps produce audio, while video can be recorded on-screen within Captivate. Movie clips, including FLV and QuickTime, can be imported easily and Flash CS4 Professional’s video skins are available. I had no problems importing audio and video, which is to be expected. The one thing I did miss was a video application comparable to Soundbooth CS4.

The other major feature in Captivate 4 is the Table of Contents and Aggregator tools, which are handy for larger eLearning projects. These two tools create a table of contents for easier navigation and/or combine modular projects into one whole. Most of my eLearning projects are not large enough for the Aggregator but the Table of Contents is awesome—in a few clicks I can do what takes me an hour or two in Flash! I wish I could preview the table of contents within Captivate—the project must be published before the table of contents can be seen.

Widgets, mice, questions, interactivity

Captivate 4 comes with a bunch of widgets and other interactive elements, so an interactive eLearning experience can be produced even if a user doesn’t want to monkey with audio and video. The Insert > Mouse command inserts a mouse cursor on screen and can be animated to show movement and clicks. The Quiz menu can create and customize several types of questions, and it pretty much offers the same questions as the Learning Interactions and CourseBuilder Extensions. I prefer to add questions here since I adopted the rapid authoring workflow and most of my eLearning work is done in Captivate. However, I’m not thrilled by the default question designs—part of this is because I’m not thrilled by the way designs look in PC-only apps in general.

The other interactive feature available in Captivate 4 is Flash-based widgets, and they really make a Captivate project look good. Widgets include buttons, check boxes and radio buttons, combo and list boxes, a dynamic certificate and even a jumbled word puzzle. Some of these widgets will not please designers who want a really slick design, but drag-and-drop users will really love them. My big complaint is that widgets don’t seem to preview properly within Captivate: I had to publish my projects in order to test them. A “Live View” feature similar to that in Dreamweaver CS4 would be a great feature for Captivate 5.

Conclusion

Captivate 4 is an anomaly in the Adobe product universe—an application that employs technology from several CS4 applications but doesn’t exist in the Creative Suite family. Adobe had to build an eLearning Suite around Captivate and populate it with CS4 apps. I believe this is the wrong thinking: even though eLearning professionals may not be creative professionals, there are many creative professionals who build eLearning products and can benefit from Captivate’s broad toolset and ease of use. I think the release of Captivate for Mac will draw a lot of these creative professionals toward the eLearning Suite.

If you produce eLearning products as part of your job, Captivate 4 is a strong recommendation. Designers who know their way around CS4 should also consider the eLearning Suite, though for most designers and agencies it doesn’t make sense to carry CS4 and the eLearning Suite—most of the applications overlap. I’ll be watching this new suite closely and will be very interested to see how it evolves in the next few years.

Adobe Captivate 4
Adobe Systems
US$799/299 upgrade
Rating: 9/10

Adobe eLearning Suite
Adobe Systems
US$1,799/599 upgrade
Rating: 9/10

Adobe InDesign CS4 Family Drives Personalized Publishing for Historic Print on Demand Book, The Obama Time Capsule

PRESS RELEASE

SAN JOSE, Calif. – May 21, 2009 – Adobe Systems Incorporated (Nasdaq:ADBE) today announced that Adobe® InDesign® CS4 Server software, Adobe’s automated engine for professional page composition, is powering automated layout and rendering of the The Obama Time Capsule as part of an innovative HP solution for personalized, print-on-demand publishing. The historic, illustrated coffee table book is published by Rick Smolan, creator of the renowned “A Day in the Life” photography book series, utilizing HP technology. The book, which purchasers are invited to personalize, celebrates President Barack Obama’s journey to the White House and his first 100 days in office. Beginning today, it is available exclusively on Amazon.com.

The Obama Time Capsule blends professionally produced and user-generated content by using an intuitive, web-based interface to allow consumers to combine their own unique photos and text with the professional content.

Automated publishing, exceptional quality

The HP Print on Demand (POD) platform and Adobe InDesign CS4 Server software – integrated into the overall HP POD solution – automatically generate a unique book in Adobe Portable Document Format (PDF) that is printed using HP Indigo digital presses, bound and finished, and delivered to each customer. Using templates created in Adobe InDesign CS4 software, Adobe InDesign CS4 Server automates the process of professional book design while maintaining exceptional quality, including a full range of creative effects and superior typography and composition.

“The customized Obama Time Capsule books will be as beautifully produced as the coffee table books seen on bookstore shelves today, yet each will reflect the creator’s own story and experiences,” said Will Eisley, director, product management for Design Segment at Adobe. “Adobe InDesign CS4 and Adobe InDesign CS4 Server are helping people express their ideas in rich and unique ways by enabling them to create their own personally meaningful books, without creative compromise. We are proud to provide key enabling technology for HP’s Print-on-Demand platform, and to be an integral part of this exciting project celebrating the run-up to the election and the first 100 days of the Obama presidency.”

“The Obama Time Capsule showcases how customization can bring personal value to books”, said Andrew Bolwell, director of new business initiatives for HP. “With Adobe’s support, we’ve been able to bring this key feature to life and create a new class of books for the consumer, enabled by print on demand.”

About Adobe InDesign CS4 Server

Adobe InDesign CS4 Server is a key component of many of the world’s leading automated publishing solutions, allowing publishers to replace manual processes and create new content and revenue streams. It can be integrated into publishing solutions using standard development tools, providing a robust, flexible, and scalable engine for professional page composition. While it saves time and effort, InDesign CS4 Server offers all the capabilities of the latest desktop version of Adobe InDesign CS4 software in a server-based environment. As a result, Adobe partners and in-house development teams can build solutions that combine all of the professional design, layout, and typographic capabilities of the desktop software with the power and efficiency of server-driven automation. Templates for automated publishing solutions powered by InDesign CS4 Server are created using InDesign CS4.

About Adobe InDesign CS4 Software

InDesign CS4 software breaks down the barriers between online and offline publishing. The application enables creation of compelling print layouts, immersive content for playback in the Adobe Flash® Player runtime, and interactive PDF documents. For more information on the Adobe InDesign CS4 family of products, please visit: www.adobe.com/products/indesign/family

For more information on the book, please visit: www.TheObamaTimeCapsule.com

About Adobe Systems Incorporated

Adobe revolutionizes how the world engages with ideas and information – anytime, anywhere and through any medium. For more information, visit www.adobe.com.

Adobe CS4 and ROI: Is Productivity The New Killer Feature?

cs4lineup

Last fall Adobe Systems released Creative Suite 4 (CS4) to good reviews, which was good news to Adobe since CS4 represents the bulk of their creative pro software products and includes industry standards such as Photoshop, After Effects and Flash. Adobe stayed true to their traditional upgrade cycle and released all the CS4 products simultaneously, 18 months after CS3 was released.

But over the past few years, the 18-month product cycle has forced Adobe to release upgrades that haven’t had as many groundbreaking features as those in the late 1990s and early 2000s. Many CS4 applications saw more improvements in efficiency and productivity as fewer new tools and cool technologies have been included. In my reviews I considered this shift detrimental, but according to third-party research commissioned by Adobe productivity may very well be the “new killer feature” that delivers tangible savings to CS4 users.

The methodology

Adobe commissioned Pfeiffer Consulting, an independent technology research institute, to benchmark the productivity capabilities of CS4 and compare them to CS3 to measure productivity gains. More than 125 benchmarks were conducted across the design, web, video and digital imaging (Photoshop and Lightroom) segments and tested a variety of large and small real-world tasks and assignments including:

Dave Burkett
Dave Burkett
Dave Burkett.

Dave Burkett, Adobe’s Vice President and General Manager for Creative Suite – Design and Web Segments, said the goal of CS4’s productivity capabilities was to improve “deep usability”—refinements of the small steps designers execute every day in their daily work. “When developing Creative Suite 4 we paid close attention to our customers’ needs and pinpointed common tasks that matter most to them. We then focused on adding features and improving upon existing features in order to make those tasks more intuitive and less repetitive. Put simply, it now takes less clicks to achieve the same results.” Andreas Pfeiffer, who conducted the research, wrote that “the cumulative effect of small productivity gains in everyday operations is almost universally underestimated.”

The benchmarks were performed by professional designers and measured by researchers. No scripting or automation was used. The research does not take into account the time and money spent in training, installation and continued learning after the initial purchase, since such investments apply to previous versions of Creative Suite and don’t affect the measurements in productivity. For more information about the benchmark methodology, visit www.pfeifferconsulting.com.

roi-chartPfeiffer’s benchmarks were quite thorough and takes very small time savings into account. All text and graphics ©Pfeiffer Consulting 2009.

The findings

Pfeiffer found that “CS4 increases efficiency in a vast variety of operations, including many routine, everyday production tasks.” In particular, the following CS4 features provided substantial time savings:

  • InDesign CS4’s Live Preflight,
  • Dreamweaver CS4’s Live View and Live Code,
  • Photoshop CS4’s Adjustments and Masks panels,
  • Tapeless video support in Premiere Pro CS4, and
  • CSS export from Fireworks CS4.

As an example, Illustrator CS4’s multiple artboards feature allowed designers to consolidate related projects in one file and become more efficient when experimenting with color palettes and designs. I’ve been using multiple artboards myself in my design business: handling one or two Illustrator CS4 files is a lot easier than handling one file for every illustration. I work with a lot of logos and brands, which often have several versions for size and color, and multiple artboards help me organize my clients’ branding. Burkett commented that multiple artboards, according to the research, can save designers three hours per month.

indesign-charts
The research on InDesign CS4 shows Smart Guides and Live Preflight can save a load of production time. All text and graphics ©Pfeiffer Consulting 2009.

Other examples, such as InDesign CS4’s Live Preflight, save time and money fixing printing errors by intercepting them early—research found that Live Preflight helped designers find and fix errors twice as fast than with InDesign CS3. Live Preflight is one of my favorite CS4 features because I haven’t had to mess with preflighting at the end of a project like I used to—violations are flagged immediately and I can fix them right away. Photoshop CS4’s Adjustments panel and Dreamweaver CS4’s Live View and Live Code features were shown to offer similar speed improvements.

CS4 was also designed with multiple media content delivery in mind, and is the first Creative Suite to fully integrate Macromedia software (Flash, Dreamweaver and Fireworks) so Pfeiffer also analyzed cross-application features such as Photoshop Smart Object support in Dreamweaver CS4, Flash CS4 Professional’s abilities in handling After Effects and InDesign content, and Dynamic Link technology that integrates assets between the CS4 video applications.

So how much money does productivity save you? Pfeiffer’s analysis estimates show a substantial sum:

  • $5,753 saved with CS4 Design Premium compared to CS3 Design Premium
  • $10,563 saved with CS4 Web Premium compared to CS3 Web Premium
  • $11,404 saved with CS4 Production Premium compared to CS3 Production Premium
  • $4,020 saved with Photoshop CS4 and Lightroom 2 compared to Photoshop CS3 and Lightroom 1

Burkett commented, “Ensuring that time- and cost-saving benefits were built into our Creative Suite offerings was always a priority, but is even more vital right now given the current economy. Users can now complete everyday tasks in significantly less time, allowing designers and agencies of all sizes to come in under budget, deliver ahead of deadline and maximize time spent on the creative aspects of the project.”

ps-chartsPhotoshop CS4’s OpenGL support and speed has always been one of its most promoted features, mostly because of its efficiency potential. Pfeiffer’s research supports this, but my view is that your mileage may vary. All text and graphics ©Pfeiffer Consulting 2009.

My view

I think CS4 is a major step ahead of CS3 when it comes to efficiency: it’s clear that many improvements in CS4 had efficiency improvements in mind. I’ve always thought this shift toward improving efficiency occurred because it’s become harder and harder to pack the upgrades with cool, exciting new tools when their toolsets are quite mature already. But it appears productivity might have been Adobe’s game plan all along.

As with many such objective findings in the industry, your mileage may vary. Photoshop CS4’s Adjustments panel was found to decrease the time making adjustments in half, but I actually do not like the feature: the new keyboard shortcuts are difficult and the panel is either too small to make adjustments or so large the panel strip takes up too much space. As another example, the research found Fireworks CS4 and Dreamweaver CS4 cuts down CSS creation and management time by over 80% but the CSS generated by Fireworks was not clean enough for my tastes and I still do quite a bit of coding in Dreamweaver.

fw-dw-chartsFireworks CS4 and Dreamweaver CS4 have various new improvements in CSS creation and editing that appear to save a great deal of time. However, my experience suggests not everyone will reap such productivity gains. All text and graphics ©Pfeiffer Consulting 2009.

But I am a fan of many other efficiency improvements, especially InDesign CS4’s Smart Guides and Live Preflight features and Dreamweaver CS4’s Live View feature. Flash CS4 Professional’s new object-based animation system, which was also cited as a major time-saving feature, can be difficult for experienced Flash users to get used to but does make sense in the long run. Ultimately, consumers should remember that Pfeiffer’s benchmarks were performed by experienced users of both CS3 and CS4—designers new to CS4 will have a harder time duplicating their level of efficiency—but, given training and experience, the time and cost savings could be substantial.

SIDEBAR: The Visionaire Group and Fast & Furious Show CS4’s Time Savings

Adobe is praising The Visionaire Group for leveraging the productivity benefits of CS4 in order to maximize the online campaign for the movie Fast and Furious. Universal Pictures, the studio that produced Fast and Furious, attributes the movie’s recent #1 position at the weekend box office to the online experience that sparked the enthusiasm of young car enthusiasts and hard-core moviegoers. An engaging Web site, rich-media advertisements, a downloadable desktop widget and a custom iPhone Web site were just some of the campaign’s key elements. J.P. Richards, vice president of marketing, said, “Our goal on Fast and Furious was to develop the most compelling creative content and Adobe Creative Suite 4 delivered way beyond my expectations, while doing it in half the development time.”

In an article published on Enhanced Online News, several CS4 features are called out including Flash CS4 Professional’s 3-D tools, a faster Adobe Media Encoder, Dreamweaver CS4’s Code Navigator and integrated Flash and AIR development with the Adobe Flash Platform.

Today’s economy

In the current economic climate, such findings are sure to command attention. “In today’s economy more than ever, investments in software need to be justified by clear business reasons,” said Andreas Pfeiffer of Pfeiffer Consulting. Adobe certainly showed good timing in paying close attention to efficiency and time-cost savings just before the recent economic downturn. According to Burkett, productivity improvement was a primary objective of the CS4 product line and it’s the first time product teams scrutinized this objective in such detail: “We took a new approach with CS4 and decided very early on in the development cycle to better understand how real-life projects could be enhanced with productivity improvements.” Customers were consulted to help pinpoint the most effective ways to improve workflow, and during development the product teams worked to improve raw performance and reduce steps required to complete a task. In some cases, the goal was to make it so users wouldn’t have to access a single panel to execute a command, although I’ve noticed that in some applications (such as Photoshop CS4) more commands have migrated to panels.

Even though productivity improvement was a primary goal, no metrics were developed internally to measure the applications’ success; despite this, Burkett and his team were pleased with the results. “We’re happy that these benchmarking tests were performed,” said Burkett, “as they allow us to gauge just how much of an improvement CS4 is over previous versions.” For more information on Pfeiffer Consulting, visit www.pfeifferconsulting.com. For more information on the CS4 ROI study, including the benchmark data, visit www.adobe.com/go/cs_productivity.

BOOK REVIEW: Photoshop CS4: The Missing Manual

missingmanual

Who misses the printed manuals that use to come with Adobe’s applications? I used to read those things, but now they’re only online. The last Adobe Creative Suite product that shipped with manuals was CS3 Production Premium, which came in a large, satisfying box full of manuals. Well, it seems David Pogue missed the manuals and began the “Missing Manuals” line of books designed to fill in for those manuals.

Lesa Snider King has written Photoshop CS4: The Missing Manual and it’s worthy of the title. The book is over 750 pages and has a massive amount of information about almost all of Photoshop CS4’s functions. Lesa does a good job of writing clearly yet with a little humor, which is easy to overdo. The interesting thing about Photoshop CS4: The Missing Manual is that it’s not just a dry technical manual but also combined with some simple tutorials that illustrate some of Photoshop CS4’s best and most important features. These tutorials are relatively simple and aren’t as satisfying as the advanced things you’ll find in books like Adobe’s Classroom in a Book series, but for beginner and intermediate users they work just fine—and that’s the audience this books serves most.

When is a manual not a manual?

When I first started reading this book for review, I had to decide whether to judge this book as a “tips and tricks” book or a true manual, which has a different purpose and structure. I decided to judge it as a manual, and in that regard Photoshop CS4: The Missing Manual has some gaps. I think every good manual must make it easy to find out how to operate something when it’s needed; however, this book doesn’t group things together to make them easy to find. I went to the index to learn more about the Adjustments panel, one of Photoshop CS4’s most important new features. I learned the panel itself is given little notice because its functions are explained throughout the book in various sections. A user needing to decipher the Adjustments panel’s icons would be hard-pressed to do so with this book.

Not everything about Photoshop CS4 is covered in the book. Some things like Color Settings are mysteriously not covered at all, which I think is a shame. Others are covered but maybe not as thoroughly as the online Adobe help docs. But most Photoshop CS4 tools and commands are indeed covered, so I would bet Photoshop CS4: The Missing Manual stands as the most comprehensive “missing manual” in the bookstore today. It’s not perfect, and it’s not exactly a manual for good or for bad, but it’s still a fine resource.

Photoshop CS4: The Missing Manual
Lesa Snider King
Published by Pogue Press/O’Reilly
US$49.99
Rating: 8/10