Pixel Bender is so hot right now (having a Zoolander moment) and was a late addition to the WebDU agenda due to demand and interest from WebDU conference delegates. Geoff aptly titled the session “Mixing it up in the Pixel Bender”, but Pixel Bender can be much more than just blending (or is it bending) pixels. Either way, you can bend, warp, create, mixup, mashup not only pixels but all purpose mathematics as well, allowing you to perform complex calculations in a separate thread within Flash.

But it extends beyond Flash!

Pixel Bender provides a common video and image processing infrastructure as found in After Effects. It is the runtime and pixel shader language that allows you to perform cool filters on your After Effects compositions. The latest revision of Pixel Bender also brings with it a plug-in to Photoshop CS4, so now your Pixel Bender kernels can blend and bend in After Effects, Photoshop as well as Flash Player! All filters/shaders are developed with the Pixel Bender Toolkit. Awesomeness!

Take a look at the slides below, as well as the many Pixel Bender demos and resources that follow. Many of these demo’s were shown throughout the session. My favorite, although not applied to pixels, is Myna (the artist formerly known as Digimix) an audio mixing tool that’s part of the Aviary.com suite. Thanks to Alan Queen for demo access.

Presentation:

Demos shown:
Flash Globe using spherize filter and throw physics
Flash Globe using spherize filter and throw physics (source code)
Real time video color keying
Make your own water color painting (uses multiple filters)
JavaScript Pixel Bender explorer
Aviary Myna (the artist formerly known as Digimix) audio mixing tool
Using Pixel Bender to do heavy lifting of calculations

Where to learn more:
Pixel Bender on Adobe Labs
Kevin Goldsmith’s blog
Pixel Bender lab materials from Adobe MAX 2008

Pixel Bender Community:
Pixel Bender Exchange
Follow Pixel Bender on Twitter

Thanks to everyone who attended my Pixel Bender session at WebDU this year. It was a fantastic conference as always, and brought together by another great effort by all the Daemonites. Big thanks to Geoff Bowers as always!

For the developers, you’ll find some interesting reads on FXG and why we have gone down this path, as well as a great post on an approach towards design patterns when developing a single application for multiple screens.

If you have other links to tutorials, screencasts, skins or other Flash Catalyst related downloads/links I’d love to hear about it!

Downloads
Download both Flash Catalyst beta and Flash Builder 4 beta from Adobe Labs

Adobe Flash Catalyst beta
Adobe Flash Builder 4 beta

Learn to use Flash Catalyst
Follow a series of tutorials to learn about the Flash Catalyst feature set and what you can achieve when integrating with Flash Builder 4, and designing from Photoshop CS4, Illustrator CS4 or Fireworks CS4.

http://labs.adobe.com/technologies/flashcatalyst/tutorials/

Flash Catalyst Team Blog: Explorations and Lessons

Screencasts and presentations
This is a small collection of screencasts from various conferences, presentations and tutorials relating to Flash Catalyst.

Kevin Lynch’s keynote from Web2.0 expo

Mark Anders’ FITC session

FlashCamp San Francisco 2009 keynotes and sessions

FlashCamp San Francisco 2009 session slides

Lee Brimelow’s two part tutorial on Flash Catalyst and Flex 4

Ryan Stewart’s Flash Catalyst/Flash Builder screencast

Mark Szulc’s Flash Catalyst beta 1 demo in 4 minutes

Other cool downloads and links
Other links I’ve found worthwhile, especially the tutorials and resources on the Flash Catalyst Team Blog.

Flash Catalyst Skin Library

Flash Catalyst Team Blog

Using FXG assets as custom markers in Google Maps

Mark Anders on FXG vs SVG

Mark Anders’ thoughts on FXG Design and Motivation

Design patterns with Flash Catalyst and Flex 4
An interesting read on an approach to creating and developing dynamic user interfaces that are targeted at multiple devices (think multi-screen applications)

Passive Multi-View design pattern: Creating Dynamic Flex UI’s using Flash Catalyst and Flex

What I find really helpful is the Adobe AIR Language Reference for JavaScript developers. This is a subset of the ActionScript 3.0 Language Reference and includes all the AIR specific features that you as a JavaScript developer can access within the AIR runtime.

For the basic application seen below you can develop using your favorite text editor and the Adobe AIR SDK, download the Adobe AIR extension for Dreamweaver CS3, or even try developing with Aptana. I really like Aptana as it can be installed as a plugin for Eclipse and sit right beside my Flex development perspective.

For other AIR development tools click here.

