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!

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

Check out the FUZE all-in-one instant messaging app built on AIR. I’m yet to try it because the install badge isn’t working correctly with the Flash Player 9 Update (Moviestar) installed, so it looks like I’ll need to downgrade.

If you’re using the application, please leave a comment and let us know your thoughts.

Related posts:

1. Wanna be a moviestar? With H.264 you can be!
2. JamJar built on Flex 2
3. Google Gears and Adobe Apollo on SQLite

This morning (well yesterday now that I’m publishing the post), amongst many other announcements, Google released an open source project named “Google Gears“.

Google Gears (BETA) is an open source browser extension that enables web applications to provide offline functionality using following JavaScript APIs:

• Store and serve application resources locally
• Store data locally in a fully-searchable relational database
• Run asynchronous Javascript to improve application responsiveness

From the press release:

We are releasing Gears as an open source project and we are working with Adobe, Mozilla and Opera and other industry partners to make sure that Gears is the right solution for everyone.

But what does this mean for Adobe?

This was one of the first questions to pop up on the Google Gears developer group, and one of the most exciting questions to answer. The Google Gears local storage module and API is similar to the functionality available in the soon to be released Apollo Beta. With a common API users can move seamlessly from developing a web based application with local storage, to being able to access the same local storage from Apollo.

Does Google Gears compete with Apollo? They both enable offline web applications don’t they?

Well no!

It’s a hard shift to make, to truly understand that you’re now developing a desktop application with Apollo. It’s hard because you develop for Apollo using web based technologies. An offline web application using Gears is just that – an offline web application. Apollo is so much more – a desktop application giving you the ability to have file system access, toast like messaging, native OS support, clipboard access, drag and drop between Apollo and the OS, custom window chrome (to really move away from the rectangular bounds) etc… So don’t be confused, there really isn’t any competition, but more a logical step to move from a browser world with a connected application, to running offline with the same data, to a fully integrated desktop application that can do so much more!

The Google Gears announcement has also been covered by –

Ryan Stewart
Mike Chambers (announcing SQLite in Apollo)

And in the press release.

How about an example?

Well to give you a taste of what’s possible Christophe Coenraets has released a Flex-based SQLAdmin for Google Gears with full source code. Remember to have Gears installed prior to running the example live on his domain.

Enjoy!
gdd07
gdd07au

Related posts:

1. Adobe removes all restrictions on SWF and FLV specs
2. Build your first AIR application with Adobe Flex
3. Adobe announces Developer Fridays

Check it out at http://labs.adobe.com/wiki/index.php/Flex_Scheduling_Framework

Ely also has a great calendaring example over on his blog too!

Related posts:

1. Flex Calendar – can it be that hard?
2. Flex Calendar – the most popular search string
3. New Flex 2.0 Beta products released!

Without stealing the spotlight, I’d like to point you back to Steven’s blog. Well done team!

Related posts:

1. Cairngorm 2.0 Alpha
2. Building RIA’s with Flex and Cairngorm
3. Cairngorm Series on Flex DevNet

Also available on Adobe Labs today is the Flash Professional 9 ActionScript 3.0 Preview! So now not only can we take advantage of the updated ActionScript programming language and performance benefits in Flex, but now in the Flash Authoring environment. This only planned preview of the next version of the flash authoring tool is only available to registered users of Flash Professional 8, but allows access to the new ActionScript 3.0 language and the ability to publish Flash Player 9 compatible applications/swf’s.

Bring on the next generation of rich media and internet applications!

Discover the Flash Professional 9 ActionScript 3.0 Preview in this developer center article.

Visit the Flash Player Developer Center www.adobe.com/devnet/flashplayer/ and for ActionScript 3.0 resources visit the ActionScript Technology Center www.adobe.com/devnet/actionscript/

Related posts:

1. Flash Player 9 (formerly Flash Player 8.5)
2. Updated debug Flash Player for Flex 1.5
3. Flash Player 9 gets a new set of clothes

Also of note was a light weight class which drops the concept of the timeline from the MovieClip class. The Sprite class is a nice light weight object for creating visual components that don’t need the timeline.

For more on Actionscript 3.0 namespaces see this post over at Blairs Blog.

Hmm .. what else. There was so much to cover that I’m sure I missed something but keep an eye out on all the other blogs who are covering MAX

Related posts:

1. MVC for Actionscript 2
2. Flash Player 9 and Flash Professional 9 AS3 Preview

The outcome of this was a Resizable, Minimizable/Maximizable TitleWindow. The component is work in progress, and could be approched in a much neater fashion, so consider it a stepping stone if you’re feeling adventurous!

On the roadmap:

1. Set the minimum height and width of the window for resizing. Currently the buttons and window title overlap. You can also resize the window less than the header height (whoops)
2. Modify the backgroundImage’s properties (offsets) to display a ‘wedge’ image in the bottom right hand corner. This will help show that the window can be resized.
3. Make the resize capabilty a modifiable property.
4. Combine all image assets into one swf/fla file.

That said, feel free to download the sample app and try it out!

Related posts:

1. Build your first AIR application with Adobe Flex
2. Sizing apps within the Loader control
3. Adobe Flex 2 available NOW!