Hi.

Sorry for the long delay in posts.  We had a new family addition and babies take precedence over blog entries.

I had to add dynamic cue points today and thought I would build a quick sample to share because cue points are very common in videos these days.   I would think this would be more common on some blog entries but I did not see that many out there.

The key to building cue points through the VideoDisplay object is the CuePointManager.  You can access it directly from the VideoDisplay object.  HOWEVER.. You must define its class via the cuePointManagerClass in the VideoDisplay tag area otherwise accessing it via the VideoDisplay comes back with a null object.

Ex: <mx:VideoDisplay id=”videoPlayer” source=”video/sample.flv” cuePointManagerClass=”mx.controls.videoClasses.CuePointManager” />

Anyway.  I hope this example works for you and shows you an easy way to implement Cue Points in Flex.

Thanks,

Kev.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="handleCreationComplete();"
layout="absolute"
width="400" height="300"
borderColor="#E63F3B"
backgroundGradientAlphas="[0.86, 1.0]"
backgroundGradientColors="[#DA3737, #922424]">

<mx:Script>
<![CDATA[
import mx.events.CuePointEvent;
import mx.controls.videoClasses.CuePointManager;

// called up creation complete
public function handleCreationComplete():void
{
// get cuePointManager
var cuePM:CuePointManager = videoPlayer.cuePointManager as CuePointManager;

// add cue point
var obj:Object;
obj = new Object();
obj.name = "Cue #1";
obj.time = 1.0;
cuePM.addCuePoint(obj);

// add cue point
obj = new Object();
obj.name = "Cue #2";
obj.time = 5.0;
cuePM.addCuePoint(obj);

// add cue point
obj = new Object();
obj.name = "Cue #3";
obj.time = 10.0;
cuePM.addCuePoint(obj);

// add cue point
obj = new Object();
obj.name = "Cue #4";
obj.time = 15.0;
cuePM.addCuePoint(obj);

// add event listener
videoPlayer.addEventListener(CuePointEvent.CUE_POINT,this.handleCuePointEvent);
}

// handles que point event
public function handleCuePointEvent(e:CuePointEvent):void
{
nameText.text = e.cuePointName;
timeText.text = e.cuePointTime.toString();
}
// handles video stop
public function handleStop():void
{
videoPlayer.stop();
nameText.text = timeText.text = "";
}
// handles video play
public function handlePlay():void
{
videoPlayer.play();
}
]]>
</mx:Script>
<mx:VideoDisplay id="videoPlayer" source="video/sample.flv" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" x="80" y="22" width="240" height="180"  autoPlay="false"/>
<mx:Text id="header" selectable="false" x="80" y="0" text="Dynamic Cue Points Example"  enabled="true" fontFamily="Arial" fontWeight="bold" fontSize="16" color="#FAFBFB"/>
<mx:Button id="stopBtn" buttonMode="true" x="144.5" y="210" label="Stop" click="handleStop();" color="#000000"/>
<mx:Button id="playBtn" buttonMode="true" x="204.5" y="210" label="Play" click="handlePlay();"/>
<mx:TextArea x="220.5" y="240" width="62" height="20" fontFamily="Arial" fontSize="12" fontWeight="bold" id="nameText"/>
<mx:TextArea x="220.5" y="268" width="62" height="20" fontFamily="Arial" fontSize="12" fontWeight="bold" id="timeText"/>
<mx:Label x="117.5" y="243" text="Cue Point Name:" fontWeight="bold" color="#F6FBFC"/>
<mx:Label x="119.5" y="271" text="Cue Point Time:" fontWeight="bold" color="#F6FBFC"/>
</mx:Application>

Photo by flattop341

Sometimes its good to have the right tools. One of my favorite classes in my Java days was the Hashtable class. It allowed you to store objects based on a key id. ActionScript somewhat allows the same with the Array object such as myArray[’myKey’] = myObject, but it does not allow for the same amount of robust tools as the Hashtable.

I written a Javascript, as2, and and as3 version of the Hashtable and still use it today. I thought it might be a good tool for someone’s toolbelt and thought I would share it. I have added some casting methods that are common such as nested DataContainers, MovieClips, Strings. etc. However, you can always extend this class to add more.

It works well when you have nested collections.

DataContainer Class