Download the source code for the application below.

Your first desktop application with HTML and JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<html>
 
<head>
<title>Our first HTML AIR application</title>
 
<script src="AIRAliases.js" ></script>
<script>
   function doLoad()
   {
      alert("Simple alert to show we can include regular JS scripting");
   }
 
   function writeFile()
   {
      var file = air.File.desktopDirectory.resolvePath("sample.txt");
	  var stream = new air.FileStream();
 
	  stream.open( file, air.FileMode.WRITE );
	  stream.writeMultiByte( document.getElementById('textInput').value , air.File.systemCharset );
	  stream.close();   
   }
 
</script>
 
</head>
 
<body onLoad="doLoad()">
   <h2>AIR HTML/JavaScript Sample</h2>
   <p>This sample application will take a simple text input entry and write this out to the contents of a file on the users desktop</p>
   <input type="text" id="textInput" value="www.flexdaddy.info"/>
   <input type="button" onClick="writeFile()" value="Save to desktop" />
</body>
 
</html>

And the application descriptor/manifest file

1
2
3
4
5
6
7
8
9
10
11
12

< ?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>com.flexdaddy.samples.htmlair</id>
    <version>v1</version>
    <filename>aircamp_sample</filename>
    <initialwindow>
        <content>airsample.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>350</height>
    </initialwindow>
</application>

Download the source code for this application.

The presentation introduces Flex Builder, the Flex framework and the AIR runtime by creating an application with a transparent window (thanks to Matt Voerman for providing the pretzel image!) that uses custom chrome and native window commands to move and close the application.

Take a look at the sample project, and if you have any questions feel free to leave a comment.

Over the next few days I’ll post slides and references to the rest of the content we covered at the AIR Camps.

• Building desktop applications with Adobe Flex
• Building desktop applications with HTML/JavaScript
• Deploying and updating your AIR applications
• Data intensive AIR applications

Be sure to take a look at the following links to some great applications. A real nice showcase of what’s possible!

Adobe AIR Showcase
Adobe AIR Marketplace

A special thanks to Joel Geraci for his help on this one!

Build multi-user real time collaboration applications with Flex and AIR
This session touched on basic data integration all the way from XML with HTTPServices, Java and ColdFusion connectivity with RemoteObjects, moving on to collaboration and messaging with BlazeDS and LiveCycle Data Services. From building a chat application to enterprise data management this session should provide a basic introduction to collaborative apps.

Don’t forget to register for WebDU and come and see my sessions on Flex/AIR, LiveCycle Data Services, BlazeDS, CoCoMo, and even using some of the new Flash widget features in Acrobat 9!

More information on the Code War can be found here webdu:Adobe User Group Code War!

Specifically, this work will include:

• Removing restrictions on use of the SWF and FLV/F4V specifications
• Publishing the device porting layer APIs for Adobe Flash Player
• Publishing the Adobe Flash® Castâ„¢ protocol and the AMF protocol for robust data services
• Removing licensing fees – making next major releases of Adobe Flash Player and Adobe AIR for devices free

I wonder how long it will take to see various open source flash players?!

More info here http://www.adobe.com/openscreenproject/

I hope you can help me out and also help a good cause.

We are having a competition to raise the most $$$ for the “Fred Hollows Foundation� which gives the gift of sight to those in the developing world who could not otherwise afford a simple cataract operation.

It only takes $25 to bring the operation to one person or just $250 for ten people.

Please help this very worthy cause and help me and my team “visionAIR” win this competition.

To donate, please visit http://www.visionair.info between 4.30 pm Thursday 10 April and midday Friday 11 April.

This is tax deductible (depending on your location) and you will be issued with a receipt for tax purposes so please dig deep.

If you can encourage your friends, family and work mates to do the same. If you are able to encourage the company you work for to pledge/donate as well, that would be fantastic!

We’ve also written an AIR application as a widget so you can track the progress of the team! I’ll provide source code after the event.

Some of the content includes:

• Using Flex with PHP
• Branded applications with AIR
• Showcasing local industry applications (customer presentations)
• Using ColdFusion messaging gateways with Flex
• Integrating MS Exchange with ColdFusion and Flex

We’ve also just finished a 4 city tour around Australia with CFCAMP where I introduced Microsoft Exchange server integration and how to bring this into Flex and AIR.

Slides and demo files for everything over the past month and more will come shortly.

Enjoy!

EDIT (12/12/07) - I’m currently traveling in the US so there’s been some delays in tidying up the demos… but they’ll be ready in time for Christmas!