The AS3CoreLib (available over at Mike Chambers github) contains a crypto package, and particularly a SHA256 class. It also has a hashToBase64 method, even better! But… the Base64 utility class it uses no longer exists in the Flash runtime. The class mx.utils.Base64Encoder needs to be replaced for our use case, and you can find many online. The Base64 class I’ve chosen is freely available for use and modification from Jean-Philippe Auclair. Check out his blog post for a Base64 optimized AS3 lib.

Download my complete source code, or if you want to create your own, the following are the steps I’ve taken to modify the Adobe SHA256 class with a different Base64 utility.

Firstly, edit the SHA256 class in com.adobe.crypto and change the hashToBase64() function to look like this -

public static function hashToBase64( s:String ):String
{
  var blocks:Array = createBlocksFromString( s );
  var byteArray:ByteArray = hashBlocks(blocks);
 
  // use the new Base64 class			
  return Base64.encode(byteArray);
}

Next you need to generate the signature and create the URL for the request following Ooyala’s guidelines for signature generation.

public static function generateURL(pcode:String, scode:String,
                                   requestType:String, params:Array):String
{
  if (!params["expires"])
  {
    // if no expiry time exists, add one
	params["expires"] = new Date().time + 900; 
  }
 
  var stringToSign:String = scode;
  var url:String = "http://api.ooyala.com/" + requestType;
 
  url += "?pcode=" + pcode;
 
  var keys:Array = extractKeysAndSort(params);
 
  for each (var key:String in keys)
  {
	stringToSign += key + "=" + params[key];
	url += "&" + key + "=" + encodeURIComponent(params[key]);
  }
 
  var signature:String = SHA256.hashToBase64(stringToSign);
  signature = signature.replace(/=+$/, "");
  url += "&signature=" + encodeURIComponent(signature);
 
  return url;
}

And using the class is fairly simple. Remember to get your Partner Code and Secret Code from the developers tab in Backlot, then follow the API requirements for the specific call you want to make.

In this example I’m querying the Backlot API to return details of a video. The result of a query is an XML document that could include a paginated list of results for the query items.

First, set up your query parameters. If you don’t include an expiration time for the query, the utility class will add one for you.

// query parameters
var params:Array = [];
params["embedCode"] = "<INSERT VIDEO EMBEDCODE>";

Next, set your query type. This is the user-friendly RESTful URL structure that is appended to the API call, such as partner/query or partner/labels.

// query type
var queryType:String = "partner/query";

And finally, using your Partner code and Secret for your Backlot account, invoke the Ooyala API Utility in one of two ways, either return a URLRequest object, or a URL string.

// generate URL Request
var urlRequest:URLRequest = OoyalaAPIUtil.generateSignedURLRequest(
                                              pcode, scode, queryType, params);
 
var url:String = OoyalaAPIUtil.generateURL(pcode, scode, queryType, params);

The resulting XML from making the call will look something like this -

<?xml version="1.0" encoding="UTF-8"?>
<list totalResults="1" size="1" pageID="0" statistics-as-of_text="Tue Jul 19 00:40:01 UTC 2011" limit="500" statistics-as-of="1311036001">
  <item>
    <embedCode>12345678901234567890</embedCode>
    <title>Big Buck Bunny</title>
    <description>The Peach open movie project</description>
    <status>live</status>
    <content_type>Video</content_type>
    <uploadedAt>1297678678</uploadedAt>
    <length>596458</length>
    <size>928670754</size>
    <updatedAt>1304451370</updatedAt>
    <flightStartTime>1175731200</flightStartTime>
    <width>1920</width>
    <height>1080</height>
    <thumbnail height="0" width="0">http://ak.c.ooyala.com/12345678901234567890/promo121984023</thumbnail>
    <stat>
    </stat>
  </item>
</list>

I’ve made this available as a Ooyala API utility class for you to use whenever you need to generate a signed URL for an Ooyala API call.

Download the Ooyala API Utility class for AS3 here.

Related posts:

1. Ooyala Django – another awesome Ooyala library
2. Alert! Alert! Listen to the buttons!

Try the example yourself, and turn the lights on and off!
View the source to see how it all works.

Related posts:

1. Virgin Mobile uses Ooyala for an improved customer experience

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

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

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

To get everyone started, take a look at Christophe’s Flex devnet article “Providing a Flex Front End to Your Struts Application“. I have chosen Tudu Lists as the existing Struts application for the new user interface.

More news in the coming days.

Related posts:

• Flex 2 sample applications – what do you want to see?
• Flex 2 sample applications – follow up

Related posts:

1. Flex 2 sample applications – follow up
2. Flex 2 sample applications – what do you want to see?
3. Cast a loaded Flex Application to an Interface

Read Christophe’s blog post to find out more and to run the application.

On a side note, check out the new Google Finance beta, which demonstrates Flash and Ajax interaction – click on a chart item in the Flash chart and the corresponding item is highlighted in the HTML view, slide the zoom on the chart and the articles in HTML slide around to show relevant information. Fantastic integration between 2 awesome technologies. Any RIA developer should be excited about the possibilities!

Related posts:

1. Download new Flex 2.0 Beta 2 – yes Beta 2 is here!
2. Flex Application Starter Toolkit
3. Macromedia Labs is LIVE!

This series of 6 articles are focussed around Cairngorm 0.99 and Flex 1.5, but the same principles can be applied when using Flex 2 and the new Cairngorm 2.0 Alpha release. Using a framework such as Cairngorm really keeps your code disciplined, allows for reusability, ease of architecture/design/planning, and a clean implementation of MVC. It gives you a direction to start heading when developing an application using Adobe Flex. Of course larger scale applications can be written without Cairngorm, but if you’re familiar with MVC then Cairngorm provides a great starting ground with a fantastic direction to follow.

Keep an eye out for a subsequent realease of articles that will cover Cairngorm with Flex 2. Nice work Steven.

Related posts:

1. Cairngorm has a new home
2. Cairngorm 2.0 Alpha
3. Building RIA’s with Flex and Cairngorm