Read the great post from Mark Pilgrim at O’Reilly Media presenting the use of the video tag, explaining the browsers supported codecs and applications that can convert your videos.

Also have a look at Lee Brimelows post on this matter where he states and I quote: “..Flash video will continue to evolve”

I really hope that HTML5 does not make a negative impact on peoples intrest in flash or makes flash a non-desireble video container. As Lee Brimelow states, the flash library gives the opportunities like embedded cue points and alpha channels. Remember that there are a lot of good free open source flash video solutions out there

flash.lillegutt.com has been redesigned with a fresh new purple design which I cooked up late this weekend. I was looking for a more professional look to stay up to date with the current standard, but

I´m not sure I reached the goal. It would be super nice if you guys could give me some hints or pointers on design and/or changes you see.

Any positive remarks is much appreciated!

FLARToolKit Demo from Ryan Stewart on Vimeo.

Please download the full result to see the usage of components/symbols in the library.

The XML-structure is as follows:

package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.xml.XMLDocument;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import caurina.transitions.Tweener;

public class MobileSelector extends MovieClip
{
private var imageHolder:Sprite;
private static var smallScale:Number 	= 0.7;
private static var normalScale:Number = 1.0;
private var num:int = 0;
private var _selected:int = 0;
private var currentSelected:Sprite;
private var leftButton:LeftButton;
private var rightButton:RightButton;
private var loader:URLLoader;
private var items:Array;

public function MobileSelector()
{
//create the holder for images and add images
imageHolder = new Sprite();

items = new Array();
this.addEventListener("onComplete", onComplete);

loader = new URLLoader();
loader.load(new URLRequest("http://flash.lillegutt.com/wp-content/uploads/mobile_selector_xml/SE_mobile.xml"));
loader.addEventListener(Event.COMPLETE, handleXMLLoaded);

imageHolder.y = 50;
imageHolder.alpha = 0;
addChild(imageHolder);

//prepare and add the left button
leftButton = new LeftButton();
leftButton.x = 10;
leftButton.y = (stage.stageHeight/2) - (leftButton.height/2);
leftButton.addEventListener(MouseEvent.CLICK, previous);
leftButton.alpha = 0.5;
addChild(leftButton);

//prepare and add the right button
rightButton = new RightButton();
rightButton.x = stage.stageWidth - rightButton.width - 10;
rightButton.y = (stage.stageHeight/2) - (leftButton.height/2);
rightButton.addEventListener(MouseEvent.CLICK, next);
addChild(rightButton);

//add keyboard events to stage
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeyboardEvent);
}

public function onComplete(e:Event):void
{
setFocusedElement();
}

public function handleXMLLoaded(e:Event):void
{
var xml:XMLDocument = new XMLDocument();
xml.ignoreWhite = true;
xml.parseXML(loader.data);
for(var i:int = 0; i < xml.firstChild.childNodes.length; i++){
var o:Object = xml.firstChild.childNodes[i].attributes;
var item = new MobileItem(o.image, o.name, o.title, o.description);
if(i == 0)
item.addEventListener("onComplete", onComplete);
items.push(item);
addItemToStage(items[i], i*800, -1);
}

}

/*
* Animate to the next focused element
*/
public function setFocusedElement(){
if(currentSelected == null) {
currentSelected = imageHolder.getChildAt(_selected) as Sprite;
Tweener.addTween(currentSelected, {alpha:1, time:1, transition:"easeOut"});
}
else {
//Tweener.addTween(currentSelected, {scaleX:smallScale, scaleY:smallScale, time:1, transition:"easeOut"});
}
currentSelected = imageHolder.getChildAt(_selected) as Sprite;

Tweener.addTween(imageHolder,
{
x:(stage.stageWidth/2) - currentSelected.x - (currentSelected.width/2) ,
alpha:1,
time:1,
transition:"easeIn"
});
if(_selected == num-1)
rightButton.alpha = 0.3;
else if(_selected == 0)
leftButton.alpha = 0.3;
else
{
leftButton.alpha = 1;
rightButton.alpha = 1;
}
}

/*
* Handle the received keyboard event
*/
public function checkKeyboardEvent(e:KeyboardEvent) :void
{
if(e.keyCode == Keyboard.LEFT)
previous();
else if(e.keyCode == Keyboard.RIGHT)
next();
}

public function next(e:MouseEvent = null) :void
{
if(_selected+1 == num)
return;
_selected++;
setFocusedElement();
}
public function previous(e:MouseEvent = null) :void
{
if(_selected-1 < 0)
return;
_selected--;
setFocusedElement();
}

private function addItemToStage(item:MobileItem, x:Number, y:Number):void
{
var s:Sprite = item.getImage();
//get the ContentHolder from the library, which I created using design view
var info:ContentHolder = new ContentHolder();
info.x = 200;
//set the dynamic textfield with the content
info._name.text = item.getName();
//set the dynamic textfield with the content
info._title.text = item.getTitle();
//set the dynamic textfield with the content
info._description.text = item.getDescription();
s.addChild(info);
s.x = x;
s.y = y;
imageHolder.addChild(s);
num++;
}
}
}

Flash player 10 has finally been released with new and funky stuff. Here is a summery of the new top features from on of their release pages:

• 3D effects
• Custum filters and effects
• Advanced text support
• Dynamic sound generation
• Vector data type
• Dynamic streaming
• Speex audio codec

Really looking forward to getting the new Flash CS4 in the mail soon…

