Tag Archives: flash

Day 2 Announcements From Adobe MAX: PhoneGap, Flash Player 11, AIR 3 and Unreal Engine 3

Compared to the first day’s MAX keynote, the second day’s keynote was much more focused on hard-core development but also a lot less exciting and with fewer major announcements. The only acquisition that was announced was Nitobi, which brings the PhoneGap development platform into Adobe’s portfolio. PhoneGap is a popular way to publish HTML5 and JavaScript-built applications to most major mobile platforms, including iOS, Android, BlackBerry and Windows Mobile. I bet it will be rolled into either Dreamweaver—which has had similar frameworks like jQuery Mobile integrated with it—or the newly-announced Adobe Creative Cloud, where it could end up as another of its creative services (along with TypeKit and others). They did say that PhoneGap will remain an open-source project available to everyone.

According to the keynote, Adobe’s intention is to “bet on HTML5″ while “doubling down on Flash,” which I expected. Some people, particularly Apple fanboys, expect Adobe to kill Flash—but I don’t think it will happen anytime soon if at all, and right now HTML5 can’t duplicate all of Flash’s capabilities so I don’t think it should. Interestingly, Ben Forta—Adobe’s Director of Platform Evangelism—asked for a show of hands of who has built an HTML5 application before, and almost no one raised their hand.

Flash Player 11 and Adobe AIR 3 were also announced, which focus on games, rich media and data-driven applications—all things that are not easy to implement with HTML5 right now. I’m particularly interested in 3D and gaming capabilities that are being built into Flash Player 11, and a demo of the Nissan Juke website—which features an online driving game—shows some good things with the new technology.

Other announcements

  • Adobe Edge, currently in beta, has reached the third preview iteration and has some new features including loops and hyperlinks. The beta has been downloaded over 150,000 times.
  • The new ThemeRoller product was demonstrated, showing how jQuery Mobile themes can be built with a user interface. This is also something that can be built into Dreamweaver, but at this point it looks like it’s generating a lot of CSS code. Until ThemeRoller can generate lean code, web developers will criticize Adobe for bloated code.
  • CSS Shaders was demoed for the crowd. CSS Shaders is a CSS3 module that Adobe has contributed to the W3C for inclusion in the general CSS3 spec, and it leverages current PixelBender technology to bend and warp HTML elements. The presenter had a very nice demo of a live page curl on an HTML element and also on a live video element. CSS3 is where Adobe can provide the most benefit to developers, because CSS is pervasive across the web and it’s not tied to a particular product.
  • Another CSS3 module presented by Adobe is CSS Regions, which uses CSS to generate text columns and live text wrap. This is already implemented in Google’s Chromium (a beta version of Chrome) and Internet Explorer 10.

The last presenter, Epic Games’ CEO Tim Sweeney, showed something that means a lot to me personally: Unreal Tournament 3 running in Flash. I played a lot of Unreal Tournament 2004 years ago and Unreal Engine 3 (UE3) is now able to run on Flash—how cool is that? According to the press release, Flash Player 11 has up to 1,000 times faster 2D and 3D rendering than Flash Player 10, which sounds…unreal. If Flash can gain a foothold as a runtime for top-of-the-line games, Adobe can pivot the technology into a data-centric and graphics-centric product and leave web graphics and rich Internet experiences to HTML5, which is what I think will happen one way or another.

Flash Professional CS5 Review

flashcs5-box

Flash Professional CS5 is in an odd position nowadays. As part of the expanding Flash Platform, it now shares Flash authoring with Flash Catalyst CS5 and Flash Builder 4 as well as the third-party products on the market. Flash content is deployable with PDF now as well as Flash Player and Adobe AIR, online and offline. And other Adobe products like InDesign CS5 can publish Flash content as part of a larger push toward digital publishing.

However, Flash Professional CS5 does have a place thanks to its unique combination of drawing, animation and ActionScript. No other Adobe product has quite the same balance between creativity and application development, and while I think its specific market is shrinking (developers can move toward Flash Builder 4, creatives can move toward InDesign and Flash Catalyst CS5) it also provides a place for designers who can do both code and creative.

Typesetting is still a chore

I have never enjoyed working with type in Flash the way I have in InDesign or even Photoshop and Illustrator. Macromedia‘s old user interface just has never been very type-friendly. Flash Professional CS5 has a new type engine that supports the Text Layout Framework now built into Flash Player 10, and it’s a big improvement. Many typographic controls are now supported including leading, kerning, discretionary hyphenation and digit case and width. Paragraph-level controls such as columns, margins, indention and vertical justification are also included.

