You The Designer

You The Designer is the ultimate resource for web designers. This blog provides a steady stream of helpful tips, free files, and design inspiration.

Your Design Forums

Your Design Forums is a great place to meet and network with fellow web designers. It is quickly becoming a great place to discuss graphic design related topics.

BittBox

BittBox has a ton of easy to follow Illustrator and Photoshop tutorials as well as free high-quality brushes, vector art, and fonts. The site has only been around for a year, but has quickly become one of the first stops of designers looking for helpful stuff.

Web Designer Wall

Web Designer Wall is a great place to find tutorials and the occasional freebie. If you can’t find something useful in the content, the design of the site alone should be enough to inspire you.

Smashing Magazine

Smashing Magazine focuses on delivering quality over quantity, and they succeed in doing so. There are lots of good tutorials on the site, along with long compiled lists of other resources.

Tutorial Blog

Tutorial Blog began as a Photoshop tutorial only site, but now they cover a wide range of web design related topics.

A List Apart

A List Apart has been around since 1998 with content focusing on web standards and usability. The professionalism and quality of articles of this online magazine might make it the best resource for web designers.

Digital Web Magazine

Digital Web Magazine is another site that has been around for a while. With over 390 articles and 218 contributors, there is a wealth of information for web designers to take in.

The first of the Free Design Elements is a collection of worn edges in PNG format. These come in handy when creating a rustic or vintage design.

Download Worn Edges

• The Fisix Engine
  The documentation appears to be very thorough and there seems to be a nice community being formed around this engine. The only drawback is that it can only be used in Flex.

  Visit the Site

• ActionScript Physics Engine
  APE is written and maintained by Alec Cove, and can be used in Flash or Flex. I have actually had time to play around with this one, and can say that it is very easy to use.

  Visit the Site

• FOAM
  This engine trades efficiency for modularity and extensibility. Although there is no documentation, a look through the well commented code should have you up and running in no time.

  Visit the Site

• Box2DFlashAS3
  Box2DFlashAS3 is an open source port of Erin Catto’s powerful c++ physics library Box2D. Judging from the demos, this engine seems to be quite good.

  Visit the Site

With the increased performance of AS3 and Flash Player 9, I won’t be surprised to see a few more physics engines pop up in the coming months.

To give you an idea of how this can be used, try out the sketch pad below:

First Things First

Before we get started, make sure to grab the ActionScript 3 Core Library. The Core Library contains several classes and utilities that make it easy to do things such as MD5 hashing, date formatting, and image encoding to name a few. Once you have the library, just drop it into your classes folder and you are ready to go. Now we can import the JPGEncoder.

import com.adobe.images.JPGEncoder;

Encoding the MovieClip

In this example, we are going to assume that our MovieClip of interest is named sketch_mc. In order to make use of the JPEGEncoder, our MovieClip needs to become a bitmap. To do this, we are going to use the BitmapData class. The contructor for this class requires two arguments: width and height. Since we want our jpeg to be the same size as sketch_mc, we use it’s width and height properties. Then by using sketch_mc as an argument, the draw method draws our MovieClip on to the bitmap.

import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

Now that sketch_mc is in bitmap form, we can use the JPGEncoder. When creating a new instance of this class, you can set the level of compression by passing in a number from 1 - 100. Then to create our jpeg, we call the encode method and use our BitmapData instance as the argument. The encode method returns the jpeg in the form of a ByteArray, which is simply an AS3 class that makes working with binary data a little easier.

import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

From the Flash Player to the Hard Drive

ActionScript 3 has done all the work neccessary to turn our MovieClip into a jpeg, but it needs a little help in making it available to download. To make this happen, we will need to post our ByteArray to a server side script using the URLRequest class. Since we are posting binary data, we must set the content-type to “application/octet-stream”. It is also important to note that the file being downloaded will need a name, so we pass that to our server side script as a query string.

import com.adobe.images.JPGEncoder;

var jpgSource:BitmapData = new BitmapData (sketch_mc.width, sketch_mc.height);
jpgSource.draw(sketch_mc);

var jpgEncoder:JPGEncoder = new JPGEncoder(85);
var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);

var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
var jpgURLRequest:URLRequest = new URLRequest("jpg_encoder_download.php?name=sketch.jpg");
jpgURLRequest.requestHeaders.push(header);
jpgURLRequest.method = URLRequestMethod.POST;
jpgURLRequest.data = jpgStream;
navigateToURL(jpgURLRequest, "_blank");

Below is the php script to where we are posting our jpeg. I chose to use php for this example, but any server side script will do.

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
	// get bytearray
	$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];

	// add headers for download dialog-box
	header('Content-Type: image/jpeg');
	header("Content-Disposition: attachment; filename=".$_GET['name']);
	echo $jpg;
}

That’s it. It really doesn’t get much easier than that. Of course, to make your code more reusable, you probably want to wrap it in a function or create a custom class.

Download Sample Code