I was very pleased that YouTube released a ActionScript 3 API for their Chromeless Player. I looked at some availabe code snippets on different blogs and unfortunateley, I had to realize that the API is not really object-oriented and a little bit annoying to work with (because of the missing code completion).
My current project - an independent Web Video Player - is still using the old workaround YouTube API Tubeloc and I have to change this. That is the reason why I created a Flex Component for the new YouTube AS3 API. If you would like to use my code for your Flex or Air projects, please feel free to use it and if you will find some bugs, please leave a comment!
Now I will start with some explanations of my code. I create 4 classes, which manage the whole YouTube Chromeless API. The class YouTubeAs3 contains all the most important functions and is based on the Flex Framework(!). The classes AirYouTube and FlexYouTube extends the YouTubeAs3 class. Both classes are Flex Framework based classes. I had to divide the YouTubeAs3 class into these 2 classes, because the Adobe Air environment don't support the command Security.allowDomain() and it is cleaner to use this command for a web-based projects. So therefore please use the FlexYouTube component for web-based projects and the AirYouTube component for your Air projects. The fourth class FlashYouTube is an only Flash plattform based class, that should be very handy to use for non-Flex projects. Read more...
I have already mentioned it in an earlier blog post that I am still working on a vimeo component for the Adobe AIR environment. Now I have created version which is stable enough for a intensive testings. So if you would like to use it for your Air Application, don't hesitate to use it. I would be very happy about some feedback messages from you.
Now I describe some special functionality compared to my FlexVimeo Player component. Because of the incompatible command Security.allowDomain() in the Adobe Air environment (which is essential for working with the Vimeo Moogaloop API ), I had to create a seperate remote player. This remote player receives control message and send control messages via LocalConnection to the AirVimeoPlayer Component. So if you use my AirVimeoPlayer Component, you must always use my remote_vimeo.swf File for controlling the Vimeo Moogaloop API. It works in the same way as the youTube AS3 API Wrapper.
The other not so nice thing is that I ran in some perfomance issue because of sending to many messages via LocalConnection. So I had to put down the amount of update message for the PlayingState.Playing, but that should not be problem for you. In my cases it works fine.
I was very happy after completing my extended VimeoPlayer Class, so happy that I had enough motivation to wrote a Flex Component. With my component it is now very easy to use the moogaloop API in Flex. The functionality features are the same as my VimeoPlayer class, except that I also support some Flex-based features (Data-Binding, updatedRendering).
I created a very ugly and simple Flex GUI Interface, which demonstrates the functionality of this Flex Component. The component has some useful attributes / properties and some Functions. Here a short overview:
[Bindable] public videoClipID:int; // The vimeo video clip id [Bindable] public duration:Number; // read-only property [Bindable] public currentTime:Number; // read-only property [Bindable] public playerState:String; // Have look on the VimeoPlayingState Attributes [Bindable] public playerColor:uint; // HexValue of the Player Color [Bindable] public volume:Number; // Volume of the video Player instance //-------------------------------------------------------------------------- // // Additional getters and setters // //-------------------------------------------------------------------------- [Bindable] public isPlayerLoaded:Boolean; // read-only property public isVideoPlaying:Boolean; // read-only property
The API functions to control the vimeo player api are still the same, except the setSize() Function is not available anymore. You can use the width and height properties of the component as every other Flex Component. Here are the available functions: Read more...
Hier eine kleine geordnete Zusammenfassung meiner wichtigsten Twittermeldungen:
Mobile:
Flash:
Flex:
Disclaimer Start:
Please be pleasant with my English. I am not a native English speaker and the English language is one of my personal weaknesses. To improve my English skills, I am planning to write some blog posts in English. So if I wrote any bullshit in these blog posts, please correct me!
Disclaimer End:
At my work at Liip I had to work quite a lot with the Flex Chart API. At some point I was very disappointed about the lack of deeper documentations or advanced flex charts examples. In my mind the whole dashboard flex chart examples are not really helpful, because the examples are not very good real-life examples. But after a few months ago I found some very nice examples for the Flex Chart Advanced stuff and now I would like to give you a short guidance, how you can handle the complex and powerful Flex Chart API.
First Step - Check your Skills
Make sure that you understand the Flex Component Life Cycle and the rendering procedure behind the Flex Framework. The whole Chart Topic is very complex in handling data and handling a good rendering procedure. So that is the reason why it is very important that you understand the basics of the Flex Framework. If you have got some problems to understand the concepts behind the Flex Framework, no problem, I highly recommend the Adobe Max presentation Diving Deep with the Flex Component Lifecycle from Deepa Subramaniam. Otherwise have a look on my SFUG Presentation “Moving from AS3 to Flex”
Second Step – Set up your documentation for the Flex Chart Basic Stuff:
Yeah, the Flex Chart API is very huge. So you have to work a lot with the documentation. Fortunately, the basic Flex Chart stuff is documented very well. If you want to do some minor changes on your chart, please have a look on the Flex Data Visualization documentation (Livedocs) and on the Language Reference. Sometimes you would not get a solution from this documentation, than have a look on the Flex Chart examples at flexexamples.com. Mostly I use the tags-Content overview and press the Buttons “CTRL+F” in Mozilla Firefox for the string search. After that I typed in “LineChart” for Line Chart examples or “Charting” for Flex charts in general. So I am quite fast and I always find the right code snippets. This procedure fits for the basic chart stuff very well.
Third Step – Things are becoming complicated
Oh no, our client wants to have some special item renderings and user interaction on the charts… At this point the Flex Chart could become a nightmare. Why?!
Es ist schon einige Woche her, dass ich meinen Vortrag Migration from AS3 to Flex beim SFUG Treffen im März gehalten habe. Gut erholt vom Urlaub gibt es nun mehr oder weniger frisch hier meine Folien zum Vortrag.
Die gezeigten Codebeispiele stammen alle von Deepa Subramaniam und können auf ihrem Blogeintrag unter MAX 2008 Session Materials heruntergeladen werden.
Viel Spass damit!
