Archive

Posts Tagged ‘Actionscript 3.0’

Youtube releases AS3 api

November 9th, 2009

Since youtube has released the as3 api the wrapper will become obsolete.

In order to keep things compatible, a new as3 lib will be available for download soon that will be compatible with the wrapper but will make use of the new as3 api.

Actionscript 3.0, Object Oriented Programming, Youtube, Youtube Wrapper , , ,

Youtube AS3 Wrapper v0.8.0m

July 12th, 2009

I would like to announce the availability of a new version of the Youtube AS3 Wrapper: v0.8.0m – m is from Multiple

This new version adds support for multiple players on the same stage.

That is, you can now play multiple youtube clips in the same time, on the same stage!

The new version is available for download on the downloads section.

The documentation has changed for the new wrapper version, however with not much. More details about that in the changelog section.

The old Test Harness Players will work ok with this new version of the wrapper, although a recompilation is needed, however a new very simple Test Player, in Flash this time, has been created to demonstrate the new features. The sources for this player are available in the downloads section too.

A sample has been added on the multiple instances post: Youtube AS3 Wrapper – Multiple instance sample

Hope you will enjoy this new version!

Youtube, Youtube Wrapper , , ,

scale9Grid – When it works and when it does not

May 19th, 2009

I think everyone with some actionscript knowledge tried at some point to use this feature, however ended up dissappointed. Looking on Adobe help won’t help you, because there’s nothing there.

So you kept on receiving the infamous #2004 ArgumentError: “One of the parameters is invalid.”.
You double checked the parameters of the Rectangle object you passed in and the values are within the bounding box of the symbol, but still the error is there.

In this post, I’ll try to bring some light on why sometimes scale9Grid works, and why it fails sometimes.
This article is on AS3 but the principles also apply on AS2 also, only the syntax might deffer.

First of all we should say that scale9Grid property of the flash.display.DisplayObject class receives a flash.geom.Rectangle object. The values of this rectangle must fall within the bounding box of the display object you’re trying to set the property on. The coordinates of the rectangle object are relative to the coordinate system of the display object, and not it’s parent!

Let’s see an example:
We have this Sprite object, mySprite, situated at x=100, y=100, being 200px in width and 200px in height.
We would set the scale9Grid property to a Rectangle object that is situated at x>=0 and y>=0, and let it have it’s width <= 200 and height <= 200. But we must make sure that x+width<=200 and y+height<200, this way we make sure or Rectangle falls within the bounds of the display object.

What we said so far is available on Adobe’s help also. But read forward, because from now on we’ll look at concrete examples of when it works and when it fails.

When it works?!

The scale9Grid will always work correctly when the DisplayObject doesn’t have any other symbols inside it, only graphics. That is, it doesn’t have any children.

Example:

var mySprite : Sprite = new Sprite();
mySprite.graphics.beginFill(0xff0000);
mySprite.graphics.lineStyle(2, 0x00ff00);
mySprite.graphics.drawRoundRect(0, 0, 200, 200, 50);
mySprite.graphics.endFill();

mySprite.x = 100;
mySprite.y = 100;

this.addChild(mySprite);
// Set the x and y of the rectangle bigger than the cornerRadius of our roundedRect,
// otherwise it the corner will look stretched
mySprite.scale9Grid = new Rectangle(60, 60, 100, 100);

// Test the movie with the next line commented and uncommented so you can see
// that event the sprite is resized, the corners keep their shapes
mySprite.width = 400;

Copy and paste the code above into the first frame of a fla file (AS3) and test the app. You should see the rounded rectangle preserves it’s beautiful corners.

It will also always work if the Rectangle that you set will not fall outside the bounds of the graphics object, even if the display object contains other children.

Let’s see an example:

var mySprite : Sprite = new Sprite();
mySprite.graphics.beginFill(0xff0000);
mySprite.graphics.lineStyle(2, 0x00ff00);
mySprite.graphics.drawRoundRect(0, 0, 200, 200, 50);
mySprite.graphics.endFill();

