Stay tuned… there’s many great things coming!

October 3rd 2010 marked my 5 year anniversary with Macromedia and Adobe, and it has been an absolutely amazing experience. I can’t begin to explain just how far my career has progressed with the lessons and challenges I have overcome, and I am extremely grateful for them all. More than 5 years ago Macromedia was the company that I dreamt of working for; and it really has been a dream job!

I will miss you, but will endeavor to keep in touch. The world really is such a small place, and the IT industry even smaller. I’m sure I’ll cross paths with many of you in time. I look forward to sitting in the stands at Adobe events being excited by the passion demonstrated in your presentations!

Related posts:

1. Adobe Flex 2 available NOW!

Genius! Why didn’t I think of that

Well here it is. Take a look at the slides from my recent Adobe eSeminar and check out the following demos and resources. Looking forward to seeing how you use this on your site!

Analyzing Obama’s Inaugural Speech
http://www.tinyurl.com/nytsearch

Search captions on Hulu
http://blog.hulu.com/2009/12/21/search-captions-on-hulu/

Adobe Creative Suite 4 Production Premium: Video search templates
http://www.adobe.com/products/creativesuite/production/videosearch/

Nick Hippe, Online Searchable Video
http://nhippe.com/2009/10/15/online-searchable-video/

And for a little bit more detail watch this great recording from Adobe MAX 2008 on Adobe TV.

Related posts:

1. Create a cinema lighting experience with JQuery for your video player

Also check out the Creative Suite Buzz Hub http://csbuzz.adobe.com/ to get a glimpse into the future of Adobe Creative Suite technologies.

Related posts:

1. Win a FREE copy of a CS3 Suite!! Read on…
2. No need to re-install Flex Builder, just run the updater!

They’ve called on my help to get the answer

Download the application FXP (Flash Builder 4 project) or
Run the application (Right click and View Source)

My simple interface class, TestInterface, implements 3 functions, a simple getter/setter pair and a function called sayHello.

TestInterface.as

1
2
3
4
5
6
7
8
9

package com.flexdaddy
{
	public interface TestInterface
	{
		function get givenName():String
		function set givenName(str:String):void
		function sayHello():void;
	}
}

You first need to make sure the Application you are loading implements this interface. My root application tag looks like this:

LoadedApp.mxml

1
2
3

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        implements="com.flexdaddy.TestInterface"
        width="100%" height="100%">

And then in a Script block I make sure to implement all three functions specified above.

LoadedApp.mxml (LoadedApp.swf)

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	implements="com.flexdaddy.TestInterface"
	width="100%" height="100%" >
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
 
			private var _givenName:String;
 
			public function set givenName( str:String ):void
			{
				_givenName = str;
			}
 
			public function get givenName():String
			{
				return _givenName;
			}
 
			public function sayHello():void
			{
				mx.controls.Alert.show(  "Hello " + givenName );
			}
 
		]]>
	</mx:Script>
 
</mx:Application>

Now when loading the LoadedApp application when using a SWFLoader in the main application we first need to do the following:

1. Listen for a SWFLoader complete event
2. Cast the SWFLoader content as a SystemManager
3. Add an event listener on the loaded content for a FlexEvent.APPLICATION_COMPLETE
4. When FlexEvent.APPLICATION_COMPLETE we can cast event.currentTarget.application to our Interface

This will make sense in the code below. You’ll also notice that after we cast the loaded Flex application to TestInterface we can directly call on any methods or properties implemented from the Interface. In this case I set the givenName and call the sayHello function.

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
35
36

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
	<mx:Script>
	<![CDATA[
 
		import mx.events.FlexEvent;
		import mx.managers.SystemManager;
 
		import com.flexdaddy.TestInterface;
 
		private var myLoadedApp:TestInterface;
 
		protected function swfloaderComplete(event:Event):void
		{
			// the SWF Loader has complete but we need to wait for the
			// Flex application to load
 
			var loadedApp:SystemManager = event.target.content as SystemManager;
			loadedApp.addEventListener( FlexEvent.APPLICATION_COMPLETE, loadedAppComplete );
		}
 
		protected function loadedAppComplete( event:FlexEvent ):void
		{
			// cast the loaded application to the Interface
			myLoadedApp = event.currentTarget.application as TestInterface;
			myLoadedApp.givenName = "Flex Daddy";
			myLoadedApp.sayHello();
		}
 
	]]>
	</mx:Script>
 
	<mx:SWFLoader source="LoadedApp.swf" complete="swfloaderComplete(event)" />
 
</mx:Application>

And that’s it!

Download the application FXP (Flash Builder 4 project) or
Run the application (Right click and View Source)

Related posts:

1. Flex 2 sample application – tudu lists
2. Flex Application Starter Toolkit
3. Build your first AIR application with Adobe Flex

Experiences Across Multiple Screens
Wednesday October 7 at 09:30AM
Learn how the Adobe Flash Platform enables multiscreen delivery of applications, from the biggest screen to the smallest device. In this session, you’ll find out how to leverage the consistency of the Flash runtime and to develop reusable code and scalable interfaces that are device aware. Come and see many Flash technology enabled devices in action — the Flash runtime on smartphones, Internet-enabled media tablets, MIDs, Chumby, game consoles, and more.

Don’t forget the Adobe MAX hashtag #adobemax

And my session hashtag of #adobemax149

There’s going to be a lot of excitement this year at MAX, and if you can’t make it you don’t have to worry, all sessions will be recorded and made available online, but better yet, the keynotes will be streamed LIVE. Register now at http://max.adobe.com/online/

I’m really excited that I have the opportunity to present again at Adobe MAX, this time in Los Angeles!

For some pre-MAX reading/videos check out the following:

• Designing for the mobile lifestyle: A conversation with Punchcut
• Caught on video: Intel set top box running Adobe Flash
• What can I build with Flash Lite?
• HTC Hero: The first Android device with Flash
• Create Dynamic GUIs for Flash Player 10 using Flash Catalyst

Related posts:

1. Adobe removes all restrictions on SWF and FLV specs
2. Adobe Refresh Australia, learn about MAX 2007
3. Build your first AIR application with Adobe Flex

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!

Related posts:

1. webDU 2008 presentations now available
2. Presenting at WebDU 2007
3. Experiences Across Multiple Screens at Adobe MAX

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

Related posts:

1. Experiences Across Multiple Screens at Adobe MAX
2. Flex.org, a great new Flex 2 resource
3. Flex Builder 2 Beta 3 preview

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.

Related posts:

1. Building RIA’s with Flex and Cairngorm
2. AIR Camp keynote slides
3. Build your first AIR application with Adobe Flex

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.

Related posts:

1. Cast a loaded Flex Application to an Interface
2. Flex Application Starter Toolkit
3. Resizable, Minimizable/Maximizable TitleWindow

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

Related posts:

1. Slides and demos from my presentations
2. CFCAMP Australia is more than just ColdFusion
3. Build your first AIR application with Adobe Flex