YouTube videos in Actionscript 3

In this post I will create a Youtube player in Actionscript 3 using the YouTube API. The API lets you play YT videos directly inside of your Flash application without needing to navigate to the YT website. There are two types of players: Embedded player and Chromeless player. The Embedded player has video playback controls such as play, pause, seek etc and is similar in appearance to the player’s in the YT website. Whereas the Chromeless player has no video play back controls. I will be creating a Chromeless player and adding my own custom controls. The documentation for the API can be found here.

Security.allowDomain("www.youtube.com");

var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));

function onLoaderInit(e:Event):void {
    addChild(loader);
    loader.content.addEventListener("onReady", onPlayerReady);
    player = loader.content;
}

function onPlayerReady(e:Event):void {
    player.setSize(480, 360);
    playBtn.addEventListener(MouseEvent.CLICK, playHandler);
    
}

function playHandler(e:MouseEvent):void {
    playBtn.visible = false;
    player.cueVideoByUrl("FzRH3iTQPrk", 0, "medium");
}

The YT API has a number of methods to control the playback the player. Take a look at the documentation for more information.

Loading Bitmap images in Actionscript 3

This is a quick tip where I will load a bitmap image from the library onto the stage. Firstly, you need to import an image in Flash (File > Import > Import to Library). In the library, right click on the image and select ‘Properties’. Click on the Actionscript tab and click the ‘Export for Actionscript’. Give the Class the name ‘MyImage’ and click ok. In the Actionscript Panel add the following code.

var bmd:BitmapData = new MyImage(0,0);
var bp:Bitmap = new Bitmap(bmd);
addChild(bp);

The code above creates a new instance of the Bitmap and adds it to the display list. You can also write the code into one line like this.

var bp:Bitmap = new Bitmap(new MyImage(0,0));
addChild(bp);

If you want to load an image externally into a bitmap you need to use the Loader class like this.

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
loader.load(new URLRequest('myimage.jpg'));

function imageLoaded(e:Event):void{
 var bitmap:Bitmap = Bitmap(e.target.content);
 addChild(bitmap);
}

The code creates a new instance of the Loader class, adds complete event to let you know when the image has loaded and takes the URLRequest object with the url of the image. The imageLoaded function add the Bitmap onto the stage using a reference to the loader’s content property.

Toggle sound button in AS3 part 2

I previously wrote a Toggle sound button tutorial where you could play and stop an audio file using the same button. However, when you select the stop button it returns the audio back to the beginning. So, in this tutorial I will create a toggle sound button that will pause and continue from its current position. The Sound class in Actionscript 3 does not have a pause method, so you need to use the position property from the Sound Channel class. The position property stores the current point of the sound file which can be used to play the last stored point.


Toggle sound button in AS3 part 2

Step 1

Follow the Toggle sound button tutorial up to step 3 and create a pause button symbol instead of a stop button.


Step 2

Open up the Actions panel and add in the following code. Note I have left most of the code out from the previous tutorial you will need to add this in.

//This stores the current position of the played sound.
var pausePostion:Number = aChannel.position;

//If the toggle button has been clicked once then the sound plays
//with an image of a pause symbol. If the toggle button is clicked
//again then sound stops and the play symbol is displayed.
function togglePlay(event:MouseEvent):void {
 clickOnce++;
 if (clickOnce==1) {
     aChannel=aSound.play(pausePostion);
     toggle_btn.gotoAndStop(2);
 }
 if (clickOnce==2) {
     toggle_btn.gotoAndStop(1);
     clickOnce=0;
     aChannel.stop();
 }
}

If you wish to return the pause symbol back to play symbol when the sound file has finished playing then you can used the sound complete event shown in the previous tutorial.


Step 3

Test your movie clip Ctrl + Enter. You should now have a toggle sound button that can pause in Actionscript 3.0.

Mailto link from external text file in AS3

I was emailed the following question below about how to load an email address from an external text file from the mailto in Actionscript 3 tutorial.

I have been searching around trying to find a tutorial that will show how to make a mailto link work in an external text file that is being loaded into flash. Do you have any suggestions?

For my solution I have used the following two tutorials: Load external text in Actionscript 3 and mailto in Actionscript 3. I have basically defined a variable to hold the externally load text which then gets passed into URLRequest() method in the mailto function.


Mailto link from external text file in AS3

Step 1

Open up a Flash AS3 file save it.
Then create or import an image you wish to use as the mailto button. I have used an image of an envelope, but you can use whatever image you wish. Convert your button in a symbol (F8) and give it the instance name: ‘mailto_btn’.




Step 2

Open up a text editing program of your choice and write the email address that you want to be loaded externally. For example: somebody1234567@example.com. Save the text file with the name “external_address” in the same directory of your fla file.