mySprite.x = 100;
mySprite.y = 100;

var mySprite2 : Sprite = new Sprite();
mySprite2.graphics.beginFill(0x0000ff);
mySprite2.graphics.drawRoundRect(0, 0, 50, 50, 20);
mySprite2.graphics.endFill();

mySprite2.x = 80;
mySprite2.y = 80;

mySprite.addChild(mySprite2);
this.addChild(mySprite);
mySprite.scale9Grid = new Rectangle(60, 60, 100, 100);

mySprite.width = 400;

Make note of the of the second Sprite we built, and added it as a child of the first Sprite object.
Now test your movie, with and without resizing the sprite, and notice that scale9Grid apply only to the current display object, and not to it’s children. (the second Sprite is stretched, doesn’t keep it’s rounded corner shape)

If you don’t have any drawings in the graphics object of the display object, but the display object has children, if you try to set the scale9Grid, and you set it right, you won’t get the #2004 error, but as I said above, the scale grid will not apply to the children, they will be stretched, like in the next example:

var mySprite : Sprite = new Sprite();

mySprite.x = 100;
mySprite.y = 100;

var mySprite2 : Sprite = new Sprite();
mySprite2.graphics.beginFill(0x0000ff);
mySprite2.graphics.drawRoundRect(0, 0, 50, 50, 20);
mySprite2.graphics.endFill();

mySprite2.x = 10;
mySprite2.y = 10;

mySprite.addChild(mySprite2);
this.addChild(mySprite);
mySprite.scale9Grid = new Rectangle(35, 35, 10, 10);

mySprite.width = 300;

If you think that setting scale9Grid property on the children will do the trick, that will not work. Like in the next example:

var mySprite : Sprite = new Sprite();

mySprite.x = 100;
mySprite.y = 100;

var mySprite2 : Sprite = new Sprite();
mySprite2.graphics.beginFill(0x0000ff);
mySprite2.graphics.drawRoundRect(0, 0, 50, 50, 20);
mySprite2.graphics.endFill();
// Set scale9Grid on the child
mySprite2.scale9Grid = new Rectangle(25,25, 10, 10);

mySprite2.x = 10;
mySprite2.y = 10;

mySprite.addChild(mySprite2);
this.addChild(mySprite);
mySprite.scale9Grid = new Rectangle(35, 35, 10, 10);

mySprite.width = 300;

When it fails?!

As I said above, if your display object does not have anything in it’s graphics object, setting scale9Grid might not throw the #2004 error, but it will certainly not have the expected result.

It will always fail if you set the rectangle beyond the bounds of the display object.
Like in this example:

var mySprite : Sprite = new Sprite();
mySprite.graphics.beginFill(0xFF0000);
mySprite.graphics.lineStyle(2, 0x00ff00);
mySprite.graphics.drawRoundRect(0, 0, 200, 200, 50);
mySprite.graphics.endFill();

mySprite.x = 100;
mySprite.y = 100;

this.addChild(mySprite);
mySprite.scale9Grid = new Rectangle(60, 60, 150, 150);

mySprite.width = 300;

Note that although I’ve set the width and height of the rectangle to 150, which is lower than the width of the sprite, 200, scale9Grid fails with #2004 error. That is because 60+150>200, the rectangle falls beyond the bounds of the display object.

Setting scale9Grid also fails if the rectangle is within the bounds of the display object, but falls beyond the bounds of the graphics object. See the next example:

var mySprite : Sprite = new Sprite();
mySprite.graphics.beginFill(0xFF0000);
mySprite.graphics.lineStyle(2, 0x00ff00);
mySprite.graphics.drawRoundRect(0, 0, 200, 200, 50);
mySprite.graphics.endFill();

var mySprite2 : Sprite = new Sprite();
mySprite2.graphics.beginFill(0x0000FF, 0.5);
mySprite2.graphics.drawRoundRect(0, 0, 200, 200, 30);
mySprite2.graphics.endFill();
mySprite2.x = 140;

