Frenglish humor

Some of you reading my blog may have noticed that I am not obviously born in USA because of the amount of english mistakes. I am certainly confident that some of you mostly engineer won't have any problem to read. According to a research at Cambridge University, it doesn't matter in what order the letters in a word are. The only important thing is that the first and last letter be in the right place. The rest can be a total mess and you can still read it without problem. This is because the human mind does not read every letter by itself, but the word as a whole

http://www.jtnimoy.net/itp/cambscramb/

Size matter... Deep inside FLVplayback to reduce the size of the generated SWF

There is a nice balance between using the built-in Flash video components and doing your own thing to achieve the exact look and feel that you want as well as making sure the size of your SWF is small enough for what you want to do. Why ?
The answer is obvious. CDN company charges by the bandwidth so if you have a SWF on a web server which is supposed to stream a video without any user control make sure you don't build a SWF with controls. This might looks like a penny but if your ad is viewed by million of users, you end up winning some of the cost because of the size of the SWF. Finally, sometimes you are paying for the SWF and others for the content bandwidth. The new as3 version of FLVPlayback has some great features in it, including a sophisticated connection management and a well thought-out event system. However, over the years you've learned to avoid to using the standard Flash component set because there is always some sort of customization that your art director wants from you guys that the standard set just won't support.

The VideoPlayer class lets you create a video player with a slightly smaller SWF file than if you used the FLVPlayback component. Unlike the FLVPlayback component, the VideoPlayer class does not let you include a skin or playback controls, and although you cannot find or seek to cue points, the cuePoint events will occur. The FLVPlayback class wraps the VideoPlayer class. Use the FLVPlayback class in almost all cases because there is no functionality in the VideoPlayer class that cannot be accessed using the FLVPlayback class.

In practice the file size reduction of using VideoPlayer instead of FLVPlayback is on the order of 30kb. That's a nice savings bump, but it's probably irrelevant compared to the size of the video files. This 30kb savings is achieved by adding the classpath for the video playback package to the .fla file's classpath instead of just dragging the component icon into the library. For reference, here's the paths to add (File -> Publish Settings ->Flash -> ActionScript 3.0 Settings)


$(AppConfig)/Component Source/ActionScript 3.0/FLVPlayback

$(AppConfig)/Component Source/ActionScript 3.0/User Interface

So that's pretty easy, but there is one limitation that can was make your life complicated. If you are making use of all kinds of cool functions such asBitmapData.draw, SoundMixer.computeSpectrum, etc which require that your domain security ducks all be in a row. If you want to take Bitmap snapshots of a video as it's playing back. (FYI: this is an option only for video delivered using http progressive download and not for video delivered by rtsp stream coming out of Flash Media Server.) In as3 most classes which load remote files offer a means of telling the loader to check against the crossdomain.xml files that have already been loaded and if necessary, try and load the crossdomain.xml file from the new files' domain. This is handy, because you only request domain files when they are needed and you don't need to know the domains in advance. To trigger the domain checks Loader uses the LoaderContext class, Sound files use the SoundLoaderContext class, and video files use the checkPolicyFile property on the NetStream class.

So how do you set this flag when using the VideoPlayer or FLVPlayback components? Unfortunately, there is no method to do this in the existing api. VideoPlayer is an excellent wrapper around NetConnection and NetStream, however you cannot set properties directly on the NetStream object from outside the VideoPlayer thus leaving the checkPolicyFile property stuck at the false setting. What to do? Extend the class and set the flag yourself. Here's some code for a VideoPlayerExtended class:

package {import fl.video.*;

import flash.events.NetStatusEvent;
import flash.net.NetStream;

use namespace flvplayback_internal;

/**
* Extended version of fl.video.VideoPlayer class.
*/

public class VideoPlayerExtended extends VideoPlayer {

/**
* Override the default means of creating a netstream object
*
* Add checkPolicyFile=true to force loading of a crossdomain.xml file
*
* @private
*/
flvplayback_internal override function _createStream():void {
_ns = null;
var theNS:NetStream = new NetStream(_ncMgr.netConnection);
if (_ncMgr.isRTMP) {
theNS.addEventListener(NetStatusEvent.NET_STATUS, rtmpNetStatus);
} else {
theNS.addEventListener(NetStatusEvent.NET_STATUS, httpNetStatus);
}
theNS.client = new VideoPlayerClient(this);
theNS.bufferTime = _bufferTime;
theNS.soundTransform = soundTransform;
theNS.checkPolicyFile = true;
_ns = theNS;
attachNetStream(_ns);
}
}
}

You may be interested to read more about interactive video in Flash CS4 as well
using FLVPlayback Component or NetStream AS3 Class

http://younsi.blogspot.com/2008/12/interactive-video-in-flash-using-f4v.html

How to convert XMP Cuepoint Time to Millisecond in AS3

Following my article

http://younsi.blogspot.com/2008/10/flv-cuepoints-in-flash-cs3-with-flash.html

I wanted to explain to the Flash Community how they can interpret XMP Cuepoint
in millisecond time that Flash Can understand

To synchronize an action for a cue point in an F4V video file, you must retrieve the cue point data from either the onMetaData() or the onXMPData() callback functions and trigger the cue point using the Timer class in ActionScript 3.0. For more information on F4V cue points, see Using onXMPData().


Each XMP Tracks do have a framerate value
first get the nTracksFrameRate and then for each cuepoint time
devide the value read from XMP by the TrackFrameRate and you will
now have a time in millisecond.


function getFLVCuepointsFromXMP(onXMPString:String):void {
var onXMPXML = new XML(onXMPString);
var onXMPTracksXML;
var onXMPCuepointsXML;
var cuePointCount:Number = 0;
var strFrameRate:String;
var nTracksFrameRate:Number;
var cuePoints:Array = new Array();
var cuePoint:Object;

// Set up namespaces to make referencing easier
var xmpDM:Namespace = new Namespace("http://ns.adobe.com/xmp/1.0/DynamicMedia/");
var rdf:Namespace = new Namespace("http://www.w3.org/1999/02/22-rdf-syntax-ns#");

var strTracks:String = "";

if (verbose) {
trace("###### TRACKS");
}

// This iteration get all the Tracks
for each (var it:XML in onXMPXML..xmpDM::Tracks)
{
var strTrackName:String = it.rdf::Bag.rdf::li.rdf::Description.@xmpDM::trackName;
var strFrameRateXML:String = it.rdf::Bag.rdf::li.rdf::Description.@xmpDM::frameRate;
strFrameRate = strFrameRateXML.substr(1,strFrameRateXML.length);

nTracksFrameRate = Number(strFrameRate);

cuePoint["time"] = nStartTime/nTracksFrameRate;

............


Hope this will solve few headhaches...

Now implement a timer and sync your Cue Point the way you want using Action Script 3 code.

I am talking about the best use cases of XMP Cue points in an older
article

http://younsi.blogspot.com/2008/12/interactive-video-in-flash-using-f4v.html

ActionScript 2.0 to ActionScrip3.0 Migration

Livedocs


The following table describes the differences between ActionScript 2.0 and 3.0.
http://livedocs.adobe.com/flex/201/langref/index.html?migration.html&all-classes.html

Conversion Tool

PHP
A great PHP set of class and stand alone windows exe will do few automated translation for you.

Features include:

* Updates createTextField to new TextField() syntax. Sets x, y, width and height if they are not the default (0). Uses addChildAt unless getNextHighestDepth() is used for argument 2, in which case addChild is used. Parses the first parameter and uses it as the variable name unless it is not a simple string, in which case a temp name is used, and the original name is shown in a comment on top of the block. Pretty sweet.
* Updates getURL to new URLRequest syntax. Works as above.
* Updates var, function and class to public var, public function and public class to remove warnings as requested by my childhood hero Robert Penner. Parses the class to recognize block depth to not affect local vars and inline functions.
* Smarter class and package name recognition.
* Removes unnecessary imports in the same package as the current class.
* Should properly recognize various line endings (crossing fingers).

The zip now includes a command-line executable called convertas2as3 for those Windows users who don’t feel like installing PHP. The zip is pretty big because it includes the php libraries for Windows users. On other platforms you can run the command-line utility in src/convert.php by typing php convert.php at the command line.

Try it here, download it here


JAVA
A Java JAR package and command line batch available here
http://jobemakar.blogspot.com/2007/05/convert-actionscript-2-to-actionscript.html
It automatically creates the package syntax, converts Void to void, recursively walks subdirectories, and outputs to a new location. In addition to those things it allows you to use two simple but powerful tags to do custom replacement of specific lines of code during upconversion. For instance:
//@replace var numShots:int = 10;
var numShots:Number = 10;

comes out as:
var numShots:int = 10;

Installation/usage instructions are included in the zip.
http://www.electrotank.com/junk/jobe/AS2_to_AS3.zip


SOME BASIC AS2 TO AS3 CONVERSION SAMPLE

Color
Old version:

First up, the old setRGB method of the legacy Color class.In the old days of ActionScript 1.0 and 2.0, you would create a Color object with a movieclip instance as an argument in the constructor, then apply the setRGB method on this Color instance. It was a bit weird, as you never really directly “talked to” the MovieClip whose colour you wanted to change.

var col:Color = new Color(some_mc);
col.setRGB(0x123456);

New Code

This has changed with AS3. The Color class is something else entirely, and in its place as a colour manipulator, we have this: ColorTransform.

import flash.geom.ColorTransform;
import flash.geom.ColorTransform;// create a new ColorTransform object
var colTrans:ColorTransform = new ColorTransform();
colTrans.color = 0xFF9900;
colTrans.alphaMultiplier = 0;
some_mc.transform.colorTransform = colTrans;

So this would set the colour of the object, but also set its alpha to 0.

Movie Clip Loader

Old Code

this.mcPreview.alpha = 0;
this.mcPreview.mcLoader = new MovieClipLoader();
this.mcPreview.mcLoaderListener = new Object();
this.mcPreview.mcLoaderListener.onLoadInit = Proxy.create(this, previewImageLoaded);
this.mcPreview.mcLoader.addListener(this.mcPreview.mcLoaderListener);
this.mcPreview.mcLoader.loadClip(pPath, this.mcPreview);

public class Proxy
{
public static function create(oTarget : Object, fFunction : Function,... arguments) : Function
{
/* Create an array of the extra parameters passed to the method. Loop
through every element of the arguments array starting with index 2,
and add the element to the aParameters array.*/
var aParameters : Array = new Array();
for(var i : Number = 2;i < arguments.length; i++)
{
aParameters[i - 2] = arguments[i];
}

// Create a new function that will be the proxy function.
var fProxy : Function = function():void
{
/* The actual parameters to pass along to the method called by proxy
should be a concatenation of the arguments array of this function
and the aParameters array.*/
var aActualParameters : Array = arguments.concat(aParameters);

/* When the proxy function is called, use the apply( ) method to call
the method that is supposed to get called by proxy. The apply( )
method allows you to specify a different scope (oTarget) and pass
the parameters as an array.*/

fFunction.apply(oTarget, aActualParameters);
};

// Return the proxy function.
return fProxy;
}
}
}
addChild(loader);

New Code

import flash.events.*;
import flash.display.Loader;
import flash.net.URLRequest;

var url:String = http://www.yourfullyqualidieddomain.com/yourswftoload.swf?cachebusters='+new Date().getTime();
var loader:Loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.OPEN,loadinit); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,loading);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completes);
loader.load(new URLRequest(url));




