Flash source | Pixel Bender Tutorial Roundup

Subscribe to RSS

Flash source | Pixel Bender Tutorial Roundup

1.My First Pixel Bender Filter (SquarePattern)

Today I spent a few hours getting up to speed with Pixel Bender. It definitely has a steep learning curve but it is well worth the effort. Below you can check out my first creation called SquarePattern for lack of a better word. This filter essentially samples the current pixel as well as a different pixel and averages them out. Which pixel is dependent on the amount parameter. The result is a kind of crosshatch effect.

I was actually really excited earlier because I created a cool blur effect but I couldn’t export it to Flash because you can’t use for loops if the filter will be used in the player. Bummer! To do a blur, you essentially average a certain amount of pixels together. The number of pixels you average determines the strength of the blur. Oh well, I hope we add loops to Pixel Bender soon.

Click on the image below to see the filter in action. You must have Flash Player 10 RC installed to view it.

2.New video tutorial on using Pixel Bender

I just finished uploading a new tutorial that shows you the basics of getting started with Pixel Bender. This can be scary for people who don’t have a background in pixel shader programming (i.e. me). Over the last few days I have finally figured out enough to be able to record a tutorial on it. This is part 1 of 2 and it shows you how to create a couple of simple filters. Part 2 will show you how to export and load those filters into your Flash movies. Check it out at http://www.gotoandlearn.com.

3.Second Pixel Bender tutorial is now live

I just uploaded the second part of the Pixel Bender tutorial. This time I show you how to export a Pixel Bender filter from the toolkit. Then I import the PBJ file into Flash and apply it to an image. I am compiling to Flash Player 10 using MXMLC which I described in detail in an earlier tutorial. This workflow will obviously be much easier once Flash CS4 is released. If you come up with some cool filters let us know in the comments! Check it out at http://www.gotoandlearn.com.

4.Setup, Pixel Bender, and Shaders

The beta of Flash Player 10 has recently arrived and if you haven’t been experimenting with it, you are definitely missing out. In order to start publishing for FP10, you will need to start by downloading a recent Flex 3 SDK build (May 15th, 2008 or later). Once you have downloaded a recent nightly build of the SDK, go ahead and extract it and copy the folder to the Flex Builder ’sdks’ directory. Now you are ready to get setup in Flex Builder; here is the way that I have had success doing so:

1.) Create a new ActionScript project.

2.) In the area that allows you to select the SDK version that you would like to use, click the ‘Configure Flex SDKs…’ link.

3.) Add a listing for the nightly build that you recently copied into the Flex Builder ’sdks’ directory.

4.) Back at the previous window, go ahead and select that SDK as the one that you would like to target for your project.

5.) In the build path window, toggle over to the ‘Library path’ tab and remove the ‘playerglobal.swc’ listing under the SDK if one exists.

6.) Click the ‘Add SWC’ button and browse to the nightly build SDK directory. From there, browse to ‘frameworks/libs/player/10/’ and select the ‘playerglobal.swc’ file.

7.) Once added, click the arrow next to ‘playerglobal.swc’ so that you can see it’s settings. Double-click ‘Link Type’ and set it to ‘External’ if it isn’t already.

8.) Finish setting up your new project.

9.) Once the project is setup and ready to go, navigate to the ‘Project > Properties > ActionScript Compiler’ window and make sure that you are targeting Flash Player version ‘10.0.0′.

10.) Last, but not least, make sure that your launcher settings are set to launch your SWF file directly rather than the HTML wrapper.

5.Pixel Bender .pbj files

If you have been playing with Pixel Bender in Flash Player 10 you know the workflow:

Create your .pbk in the Pixel Bender Toolkit.
Export a .pbj binary from the Pixel Bender Toolkit.
Embed or dynamically load the .pbj file in your ActionScript.

There is still some mystery around .pbj files, i.e. the file format is neither documented nor is it clear what exactly it contains. While I can’t offer documentation on the file format at this time (although that will happen eventually) what I can offer is an assembler and disassembler I quickly hacked together. I am mostly using for this my own debugging purposes. For those who want to tweak Pixel Bender in Flash to the max this is a really good way to go.

6.Pixel Bender Live

I have been playing with the new Pixel Bender stuff and have come up with a neat little sample app using some of the filters from the Pixel Bender Exchange.

7.Embedding Pixel Bender Filters within a SWF

I was just watching Lee Brimelow’s excellent video introductions to creating and using Pixel Bender filters in Flash Player 10.

In his second video, he shows how to use a custom Pixel Bender filter within Flash Player 10. One issue that Lee had was that you have to load the filter at runtime in order to use it.

I have modified Lee’s example to allow the filter to be embedded within the SWF, and not require it to be dynamically loaded at runtime.

8.Using Pixel Bender Filters within Flex

Following up on my earlier post on how to embed Pixel Bender filters within a SWF, here is a super simple example that show how to use a Pixel Bender filter within a Flex application.

Compiled using the Flex 3.1.0.2710 SDK, and requires Flash Player 10

9.Encapsulating Custom Pixel Bender Filters in ActionScript 3

If you read my blog regularly (or just today) you should have noticed that I have been playing around with some Pixel Bender filters and ActionScript / Flex (all inspired by Lee Brimelow’s video screencast on creating and using Pixel Bender filters in Flash Player 10.)

Previously, I posted some code showing how to embed a custom Pixel Bender filter within a SWF and then apply the filter to an image. That works well, but the code is not that reusable since the filter loading code is mixed in with the main code.

Below is a simple example that shows how to encapsulate a custom filter inside of an ActionScript 3 class, which you can then use and re-use like any other built in filter.

10.Using Custom Pixel Bender Filter Classes in MXML

Ok. Last post on Pixel Bender for today (I promise). This one is simple, but ties together my previous posts.

Now, that we know how to load and use Pixel Bender filters in Flex, and know how encapsulte Pixel Bender filters in an ActionScript class, lets combine the two to leverage custom Pixel Bender filters in MXML.
First, again, we need our custom Pixel Bender class:

11.Pixel Bender: Blur with Linear Focus

An old effect in photography I wanted to check out as a custom shader for Flash 10 Astro – beta version needed for this demo to show correctly:

12.Tube View – with pixel bender

13.Pixel Bender: HexCells

Pixel Bender -filter for tiling with regular hexagons, and as a tutorial a couple of words to explain how this hexagonalization was done:

14.[PixelBender] FuzzyMosaic Filter

15.[PixelBender] FuzzyDistort filter

A few months ago i made a filter in PixelBender Toolkit for use in flash.
This filter is named: FuzzyDistort; it distorts an image in a fuzzy way.

One Comment

candy (Reply) on Wednesday 10, 2008

cool page!

Popular
Tags
Pages

Ads
Recent Comments

Lemlinh.com

Author Login