mySprite.addChild(mySprite2);

mySprite.x = 100;
mySprite.y = 100;

this.addChild(mySprite);
mySprite.scale9Grid = new Rectangle(60, 60, 150, 100);

mySprite.width = 500;

As you can see the rectangle is within the bounds of the display object, but falls outside the bounds of the graphics object. So scale9Grid fails with error “ArgumentError: Error #2004: One of the parameters is invalid.
at flash.display::DisplayObject/set scale9Grid()”

As a bottom line, you should scale9Grid if the display object has drawings in it’s graphics object, and set the Rectangle you pass to the scale9Grid property to fall inside the bounds of the graphics.

Hope I was clear enough and it will help anyone.
Any comments are very welcome.

Actionscript 3.0 , ,

Youtube AS3 Wrapper

March 26th, 2009

I started building this AS3 to AS2 youtube wrapper some time back, from the need to add youtube support to actionscript 3 projects, and now i decided to share it.
I tried some of the wrappers available out there, some are good, soom are pretty bad but all of them had all sorts of issues. Some had problems with volume, some were not capable of supporting more than 1 instance of a player on the same page, some were using javascript which i found inacceptable, so i started writing my own wrapper.

SEE A TEST PLAYER HERE

DOWNLOAD WRAPPER HERE

SEE A HOW TO START TUTORIAL HERE

SEE FULL DOCUMENTATION HERE

SEE A MULTIPLE INSTANCES SAMPLE HERE

What came out, i might say that’s probably the best wrapper available yet: it uses LocalConnection to communicate to the As2 youtube player, but it’s still very responsive and fast.

Very easy to use, follows the youtube as2 chromeless style: load a swf, listen for a ready event and then you’re good to go!

It uses interfaces to support code completion on editors that support it: FDT, Flex Builder, Flash Develop, etc.

Small in size: 2 swf files – ytPlayer.swf only 4,230 Bytes <=> 4.13 KB
– ytODLCWrapper.swf only 4,305 Bytes <=> 4.20 KB

Optimized for responsivness – reduced to the minimum the number of LocalConnection calls

Uses the same method calls as youtube api with some minor changes and some additions.
So, for someone familiar with the youtube api will find this very easy to use.

And it’s also easy for the one that starts his way into youtube just now, with just a few lines of code youtube will be set up and running.

So how does this work?
As i mentioned above, there a are these 2 swf file: ytPlayer.swf and ytODLCWrapper.swf.

ytPlayer.swf is the as3 version, and the one that’s most important to you.
ytODLCWrapper.swf is the as2 version, and it’s handled in the background, you don’t need to worry about this one.

There is 1 interface

pinosh.youtube.IYoutube

and 1 class

pinosh.youtube.YoutubeEvent
IYoutube

is the player, has all the methods of the player and

YoutubeEvent

is the type of event that will be thrown by IYoutube.
There are only 3 types of events:

YoutubeEvent.PLAYER_READY

dispatched when the player is ready to play video clips: only after this event is fired, the methods can be called

YoutubeEvent.PLAYER_ERROR

dispatched when an error occurs: when this event is fired, a next clip should be played (in example)

YoutubeEvent.PLAYER_STATE_CHANGE

dispatched when the player changes state

The error codes and player states are the same as for youtube as2.

IYoutube.getPlayerError()

returns the current error code, if any error occured for the current clip, or 0 if no error: error codes -> 100 – video not found, 101 and 150 – playback not allowed in users region or in chromeless player

IYoutube.getPlayerState()

returns the current state:
player states -> -1=Unstarted,0=Ended,1=Playing,2=Paused,3=Buffering,5=Video cued.

The first thing to do is to load ytPlayer.swf in a

object.
Youtube requires a developer key, in order to correctly pass the key load ytPlayer.swf with the apiKey=XXXXXX.. parameter
Example:

