With Adobe Production Premium CS4 you can create searchable video by using the speech to text functionality in Premiere Pro CS4 and Soundbooth CS4. The speech transcript can be embedded as metadata within the media asset, or externalised as an XML file representing Flash cuepoints. When consuming the XML and Flash Video file online the end result is an interactive video where users can search for keywords, view tag clouds for most used words, and browse directly to a timestamp where the keyword is spoken.

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. Flash Catalyst learning resources
2. Experiences Across Multiple Screens at Adobe MAX

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

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

Well for those who are interested today I made a start on my Flex 2 sample application – developing a Flex 2 UI (also using Cairngorm 2) for an existing Struts application.

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. Building RIA’s with Flex and Cairngorm
3. How to skin Flex 2.0

Christophe Coenraets, the man with all the tricks, has put together a fantastic application demo using both Flex 2.0, Ajax and the recently released Flex Ajax Bridge. Named The Hybrid Store, the application demonstrates the interaction of Ajax filtering controls with the Flex presentation of a Mobile Phone selector (based on the Flexstore sample that ships with Flex 2.0)

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. Google Gears and Adobe Apollo on SQLite
2. Adobe Flex 2 available NOW!
3. Download new Flex 2.0 Beta 2 – yes Beta 2 is here!

Be sure to check out the series of articles on the Flex DevNet – Developing Flex RIA’s with Cairngorm Microarchitecture written by Steven Webster of Adobe Consulting (formerly iteration::two).

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

For those of you who don’t read the Macromedia XML News Aggregator (MXNA) you would have missed the article by Kevin Hoyt on Programmatic Skinning with Flex 2.

The article outlines just how easy it is to programatically skin your Flex application without the need to get into the nitty gritty of timelines and symbols. The skins are drawn using the Drawing API and referenced through a ClassReference in the style declaration. So easy!

The changes in the skinning architecture since Flex 1.5 have really opened the doors to many new looks and styles of applications, a real win for the developers who are not interested in the design aspects of the Flash authoring tool.

Download Flex Builder 2.0 Beta at Adobe Labs

edit: How could I forget! You could always be checking Fullasagoog, the all powerful news aggregator owned by Geoff Bowers of Daemon in Sydney, Australia. It’s “Chock Full of Rich Internet Application Goodness”!!

And while you’re at it be sure to buy your ticket for WebDU, the premier Antipodean Web Technology Conference. Be there! coz unfortunately I won’t be able to make it … :-[

Related posts:

1. Flex 2 sample application – tudu lists
2. New Flex 2.0 Beta products released!
3. Flex Builder 2 Beta 3 preview

The question of how to handle/listen to button clicks from the Alert control pops up (excuse the pun) quite often. To do this you need to create an actionscript function to handle the event. Other situations may arise where you also need to pass further information to the handler function. This post will show you how

The mx.controls.Alert class has a static method that shows the Alert control with the title, message, and requested buttons. The following code block will demonstrate how to declare a listener for your Alert control, as well as what to do when you catch the event.

In short, the code shows how to create an Alert control which has 2 buttons, Yes and No. Keep an eye out for for line 12 – this is where we delegate the button click listener to the handleAlert method.

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

import mx.controls.Alert;
import mx.utils.Delegate;
 
// show the Alert control
public function showAlert() : Void
{   
    // the show method follows the method signature from the Flex Actionscript API
    Alert.show( "Are you sure?",
                         "Confirm Delete", 
                         Alert.YES| Alert.NO,
                         null,
                         Delegate.create(this, this.handleAlert),
                         null,
                         Alert.YES);
}
 
// handle the Alert control button click
public function handleAlert( event:Object ) : Void
{
    if( event.detail == Alert.YES)
    {
        // YES button was clicked
    }
    else if( event.detail == Alert.NO)
    {
        // NO button was clicked
    }
}

Quite similarly we can also create an inline function, which will allow us to pass extra variables to the handler method. Take a look at the following and how it declares a function which takes an event object and then makes a call to our own handleAlert method:

1
2
3
4
5
6
7
8

//line 12 replacement
Delegate.create( this, function(event){this.handleAlert(event, "hello");} )
 
//modified alertHandler method signature
public function handleAlert( event:Object, test:String ) : Void
{
    //handle the event.detail property etc
}

You can see that the above example passes the string hello through to our handleAlert method. Don’t forget to change the method signature for the handleAlert method to compensate for the extra variable(s).

Now you can not only create, but successfully listen to and handle the button clicks from within an Alert control. Keep an eye out for another post soon where I’ll demonstrate how to further customise the Alert control, but also outline the setbacks with its current implementation

Related posts:

1. Strongly type a CF return using Cairngorm
2. Cast a loaded Flex Application to an Interface
3. Security – Remote Objects and Flex