So here it is:

What you need to do in order to use it is add two functions:


import LoadAnim;
...
private var myAnim :LoadAnim;
...

public function hideAnim():void
{
myAnim.stopAnim();
removeChildAt(1);
}

Download the class here, enjoy : )

So I decided to take the challenge and make a code only (no library assets), lightweight video player, with elegant UI that works as you would expect it to, with keyboard control (starting with play/pause, forward/backwards jumps, the fundamentals, the musts). also fullscreen mode and moving between the screen modes by double clicking a la VLC (which is my favorite video player on the Mac), and of-course buffering.

At the moment the features are:
• Keyboard control: play/pause (space bar); jump backwards/forward (left/right);
• Volume control affecting the volume while pressing and moving cursor;
• Fullscreen-normal by double-clicking the video or dedicated button;
• Single click on the video toggles play/pause;
• Display of position and total duration;
• Clickable progress bar, a click will jump video to position.
• Control bar will hide when mouse leaves stage.
• File size is 20.8k (!!)

Credits:
The architecture was inspired by Mr.doob’s player, but I replaced his video controller with the excellent FLVPlayer by Martin Legris, and added my own touch and flavor

Suggestions are more than welcome, tell me what you think!

Update: I was working on improving the player behavior across platforms and browsers, discovering that events behavior is different on IE from the ret of the browsers. Surprising ha? MouseEvent.MOUSE_OUT added to the stage is not firing on IE, you have to add Event.MOUSE_LEAVE, it still works for the rest of the browsers. This actually solved several oddities on IE, people are still using it? really?!

Update 2: I added spinning loading animation when video is buffering, and moved the duration text to be next to the position text, I guess it is easier for the eye this way.

Looking back to when I started working with flash (about ten years ago) and now, I can see a huge change in the weight of flash in projects out there.
Today, both the platform and the clients have matured, Flex has made a huge impact on technological companies perception of flash as the focus is shifting towards User Experience (anyone said RIA?) and OS compatibility and consistency, and the role flash plays in those is non comparable.

Up until recently I had to explain what I do, when refusing to take so many projects that were not related to my skills.. I guess because flash animators, designers, and coders were all considered the same in term of wages and availability.
Now, companies are looking for flash experts that can make charts like Google’s financial charts, and this is clearly a specialist job, since most of these companies don’t have the know-how in house, they call guys like me : )

The good news is that each improvement in flash adds to the appeal we have, and the demand for advanced flash programers is absolutely amazing.

I think this will be a great year.

Only specific contents should be scaled when the stage is resized, the same way apps handles resizing: an app will redistribute its panels without scaling them, will scale panel background but not the buttons and the controls in it. When the entire stage is simply scaled, the interface balance is disturbed.. and we don’t want that.

So I decided to share: ResizeManager (download) is a very simple scaling engine, a single AS2 class that can easily be modified or extended for your needs.
The manger can control scaling and some basic align options of MovieClips you register to it, so you can scale a background MovieClip to cover the entire stage, and keep another MovieClip centered without scaling. It also adds default definitions for the Stage behavior (scaleMode: noScale, stageAlign: TL), though you can change those.
In order to use it, simply import the class and create an instance of the ResizeManager:

import com.adifeiwel.custom_ui.ResizeManager;

var rm = new ResizeManager();


Then, use method registerMC() to register each MovieClip you want to control (including MovieClips nested within MovieClips, make sure parent MC is x:0, y:0), the registerMC method expects the following parameters:
_parentName:MovieClip (the name of the MoviClip)
_widthUpdate:Number (scaling in percentage from Stage.width, 0 for no-scale)
_heightUpdate:Number (scaling in percentage from Stage.height, 0 for no-scale)
_centerUpdate:Boolean (align MovieClip to center of stage)
_middleUpdate:Boolean (vertical-align MovieClip to middle of stage)

for example (see it here):

rm.registerMC(portMC.mainBG, 100, 100, false, false);
// will scale to cover all Stage

rm.registerMC(portMC.vClip, 0, 80, false, false);
// will scale to take 80% of Stage.height


enjoy : )

Update: You can download the example FLA here.

After far too much time searching Adobe’s Livedoc (what a shame, didn’t find the answer there), and reading countless posts, I eventually found the answer via Flash Help Panel.

Apparently the only way is to change the default skin of the component, to do that you simply prepare a MovieClip to serve as skin and give it linkage name, then set the component instance style to use the skin you prepared, like this:

aSp.setStyle( "upSkin", newSkinClip );

upSkin is the default skin class, and I’m setting it to use the skin I made.

Adobe really should find a way to make those livedoc easier for use and orientation, it takes too long for pages to load, and I keep finding my self clicking in loops..