/***************************************************************
* DataContainer Object
*
* This Class is used to store objects with a string key
*
* Company: NovoLogic
* Developer: Kevin E. Crawford
* Email: kcrawford@novologic.com
*
***************************************************************/
package novologic.collections
{
// imports
import flash.display.MovieClip;
import flash.display.Sprite;

import mx.collections.ArrayCollection;

/**
* NovoLogic DataContainer Class
* This Class is used to store objects with a string key
* @author        Kevin Crawford
* @version        1.0.0
*
*/
public class DataContainer extends Object
{
// Object Internal Variables
private var _container:Array;
private var _keys:Array;

/**
* Constructor for Class
*/
public function DataContainer()
{
this.container = new Array();
this.keys = new Array();
}
/**
* Sets value for key value pair passed
*
* @param key:String
* @param value:Object
* @retrun void
*/
public function put(key:String, value:*):void
{
if ((key != null) && (value != null))
{
if (!this.contains(key))
{
this.keys[this.keys.length] = key.toLowerCase();
}
this.container[key.toLowerCase()] = value;
}
}

/**
* gets array for iteration
*
* @retrun Array
*/
public function getArray():Array
{
return this.container;
}

/**
* gets value for the provided key as an Object
*
* @param key:String
* @retrun Object
*/
public function get(key:String):*
{
return this.container[key.toLowerCase()];
}

/**
* gets value for the provided key as a String
*
* @param key:String
* @retrun String
*/
public function getAsString(key:String):String
{
var str:String;
try
{
str = String(this.get(key));
}
catch (e:Error)
{
str = ""
}
return str;
}

/**
* gets value for the provided key as a Number
*
* @param key:String
* @retrun Number
*/
public function getAsNumber(key:String):Number
{
var num:Number;
try
{
num = Number(this.get(key));
}
catch (e:Error) {
num = 0;
}
return num;
}

/**
* gets value for the provided key as a Sprite
*
* @param key:String
* @retrun Sprite
*/
public function getAsSprite(key:String):Sprite
{
var obj:Sprite;
try
{
obj = Sprite(this.get(key));
}
catch (e:Error)
{
obj = new Sprite();
}
return obj;
}

/**
* gets value for the provided key as a MovieClip
*
* @param key:String
* @retrun MovieClip
*/
public function getAsMC(key:String):MovieClip
{
var obj:MovieClip;
try
{
obj = MovieClip(this.get(key));
}
catch (e:Error)
{
obj = new MovieClip();
}
return obj;
}

/**
* gets value for the provided key as a ArrayCollection
*
* @param key:String
* @retrun ArrayCollection
*/
public function getAsArrayCollection(key:String):ArrayCollection
{
var ac:ArrayCollection;
try
{
ac = ArrayCollection(this.get(key));
}
catch (e:Error) {
ac = new ArrayCollection();
}
return ac;
}

/**
* Gets value for the provided key.  If there is nothing stored for given key, then obj is stored as default and returned.
*
* @param key:String
* @param obj:Object
* @retrun Object
*/
public function getCreate(key:String, obj:Object):Object
{
var value:String = "";
if (!this.contains(key))
{
this.put(key, obj);
}
value = this.container[key.toLowerCase()];
return value;
}

/**
* gets value for the provided key as a DataContainer
*
* @param key:String
* @return DataContainer
*/
public function getAsDC(key:String):DataContainer
{
var obj:DataContainer;
try
{
obj = DataContainer(this.get(key));
}
catch (e:Error)
{
obj = new DataContainer();
}
return obj;
}

/**
* Returns keys Array
* @return Array
*/
public function getKeys():Array
{
return this.keys;
}

/**
* Returns boolean indicating the DataContainer has data stored for provided key
* @param key:String
* @return Boolean
*/
public function contains(key:String):Boolean
{
return (this.container[key.toLowerCase()] != undefined);
}

/**
* Returns Boolean indicating if the DataContainer is empty of all data.
* @return Boolean
*/
public function isEmpty():Boolean
{
return (this.keys.length == 0);
}

/**
* Clears all data from DataContainer
* @return void
*/
public function empty():void
{
this.container = new Array();
this.keys = new Array();
}

/**
* Getter for container Array
* @return Array
* */
public function get container():Array
{
if (_container == null)
_container = new Array();
return _container;
}
/**
* Setter for container Array
* @param obj:Array
* @return void
* */
public function set container(obj:Array):void
{
_container = obj;
}

/**
* Getter for keys Array
* @return Array
* */
private function get keys():Array
{
if (_keys == null)
_keys = new Array();
return _keys;
}
/**
* Setter for keys Array
* @param obj:Array
* @return void
* */
private function set keys(obj:Array):void
{
_keys = obj;
}
}
}