1009: Cannot access a property or method of a null object reference.
This is a runtime error stating that an object has not been initialized. You can find where the error occurred if you look at the output below the error line. Here is an example of what you might experience:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at ThumbHolder()
at ThumbsContainer()
at index/init()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at XMLParser/onComplete()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

If you look at the second line, that states which method the error is located. You are trying to access properties in a variable that is not initialized. Try initializing the variable you are using. Example:

public function ThumbHolder() : void
{
yourGlobalVariable = new ObjectOfYourChoice();
...

1046: Type was not found or was not a compile-time constant: “SomeClass”.
This is an import error. The class “SomeClass” is undefined for the current context. Try importing the class on top of the class like this:

package
{
import thepackage.subpackage.SomeClass;
...

1065: Variable SomeClass is not defined.
This is a runtime error displayed in the output window.

ReferenceError: Error #1065: Variable ThumbsContainer is not defined.

The error states that there is access permission denied on a “Variable SomeClass”. This refers often to the class SomeClass rather than a variable. Check the class SomeClass and see if the class does have an access specifier(public/private/internal). If the class does not have a access specifier this error will occur because some code can´t access the class. If no access specifier is not defined, the class is default private. This means no class can use the “SomeClass” class. Try putting “public” in front of class and recompile/rebuild like this:

/* before */
package
{
class SomeClass
...
/* after */
package
{
public class SomeClass
...

1119: Access of possibly undefined property heigh through a reference with static type somepackage.subpackage.SomeClass.
This is a syntax error. This error line states that you are trying to access a property “heigh” from the SomeClass. SomeClass does not have a property called heigh. Have a look at the source column in the error console. The source column states what line of code the syntax error is located. If the SomeClass actually where Sprite or MovieClip, the property should have been height and not heigh.Try to change the line to the actual property and recompile/rebuild.

When you want to manipulate the symbol at runtime you would want to create your own class for the symbol. When you press “Export for ActionScript”, the class name is generated from the name of the symbol. On the right side of the Class input field, there is a green “check” and an edit symbol. If you press the edit symbol, this popup will appear:

Press OK and Cancel.

Now, create a new Actionscript file an name it the same as your symbol e.x. “ThumbHolder”. Try to “Export for Actionscript” again press the edit button on the right side of the class input field. It opens up the class you have created. Good! If the class does not appear, your name of the class in the input field is not the same as the actual class.

Accessing objects in your symbol is now the easiest part. If you have created a textfield with the instance name “titleBar”, the only line of code to set the content in the textfield is this:

titleBar.text = "This is the content of the textfield titleBar";

The class representing the ThumbHolder will then be the following:

package
{
import flash.display.MovieClip;
public class ThumbHolder extends MovieClip
{
public function ThumbHolder()
{
titleBar.text = "This is the content of the textfield titleBar";
}
}
}

<mobiles>
<mobile image="images/C905_product_quality_image_1.png" name="C905" />
<mobile image="images/G502_product_quality_image_1.png" name="G502" />
<mobile image="images/T650i_product_quality_image_1.png" name="T650i" />
<mobile image="images/W302_product_quality_image_1.png" name="W302" />
<mobile image="images/W350_product_quality_image_1.png" name="W350" />
<mobile image="images/W902_product_quality_image_1.png" name="W905" />
<mobile image="images/X1_product_quality_image_1.png" name="X1" />
<mobile image="images/z770i_product_quality_image_1.png" name="Z770i" />
</mobiles>

In order to get the XML content in flash you have to create a URLLoader and load the url where the XML is located. Here is an example how to get the attributes in the mobile node:

//create a array holding the items
var items:Array = new Array();
//create the urlloader object
var loader:URLLoader = new URLLoader();
//set the loaders listener function that gets the event when the xml is loaded
loader.addEventListener(Event.COMPLETE, handleXMLLoaded);
//load the xml file from it's location
loader.load(new URLRequest("http://yourdomain.com/yourdataholder.xml"));

//the listener that gets the load complete event
function handleXMLLoaded(e:Event):void
{
//create a new flash.xml.XMLDocument object
var xml:XMLDocument = new XMLDocument();
//ignore the white spaces in the file
xml.ignoreWhite = true;
//parse the content and create a xml structure in the XMLDocument
xml.parseXML(loader.data);
//firstchild represents first node, childNodes represent the nodes in the firstChild
for(var i:int = 0; i < xml.firstChild.childNodes.length; i++){
var o:Object = xml.firstChild.childNodes[i].attributes;
//creating a new item of MobileItem with the image url and name received from xml
var item = new MobileItem(o.image, o.name);
//pushing the item to the items array holding the mobiles
items.push(item);
}
}

You may want to create a class representing the content in flash like the code above includes. In this example you should create a class called MobileItem with the attributes image and name. Here is a class representing the mobile object:

package
{
public class MobileItem extends Sprite
{
private var _imageUrl:String = "";
private var _name:String = "";
private var _image:Sprite;

public function MobileItem(imageUrl:String, name:String)
{
_imageUrl = imageUrl;
_name = name;
//use the LoadExternal class from http://flash.lillegutt.com/?p=55 to load the image, remember to remove the '//'
//_image = new LoadExternal(imageURL);
}

public function getImage() : Sprite
{
return _image;
}
public function getName() : String
{
return _name;
}
}
}

There you go. Have fun!

I will be back to write a tutorial on this matter so you hold on… or just go to Lee Brimelow`s second part of his AMFPHP video tutorial. Also check out their site.

Have fun!