Archive for category ActionScript 3
Using the ActionScript 3 YouTube Api
Posted by zedia.net in ActionScript 3 on March 2nd, 2010
On October 14th YouTube released a new version of it’s API for Flash. This version would support ActionScript 3. Previously discussed on here was the library TubeLoc which was basically an AS3 wrapper around the ActionScript 2 API. Now the new API does all TubeLoc pertmitted us to do and even more.
Well loading a YouTube video in ActionScript 3 has never been easier and there is nothing to download (which has its downside in some way)to get started.
Here is all the code needed to load a YouTube movie:
package { import flash.display.DisplayObject; import flash.display.Loader; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; public class Main extends Sprite { private var _loader : Loader; private var _player : Object; public function Main() { _loader = new Loader(); _loader.contentLoaderInfo.addEventListener(Event.INIT, _onLoaderInit, false, 0, true); _loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3")); } private function _onLoaderInit(event : Event) : void { _player = _loader.content; _player.addEventListener("onReady", _onPlayerReady, false, 0, true); addChild (DisplayObject(_player)); _loader.contentLoaderInfo.removeEventListener(Event.INIT, _onLoaderInit); _loader = null; } private function _onPlayerReady(event : Event) : void { _player.removeEventListener("onReady", _onPlayerReady); // Once this event has been dispatched by the player, we can use // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl // to load a particular YouTube video. _player.setSize(640, 360); _player.loadVideoById("D2gqThOfHu4"); } } }
You can compile this code as an ActionScript project or make it the Document class of an fla in the Flash IDE to make it work.
So you start by loading the player using a normal Loader. Once the player is loaded you have to wait for it to send the onReady event before you can interact with it. Once this is done you can call all of the function from the API.
The previous code would load the chromeless YouTube player; but if you wanted to use the controls from YouTube you would only have to replace one line:
//_loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));//replace this line with the following _loader.load(new URLRequest("http://www.youtube.com/v/VIDEO_ID?version=3"));//replace VIDEO_ID with the id of the video you want to load in the previous case :"D2gqThOfHu4" //also you can comment the following line if you don't want the video to start automatically: _player.loadVideoById("D2gqThOfHu4");
All the functionalities that where accessible with TubeLoc are also accessible with the AS3 API and there are some more. Those are methods to control the quality setting of the loaded movie. You can set the quality to small, medium, large and hd720. To do so you have 3 methods on the player. getPlaybackQuality():String will return the quality of the video currently playing. setPlaybackQuality(suggestedQuality:String) enables you to set the quality. Finally, getAvailableQualityLevels():Array will return you all the possibilities of quality that you can set the current video to.
For more information on the topic, refer to the API : http://code.google.com/apis/youtube/flash_api_reference.html
Skinning the ComboBox Flash component
Posted by zedia.net in ActionScript 3 on February 17th, 2010
This post is more for me because I keep forgetting how to do this. For my defense I have to say that it is not exactly the first thing that comes to mind when you are trying to change the font in the ComboBox component, but at least I won’t have to remember in which project I did it; I’ll just turn to my friend Google and type : comboBox + zedia.
Editing the visual is mostly easy inside of flash but my main problem is always the fonts. In a previous post I talked about fonts in Flash in general, this one will use that as a base and apply it to the ComboBox. Here is the code to change the font in the textfield and the dropping list:
var myFormatWhite:TextFormat = new TextFormat(); myFormatWhite.font = "DFC GillSansLight"; myFormatWhite.size = 15; myFormatWhite.color = 0xffffff; var myFormatBeige:TextFormat = new TextFormat(); myFormatBeige.font = "DFC GillSansLight"; myFormatBeige.size = 14; myFormatBeige.color = 0xa18c52; comboBox.textField.setStyle("embedFonts", true); comboBox.textField.setStyle("textFormat", myFormatWhite);< comboBox.dropdown.setRendererStyle("embedFonts", true); comboBox.dropdown.setRendererStyle("textFormat", myFormatBeige); comboBox.prompt = "Province"; //default value that won't show in the dropdown comboBox.addItem( { label:"New Brunswick", data:"New Brunswick" } ); comboBox.addItem( { label:"Nova Scotia", data:"Nova Scotia" } ); comboBox.addItem( { label:"Ontario", data:"Ontario" } ); comboBox.addItem( { label:"Prince Edward Island", data:"Prince Edward Island" } );
My problem was mostly with the setRendererStyle method; not that obvious. I also put the code for adding items in the ComboBox and to have a default text in it that doesn’t show in the dropdown. Now the next bit of code if to check, when you used ComboBox.prompt, if something was selected:
if (comboBox.selectedIndex == -1) { //show error message because comboBox wasn't changed }
P.S. all this code assumes that I have dragged the component to the stage in the Flash IDE
More on preloaders: passing the loaderInfo
Posted by zedia.net in ActionScript 3 on January 19th, 2010
I previously made 2 posts on the topic of preloaders (The right way to do a preloader in AS3, External Preloader; more complex cases), well this post will be a continuation of those. And one that I believe not everyone will agree with me. I know that because I didn’t agree with it at first but the more I thought about it the more it felt right.
When it comes to code I’m a bit of a fascist, I have trouble accepting habits of other coders if they are not the same as mine. So when I see something different my first reaction is to frown upon it (I am talking just about code; I am a very open minded person). When I first saw this mean of passing variables from the preloader to the main application that a coworker was doing I didn’t quite like it.
In the post about the more complex preloaders, I showed how to use an interface to pass data from the preloader to the loaded (main) movie. Now this part of the code is still the same. What changes is that instead of passing the flashVars (variables that are passed to the flash from the html embed code or javascript) individually inside fo the init method of the Main class (also in the interface), we pass them all together by giving the root.loaderInfo instead.
I already know what you are going to say: this is not strictly typed so it is bad. I know, I know, but if you think about it a bit you see that at some point the flashVars are not typed anyway; when they transition from html to flash. So what is the harm of perpetuating this just one level more? In the init method inside the Main class, the first thing I do is that I type the parameters passed, so I do end up typing my variables.
Now, you’re going to ask what do you gain from this? Well, since the preloader is an external file, every time you are going to pass more variables to the Flash from the HTML, you will have to modify 3 files : the preloader.fla, the IMain.as and the Main.as. Now if you pass the loaderInfo instead of the individual flashVars, you will only need to modify the Main.as since it is there that you type the variables. You completely bypass the preloader, which in a way make sense since your preloader doesn’t need to know about your application, all it does is to load it. once your preloader is completed you don’t ever have to touch it again.
Here is some code to illustrate this. In the preloader :
var mainContent:IMain; function onLoadComplete(event:Event):void{ // this would be the function that the loader would call when the loading is completed mainContent = IMain(loader.content); addChild(Sprite(mainContent) ); mainContent.init( root.loaderInfo); }
And in the Main class :
package{ import com.zedia.interfaces.IMain; import com.display.Sprite; import com.display.LoaderInfo; public class Main extends Sprite implements IMain{ public function init(loaderInfo:LoaderInfo):void{ var flashVar1:String = String(loaderInfo.parameters.flashVar1); var flashVar2:Number = Number(loaderInfo.parameters.flashVar2); //do something with the FlashVars } } }
How to load a YouTube movie into Flash using TubeLoc
Posted by zedia.net in ActionScript 3 on October 26th, 2009
I have written this article a while back for FFDMag, but I thought I would put it here also. It lost a bit of relevance because YouTube now has an AS3 API for its player, but if you work on a project that uses TubeLoc, I think this article can be useful.
What you should know:
- Basic knowledge of ActionScript
- Basic knowledge of YouTube
What you will learn:
- How to load YouTube videos into Flash
- How to use the TubeLoc library to control those videos
Embedding a YouTube movie in an HTML page is an easy task, but we can’t say the same about embedding a YouTube clip in a Flash/Flex website. TubeLoc, an opensource library, is there to make that easier.
Before TubeLoc, you could always go and try to find the address of the FLV the YouTube player is loading and load that FLV directly into your Flash application, but YouTube changes the address almost every night, so it wasn’t a very long term solution. Another problem that TubeLoc solves is the fact that the YouTube player is made in ActionScript 2 and most projects now are using ActionScript 3, so it was hard interfacing with the player. TubeLoc is a wrapper around the the AS2 player and show us an AS3 API, but behind the scene it handles the YouTube player using local connection.
To get started with TubeLoc you will first need to download the library at this address:
http://code.google.com/p/tubeloc/
There you will also find a great demo showing you what you can do with the library. You can pause, stop, play, mute, seek, change the volume, change the the size of the video and even load the video without the YouTube player chrome (so you won’t see the play button from YouTube the only thing that will be there is the YouTube logo at the bottom right of the video).
In the zip file that you download from the previous url, copy the “com” folder located in the “as3/src” folder in the same directory where your FLA will be. Also copy there the file as2_tubeloc.swf from the folder “as3/lib”. Now we can get coding. Here is all that is needed to load a YouTube movie into Flash:
import com.enefekt.tubeloc.MovieSprite; import com.enefekt.tubeloc.event.*; var youtubeMovie:MovieSprite = new MovieSprite(null, true); youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady); addChild(youtubeMovie); function onPlayerReady(event_p:PlayerReadyEvent):void { //it's just cleaner to remove listener that won't be used again youtubeMovie.removeEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady); //you can set the size of the movie this way youtubeMovie.width = 370; youtubeMovie.height = 276; youtubeMovie.loadVideoById("tprMEs-zfQA"); }
The first lines import the library from the “com” folder we copied. After that it creates the MovieSprite. The first parameter is the id of the YouTube movie, since I will set that later I can just pass null to it. The second parameter is if I want to use the chromeless player, in this case I set it to true. The chromeless player is usefull when you want the video player to have control that are similar to the rest of your application. It is also usefull when you want to put your video under a mask to escape the traditonnal square look of videos. If we continue with the code, after we created the MovieSprite, we have to wait for the player to be initialized to go on that’s why we put an event listener on the MovieSprite(youtubeMovie). Once the listener function is called, all that is left to do is call the loadVideoById method. Finding a video id from YouTube is really easy; if the url of the video you want to load looks like this:
http://www.youtube.com/watch?v=tprMEs-zfQA
Than your id is only the last part : “tprMEs-zfQA”.
Now if you want to control your video all you have to do is :
//this will pause the video youtubeMovie.pauseVideo() //this will make it play again youtubeMovie.playVideo() //to mute the video youtubeMovie.mute() //to set the volume to half of maximum youtubeMovie.setVolume(50) //to seek in the video to 20 seconds youtubeMovie.seekTo(20)
Well that is all it take to load a YouTube movie into Flash. I should warn you of some pitfalls; by reading the issues on the google code page, there seems to be problems with loading multiple videos at the same time. Also, destroying an instance of a MovieSprite seems to inhibit you from creating another one after so you should always keep an instance of you MovieSprite alive. Aside from that TubeLoc is an awesome library and I hope to see the proliferation of YouTube videos inside of Flash!
How to connect to Google Analytics Data API in Flash
Posted by zedia.net in ActionScript 3 on June 5th, 2009
In one of my previous post, I explained how to connect to Google Analytics Data API in AIR. The problem with that way of connecting was that it only worked in AIR. In Flash it works locally, but as soon as you put in on your web server it stops working. Not it is cool to build an AIR (desktop) application that pulls data from Google Analytics, but it would also be cool to build a web application that does the same thing. Well I found out how to do just that. It is a bit more complicated because it involves a bit of server side coding, in this case PHP.
How the process works is that first you login to Google Analytics, Google will then send you a token that you must use when asking for data. So we will have two simple PHP files; one to login in and one to ask for data.
The first one looks like this:
<?php //this file is called get_token.php $user = $_REQUEST[user]; $pass = $_REQUEST[pass] require_once 'curl.php'; $curl = new Curl; $response = $curl->post('https://www.google.com/accounts/ClientLogin', array(accountType => "GOOGLE", Email =>$user, Passwd => $pass, service => "analytics", source => "zedia-GAStats-0" )); $tempArray = explode("Auth=", $response); ?> <root> <token><?php echo ($tempArray[1] ); ?></token> </root>
The second one looks like this:
<?php //this file is called call_ga.php require_once 'curl.php'; $url = $_REQUEST["url"]; $token = $_REQUEST["token"]; $curl2 = curl_init(); curl_setopt($curl2, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl2, CURLOPT_HEADER, "0"); curl_setopt($curl2, CURLOPT_RETURNTRANSFER, TRUE); curl_setopt($curl2, CURLOPT_URL, $url); curl_setopt($curl2, CURLOPT_HTTPHEADER, array('Authorization: GoogleLogin auth=' . $token)); $response2 = curl_exec($curl2); echo ($response2); ?>
As you can see to make my calls to Google I am using the cURL library that is usually already installed on your server if you have PHP. Also for the get_token.php I am also using the Curl class, made by Sean Huber, that just makes it easier to work with cURL. Upload these files to your server. Now that we have the server side figured out, we can move on to the Flash part; here it is:
package { import flash.display.Sprite; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLVariables; import flash.text.TextField; public class Main extends Sprite { private var loader:URLLoader; private var _loader2:URLLoader; private var _textField:TextField; private var _token:String; private var _buffer:String = ""; public function Main():void { loader = new URLLoader(); loader.addEventListener(Event.COMPLETE, _onTokenLoaded, false, 0, true); //this call will load the token loader.load(new URLRequest("http://www.YOUR_URL_WHERE_THE_PHP_RESIDE.net/get_token.php?user=YOUR_USERNAME&pass=YOUR_PASSWORD")); _textField = new TextField(); _textField.height = 300; _textField.width = 300; _textField.multiline = true; _textField.wordWrap = true; addChild(_textField); } private function _onTokenLoaded(event:Event):void { var tempString:String = String(loader.data); tempString = tempString.substring(1, tempString.length); var tempXML:XML = XML(tempString); _token = tempXML.token; _textField.text = _token; _loader2 = new URLLoader(); _loader2.addEventListener(Event.COMPLETE, _onFeedLoaded, false, 0, true); var request:URLRequest = new URLRequest("http://www.YOUR_URL_WHERE_THE_PHP_RESIDE.net/call_ga.php"); var urlVar:URLVariables = new URLVariables(); urlVar.token = _token; urlVar.url = "https://www.google.com/analytics/feeds/accounts/default"; request.data = urlVar; _loader2.load(request); } private function _onFeedLoaded(event:Event):void { _textField.text = String (_loader2.data); } } }
What you basically do is that you use your server to do all the communication between the Flash and Google. Everytime you will want a different feed to get different data you will call the call_ga.php file. It is that simple. If you have any question on this feel free to ask them in the comments.
as3Crypto and php, what a fun ride!
Posted by zedia.net in ActionScript 3 on March 30th, 2009
Actually not so fun, but I did manage (I should say we because I wasn’t alone in this). Cryptography is not my thing, eh, not everything can be your thing so I accept it. There is just too much to learn: hash functions, public keys, symmetric ciphers, etc. Want we wanted to do was to encrypt data on the As3 side and decrypt it on the php side. I was aware that there was some cryptographic algorythms in the as3corelib, but none of them (MD5, SHA-1) fitted our needs. There is another great cryptography library out there and it is as3Crypto; the problem is that it is a bit hard to get around, there is a lot to choose from. We settled on AES (Advanced Encryption Standard). After 2 hours of trying to get it to work, we found this great post on Google groups (about middle of the page). I am copying the content here to make it easier for people to find. I have to give all the credit for this post to Jason Foglia who posted his code.
Here is the As3 Class:
package { import flash.display.Sprite; import flash.utils.ByteArray; import com.hurlant.crypto.symmetric.ICipher; import com.hurlant.crypto.symmetric.IVMode; import com.hurlant.crypto.symmetric.IMode; import com.hurlant.crypto.symmetric.NullPad; import com.hurlant.crypto.symmetric.PKCS5; import com.hurlant.crypto.symmetric.IPad; import com.hurlant.util.Base64; import com.hurlant.util.Hex; import com.hurlant.crypto.Crypto; public class CryptoCode extends Sprite { private var type:String='simple-des-ecb'; private var key:ByteArray; public function CryptoCode() { init(); } private function init():void { key = Hex.toArray(Hex.fromString('TESTTEST'));// can only be 8 characters long trace(encrypt('TEST TEST')); trace(decrypt(encrypt('TEST TEST')); } private function encrypt(txt:String = ''):String { var data:ByteArray = Hex.toArray(Hex.fromString(txt)); var pad:IPad = new PKCS5; var mode:ICipher = Crypto.getCipher(type, key, pad); pad.setBlockSize(mode.getBlockSize()); mode.encrypt(data); return Base64.encodeByteArray(data); } private function decrypt(txt:String = ''):String { var data:ByteArray = Base64.decodeToByteArray(txt); var pad:IPad = new PKCS5; var mode:ICipher = Crypto.getCipher(type, key, pad); pad.setBlockSize(mode.getBlockSize()); mode.decrypt(data); return Hex.toString(Hex.fromArray(data)); } } }
Here is the php class:
<? class Crypt { var $key = NULL; var $iv = NULL; var $iv_size = NULL; function Crypt() { $this->init(); } function init($key = "") { $this->key = ($key != "") ? $key : ""; $this->algorithm = MCRYPT_DES; $this->mode = MCRYPT_MODE_ECB; $this->iv_size = mcrypt_get_iv_size($this->algorithm, $this->mode); $this->iv = mcrypt_create_iv($this->iv_size, MCRYPT_RAND); } function encrypt($data) { $size = mcrypt_get_block_size($this->algorithm, $this->mode); $data = $this->pkcs5_pad($data, $size); return base64_encode(mcrypt_encrypt($this->algorithm, $this->key, $data, $this->mode, $this->iv)); } function decrypt($data) { return $this->pkcs5_unpad(rtrim(mcrypt_decrypt($this->algorithm, $this->key, base64_decode($data), $this->mode, $this->iv))); } function pkcs5_pad($text, $blocksize) { $pad = $blocksize - (strlen($text) % $blocksize); return $text . str_repeat(chr($pad), $pad); } function pkcs5_unpad($text) { $pad = ord($text{strlen($text)-1}); if ($pad > strlen($text)) return false; if (strspn($text, chr($pad), strlen($text) - $pad) != $pad) return false; return substr($text, 0, -1 * $pad); } } ?>
Now if you use the encrypt method of one you can send the data to the other one and decrypt it in the other language if you use the same key. Works like a charm. There is a mention that the key can only be 8 characters long but I haven’t tested it out.
Tracing or tracking a uint as a Hex String in AS3
Posted by zedia.net in ActionScript 3 on February 3rd, 2009
I feel guilty that I haven’t written in a two weeks but I have been working on a longer article and it seems that I am limited on the number of words I can write in a week. Anyway I wanted to make a small post about this topic because I had a bit of trouble to find how to do it. When you work with colours, the common way to write a colour is to write it a has hex string to a uint; example: 0xff0000. When you trace that uint what you will get is the base 10 equivalent which is not really readable and gives no hint about what colour it is. So to solve this problem here is a quick way to convert a uint into a Hexadecimal String for tracing or tracking purpose:
var myUint:uint = 0xff000; // this is the colour red trace (myUint.toString(16)); //will trace ff0000;
My guess is that it will trace the number using 16 as a base.
Well that’s it for now might have more on AIR later on.
How to reuse event functions
Posted by zedia.net in ActionScript 3 on January 15th, 2009
This is just a quick tip I picked up while working with a teamate.
I often came across the case that I would have to make a function exactly the same as the function that was called from an event listener because the function called from the listener would have an event as argument but the same function that I wanted to call but not from an event didn’t.
I had found multiple ways around that problem; I would make another function that both previous function would call or I would create only the listener function and when I wanted to call it from elswhere I would pass it an empty event that I would create just for it. Both these solution appeared unelegant to me.
That’s when I saw this in my teamate code:
// let say your listener is this myButton.addEventListener(Event.COMPLETE, _activateElement, false, 0, true); //your function looks like this private function _activateElement(event:Event = null):void{ //do something that doesn't require the event } //so from anywhere you can just call the same function like this _activateElement();
By simply giving a default value of null to the argument, you can now reuse this function both in the context of an event listener and anywhere else.
Gingerbread house builder – TELUS holiday 2008 card
Posted by zedia.net in ActionScript 3 on December 24th, 2008
Just a quick post, while it is still the time, to bring you to the Gingerbread house builder we did for TELUS. I think it is a pretty little piece of flash that is fun and will make you smile. As it is the costum with holiday cards, the deadline was really tight but I think we managed well. This small rich internet application is packed with features that if you don’t stop to look, you won’t notice.
First the send to friend option actually sends a picture of the gingerbread house you built which was very nice to program. I had to take a screenshot(bitmapData.draw) of the House MovieClip encode it in JPEG (using as3corelib) and send it to the server. Next nifty detail is the print version of the recipe which also includes a picture of your creation. It wasn’t something really complicated to do considering I mostly used the send to friend code and put it in a PrintJob. Lastly, to save the recipe to PDF, instead of simply doing a navigateToURL to the PDF location, which would have opened a new tab in the browser with the PDF in it, I used FileReference.download to pop the download window so that the file is directly downloaded.
Independently these attentions might not seem like much, but if you put it all together the user won’t notice it but he will still feel this is a better application, without knowing why. Don’t get me wrong, I’m am not saying that the TELUS holiday card is the best application out there; I am saying that paying attention to details is what makes the difference between a nice application and a great one.
In that sense, I think there are stuff we could have done better. Mostly sound wise, to emphasize the meerkat (that is the name of the current TELUS critter) sneaking to take a bite on your gingerbread house. I’m not good at all in audio and when it comes to it I need help, and sound is somewhat not needed to make a website / application functionnal and beautiful, so it is often forgotten. But I will make sure in following projects to give it the proper time.
As I always do here is a list of the libraries I used to build it:
- TweenLite
- PureMVC (didn’t think I needed it at first but used it anyway and I am glad I did because we kept adding new features)
- as3corelib (JPEG encoding)
Well that’s it, enjoy your holidays, I surely will!