The new type controls are a vast improvement but compared to InDesign and Photoshop, Flash Professional CS5 has a long way to go in terms of actual usability. Even though using them are frowned upon, I sometimes need to use horizontal and vertical scaling—but neither are included in Flash Professional CS5. The Size and Leading items in the Properties panel have no up/down arrows beside them, which are often useful. You still have to select the setting and type it in. Photoshop’s “scrubby sliders” are still the best way to quickly modify settings in any Adobe application, and those were borrowed from Adobe’s video applications. But I am grateful for many improvements to typography in Flash, especially columns, and consider it a major improvement.

Two improvements to two tools new to CS4

The Deco brush tool and Bones inverse kinematics (IK) system were both new to Flash Professional CS4, and in CS5 they have been improved:

  • The Deco brush tool has many more drawing effects that create particle systems, grids, decorations, fire, lightning and other effects. The Symmetry Brush might be the most interesting: it creates multiple symbols rotated around a center point. This can be useful in some projects. Several of the other brushes are actually fairly weak: the Flame Brush just produces a mash-up of vector shapes colored like fire, and the Building Brush creates basic clip art of buildings. You should play with the new drawing effects and see if any can add something to your own projects.
  • Flash Professional CS5 introduces Spring for Bones, which adds resistance to bones as others move around it. This results in more natural poses and animations, and even though there’s only two settings for it—Strength and Damping—they really shore up the naturalness of IK animations in Flash. IK animations in Flash Professional CS4 could sometimes look unnatural because bones didn’t really have resistance. The Spring settings changes that.

There’s also two nice improvements to video in Flash Professional CS5. Cue points, which can be inserted at points within a video to trigger ActionScript or other interactivity, can now be defined in the Properties panel. Developers who take advantage of this can change the way users experience their Flash video content. The other great improvement is playable video on the stage—until now, you had to test your movies to see the video play. This was a very annoying aspect of working with video in Flash and I am very happy to see it resolved!

ActionScript improvements for the beginner

ActionScript 3 can be tricky, especially if you are used to earlier version of ActionScript. Flash Professional CS5 introduced the Code Snippets panel, containing sample code for a variety of common functions, and custom class code hinting and completion in the ActionScript editor. Both of these are actually fairly useful for the expert coder as well as the beginner, but it’s novices who will benefit the most. In particular, the snippets in the Code Snippets panel are annotated with comments that explain how the snippet works, and in better detail than what you find in the reference docs. If you want to learn ActionScript 3, a combination of books like the Classroom in a Book series and these snippets would be a good training resource.

Publish your Flash content anywhere…almost

Adobe has done a great job in the past year of spreading Flash publishing capabilities across its products. Acrobat 9 and Reader can play Flash content in a PDF. Flash Platform applications can publish to Adobe AIR, which runs on computer desktops. Adobe Device Central, which is a fairly mature application now, makes it easy to design Flash for mobile devices, and the Open Screen Project is spurring device manufacturers to support Flash. The OSP encompasses BlackBerry, Android devices and several other mobile devices on the market, and if it works Flash will be available across the mobile market as well as the desktop market, where it currently enjoys almost total market penetration.

However, as I’m sure everyone reading this knows, Flash can’t publish on the iPhone, iPad or any Apple mobile product. The technology is there with Flash Professional CS5 and the new Packager for iPhone, which compiles Flash and ActionScript code into native iPhone code, but just before CS5 was announced Apple changed the iPhone developer agreement and banned all apps built with cross-compilers like the Packager. Adobe opted to leave the Packager in Flash Professional CS5 but will not develop it further, guessing that Apple will never let Flash users produce content for their devices.

I never did actually build an application and test it with the Packager for iPhone, and I doubt I ever will—which is a great shame, because I was really looking for to using it. But without Apple’s blessing, applications built with Flash technology can go no further than the testing environment.

Conclusion

Flash Professional CS5 would have been a spectacular upgrade if the Packager for iPhone could actually publish to the iPhone. Without it, the application has a few major improvements but most new features are updates to existing features and I see much more development being applied to Flash Builder and the new Flash Catalyst. The addition of the Text Layout Framework is an important step toward supporting better typography in Flash, and designers who are serious about Flash and type will consider that reason enough to spend $199 on the upgrade.