I have been adding several Flex snippets lately and thought I would write a post about AIR. Provided is a quick sample and download of an AIR Application that loads a web page using the HTMLLoader class. Loading an HTML page is very easy and their are ways to track history and browser to new URLs. The important thing to remember on the HTMLLoader is that the default size of it is 0×0. Thus, if you do you not provide a width and height then you will never see the html page.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();"
layout="absolute" width="1024" height="768">

<mx:Script>
<![CDATA[
// imports
import flash.html.HTMLLoader;
import flash.net.URLRequest;
import mx.core.UIComponent;

// called on creationComplete
public function init():void
{
var htmlLoader:HTMLLoader = new HTMLLoader();
var urlReq:URLRequest = new URLRequest("http://www.novologic.com");

// HTMLLoader Class size defaults to 0,0 so you must size it.
htmlLoader.width = 1024;
htmlLoader.height = 768;

// load URLRequest
htmlLoader.load(urlReq);

// Create UIComponent to add html object to
var myComponent:UIComponent  = new UIComponent();
myComponent.addChild(htmlLoader);

// now add component to stage
this.addChild(myComponent);
}
]]>
</mx:Script>
</mx:WindowedApplication>

Download Application

picture by “visual velocity pc’s photostream“

Flex has a very nice feature that allows you to break up your application called Modules. Modules can be created in FlexBuilder and are compiled out as their own SWF files. They can then be loaded into your main application via a ModuleLoader class. The ModuleLoader class is very similar to the SWFLoader but it loads Modules and not normal Flash/Flex SWF files. If your application has multiple pages or functional areas then you can minimize your initial application size be spreading the application out into their appropriate Modules. Then as you need them you can load them into your application. It is important to note that Modules can ONLY be loaded and viewed by a ModuleLoader class. If you try to run them by themselves they will not render.

Provided is a quick example that demonstrates two modules being loaded. Both modules are very similar but the first module inherits froma BaseModule Class. I experienced problems with this initially and found online that sometimes there is code confusion between modules. I was able to resolve this issue by making sure the currently installed module was removed from the application and was set to null so it could be garbage collected.

Source:

Main Application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="400" height="330" backgroundGradientAlphas="[1.0, 1.0]">

<mx:Script>
<![CDATA[
import mx.modules.ModuleLoader;
public var moduleLoader:ModuleLoader = new ModuleLoader();

public function loadModule(source:String):void
{
if (this.contains(moduleLoader))
{
this.removeChild(moduleLoader);
moduleLoader.removeAllChildren();
moduleLoader = null;
}
moduleLoader =  new ModuleLoader();
moduleLoader.url = source;
moduleLoader.loadModule();
this.addChild(moduleLoader);
}
]]>
</mx:Script>

<mx:Button x="120" y="303" label="Module 1" id="modBtn1" click="loadModule('Module1.swf');"/>
<mx:Button x="204" y="303" label="Module 2" id="modBtn2" click="loadModule('Module2.swf');"/>

</mx:Application>

Module #1

<?xml version="1.0" encoding="utf-8"?>
<base:BaseModule xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:base="*" layout="absolute" width="400" height="300" backgroundColor="#941B1B">
<mx:Text x="101.5" y="30" text="Module #1" fontSize="36" color="#F5F8F9"/>
<mx:Button x="167" y="88" label="Show Alert" id="alertBtn" click="alert('HIT');" enabled="true"/>

</base:BaseModule>

Module #1 Super Class

package
{
import mx.controls.Alert;
import mx.modules.Module;

public class BaseModule extends Module
{
public function BaseModule()
{
}

public function alert(msg:String):void
{
try
{
Alert.show(msg,"Module Loader Test",Alert.OK);
}
catch (e:Error)
{
Alert.show("Error:\n" + e.toString(),"Module Loader Test",Alert.OK);
}
}
}
}

Module #2

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"     width="400" height="300" backgroundColor="#1E2A68">
<mx:Text x="101.5" y="30" text="Module #2" fontSize="36" color="#F5F8F9"/>
</mx:Module>

GPS 8.0

Sprout is an online tool that will allow you to build Flash based widgets. This is very helpful in the marketing world for quickly and easily building banner emercials for the internet. They have a SDK that has support for Twitter, Seesmic, and Google forms.

The online tool is built in Flex and is a very impressive toolset. If you are interested in Flex or building simple flash widgets then I would check it out.

Sprout Builder