There’s a built in help section, but here’s a short video that outlines the basic idea:

Since I didn’t include a voiceover for this example, the basic steps involved are:

1. Export a custom class on an empty symbol.
2. Write logic to add a text field and draw a circle.
3. Publish SWF and load into the image encoder.
4. Create 20 PNG images in the “output” folder on the Desktop.

Extra notes on functionality:

1. The application attempts to pass in the current serial index to the constructor of the class you’ve chosen. This has a variety of uses, but is especially good for looking up array data, or directly populating a text field (as in the example above).
2. Even if you don’t declare a constructor parameter, the export will still run just fine. This makes it easy to see what any class will look like as an image, or to export a series of images from a Math.random-based visualization class.

The application is available for download here. If you have any questions or requests, post a comment and I’ll do my best to help out.

The source code for this post includes a ScalingImage class that loads an image and responds to any stage resize event by proportionally scaling the image to fill the stage. Check out the demo and try resizing your browser.

The code behind a proportionally scaled full screen image is fairly straightforward:

// set image dimensions to match stage;
image.width = stage.stageWidth;
image.height = stage.stageHeight;

// choose the larger scale property and match the other to it;
( image.scaleX < image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;

Since scaleX and scaleY are percentages, it’s just a matter of figuring out which property is larger and making the two equal.

By swapping the scale comparison from “greater than” to “less than”, the object will scale proportionally to fit the larger of the two dimensions given. This kind of calculation is handy when you need to fit items of variable dimensions into a fixed space, such as the flickr photos on the Authenticity Book Axiom Gallery.

// choose the smaller scale property and match the other to it;
( image.scaleX > image.scaleY ) ? image.scaleY = image.scaleX : image.scaleX = image.scaleY;

There are many applications for this technique, from creating image thumbnails to building a liquid grid layout. We’d love to see more examples of this approach in action, so feel free to leave a link or two in the comments.

We at Substance have come across this a number of times, and the best solution we have found is to knock out the areas of the Flash movie that require accessible content displayed below. This can be accomplished rather easily with the use of layer blend modes.

The first step to making this work is to set wmode in your HTML Flash embed code to transparent. After that is done, you can immediately take advantage of this trick:

1. Set the blendMode property in your Document Class to BlendMode.LAYER
2. Set the blendMode property of your knockout area to BlendMode.ERASE

This approach differs from creating a true mask, which acts as a window to the clip being masked, by doing the reverse – creating a window through the clip being masked, which in this case is the entire SWF.

Here is a quick example ( assuming “this” is your document class ):

// set blendMode for Document Class;
this.blendMode = BlendMode.LAYER;

// create knockout area;
var knockout : Sprite = new Sprite();

// draw 50 x 100 px box;
with ( knockout.graphics )
{
	beginFill( 0x000000 );
	drawRect( 0, 0, 50, 100 );
}

// give mask knockout powers;
knockout.blendMode = BlendMode.ERASE;

// add knockout mask to stage;
this.addChild( knockout );

On the Arakawa home page, the Flash area is set to fill the browser window completely. The logo, navigation, and footer are all knocked out, with a listener attached to the stage for Event.RESIZE so that the footer window always remains at the bottom of the file. This is pretty simple, but here’s a snippet of to show how to keep an item positioned at the bottom of the stage:

// add listener to stage in constructor;
stage.addEventListener( Event.RESIZE, onResize );

// resize listener in class body;
private function onResize () : void
{
	knockout.y = stage.stageHeight - knockout.height;
}

It’s time that we recognize the true genius behind a well-crafted piece of spam. In support of this worthy cause, we have created spamlets™, a place where the world can bring the poetry of unrequested badgering to light. Do your part, donate a spamlet today.

Just enter any suspect web address into our sniffer at RickProof.com, and our RickBot™ will assess the risk of a Rickroll. No need to thanks us, we don’t do this for the fame, we do it for the people.

The next release of Flash won’t include Actionscript 4 (since the ECMAScript Spec isn’t complete), but it will include some really advanced features. Among them are: native 3D support, advanced hardware acceleration, inverse kinematics, shareable pixel shaders and filters (the same used by Photoshop and AfterEffects), and dynamic streaming video quality adjustment.

Some long awaited additions to AS3 will include: typed arrays, runtime FileReference access, vectors, an enhanced drawing API, dynamic sound generation, and advanced text layout support.

Here’s a quick look at some of the new 3D tools:

It’s exciting to see the continued evolution of such a great program, as well as the creative possibilities opened up by the new features. If there is anyone out there still using AS2, it’s time to guts up and learn Actionscript 3. Without it, you won’t be able to truly enjoy all that the next version of Flash has to offer, even though they are seriously improving the timeline animation experience.

A short demonstration of Inverse Kinematic animation tools:

Download the Flash Player 10 beta from Adobe Labs (at your own risk, since it’s in beta).

1. Know Where to Look
2. Iterate Constantly
3. Share Openly

Know Where to Look

This is true of both programming and creative inspiration. Rather than memorizing large sets of properties and methods, you simply need to know where to look up the information needed to solve a problem. The AS3 documentation exists for this very reason. (As a bonus, the more time you spend looking through documentation, the less time you’ll eventually spend looking through documentation).

Creatively, it can be easy to fall into comfortable patterns which can stifle innovation. Solving this is just a matter of knowing where to find inspiration. Taking queues from nature, personal experience, or the work of others can breathe new life into old techniques.

Iterate Constantly

Each project comes with its own set of challenges, and each solution provides a new avenue for exploration. By evolving and combining small pieces of code over time, building complexity suddenly becomes a matter of simplicity and patience.

To illustrate the power of iteration, here are a couple of projects by Erik Natzke and Robert Hodgin. Each would be overwhelming to architect from scratch, but were built from a series of simple iterations. By constantly pushing the boundaries reached on previous experiments, both manage to compound a handful of simple techniques into something complex and unique.

Erik Natzke, Ghosts II

Robert Hodgin, Magnetosphere

Share Openly

While it might feel like freely releasing the source code behind a project isn’t a sound business practice, sharing has a tendency to be repaid in kind. Business or speaking opportunities might result, or someone could take your code in a direction you’d never have thought of, giving you new avenues to explore. Additionally, it’s important to remember that each of us has been given a generous share of knowledge from our mentors, and we should be willing to pay that effort forward.

Here is a short list of creative coders who grow their work through constant iteration, and often share their code with the world: Jared Tarbell, Keith Peters, James Paterson, Craig Swann, Grant Skinner, Joshua Davis. It can be easy to view this list as the “lucky ones” who are paid to build experimental work, but to quote Joshua Davis, “people will hire you to make the kind of work you create”.

This will have an unprecedented impact on the future of interactive development, punctuated by the following changes:

1. Removal of restrictions on use of the SWF and FLV/F4V specifications
2. Publishing the device porting layer APIs for Adobe Flash Player
3. Publishing the Adobe Flash® Cast™ protocol and the AMF protocol for robust data services
4. Removal of licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

The Flash community has always been influential in shaping the future of Flash, and with the removal of licensing restrictions and fees there is an even greater opportunity for the community to inform its development. It will now be easier to develop more types of Flash applications, across more devices, without the need for a licensing deal.

We are excited to see what new levels of innovation this brings to the interactive industry. The implications for resolving issues between search engines and Flash content are huge, along with potential resolutions to technology-specific conflicts such as viewing Flash content on the iPhone.

If there was ever any doubt about the impact of the already widespread Flash technology, the Open Screen Project should instill a renewed faith in its potential. More information about open technologies supported by Adobe can be found at the adobe open source page.

Since launching Logobama, we’ve had a number of requests for the project source code. The process of saving images from Flash turns out to be a relatively simple one with Actionscript 3, and after some searching, uploading Flash encoded JPEGs to a web server was pretty simple as well.

With the Logobama project, we had three main objectives:

1. Upload an image into a Flash file
2. Encode a JPEG with AS3
3. Post the encoded image to a web server

In the case of Logobama, we also posted the saved image to a Flickr gallery, which was done using the phpFlickr library created by Dan Coulter. Thumbnails are automatically created with phpThumb.

The main engine behind this project is a combination of elements from the Adobe AS3 Corelib, and the very handy UploadPostHelper Class created by Jonathan Marston. There is also a small PHP upload script included in the source, along with TweenLite, which has quickly become our favorite tweening engine.

The basic system within the code nearly mirrors the Logobama project objectives:

1. Use the FileReference Class to upload an image:

var file : FileReference = new FileReference();
file.browse( new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" ) ) );

2. Create a snapshot of the flash movie with the BitmapData.draw() method:

// set up a new bitmapdata object that matches the dimensions of the captureContainer;
var bmd : BitmapData = new BitmapData( captureContainer.width, captureContainer.height, true, 0xFFFFFFFF );

// draw the bitmapData from the captureContainer to the bitmapData object;
bmd.draw( captureContainer, new Matrix(), null, null, null, true );

3. Use the Adobe AS3 Corelib to encode a JPEG:

// create a new JPEG byte array with the adobe JPEGEncoder Class;
var byteArray : ByteArray = new JPGEncoder( 90 ).encode( bmd );

4. Post the encoded image to a web server with the help of the UploadPostHelper Class and a basic PHP Upload Script (included in the source files):

// set up the request & headers for the image upload;
var urlRequest : URLRequest = new URLRequest();
urlRequest.url = 'image.php?path=images';
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', byteArray );
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

// create the image loader & send the image to the server;
var urlLoader : URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.load( urlRequest );

So there you have it, an easy way to upload images into flash, edit them, and post the encoded JPEG result to a web server without the need for any fancy remoting or server-side computation.

Since all the above code is available under a Creative Commons Share Alike license (or similar), we’ve decided to make our source code for this project available as well. The functionality of this example was intentionally minimized to showcase the features outlined in this post. Enjoy, and please feel free to reply with comments, questions, or revisions.