Step 3

On the timeline insert a new layer called ‘Actions’ then open up the Actions panel and enter the following code:

//Variable to hold the external email address.
var external_address:String;

//Creates a new instances of the loader class.
var my_loader:URLLoader = new URLLoader();

//Create a new instance of the URLRequest object with the path
//to the external text file.
var my_req:URLRequest=new URLRequest("external_address.txt");

//Event listener to listen to when the file has finished loading.
my_loader.addEventListener(Event.COMPLETE, loadExternalText);

//This loads the text file into the URLloader.
my_loader.load(my_req);

//This assigns the load text file to the external_address variable.
function loadExternalText(event:Event):void {
   external_address=my_loader.data;
}

//This adds a mouse click event to the mailto button.
mailto_btn.addEventListener(MouseEvent.CLICK, mailto);

//The mailto function open up email application to send email.
function mailto(event:MouseEvent):void {
   var email:URLRequest=new URLRequest("mailto:"+external_address);
   navigateToURL(email, "_blank");
}

Step 4

Finally test your movie clip Ctrl + Enter and you should now be able to load an email address from external text files.

Toggle sound button in Actionscript 3

I have written two audio tutorials in Actionscript 3, one tutorial which plays external sounds files and one which plays sound files loaded into the Flash library. Both of these tutorials use two separate buttons for the starting and stopping of sound. Sometimes it is more convenient when you have one button to play and stop a sound, so in this tutorial I will create a toggle sound button in Actionscript 3. The toggle button will initially display a triangle play symbol, but when you click on this button it will turn in a square stop symbol.


Toggle sound button in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import your sound in the library selecting File > Import > Import to library. In the library right click on your sound file and select properties. Select the ‘Export to Actionscript’ box and give the Class name ‘MySound’ and click ok.




Step 2

Select Insert > New Symbol and choose movie clip for the type and click ok. On the timeline insert a new layer and rename your layer like below. Notice that the Buttons layer has two empty key frames and the Bg layer does not.




Step 3

Select the Bg layer and create your background for the toggle button. I have a created a simple blue square with a black stroke. You can create whatever kind of shape you wish.



Step 4

Select the first frame of the Buttons layer and create your play button like below.



Now select the second frame and create your stop button like below.




Step 5

Return to main timeline by double clicking on the grey areas of the stage and then drag your toggle button onto the stage from the library. Give your button the instance name toggle_btn and then create a new layer on the timeline called ‘Actions’ and open up the Actions panel and enter the following code.

//This stops the toggle buttons from playing the second frame.
toggle_btn.stop();

//Variable to detect whether the number of times the toggle button has been clicked.
var clickOnce:uint=0;

//Creates a new instance of the imported sound.
var aSound:Sound = new MySound();

//Create a new instance of the SoundChannel
var aChannel:SoundChannel = new SoundChannel();

//This adds the mouse click event to the toggle button.
toggle_btn.addEventListener(MouseEvent.CLICK, togglePlay);

//If the toggle button has been clicked once then the sound plays
//with an image of a stop symbol. If the toggle button is clicked
//again then sound stops and the play symbol is displayed.
function togglePlay(event:MouseEvent):void {
clickOnce++;
if (clickOnce==1) {
aChannel=aSound.play();
toggle_btn.gotoAndStop(2);
}
if (clickOnce==2) {
SoundMixer.stopAll();
toggle_btn.gotoAndStop(1);
clickOnce=0;
}
}

When the sound has finished playing you can also return back to the play symbol with the following. The code uses the sound complete event to detect when the sound file has finished playing.

aChannel.addEventListener(Event.SOUND_COMPLETE, soundCompleted);

function soundCompleted(event:Event):void{
toggle_btn.gotoAndStop(1);
}

The code snippet below is an alternative way you can write the toggle sound code. I have used the shorten if else statement to cut down on the number of lines of code.

toggle_btn.stop();

var played:Boolean=false;

var aSound:Sound = new MySound();
var aChannel:SoundChannel = new SoundChannel();

toggle_btn.addEventListener(MouseEvent.CLICK, togglePlay);

function togglePlay(event:MouseEvent):void {
 (!played) ? played = true : played = false;
 (played) ? aChannel=aSound.play() : SoundMixer.stopAll();
 (played) ? toggle_btn.gotoAndStop(2) : toggle_btn.gotoAndStop(1);
 
 aChannel.addEventListener(Event.SOUND_COMPLETE, soundCompleted);
}

function soundCompleted(event:Event):void {
 toggle_btn.gotoAndStop(1);
} 

Step 6

Test your movie clip Ctrl + Enter. You should now have a toggle sound button in Actionscript 3.0.



If you wish to pause the sounds instead of stopping, take a look at Toggle sound button part 2.