TWEEN

OLD CODE

the migration of onMotionFinished an event triggered on completion of the old mx.transitions.Tween class. There is a new class:TweenEvent (fl.transitions.TweenEvent) It looked like this in AS2:

import mx.transitions.Tween;
import mx.transitions.easing.Regular;

class SlidingClass extends MovieClip {var xTween:Tween
// class constructor etc. not shown
function slideTo(xTarget:Number, frames:Number, callbackObj:Object, callbackFunc:Function) : Void {
xTween = new Tween (this, "_x", Regular.easeOut, this._x, xTarget, frames, false)
xTween.onMotionFinished = function() {callbackFunc.call(callbackObj);
};};


New Code

no need to pass the target object anymore - that is inherent in the function argument:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Regular;
var xTween:Tween;

function slideTo(xTarget:Number, frames:Number, func:Function) {
xTween = new Tween(this, "x", Regular.easeOut, this.x, xTarget, frames, false);
xTween.addEventListener(TweenEvent.MOTION_FINISH, func);};


Because of AS3 Event handling, a reference to the Tween is automatically passed to the target function as an Event datatype, via the “target” property.


OnPress

//code in AS 2
cornerplus1.onPress = function () {

startDrag(this);

}


Warning: 1090: Migration issue: The onPress event handler is not triggered automatically by Flash Player at run time in ActionScript 3.0. You must first register this handler for the event using addEventListener ( 'mouseDown', callback_handler).

NEW

// in AS 3 becomes

cornerplus1.addEventListener(MouseEvent.MOUSE_DOWN, dragFn);
function dragFn(event:MouseEvent){
event.target.startDrag();
};


LoadVars

OLD

var msg:LoadVars = new LoadVars();
var msgSent:LoadVars = new LoadVars();
msg.var1 = "one";
msg.var2 = "two";
msgSent.onLoad = function($success:Boolean):Void
{
if ($success)
{
trace("Message sent.");
}
else
{
trace("Message failed.");
}
};
msg.sendAndLoad("http://www.yourfullyqualifieddomain.com/script.php", msgSent);

NEW

var scriptRequest:URLRequest = new URLRequest("http://www.yourfullyqualifieddomain.com/script.php");

var scriptLoader:URLLoader = new URLLoader();
var scriptVars:URLVariables = new URLVariables();
scriptLoader.addEventListener(Event.COMPLETE, handleLoadSuccessful);
scriptLoader.addEventListener(IOErrorEvent.IO_ERROR, handleLoadError);
scriptVars.var1 = "one";
scriptVars.var2 = "two";
scriptRequest.method = URLRequestMethod.POST;
scriptRequest.data = scriptVars;
scriptLoader.load(scriptRequest);
function handleLoadSuccessful($evt:Event):void
{
trace("Message sent.");
}
function handleLoadError($evt:IOErrorEvent):void
{
trace("Message failed.");
}

http://www.yourfullyqualifieddomain.com/script.php?var1=one&var2=two


MovieClip

Creating new instances of a class has been greatly simplified in ActionScript 3.0. In previous versions of ActionScript, you needed to call createEmptyMovieClip() or createTextField() if you wanted to create a new MovieClip or TextField. Now, in ActionScript 3.0, you can simply call new MovieClip() or new TextField() directly, as shown in the following examples:

OLD

// AS2
this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.beginFill(0xFF0000);
mc.moveTo(0, 0);
mc.lineTo(100, 0);
mc.lineTo(100, 80);
mc.lineTo(0, 80);
mc.lineTo(0, 0);
mc.endFill();
mc._x = 80;
mc._y = 60;

The previous code creates a new movie clip instance, draws a red rectangle which is 100x80 pixels, and moves the instance to 80,60 on the Stage. Compare that to the following code which does the exact same thing, although using the new drawRect() method instead of having to use the moveTo() and lineTo() methods:

NEW

// AS3
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0xFF0000);
mc.graphics.drawRect(0, 0, 100, 80);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
addChild(mc);

MovieClip

OLD

ReferenceError: Error #1056: Caused by Declaring Stage Instances Private
If you declare a stage instance private you get the message: "ReferenceError #1056 Cannot create property my_mc on StageIntanceDeclarationsClass"

This error occurs when you uncheck the "Declare Stage Instances Automatically" checkbox in the "ActionScript 3.0 Settings" dialogbox and proceed to declare stage instances as private variables in the class associated with the containing MovieClip.

A Note on Inheritances and Declaring Stage Instances:
You cannot choose to simply always declare stage instances automatically without forcing the use of inheritance in classes linked to MovieClip Symbols. If you have a class APrime which is derived from class A and APrime is linked to a MovieClip Symbol, all stage instances used in the base class A must be manually declared in class A. "Declare Stage Instances Automatically" only declares instances in the class linked to the MovieClip Symbol and does NOT make those references available to any base classes.

Example:
Assume that the class StageIntanceDeclarations is set as the class associated with a MovieClip which c0ntains the MovieClip my_mc. Then the following code will cause ReferenceError #1056 at runtime.



package
{
import flash.display.MovieClip;
public class StageIntanceDeclarations extends MovieClip
{
//Private Causes ReferenceError #1056
private var my_mc:MovieClip;
function StageIntanceDeclarations()
{
}
}
}



The output is as follows:
ReferenceError: Error #1056: Cannot create property my_mc on StageIntanceDeclarations.
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at TestStageIntanceDeclarationsBase$iinit()
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()

NEW

To avoid this error simply declare my_mc as public:
public var my_mc:MovieClip;


XML

OLD
NEW

undefined null Nan

OLD
NEW

Flash CS3 to Flash CS4 migration awerness when using FLVPlayback

For those of you who are willing to open existing FLA created by Flash CS3 in Flash CS4 and if those FLA were referencing some instance of the FLVPlayback in the library only controlled by Action Script 3 code, you have to be careful when saving the FLA in Flash CS4 the first time.