If you consider yourself a creative or a coder but not both, this may be the time to think hard about switching to Flash Catalyst CS5 or Flash Builder 4. Flash Professional CS5 is still a phenomenal application that created an entire industry, and the upgrade makes sense for many Flash designers and developers, but the fragmentation of the mobile market and the expanding Flash Platform has made the future of Flash unpredictable.

Flash Professional CS5
Adobe Systems
US$699/$199 upgrade
Rating: 8/10

BOOK REVIEW: Papervision3D Essentials

papervision3d

Paul Tondeur and Jeff Winder’s Papervision3D Essentials is a solid book with clear writing, a very hands-on approach to learning Papervision 3D and a thorough coverage of the material—at 400 pages, it’s a meaty book despite its size.

Papervision3D is an open-source ActionScript 3.0-based engine for generating 3D content for Flash. It seems 3D is becoming more important for Adobe and Flash: even though Adobe still has not produced an application strictly for creating 3D content, a few Creative Suite apps are adding 3D functionality to their features, most notably Photoshop which has had 3D tools for a couple versions now. This means that more and more 3D content will eventually reach Flash Player and a framework for handling such material is more and more pertinent.

Papervision3D Essentials is mostly exercises and written lecture, which is advantageous for readers who want to learn by doing. It’s comparable to the Classroom In A Book series, though I’d say Papervision3D Essentials has less explanatory material that is sometimes important to explaining concepts. I’m disappointed the book doesn’t have a companion CD, though the code in the book is available for download online.

As far as the exercises themselves go, they are solid and provide good training for Papervision3D for beginners and intermediate users in particular but also for advanced users. The exercises I did were fairly easy to follow and made some impressive results by the end. I’m a learner who likes to dive into more explanatory copy at the beginning of the chapters, and I wish the book did flesh out the concepts a little more, but it was an enjoyable learning experience and the authors should be proud of Papervision3D Essentials. I could go for a book with color pages and a more interesting design, but the material itself is very good.

Papervision3D Essentials
Paul Tondeur and Jeff Winder
Published by Packt Publishing
US$44.99
Rating: 8/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: Three Books On After Effects CS4

I usually review books separately, but today I’m reviewing three books that cover Adobe After Effects, the video compositing software that’s popular for both special effects and web animations. It’s very rare to find a book that’s suitable for novices and experts alike, and for a complicated application like After Effects it’s best to learn with a variety of training sources. Here we look at three, all from Adobe Press:

Classroom in a Book

aeclass

The “Classroom in a Book” series is project-oriented and suitable for novices and intermediate users. I found this to be true in ActionScript 3.0 for Adobe Flash CS4 Professional Classroom in a Book and it also applies to Adobe After Effects CS4 Classroom in a Book. Knowing the fundamentals of working in After Effects CS4 is helpful, though the book covers some of the basics in its first pages.

I was surprised to see some advanced topics covered in Classroom in a Book, such as 3D, motion stabilization, Mocha, particle systems and Timewarp. This is only a sample of advanced After Effects topics, but that is enough to challenge some readers and entice them to some more advanced books. One of the strengths of Classroom in a Book is its broad appeal to readers with a variety of skill levels.

Classroom in a Book is well-designed and the projects are interesting: a couple use illustrations from professional illustrator Gordon Studer, giving the projects a professional feel not always offered in training projects. If you are just getting into After Effects, or have been using it for awhile and want to fill in the gaps in your training, Classroom in a Book is a good selection.

Visual Effects and Compositing Studio Techniques

aevec

This book has been around for years and is updated whenever a new version of After Effects is released—the current author, Mark Christiansen, has written the last four editions. Studio Techniques is a more advanced book that focuses on visual effects and compositing techniques, so it is more specialized than Classroom in a Book and applicable for some industries (video, TV, special effects) than others (web design, multimedia). You could go through your entire After Effects career and never need to know color keying or morphing, though these techniques certainly make for more interesting results and for some industries they are essential.

Just like Classroom in a Book, Studio Techniques is well-designed. The included CD-ROM has two extra chapters on scripting and JavaScript, both of which are valuable for advanced users. There are some example projects on the CD, which are walked through in the book, but it’s important to know that this book is not really project-based like Classroom in a Book. The projects are there for illustration but a lot of the knowledge is to be gained simply by reading. Some scripts and trial software complete the CD, but there’s no index for the scripts so you have to read the book to know what they do.

Despite some of these little quibbles, Studio Techniques is a great book that has filled an important niche for years. Mark’s writing style is very good and the content is excellent. Pick it up if you want to get into visual effects with After Effects or expand your general After Effects skills.

After Effects for Flash

