Over at The Question Room (or @thequestionroom) the banditos received a bunch of tweet questions about a problem @gertjansmits was having when loading a Flex application with a SWFLoader and casting it to an interface.

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. Sizing apps within the Loader control
2. Alert! Alert! Listen to the buttons!
3. Flex 2 sample application – tudu lists

This year at Adobe MAX I’m presenting on “Experiences Across Multiple Screens”. But just what is that exactly?

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. Build your first AIR application with Adobe Flex
3. Adobe Refresh Australia, learn about MAX 2007

Slides / Demos / Special effects whiz-bangery / Where to learn more

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. Begun, the code wars have

Since Adobe Flash Catalyst was officially announced at Adobe MAX 2008 I’ve kept a list of my favorite blog posts, videos, screencasts and links to downloads and tutorials. Hopefully these resources will help in getting you started.

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. MVC for Actionscript 2
2. Experiences Across Multiple Screens at Adobe MAX
3. Flex Builder 2 Beta 3 preview

This session at Adobe AIR Camp introduced traditional HTML and JavaScript developers to the AIR SDK and how to use the the various binaries (ADL and ADT) to develop, test, and package desktop applications. The session included a basic introduction to the AIRAliases.js file and it’s importance when coding against the AIR runtime with JS.

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. AIR Camp keynote slides
2. Build your first AIR application with Adobe Flex
3. Building RIA’s with Flex and Cairngorm

Adobe Flex really is the development tool and platform of choice for developing desktop experiences on Adobe AIR. This slide deck was presented as part of a series of topics covered at Adobe AIR Camps throughout Australia and New Zealand. Take a look, download it, and share it! If anyone is interested in the demo files the Flex Builder project archive can be downloaded here.

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. Flex 2 sample application – tudu lists
2. Resizable, Minimizable/Maximizable TitleWindow
3. Cast a loaded Flex Application to an Interface

Below are the keynote slides from the recent Adobe AIR Camps throughout Australia and New Zealand. Thanks to everyone who attended, and a special thanks to both Mark Blair and Matt Voerman who presented at the events as well, and to Mike Downey for presenting the keynote in Sydney while on his visit to WebDU 2008.

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. Build your first AIR application with Adobe Flex
3. Building desktop applications with HTML and JavaScript

It’s take some time, but finally here it is! I’ve made my presentations available via Share on Acrobat.com for everyone to view or download for their own use.

Flex in Acrobat 9… It’s PDF meets Web 2.0
This session covered the latest integration between Flash and PDF given that with both Acrobat 9 and Reader 9 the Flash Player runtime is now embedded within both environments. What does this mean?! Well you can now render Flash content directly within a PDF, but also add interactions between the PDF and the Flash objects themselves. I’ll post a separate follow up on this with some examples files. This really does open the door for some cool integration.

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.

Related posts:

1. Our Web 2.0 on-demand presentations
2. Mixing it up in the Pixel Bender WebDU presentation
3. Slides and demos from my presentations

The inaugural Australia / New Zealand Code War is set to begin at WebDU Day 0 on June 11 2008. I’ve been invited by Mark Mandel and Toby Tremayne to join their team the “KILLER CODING NINJA MONKEYS OF DOOM!” Be afraid, be very afraid, as you dare to face the team from Melbourne as we take on 7 other team in a series of sudden death head-to-head coding competitions developing solutions in either Flex, Flash, ColdFusion, Director or anything else we deem fit for purpose.

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!

Related posts:

1. CFCAMP Australia is more than just ColdFusion
2. Adobe Refresh Australia, learn about MAX 2007
3. Adobe announces Developer Fridays

Adobe has announced the Open Screen Project http://www.openscreenproject.org/, an initiative dedicated to driving consistent experiences across all devices including mobile phones, personal computers, consumer devices and more

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/

Related posts:

1. Google Gears and Adobe Apollo on SQLite
2. Adobe announces Developer Fridays
3. Adobe Flex 2 available NOW!