Flash CS4 will ask you to migrate your FLA to CS4. Great ! you are MORE than welcome to do this if you were using Action Script 3 code to load video (obviously FLV) and now you are planning to manipulate F4V/MP4/H264 and produce Flash Player 10 SWF. If this is your plan, do not forget to replace the existing FLVPlayback component in the library with the new one as well before upgrading your FLA to Flash CS4.Ddrag and drop the FLVPlayback on stage. You will be prompt to replace. Then save your FLA with Flash CS4. Doing so will guaranty better support of any new files extension supported by latest Flash Player and/or FLash Media Server. Enhancement are always likely to happen from one version of Flash CS to another. From there you will be on track for awesome new features.

Finally, I also recommend ActionScript 3 devs to use load method as much as possible and avoid source in AS3 CS3 code. Sanity check your code if you don't want to upgrade to latest FLVPlayback but still want to manipulate MP4/H264/F4V file by just targeting Flash Player 10.

BTW: If you are manipulating FLV, you are just fine.

How to write XML data with Xerces which can be edit with unicode text editor

Serializing XML data with Xerces

The DOMBuilder class provides an API for parsing XML documents and building the corresponding DOM document tree; while the DOMWriter class provides an API for serializing (writing) a DOM document out in an XML document. To serialize XML data, first load the XML data to a DOM tree using a DOMBuilder and then use a DOMWriter to write out the DOM tree. For example:


Listing 1. Serializing XML data
// DOMImplementationLS contains factory methods for creating objects
// that implement the DOMBuilder and the DOMWriter interfaces
static const XMLCh gLS[] = { chLatin_L, chLatin_S, chNull };
DOMImplementation *impl =
DOMImplementationRegistry::getDOMImplementation(gLS);

// construct the DOMBuilder
DOMBuilder* myParser = ((DOMImplementationLS*)impl)->
createDOMBuilder(DOMImplementationLS::MODE_SYNCHRONOUS, 0);

// parse the XML data, assume it is saved in a local file
// called "theXMLFile.xml"
// the DOMBuilder will parse the data and return it as a DOM tree
DOMNode* aDOMNode = myParser->parseURI("theXMLFile.xml");

// construct the DOMWriter
DOMWriter* myWriter = ((DOMImplementationLS*)impl)->createDOMWriter();

// optionally, set some DOMWriter features
// set the format-pretty-print feature
if (myWriter->canSetFeature(XMLUni::fgDOMWRTFormatPrettyPrint, true))
myWriter->setFeature(XMLUni::fgDOMWRTFormatPrettyPrint, true);

// set the byte-order-mark feature
if (myWriter->canSetFeature(XMLUni::fgDOMWRTBOM, true))
myWriter->setFeature(XMLUni::fgDOMWRTBOM, true);

// serialize the DOMNode to a UTF-16 string
XMLCh* theXMLString_Unicode = myWriter->writeToString(*aDOMNode);

// release the memory
XMLString::release(&theXMLString_Unicode);
myWriter->release();
myParser->release();



Both DOMBuilder and DOMWriter are constructed using factory methods from DOMImplementationLS. When finished, they both need to be released explicitly to relinquish any associated resources. Also, the returned string from writeToString is owned by the caller, who is responsible for releasing the allocated memory.

You can also opt to set some features that control the behavior of the DOMWriter. Xerces-C++ has implemented a number of DOMWriter features that are specified in the W3C DOM Level 3 Load and Save Specification. A complete list can be found in the Xerces-C++ programming guide, DOMWriter Supported Features (see Resources). A couple of them are worth highlighting:

format-pretty-print -- This formats the output by adding a newline carriage return and indented whitespace to produce a pretty-printed, human-readable form. The exact form of the transformations is not specified in the W3C DOM Level 3 Load and Save Specification, and thus the parser has its own interpretation. In releases prior to Xerces-C++ 2.2 (or XML4C 5.1), the parser only pretty-prints the prologue and the epilogue. It doesn't touch the content within the root element. And from Xerces-C++ 2.2 (or XML4C 5.1) onwards, turning on this feature also causes the content within the root element to be formatted.
byte-order-mark -- This is a non-standard extension added in Xerces-C++ 2.2 (or XML4C 5.1) to enable the writing of the Byte-Order-Mark (BOM) in the resultant XML stream. The BOM is written at the beginning of the resultant XML stream, if and only if a DOMDocumentNode is rendered for serialization, and the output encoding is one of the following:

UTF-16
UTF-16LE
UTF-16BE
UCS-4
UCS-4LE
UCS-4BE

My Favorites Flash AS2/AS3 Components/FLA Part I

Components in Flash CS3 and CS4

Kudos for Ultrashok.com done in Flex. Interview with Patrick Miko

http://theflashblog.com/?p=312

http://blogs.adobe.com/rgalvan/2008/01/about_components.html

A great candidate for a new video playback component : A component using netstream to interpret interactive hot spot produced by Activideo embedded in FLV/F4V stream.
You may be interested to read more about interactive video in Flash CS4
http://younsi.blogspot.com/2008/12/interactive-video-in-flash-using-f4v.html

Overall my favorites component for Flash CS3/Flash CS4 to
render Photo Gallery and now Video. Each Video transition now
support Pixel bender. Once drop on stage you will have access
to a Video Component with an impressive set of parameters.

http://slideshowpro.net/examples/

http://www.ultrashock.com/#/asset/41197/as-flash-media-player.html



AS-Flash Media Player (standalone)

Features:
- Video player with H264 support
- Audio player
- Subtitles - XML
- .srt to xml converter (PHP script)
- Share (send to friend) (PHP script)
- Cue points (highlights)
- external (XML) and internal (in video) CP
- YouTube support
- Alternate video content (low/high quality)
- Image preview
- External loaded logo
- URL protection
- Version test for Adobe Flash Player
- Auto hide controls
- Loop on/off
- Keyboard shortcuts
- Mouse wheel, doubleclick
- Fullscreen support
- FlashVars & Query driven
- AS 2.0

http://www.ultrashock.com/#/asset/41084/ultra-xml-item-slider.html



XML driven item slider.
You can change almost everything: number of items/page, number o change/click, image 1, image 2, text 1, text 2, speed, blur, saturation, brightness, reflection and much more. AS 2.0 - Flash Player 8


http://www.ultrashock.com/#/asset/40818/pageflipper-as3.html



Engage your users with truly intuitive browsing experiences with the pageFlipper, a Flash component that enables magazine style flipping of pages. Sensational when used for company brochures, family photo albums or editorial style content. With realistic page turning effects introduce an enhanced sense of interaction to your users. Use Movieclips, external images or SWFs for pages. Add pages using XML, Actionscript or the Component Inspector panel. Only 14KB.

Flip through the book in the example by either clicking and dragging the pages from the corners in a page flipping motion or by clicking in the corner of each page. You may also flip to each page directly using the direct page number links above the book. AS 3.0 - Flash Player 9

http://www.ultrashock.com/#/asset/40263/tree3d-as3-component.html



Tree3D is a tree component for ActionScript 3 with a twist. It allows you to easily create a three dimensional interactive tree UI navigation systems. Based on data driven XML, the component can be easily adapted to virtually any data source.

Developed by Zerofractal Studio and based on an idea by Alejandro Gonzalez, Tree 3D offers an intuitive user friendly functional spatial tree that combines horizontal navigation for the current level and depth cascade style navigation for its hierarchy.

Common uses for Tree 3D are: File/Folder Browsers, Menu systems, site-maps, or any tree based structure.

Features:
- Data driven
- Customizable Label and Icon styles
- Breadcrumb Navigation
- Customizable UI settings
- Incredible 3D eye-candy effects
- Customizable Scrollbar
- Keyboard/Mouse Wheel Navigation.
- Flash Player 9 - AS 3.0

http://www.ultrashock.com/#/asset/40612/flash-igoogle-weather.html