aefl

Studio Techniques serves a niche, and a large niche at that. After Effects for Flash/Flash for After Effects serves a smaller niche, the intersection of After Effects video with Flash animation and ActionScript. But it’s an important niche, and even more important now that Adobe sells both products and has made integration a key factor of CS4. I’m very excited to see this book in the marketplace, and it’s written by Richard Harrington and Marcus Geduld who are both familiar to readers of Layers Magazine.

After Effects for Flash was written for both After Effects and Flash users, and the authors naturally could not guess what skill levels their readers would have with both applications, so the first 90 pages comprise a general introduction to both applications. This is fine but it also means a quarter of the book is beginner’s material. However, the rest of the book makes up for it with some very nice projects for intermediate and advanced users. After Effects for Flash focuses more on projects than Studio Techniques does. The projects provide a mix of Flash and After Effects projects, but overall they seem to skew more toward After Effects projects that produce content or improve upon SWF or FLV output. This makes the book ideal for multimedia artists and web designers.

Conclusion

All three books are well done and have a place in the After Effects user’s bookshelf. Each one serves a specific audience and covers aspects of After Effects and Flash, so I leave it up to the reader to decide what books he/she needs. After Effects for Flash is a special case because it has such a specialized focus that it seems to be applicable to all skill levels but only to those working with an integrated After Effects/Flash workflow.

Adobe After Effects CS4 Classroom in a Book
Adobe Press
US$54.99
Rating: 9/10

Adobe After Effects CS4 Visual Effects and Compositing Studio Techniques
Adobe Press
US$59.99
Rating: 9/10

After Effects for Flash/Flash for After Effects
Adobe Press
US$54.99
Rating: 9/10

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

BOOK REVIEW: Search Engine Optimization for Flash

seo-flash

Back in the late 1990s and early 2000s, Flash was the red-hot new technology for the Web. Designers were building user-unfriendly splash screens and sometimes building complete websites all in Flash. Eventually a counter-movement developed that steered designers back toward semantic HTML markup, web standards and other lean, user-friendly web design methods.

One of the claims made against 100% Flash websites was that they are not indexed by search engines, since they cannot read text set in Flash. This never made sense to me because my own website at jeremyschultz.com is 100% Flash and it is indexed very well—some of the work in my client portfolio actually scores higher than my clients’ websites or names. One can only conclude that Flash can co-exist with a well-optimized website, and Todd Perkins‘ book Search Engine Optimization for Flash explains why.

Working with Flash

SEO for Flash had a lot of great information I didn’t know about—for example, Adobe has given Google and Yahoo! a special version of Flash Player that allows those search engines to index Flash text and links with no problem. Flash applications and movies can be optimized for search engines just like a regular HTML page—it’s just done differently, and it gets more complicated with JavaScript, AJAX and dynamic content are thrown into the equation. SEO for Flash details all the techniques needed to maximize search engine optimization for a variety of Flash projects. It goes even farther by including a chapter on optimizing Rich Internet Applications (RIAs) built with Flex, an application development program that uses the same ActionScript as Flash. This was an unexpected inclusion.

What brings the book together is the final chapter on optimizing a Flash website. Over 40 pages were devoted to this chapter and it tackles real-world examples, so it may be the most useful segment of the whole book. Some books make the mistake of teaching guidelines and techniques without applying them—which then requires the reader to practice and figure out how it’s done. SEO for Flash gives the reader more insight into this critical step of the process, such as focusing optimization efforts on searchable text, deep links and shared data sources.

Where’s the files?

I really love this book—it debunks several myths, does a great job teaching its readers and focuses on a neglected segment of web design. However, there is one glaring flaw: there are several exercises throughout the book that refer to Flash, HTML and XML files. Unfortunately, these files are quite hard to find. The book does not come with a disk and the online version (available at safari.oreilly.com) does not link to them. The files are actually found on the book’s page in O’Reilly’s online catalog under the term “Examples.” The download is a large ZIP file, which makes me wonder why the publisher doesn’t break the exercises down into smaller packets for easy access and hyperlinking.

Despite this, Search Engine Optimization for Flash is a great resource for Flash designers building projects for the Web. Todd does a fine job explaining all the important techniques for optimizing Flash content for search engines, and given Flash’s evolution from a cool animation tool to a content delivery application I think it’s important for all Flash designers to understand how to maximize search engine optimization for their projects.

Search Engine Optimization for Flash
Todd Perkins
Published by O’Reilly
US$29.99
Rating: 9/10