var apiKey : String = "XXXXXXXXXX";
var loader : Loader = new Loader();
...
..
loader.load(new URLRequest("ytPlayer.swf?apiKey="+apiKey));

When the loading completes, Event.COMPLETE event fired, add the loader to the stage’s display list (can be through a child of the stage).
You should have

var ytPlayer : IYoutube;

declared.
Set this variable to be the content property of the Loader object.
Example:

var ytPlayer : IYoutube;
....
ytPlayer = loader.content as IYoutube;

Now we can start listening for the events mentioned:

ytPlayer.addEventListener(YoutubeEvent.PLAYER_READY, onYTPlayerReady);
ytPlayer.addEventListener(YoutubeEvent.PLAYER_ERROR, onYTPlayerError);
ytPlayer.addEventListener(YoutubeEvent.PLAYER_STATE_CHANGE, onYTPlayerStateChange);

Now we must declare the listener functions.
Inside onYTPlayerReady we can write some initializing code, or you can go ahead and play some video right frome there.

function onYTPlayerReady(event : YoutubeEvent) : void {
      // maybe set the size
      ytPlayer.setSize(500, 400);
      // maybe set volume
      ytPlayer.setVolume(80);

      // maybe play a clip
      ytPlayer.loadClip("0_fPV13lKm4");
}

function onYTPlayerError(event : YoutubeEvent) : void {
       // maybe check the error code and do something based on it
      switch(ytPlayer.getPlayerError()) {
               case 100:
               case 101:
               case 150:
               default: // maybe play a next clip
      }
}

function onYTPlayerStateChange(event : YoutubeEvent) : void {
       // maybe get the player state and do something based on it
      switch(ytPlayer.getPlayerState()) {
            case -1: break; // Unstarted
            case 0: break; // Ended
            case 1: break; // Playing
            case 2: break; // Paused
            case 3: break; // Buffering
            case 5: break; // Video cued - when using cueVideo() method on ytPlayer
            default: // Unknown
     }
}

Of course you can handle play, pause.. and any other methods of the ytPlayer object,
just make sure you test that the player is loaded and ready
Example:

if(ytPlayer != null && ytPlayer.isPlayerReady())
{
        // call methods here
       ytPlayer.playVideo();
}

Below is a implementation of this wrapper in a “test harness” player.
The test player is written in flex, but absolutelly the same principles work in flash too. (except the mxml code)

The entire source code for the player can be downloaded here.
The code is commented out (only what’s related to the wrapper and youtube).

The wrapper files can be downloaded here.

To start playing a video, click one title on the right or copy and paste a youtube video id (or entire link) in the Custom youtube input text field and click Load.

You need javascript enabled!

Actionscript 3.0, FLEX, Youtube, Youtube Wrapper , , , , , ,

Youtube AS3 Wrapper – Downloads

March 26th, 2009

Here you can download the files

Note: The latest wrapper available for download is at the bottom of this page!

DOWNLOAD WRAPPER v0.6

DOWNLOAD TEST HARNESS SOURCES

EDIT March 29, 2009 @ 3:17

ADDED NEW v0.7 Youtube AS3 Wrapper

DOWNLOAD WRAPPER v0.7

DOWNLOAD TEST HARNESS SOURCES v1.1

EDIT April 21, 2009 @ 23:22

ADDED NEW v0.7.1 Youtube AS3 Wrapper

DOWNLOAD WRAPPER v0.7.1

DOWNLOAD TEST HARNESS – AIR SOURCES v1.0

EDIT June 03, 2009 @ 18:58

ADDED NEW v0.7.2 Youtube AS3 Wrapper

DOWNLOAD WRAPPER v0.7.2

EDIT July 12, 2009 @ 22:48

ADDED NEW v0.8.0m Youtube AS3 Wrapper

DOWNLOAD WRAPPER v0.8.0m

DOWNLOAD Youtube Test Player – Flash sources v1.0

Youtube, Youtube Wrapper , , , , , ,