Cool Flash Weather widget XML based (data is received from Google web service at -(www.google.com/ig). You can choose different towns, languages, US or SI units. You can add unlimited number of cities and languages (XML settings).

Your server must support PHP in order to avoid the security sandbox for this widget.
Flash Player 8 - AS 2.0

http://www.ultrashock.com/#/asset/41193/spinning-3d-earth-globe.html



- Real 3D globe (not just one flat map animated);
- Smooth animation based on 72 frames;
- 100% scalable vector;
- Translucent globe;
- One movieclip contains all graphic elements. Simply drag and drop;
Included AS code for 9 versions of the globe (as seen in the preview);
- Easy to customize (with or without actionscript): globe elements colors; globe elements transparency;
- AS 2.0 - Flash Player 8

http://www.ultrashock.com/#/asset/41988/news-rotator-01.html



Features:
- resizable from xml
- unlimitted images/content
- dinamically resizable scroller
- you can change most of the colors/sizes using the xml
- you can position the entire component as well as the other individual components just from the xml
- you can change the button's text/url/target for each slide
- the content is html formatted text and you can easily change it for each slide
- also, from the .xml file you can change the sliding timing and the fade in/out time and animation type
- in the xml you have a variable (autoplay), when this is activated, on first load the news rotator will start playing

The component can easily be embedded into another project, all you have to do is copy the srouce files into your new projects folder, copy the library items into your new projects, drag and drop on the stage the gal movie clip and it's done.

You can use the news rotator in many ways, it's a useful component and because the level of customization is high it's a must have. It can be a news rotator, a product show off or even a family album, sky is the limit.
- AS 2.0 - Flash Player 8.0


http://www.ultrashock.com/#/asset/40683/3d-stack-as-2.0.html



The 3D Stack can be easily use to display groups of images, movie clips, SWFs with perspective, depth, fading and much more!

Key features:

* Adjustable images position via parameters or
* Using camera keyboard and mouse controls
* XML configuration file easy to setup
* AS 2.0 - Flash Player 8.0

http://www.ultrashock.com/#/asset/40777/ripple-dissolve.html



AS3 RippleDissolve class that works best with small vectors or bitmaps. The effect is triggered on a MovieClip by using a single line of ActionScript. Settings include effect duration, ripple height, ripple speed and effect strength. Goldfish not included.

http://www.ultrashock.com/#/asset/41497/dynamic-sliding-menu-02.html



Sliding menu, mouseover pushes out the normal state of the button.

Features for the xml/what you can change:
- the menu's position
- normal/over/pressed gradient colors, font size, font name, button's height, button's added width to the text's total width if you want the button to be a little wider
- you can toggle either a button will be launched at first menu load
- you can toggle either a line will appear around button, you can even choose the line's gradient colors
- you can toggle each bg (normal/over/pressed) and of course you can change each of the button's gradients and alpha value
- you can toggle on/off the menu's big background and you can change it's gradient color, width, height, alpha value and you can even position it anywhere you want.
- you have 4 motion options ( up-down, down-up, right-left, left-right )
- you can change the animation time and you can choose the animation type ( I have used tweener for this and you have a link in the help file with all the transition types available )
- AS 2.0 - Flash Player 8.0

Flexibile menu, easy to customize without having to install flash, all you need is a text editor to change it's graphics. In this preview version getURL had been disabled but in the original file it works just fine and in the xml you can change the url and the target as well.

Enjoy this new release from OXYLUS Flash


http://www.ultrashock.com/#/asset/41487/ultimatescrollerpro.html



This is the PRO version of the ultimateScroller component, rewritten for ActionScript 3.0 with several additional features and enhancements. An easy to use, drag and drop Flash scroller that can scroll movie clips and dynamic text fields. Includes drag scrolling, easing, motion blur, mouse wheel scrolling and CS3 skinning.
Available for ActionScript 3.0. .

http://www.ultrashock.com/#/asset/40645/photosplash-as3.html



Displays a collection of images in a random layout and angle. The viewer can rearrange the layout by clicking and dragging the images or by pressing the optional reshuffle button. Large images can also have mouse over titles and descriptions. Built-in easing effects and skinnable image holders.
AS 3.0 - Flash Player 9

http://www.ultrashock.com/#/asset/41191/world-map-with-navigation-menu.html



Stylish vector world map with continent navigation menu. It could be used for corporate websites (list of company branches or distributors locations). Continents: North America, South America, Europe, Asia, Africa and Australia.
AS 2.0 - Flash Player 8.0

http://www.ultrashock.com/#/asset/39773/tooltip-v.2.html



This is a nice yet powerful tooltip. This can easily be integrated into all of your flash applications. AS 2.0 - Flash Player 8.0

http://www.ultrashock.com/#/asset/41194/



Spinning Earth - AS 2.0 - Flash Player 8.0

http://www.ultrashock.com/#/asset/41041/magneticmenu.html



The magneticMenu flash component displays icons, images, or flash files in a magnetic like menu. When a user mouses over an icon the icon is attracted to the mouse pointer much like a real magnet. Supports both a horizontal or vertical menu.

Key Features
* All settings and photos can be changed through the component inspector or the XML file
* Customizable spacin
* horizontal or vertical format
* Supports all Flash image formats
* Supports .swf files
* ActionScript API available
* AS 3.0 - Flash Player 9

http://www.ultrashock.com/#/asset/41544/event-count-down-widget-v1.html



EVENT COUNT DOWN WIDGET V1

A simple but useful event countdown ticker. Great for under-construction pages
with a known launch date. All code resides on the timeline and is well commented.
Additional documentation describes how to modify the widget's variables to your
liking.

Future upgrades will include:

- Parameters to be set externally via XML
- Pure V2 component implementation
- AS 2.0 - Flash Player 7

http://www.ultrashock.com/#/asset/41576/rotarygallery.html



The rotaryGallery displays images and Flash .swf files in a unique circular layout. Once a user clicks on a thumbnail image, the thumbnail expands to full size while the current image sizes down to a thumbnail and the rest of the thumbnails dynamically reorganize. The rotaryGallery has many customizable parameters to get an infinite number of looks.

All settings and images/videos can be changed through the component inspector or the XML file
Custom thumbnail image size
Custom image size
Custom diameter of the gallery
Option to place the center image onto or below the thumbnail images
Optional Glass like effect over the images
Custom glow transparency
Custom glow color
Custom glow blur
Optional link click through
Supports all Flash image formats
Supports Flash .swf files
AS 3.0 - Flash Player 9

http://www.ultrashock.com/#/asset/40799/calendar-xml.html



Fully customizable events calendar, XML driven.

Here are some of the variables you can edit:
calendarWidth & calendarHeight
calendarColor & calendarGradient
backgroundAlpha & alphaSpeed
calendarTextSize & calendarTextFont & calendarTextColor
effect
daySize & dayColor & dayEventColor & dayAlpha
daySpacing
eventBorder & eventColor
eventTextSize & eventTextFont & eventTextColor
transition & eventTransitionSpeed
startDay

http://www.ultrashock.com/#/asset/12202/fire-effect.html



Set any static movie clip on fire
AS 3.0 - Flash Player 9

http://www.ultrashock.com/#/asset/41516/clouds-mask-xml-banner-rotator-(as3).html



This banner rotator is driven xml. It uses 'perlinNoise' and 'threshold' method to create clouds mask effect. You can show image. Customize button color, hover color, text color, button number, button shape. Also, open window method and delay time for every image. Very powerful, hope you to like it.

Features:

• xml driven
  
  
• Customize button color


• Customize hover color


• Customize text color


• Customize button number


• Customize button shape


• Pause/Play rotator


• customize link enable for banner (linkEabled = 'yes' or linkEabled = 'no'


• Customize position of buttons


• Customize open window method for every image: '_blank' or '_self'


• Customize delay time for every
  

http://www.hitasoft.com/
RIPE WEB FLV PLAYER 1.0
The slow motion Video Feature is interesting

http://www.flashloaded.com/flashcomponents/3dwall/



The 3D Wall Flash component displays images on an engaging interactive 3D wall using the Papervision3D engine. The PRO version can also display FLV videos and SWF's

http://flashxpert.net/products/







Wall of images

http://flashden.net/files/116659/index.html

How The Wall Works

- A list of images is drawn from an XML file and then loaded in randomly.

- The app then calculates how many squares will fit on the screen (based on the “target width” and “target height” XML settings) and then randomly fills the browser with your images.

- Your image list can be any size. For example, if you have only two images in your list, the file will take those two images and repeat them until the wall is built. If you have more images in your list than allotted squares, the file will then leave out the extra images.

- You can choose whatever size you want your squares to be from two settings in the XML file

- The app will scale your images to fill each square appropriately

- Your large images can be any size. If they are too big to fit on the viewer’s browser, they will be scaled down to fit.
XML Options

- Set the target height and width of your squares

- Choose to use the file as a clickable gallery or use it as a dynamic website background image

- Customize your Right Click Menu with target supported links

- Set the path to your photos and write their HTML /CSS supported descriptions

Uses GreenSock TweenLite. Lightweight at only 25kb (with embedded font, 12kb with device fonts). Class driven and easy to integrate with your Flash Projects (code below)

import com.crackerjack.Wall;
var wall:Wall = new Wall();
addChild(wall);



XML BANNER ROTATOR 02 AS3

http://flashden.net/item/xml-banner-rotator-02-as3/39423

This is a flexible and easy to customize banner ad rotator that supports external images and swf files. All settings and item locations/descriptions can be set in the .xml file. Very easy to resize (change dimensions in the .xml and re-compile the file with the same dimension = done).

Among its features :
- ActionScript 3.0
- virtually unlimited items (visualy limited by the height of the file for the drop-down selector)
- xml powered, flexible
- supports both images and swf files
- autoplay timer setting
- text description for each item with the posibility to have no description bar
- clean unobtrusive design
- cool motion blur animation
- play/pause feature
- quick setup and customization

FLIP BOOK SLIDESHOW

http://flashden.net/item/flip-book-slideshow/35254

Features of the ActionScript3 Flip Book Slideshow.
– Item support JPG , GIF , PNG files.
– Each page move for its own path.
– You can use it as:
1. E-Book or E-Jurnal.
2. Image Viewers.
3. Banner rotator.
4. Image slideshow.

– Easy configure and modify all settings and parameters by XML files:
1. Unlimited number of pages.
2. You may add unlimited number of images and HTML -formatted texts for each page and move it to any positions on the page.
3. You may add link for any images with different target parameters.
4. You may edit font size, font colour, background colour, background opacity and width for every text block by XML .
5. You may turn on/off autoslideshow mode, set animation speed, animation pause, buttons colour, preloader colour by XML .
6. You may set one of two modes:
a. Loop mode – pages will be flip by loop.
b. Single mode – Flip Book Slideshow will be looked like on simple book.
7. You may set background image or colour for Flip Book Slideshow and for any page.


SLIDE ZOOM VIEWER

http://flashden.net/item/slide-zoom-viewer/33484

This is a drag and drop XML drive image viewer with zoom/pan capability and HTML /CSS description text. It can be used both for flash files to be embedded in HTML as well as for dragging and dropping into your flash project.
Features:

* Drag and drop and XML driven.

* Can go over any background (the wood one shown in preview is just an example of this).

* Coded to load into other swf’s without problems.

* Text is HTML /CSS text for thorough formatting abilities.

* Help files included.

* 100% vector with easy on stage editing of graphics.

* Zooming and Panning allows large detailed images to be inspected closely.



XML TEAM BUSINESS CARDS VIEWER

http://flashden.net/item/xml-team-business-cards-viewer/34182


XML Team Business cards is a team viewer, which displays Business cards of the members of your team, your office…

Without opening any fla, just edit the XML .

You can display the photo of each member, his name, his role, job or position, and his e-mail. The e-mail address is clickable, to open your messenging tool to send an e-mail.

You can customize : the colors and the shapes of your Business cards, put a different color for each member.

You can add as many members you want.



3D XML BUSINESS CARD

http://flashden.net/item/3d-xml-business-card/18716

This Papervision 3D Business card is very simple to use, just open up the XML file in your favourite text editor like Notepad and replace the default details with your own business card information. Then, just create your imagery for both the front and back of the business card. Once youve done that you are ready to go!

I have listed this as a business card because that was my main inspiration for making it, but you could use it for anything where you wanted to flip something with two images on.

Features:

* True 3D, built using the fantastic 3D engine, Papervision, no skewing and distortions to create an illusion like others
* XML based, you can control the business card text data within an XML file, along with settings like size, flip speed, blur amount and the front and back images to be used




IMAGE TRANSITION COMBO EFFECTS

http://flashden.net/item/image-transition-combo-effects/1116

These are 8 image transition effects, include: Rotate, Scale, Blur and Fade. Maybe you have never seen this kind of transition before, not using mask, tweening, filter etc… but from the small rectangles that build up the image. By modifying the properties of those small rectangles, you can create many different transition effect. The Fade effect is somehow different from the traditional fade effect you knew . Quite impressive and useful, the choice is yours!

BLUR MASK EFFECT

http://flashden.net/item/blur-mask-effect/372

Mask effect on an image with blur.


XML PIXELATE!!!

http://flashden.net/item/xml-pixelate/10479


MIRAGE IMAGE

http://flashden.net/item/mirage-image/10789

XML CARDS TRANSITION

http://flashden.net/item/xml-cards-transition/14416

XML COOL SQUARE TRANSITION

http://flashden.net/item/xml-cool-square-transition/14015


BOXED TRANSITIONS 2

http://flashden.net/item/boxed-transitions-2/13552

It’s all vector, therefore you can resize it all you want and not lose the quality. It is ready for drag and drop. Place the movieclip “mask” over your photo or other elements.

If you want to change color transition, set and edit movieclip “box” (first color) and “addons” (second color). Additionally You can put “tint” color effect in movieclip “mask”.

Only 5kb (without photo)!

BOXED TRANSITIONS

http://flashden.net/item/boxed-transitions/12780

It’s all vector, therefore youcan resize it all you want and not lose the quality. The items in the stage have a “tint” as color effect. It is ready for drag and drop.

Only 3kb (without photo)!

Pixel Bender Filter in Flash CS4

My first Pixel Bender filter (RGB RAMP)

Today I spent a few hours with Pixel Bender and it is well worth the effort. As you know CS4 was announced recently and packs a pretty substantial list of features, but Adobe is equally impressing developers on the Adobe Labs. One of the newer additions is Pixel Bender. Pixel Bender is essentially a toolkit that is used to develop filters. These filters can be used in Flash 10 and After Effects and allow everyday people to create some very interesting filters.

The running of the filter in Flash CS4 is pretty much identical to an included filter, like the BlurFilter or DropShadowFilter.

Start by opening the Pixel Bender Toolkit, which can be obtained on the Adobe labs

Then create your kernel script by simply copying and pasting the code provided here into the code window of the Pixel Bender toolkit. Pixel Bender Files have the extension pbk.

<languageversion : 1.0;> kernel QuadBlur < namespace : "com.pixelbender.filters"; vendor : "RGB Filter"; version : 1; description : "Creates a basic RGB Pixel Color Ramp"; > { input image4 src; output pixel4 dst; parameter float red < minValue:1.0; maxValue:15.0; defaultValue:1.0; >; parameter float green < minValue:1.0; maxValue:15.0; defaultValue:1.0; >; parameter float blue < minValue:1.0; maxValue:15.0; defaultValue:1.0; >; void evaluatePixel() { pixel4 p = sampleNearest(src,outCoord()); p.r *= red; p.g *= green; p.b *= blue; dst = p; } }</languageversion>

Then export the filter File > Export Kernel Filter for Flash Player and save the Sample.pbj (binary file) file on you desktop.

Now Open Flash and create a new ActionScript 3 document. For a test sample you need to insert an image on the stage and an image for a button inserted as movie clip. Save the new Flash document to your desktop, where you saved the filter file. Once the file is saved import an image that you will apply the filter to.

Click on the following link to see the filter in action. You must have Flash Player 10 installed to view it.

The ActionScript 3 code that I used to import the new sample shader is
shown below.

import adobe.utils.*; import fl.controls.*; import flash.accessibility.*; import flash.desktop.*; import flash.display.*; import flash.errors.*; import flash.events.*; import flash.external.*; import flash.filters.*; import flash.geom.*; import flash.media.*; import flash.net.*; import flash.printing.*; import flash.profiler.*; import flash.sampler.*; import flash.system.*; import flash.text.*; import flash.text.engine.*; import flash.ui.*; import flash.utils.*; import flash.xml.*; var shader:flash.display.Shader; var timer:flash.utils.Timer; var loader:flash.net.URLLoader; var timerInt:uint; var startBtn:fl.controls.Button; var image:flash.display.MovieClip; var shaderFilter:flash.filters.ShaderFilter; try { startBtn["componentInspectorSetting"] = true; } catch (e:Error) { }; startBtn.emphasized = false; startBtn.enabled = true; startBtn.label = "Start Effect"; startBtn.labelPlacement = "right"; startBtn.selected = false; startBtn.toggle = false; startBtn.visible = true; try { startBtn["componentInspectorSetting"] = false; } catch (e:Error) { }; timerInt = 40; image = new PixelBenderImage(); image.y = 20; image.x = 25; addChild(image); startBtn.addEventListener(MouseEvent.CLICK, this.startEffect); function restartEffect(arg1:flash.events.MouseEvent):* { image.alpha = 0; initFilter(); return; } function startEffect(arg1:flash.events.MouseEvent):* { loader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; loader.addEventListener(Event.COMPLETE, this.loadComplete); loader.load(new URLRequest("Sample.pbj")); return; } function initFilter():* { shader.data.red.value = [20]; shader.data.green.value = [20]; shader.data.blue.value = [20]; shaderFilter = new ShaderFilter(this.shader); image.filters = [shaderFilter]; image.alpha = 1; timer = new Timer(timerInt, 0); timer.addEventListener(TimerEvent.TIMER, this.timerHit); timer.start(); return; } function timerHit(arg1:flash.events.TimerEvent):void { var loc2:*; var loc3:*; var loc4:*; if (shader.data.red.value == 1) { startBtn.label = "Restart Effect"; startBtn.removeEventListener(MouseEvent.CLICK, this.startEffect); startBtn.addEventListener(MouseEvent.CLICK, this.restartEffect); timer.stop(); return; } loc2 = shader.data.red.value - 0.1; loc3 = shader.data.green.value - 0.1; loc4 = shader.data.blue.value - 0.1; shader.data.red.value = [loc2]; shader.data.green.value = [loc3]; shader.data.blue.value = [loc4]; shaderFilter = new ShaderFilter(shader); image.filters = [shaderFilter]; return; } function loadComplete(arg1:flash.events.Event):void { shader = new Shader(loader.data); initFilter(); addEventListener(Event.ENTER_FRAME, loop); return; } /* function onChange(p:Number):void { p *= 50; shader.data.amount.value = [p, p, p]; image.filters = [filter]; } */

Pixel Bender filter (ZOOM BLUR)

This filter will create a zoom blur effect

<languageVersion : 1.0;> kernel ZoomBlur < namespace : "com.rphelan"; vendor : "Ryan Phelan"; version : 1; description : "A simple implementation of zoom blur, using 15 levels of blur."; > { parameter float2 center < minValue:float2(0.0, 0.0); maxValue:float2(2048.0, 2048.0); defaultValue:float2(256.0, 256.0); >; parameter float amount < minValue:0.0; maxValue:0.5; defaultValue:0.05; >; input image4 src; output pixel4 dst; void evaluatePixel() { // Obtain the output pixel coordinate float2 coord = outCoord(); // Offset by the center value coord -= center; float scale; dst = float4(0.0); // This is an expanded for loop. // Loops are not currently supported in pixel bender. // For increased definition at the cost of performance, // simply add more levels. // Take 15 samples radiating out from the center and // add them to dst scale = 1.0; dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (1.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (2.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (3.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (4.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (5.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (6.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (7.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (8.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (9.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (10.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (11.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (12.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (13.0/14.0); dst += sampleNearest( src, coord*scale + center ); scale = 1.0 + amount * (14.0/14.0); dst += sampleNearest( src, coord*scale + center ); // Divide by 15 to get the average of the samples dst /= 15.0; } }

Then export the filter File > Export Kernel Filter for Flash Player and save the .pdk file on you desktop.

Now Open Flash and create a new ActionScript 3 document. Save the new Flash document to your desktop, where you saved the filter file. Once the file is saved import an image that you will apply the filter to.

Click on the following link to see the filter in action. You must have Flash Player 10 installed to view it.

The ActionScript 3 code that I used to import the ZoomBlur sample shader is
shown below.

import adobe.utils.*; import fl.controls.*; import flash.accessibility.*; import flash.desktop.*; import flash.display.*; import flash.errors.*; import flash.events.*; import flash.external.*; import flash.filters.*; import flash.geom.*; import flash.media.*; import flash.net.*; import flash.printing.*; import flash.profiler.*; import flash.sampler.*; import flash.system.*; import flash.text.*; import flash.text.engine.*; import flash.ui.*; import flash.utils.*; import flash.xml.*; var shader:flash.display.Shader; var timer:flash.utils.Timer; var loader:flash.net.URLLoader; var timerInt:uint; var startBtn:fl.controls.Button; var image:flash.display.MovieClip; var shaderFilter:flash.filters.ShaderFilter; try { startBtn["componentInspectorSetting"] = true; } catch (e:Error) { }; startBtn.emphasized = false; startBtn.enabled = true; startBtn.label = "Start Effect"; startBtn.labelPlacement = "right"; startBtn.selected = false; startBtn.toggle = false; startBtn.visible = true; try { startBtn["componentInspectorSetting"] = false; } catch (e:Error) { }; timerInt = 40; image = new PixelBenderImage(); image.y = 20; image.x = 25; addChild(image); startBtn.addEventListener(MouseEvent.CLICK, this.startEffect); function restartEffect(arg1:flash.events.MouseEvent):* { image.alpha = 0; return; } function startEffect(arg1:flash.events.MouseEvent):* { loader = new URLLoader(); loader.dataFormat = URLLoaderDataFormat.BINARY; loader.addEventListener(Event.COMPLETE, this.loadComplete); loader.load(new URLRequest("ZoomBlur.pbj")); return; } function initFilter():* { return; } function timerHit(arg1:flash.events.TimerEvent):void { return; } function loadComplete(arg1:flash.events.Event):void { shader = new Shader(loader.data); filter = new ShaderFilter(shader); image.filters = [filter]; return; }

Some flash web site i like

Some of the web site i like done in flash

http://www.musamachina.com/site/index.html?flashVersion=9&langue=en&adr=0

http://www.stephanepeyron.com/

http://www.digaworks.com/

http://www.keal.com.br/v1/

http://www.byblos.hr/

http://circular.no/

http://www.vitorvilela.com.br/

http://www.gogear.philips.com/fullsound/index_en_gb.html

http://www.salinas-rio.com.br/verao2009/#/english/home/

http://www.coca-cola.com.au/csol/

http://www.highdefinition.sony.eu/

http://www.thecoronabeach.com/

http://www.starbuckscoffeeathome.com/

http://www.kungfupanda.com/

http://www.pgo.fr/models/cevennes/

http://demo.northkingdom.com/ihuvudetpatoyota/

http://ad.hyundai-motor.com/catalog/veracruz/

http://www.mgmgrand.com/

http://eight8.jp/

http://www.2advanced.com/

http://icemanfashion.com/

http://home.disney.go.com/movies/

Amazon Unbox

http://www.thechicagospire.com/

http://sonic.sega.jp/SonicWorldAdventure/teaser/

http://www.as-flash.com/

http://www.porsche.com/all/usa/911/

INTERACTIVE VIDEO IN FLASH USING F4V H264 VIDEOS WITH FLASH PLAYER 10

INTERACTIVE F4V H264 VIDEO WITH FLASH PLAYER 10

Introduction

This blog article demonstrates how any users using Adobe Creative Suite CS4 or Adobe Flash CS4 Professional can create Interactive H264 Video for Flash player 10 to be viewed by any web browser supporting Flash Player 10 or higher. The following Software (part of Adobe Creative Suite CS4 or bundled with Adobe Flash CS4) as well as a third party Software called Activideo http://shop.actimus.com/ will be used in sequential order.
http://www.adobe.com/technology/graphics/video_visualization_and_interaction.html

1) Adobe Media Encoder CS4 or Adobe Media Encoder CS5

2) Adobe Bridge CS4 or Adobe Media Encoder CS5

3) Third party products such as Activideo (used in this article) or Adobe After Effect CS4 (http://vimeo.com/2345579) and finally

4) Adobe Flash CS4 or even Better Adobe Flash CS5 which support live preview of video on the designer stage

Users don't have to be familiar with Adobe Media Encoder to generate the XMP data but must be familiar with Action Script 3.0 to create the interactive experience inside Flash CS4 or Flash CS5. They can incorporate XMPData Event exposed by the NetStream player class. You must be familiar with mouse click event in Action Script 3 and really fast mouse hit test detection and finally you must be able to execute additionnal Action Script 3 functions.

Interactive user mouse click over specific areas in the video can provide useful web analytic data for the content provider streaming the videos, or lead the user to third party web site, or be able to jump to another position in the same video or a relative FLV or F4V video...

On android OS 2.2 with Flash Player 10.1 user could pause the video and display a popup to jump to various web site.

The time to produce an interactive video can vary from 5 minutes to few hours depending on variable parameters which have more or less impact on the time to complete the interactive presentation.
This time didn't include the encoding time of the H264 Video.
Software with motion tracking engine such as Adobe After Effects will also
facilitate the production of your interactive hot spots.


We are going to focus on one use cases. The first use case will show you step by step how to turn a logo within a Music Video Clip into a functional HyperLink to lead the user to the Television Company Web Site or a landing web page focused on the artist within the Television Company Web Site.


Why Interactive Video


1.Produce interactive banner ads using Flash and H264 F4V Video with persisted link in the Video so that syndicators can target ads for higher returns.

2. Same content used on TV and on the web and now on devices running Android 2.2 OS

3. Produce music or video clip which can lead the user to the content owner or artist web site so that they can earn more revenue.

4. Be able to increase search accuracy of H264 video content for search engine based on URL attached to specific object in time.

5. Provide “hidden” web analytic feedback to company to help them know which object were clicked in the Video by a user when and how many times.

6. Lead the user to other video or segment of the same video when the same object appears.


Music Video Clip Use Case

Step 1 Launch Adobe Media Encoder CS4 - Select Video Source and add to Batch




Step 2 Adobe Media Encoder CS4 - Insert Event Cuepoint for Interactive Sequence SMPTE Time In,

This step is no longer require with the updated version of Activideo. Activideo will generate an XMP file which can be embedded immediately in the Video (no need to merge)



The first step consist of using Adobe Media Encoder CS4 to encode your Video Source into H264 video and provide a list of marker matching each video segment related to each interactive sequences you are willing to produce. In our sample we will only create one sequence so for this manner you just have to provide two event markers.
We pick an mpeg one video clip of an 80's band Europe for there hit The Final Countdown. The reason we are doing this step is to produce a video with embedded XMP track. You can avoid this step if you are using latest version of Activideo (July 2010) but this is better to merge the XMP metadata exported by Activideo with additional Cue Points parameters with the XMP Metadata produced by Adobe Media Encoder.


When you add the source video file to Adobe Media Encoder CS4 batch list you can double click on the preset to be able to open the export settings window panel. From there you can provide in and out cuepoint. You can use the slider to be able to visually detect the beginning of your sequence. In this particular case when the VH1 classic logo appears.

For convenience give each in and out CuePoint a name which will help you associate each interactive sequence during the merging operation. The reason for doing this is that when Adobe Media Encoder will encode the video some XMP Metadata will be inserted in the Video Clip.

Adobe broaden XMP as the standard for embedded metadata to be used for internal and external workflow. In our use case XMP metadata will be used for external usage.

What is XMP ?

1. XMP is based on XML hence grammar can be extended at anytime

2. XMP is used across all Adobe Product for a better workflow

3. XMP can help users to work and collaborate on the same project thanks to the merging capability of XMP Data.

4. Using XMP provide indexation features for triple store engine once XMP data is converted to RDF hence web crawler can perform indexation of any files tagged using Adobe tools or thanks to the public version of XMPCore SDK

5. XMP is embedded in the Video File and remains in the video even if the content is moved or copy from one server to an other.

6. Video and its private data can be delivered in a single connection from Flas Media Server using RTMP protocol as well as from any HTTP server used to provide progressive download and playback mechanism to Flash Player.

7. XMP can be parsed using for x loop in Action Script 3


Step 3 Adobe Media Encoder CS4 - Insert Event Cuepoint for Interactive Sequence SMPTE Time Out




Using the video slider, look for the specific time where the logo will disappear and create an other Event Cuepoint. Once you have set both in and out Cuepoint to define the interval for your interactive sequence, you can Encode the video. To proceed to the next step you will have to wait for the F4V (H264 Video) to be fully encoded. The encoding time will vary based on your CPU speed. It is highly recommended to do
H264 encoding on Multi Core Computer or really fast single core CPU. It is also highly recommended to encode using Adobe Media Encoder for a valid interactive video use case. Doing that will ensure that correct XMP data will be embedded in the Video and this will also reserve some space in the beginning of the video to be able later on to merge Interactive XMP data with XMP Data previously embedded in the Video.

Step 4 Adobe Media Encoder CS4 - Encode F4V H264 Video for Flash Player 10




Encoding Process. All encoding and scrubbing for In and Out time code tasks to reserve Cuepoint entries for Video footage can be done by one person while an other person will generate the Interactive Data aimed to be merge at the end of encoding workflow.

Produce Interactive Sequence for a static area using Activideo




When it comes to generate fast interactive sequences for static area I really like to use Activideo. But don't get me wrong here, Interactive Sequence don't have to be static. Activideo is a software created by a small company Actimus which can help you generate all what you need to produce the raw data needed for an interactive video experience. For more information about Activideo visit http://shop.actimus.com/ and to see how it work visit http://shop.actimus.com/demo/howitworks/. Some video tutorials are also available to explain you how to use Activideo
http://shop.actimus.com/demo/tutorials/

Activideo is a fast and easy way to turn your videos into interactive presentations thanks to the export of well known Adobe XMP Metadata container. Activideo adds interactive hot spots (also called overlay sequences) to your videos. It is a simple but powerful concept: user-created hyperlinks within the video at various intervals and for specific areas in the video the same way hypertext is used on the Internet. These hyperlinks and interactive hotspots are exported into Adobe XMP RDF XML file format. Activideo could also produce Adobe Flash CS4 Action script 3 file along with a FLA and HTML template to be able to build your custom SWF with Adobe Flash CS4 thanks to a Plugin SDK.

Input Formats:

Activideo supports many input video file formats mostly any file format supported by the Direct Show software stack. Today, it currently supports MPEG1, MPEG2*, MPEG2-TS* transport streams including HD (720, 1080), DivX*, Microsoft AVI, Microsoft WMV* and WMV-HD * and Blueray * m2ts file. Activideo never modifies the original source video neither encode a Video. This tasks is left to Adobe Media Encoder and Adobe Bridge CS4 bundled with Adobe Flash CS4 Pro

Overlays:

The outlining of the overlay sequences is very precise because Activideo supports polygons with up to 100 vertices within a sequence. It performs linear interpolation of each vertex to transition smoothly from one shape to another. While the video is playing into Activideo, the user can move the current polygon location with the mouse visually to match any portion of the video associated and covered by polygon (and polygon are not visible on top of the final encoded Video. This is a human intervention process but it can be automated if the user doesn't plan to move the object on screen thanks to a very functional Wizard well suited to create a unique sequence and for example turn a logo encoded in the video into an hyperlink. To ease the overlay authoring process, a static logo sequence can be generate using the Creation Wizard.

Applications:

With Activideo, users can add interactive hotspot to their videos. Since the XMP data can be embedded into the Video using Adobe Media Encoder CS4/CS5 or Adobe Bridge CS4/CS4 the hyperlink will always moved whenever the Video is duplicated acting as a watermark for your video. It also provides a way to publish interactive Ads Banner using FLV or H264 video. Activideo will not encode video but just export XMP file using Adobe Flash CS4 FLV Cuepoint RDF grammar. The generated XMP metadata can be merged and embedded into FLV or F4V Video using Adobe Media Encoder or Adobe Bridge CS4. FLV or H264 Video can be encoded using Adobe Media Encoder or Elecard converter studio.

Demo version:
Yes : Export of XMP
No : Project saving.
Yes : Wizard to create an interactive sequence available.
21 days of evaluation.

It will take you 2 minutes to generate a simple interactive sequence for a static logo but you can create complex sequence to match moving objects in the video.

Full version:
Yes : Export XMP
Yes : Access to self registered COM Export Plug-ins available through Export As Menu
No activation required.

Although this use cases is focused on demonstrating how XMP can be used in H264 video for hyperlinks, Activideo can also provide Manual selection and on screen positioning of shapes on top of the video while the video is playing usefull when object are moving. Activideo support linear interpolation between shapes with the same amount of vertices set by default for all the sequences.

When you launch Activideo you will browse for the same Video Source you used to produce an H264 Video with Adobe Media Encoder CS4. Note that this use case will work only if the Video Size of your Encoded Video is the exact same size than
your Video Source. This is mandatory because we want all the Interactive Sequence coordinate in pixel to match the source and encoded video as well in term of duration and dimension.

Step 5 Activideo - Using the New project Wizard Option from the File Menu




Step 6 Activideo - Browse Video Source




Step 7 Activideo - Provide Basic Metadata




Step 8 Activideo - Interactive Sequence Generator



Provide a unique Name for your sequence to easily identify each interactive Sequence in your exported XMP file.

Provide an hyperlink. This can be relative path, absolute link to a fully qualify domain name URL or can be some sort of data which could be executed or interpreted using Action Script 3 code.

Provide a default location for your interactive hotspot. This is where you provide the default initial location of your hotspot. This position don't have to be accurate but this will accelerate the sequence tuning process.

Provide the initial size of your interactive hotspot.

Provide the number of key frame that you want for your interactive sequence. Since your hotspot is not going to move two keyframes are enough but you can insert more key frame if needed. Adding keyframe at this time is not really helpful since you want a keyframe to be set/added whenever the object within the sequence is likely to move in a different direction than the direction between two consecutive keyframes surrounding a specific frame within the sequence.


Step 9 Activideo - Click on Finish to Generate the Sequence



Step 10 Activideo - Adjust the sequence SMPTE In Time Code to Match Adobe Media Encoder SMPTE In Time Code



Use the video slider to locate the position where you set the In Event Cuepoint in Adobe Media Encoder. This time didn't have to be exactly perfect but close enough to be able to merge correct 2D spatial information in the XMP Data embedded in the H264 version of the video.Once you found the location you can select the overlay polygon move it right on top of the logo and adjust the size of the polygon using the right click button of your mouse to scale down or up the polygon. Finaly click in the toolbar on the trim before button. This will insert a keyframe and remove all keyframe prior to the current position.




Step 11 Activideo - Adjust the sequence SMPTE Out Time Code to Match Adobe Media Encoder SMPTE Out Time Code




In this frame you noticed an other block of data showing the Name of the Band, the track title and information related to the right owner of the content. A valid use case would be to create hyperlinks sequence for all of the content listed earlier to lead the user to multiple unique URL's.

For this ending sequence position select the trim after button in the toolbar. This will insert a keyframe and delete all following keyframes.

Step 12 Activideo - Export Adobe XMP



This option let you export the interactive video sequence into an Adobe XMP file




Adobe Bridge CS4 - Exporting and Merging XMP

Step 13 Adobe Bridge CS4 - Exporting XMP From F4V




There are several places where you can merge XMP Metadata using software installed with Adobe CS4 professional. The easiest way is to use Adobe Bridge CS4. Once you launch Adobe Bridge CS4 select the folder where you encode the H264 Video and right click on the F4V logo and choose File info...




Select the property sheet page named Raw Data. This is where the XMP Block is display in its RAW form. The highlighted text correspond to the AME Track for the unique interactive sequence matching the logo. Export the complete XMP data as a file to disk.








Step 14 Adobe Bridge CS4 - Merging XMP Data between Activideo XMP and the XMP data encoded earlier in the F4V Video.

The best free tool to merge XMP Data that I like to use is called WinMerge. It provides the ability to merge left or right using a double paned window view but notepad can be good enough :) in our example. A commercial version called araxis merge is also really good.



You want to merge the selected bloc in the left notepad window to the right bloc under the selected text in the right notepad loading the previously exported XMP. Don't forget to include the marker as well. Do this for every cuepoints. Once done saved you new XMP file. If you want to compel with XMP you can insert new saving history entry to show in the XMP File that a new software has been used to generate interactive hotspot. This is not a bad idea at all for workflow and tracking purposes.

Step 15 Adobe Bridge CS4 - Re-import XMP Data into F4V video file encoded by Adobe Media Encoder CS4







Because we merged manually we can choose the clear existing properties and replace with template properties.






Step 16 Adobe Flash CS4 - Create Interactive FLA Project file and generate SWF

While I understood that Activideo software has a plugin model which should provide solutions to export XMP the way you want I decided to create a FLA project and Action Script 3 code to quickly manipulate the XMP data to do something with the interactive XMP track.

1 Create an Action Script 3 project and saved the project to activideo.fla

2 Create two customs mouse cursor in order to change the mouse cursor when the mouse will be over a hotspot and one cursor when the mouse will be outside

3 Write some code to load XMP data in memory and last but not least

4 Write very fast polygon hit test detection code in Action Script 3 to detect when the mouse is in a Polygon.




The idea behind the scene would be to write an activideo plugin to generate a FLA which should be attached with a separate Action Script file and a separate XML file. The separate XML file could be used by the action script code to load the video source (local or relative path next to the SWF, http URL or rtmp URL). You can also export various interactive video related parameters specific to the Interactive Video Flash experience you want to deliver to your audience. An interactive video playback control must be self contained and the SWF must be as small as possible.
For ads you should not need any FLVPlayback Component Skins at all.

Actimus LLC is currently working on expanding JW Player and add support to parse XMP data describing Interactive Hotspot. This is a great move since many users want to experience the end result. Since JW player has been embedded in millions of Web Pages this is a great move for Activideo.



Step 17 Adobe Flash CS4 - Publish Setting

Make sure your publish setting is targeting Flash Player 10 since XMP Data is only available in Flash Player 10. If you target Flash Player 9 flash player 9 won't be able to pre-load the embedded XMP Data but your SWF will still work. This is what i like with Flash. A SWF generated for Player 9 will still be rendered with Flash PLayer 6. You are just going to miss few elements on screen.



Step 18 Adobe Flash CS4 - Publish SWF



The onXMPData is the Action Script Event Handler which will receive the XMP Raw Data when the Video will be playback. At this point you can build your SWF and test your movie. Make sure that the video is copied next to the FLA and by extension next to the SWF after publishing time unless you provide a custom path in an XML file or in your Action Script Code at runtime. Finally Test your Movie. The custom cursor are build in the FLA project. You can import your own cursor using the Photoshop Importer feature in Flash CS4. You can import transparent PSD and convert each graphic object into a movie clip. When you test the movie, the cursor will show an interactive cursor (hand cursor) when the mouse will be over the interactive hotspot and a standard cursor when the mouse will leave the hotspot. From now on do what you want when clicking in the hotspot !

Good Practice. You can edit the Action Script Code and add some code to auto loop your video (good for ads), you can add some code to turn Audio Off in order not to playback any audio from the Video and decide that you just want to render the video useful for interactive banner.

Actimus is working on a custom FLV and F4V Playback component which will support embedded interactive XMP sequences.
If you are interested in helping writing custom Playback Component send me an email through the following web site http://www.thomasyounsi.com/

Step 19 Adobe Flash CS4 - Test Movie

Outside Interactive Hotspot





Inside Interactive Hotspot



Step 20 Adobe Flash CS4 - Publish to the web

You will have to upload the F4V next to your SWF or change the local remote path with an http URL.

Publish and stream with FMS 3.0

You will have to change the local file path with an RTMP URL

Finally last but not least the beauty of XMP is that data can be injected on demand
straight into Flash Media Server, rather than having XMP permanently encoded into
the video this is why having the XMP as a separate file is also a valid use case.
On the other hand you can use a naming convention for each Key/Value Pair you want to add at the end of an XMP block in order to support multiple language or multiple condition. The only important thing is to make sure to append custom key/value pair string after the list of coordinates for each polygon belonging to an interactive sequence at a specific key frame. You can also keep the XMP files separate from the video if you want too by just exporting the XMP from the video after it has been added. You could use Flash remoting solution to deliver XMP as AMF objects from a web server using ColdFusion and PHP for instance :)

A new article to explain how to convert XMP Cuepoint time into Millisecond

http://younsi.blogspot.com/2009/02/how-to-convert-xmp-cuepoint-time-to.html

Adding Google Analytics

Google Analytics Hook into your SWF very usefull to report analytics when user click on an interactive hotspot in the video

import com.google.analytics.AnalyticsTracker;
import com.google.analytics.GATracker;
var tracker:AnalyticsTracker = new GATracker( this, "UA-111-222", "AS3", true );
playGame.addEventListener( MouseEvent.CLICK, onButtonClick );
function onButtonClick ( event:Event ):void
{
tracker.trackPageview("/myGame1");
}

In the following example, a movie clip called playGame exists on the stage. A new tracking object called tracker is created along with an event handler that listens for a mouse click. When the button is clicked, the onButtonClick function is called. For each click, the trackPageview() method increments the pageview count for the virtual page /myGame1.

http://www.google.com/analytics/
http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55520
http://www.adobe.com/devnet/flash/articles/google_analytics_flash.html
http://code.google.com/p/gaforflash/
http://code.google.com/apis/analytics/docs/flashTrackingIntro.html
http://code.google.com/apis/analytics/docs/flashTrackingSetupFlash.html#useAnalyticsLibrary

Enjoy !

More reference about interactive video at Adobe and third party tools

XMPCore http://partners.adobe.com/public/developer/xmp/topic.html

XMP http://www.adobe.com/devnet/xmp/

Flash CS4 Video Playback http://www.adobe.com/devnet/flash/articles/flvplayback_fplayer9u3_04.html

Interactive Hotspot using After Effect

http://blogs.adobe.com/keyframes/2007/10/creating_interactive_video_wit.html

Activideo http://www.actimus.com/
How to receive XMP data using FLVPlayback Component
http://younsi.blogspot.com/2010/01/how-to-retrieve-xmp-cuepoint-for.html

FLV and F4V http://en.wikipedia.org/wiki/Flash_Video

XMP http://en.wikipedia.org/wiki/Extensible_Metadata_Platform


Xcitex Pro Analyst Motion Tracker http://www.xcitex.com/html/proanalyst_description.php

Free Action Script 3 Interactive "FLVPlayback" Component for Flash CS5

http://shop.actimus.com/product_info.php?products_id=122