blackcj.com » YouTube http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Skimmer http://www.blackcj.com/blog/2009/03/24/skimmer/ http://www.blackcj.com/blog/2009/03/24/skimmer/#comments Tue, 24 Mar 2009 06:51:25 +0000 Chris Black http://www.blackcj.com/blog/?p=275 “A lifestreaming thing that lets you see it all in one place”

Skimmer. The next Adobe AIR app and the hard work of many individuals over the past 6 months. It has been amazing to see this application turn from design into reality. This is a summary of the technologies used and some of the lessons learned throughout the development of Skimmer:

Skimmer

Skimmer

The first decision was easy. Use an MVC framework, more specifically PureMVC. This application was estimated in the thousands and having a backbone was very important. We spent the extra time upfront developing a solid structure which ended up helping out immensely when it came to bug fix and adding new features. Creating new views became a snap when the data providers that accessed third party API’s were completed.

The second major decision was to use a SQLite database to store content locally. This allowed for fast filtering of data and pre-processing of information. It also greatly improved the load time of the application since we only needed to gather new information.

Thirdly, we decided to use image caching for all of the commonly used images to improve load times. This increased the application start up and allows for fluid transitions between images in slide shows. By extending a bulk loader class Skimmer is able to first check the local cache before making any requests to the internet for images.

One of the major challenge was working with the third party API’s. The API’s for Flickr, YouTube, Twitter, TwitPic, Facebook and Blogger had varying levels of documentation and support. Flickr had the most feature rich API while Facebook had the most difficult API to work with. Many of them had third party AS3 libraries to use for interfacing with the service that we used as a base.

Another challenge was in skinning the flex components. The application was not designed to look like an AIR application, which is a good thing :) This, however, did create some interesting problems along the way. We used a combination of CSS, class inheritance, overrode drawing methods, and even created some custom flex components.

You can download skimmer here:
http://www.fallon.com/skimmer

A shout out to everyone that made this happen:
AL KELLY, BRENDA FOGG, CHRIS WIGGINS, DAVID SCHWEN. EXTENDED TEAM: ANDY GUGEL, SIERRA BRAVO, ANDREW WATSON, BEN DOLMAR, BLAGVOST DACHEV, CLAYTON SMITH, JON REXEISEN, KARSTEN LUNDQUIST, KONR NESS, KRIS SZAFRANSKI, MARK SEEMANN, MANISH SHRESTHA, MATT TONAK, MICHAEL WOODS, MINH VU, ROBB THOMAS, THOMAS O’NEILL.

Feel free to post any comments or questions you have about Skimmer.

http://mashable.com/2009/03/24/skimmer/

]]> http://www.blackcj.com/blog/2009/03/24/skimmer/feed/ 18 YouTube in AIR http://www.blackcj.com/blog/2008/10/14/youtube-in-air/ http://www.blackcj.com/blog/2008/10/14/youtube-in-air/#comments Tue, 14 Oct 2008 22:32:46 +0000 Chris Black http://www.blackcj.com/blog/?p=32 The YouTube video player is currently written in ActionScript 2.0 and integrating it into an AIR application requires a few additional steps. There are many solutions available that reverse engineer the URL to get access to the source video FLV, however, this breaks the terms of service and is not officially supported by YouTube or the API.

By taking advantage of the HTMLLoader class we are able to load the YouTube Chromeless video player into AIR without breaking the terms of service. It essentially loads up a web page within the AIR application and uses JavaScript to control the video.

Lets start by creating the JavaScript / HTML portion of the application that the HTMLLoader will consume. Resources for this can be found here; YouTube Chromeless Player Example page.

Simplified JavaScript functions for this example (includes Play, Pause and Load):

PLAIN TEXT
JavaScript:
  1. <script src="js/swfobject.js" type="text/javascript" />
  2. <script type="text/javascript">
  3.  
  4.     function onYouTubePlayerReady(playerId) {
  5.       ytplayer = document.getElementById("myytplayer");
  6.     }
  7.  
  8.     // functions for the api calls
  9.     function loadNewVideo(id, startSeconds) {
  10.       if (ytplayer) {
  11.         ytplayer.loadVideoById(id, startSeconds);
  12.       }
  13.     }
  14.  
  15.     function play() {
  16.       if (ytplayer) {
  17.         ytplayer.playVideo();
  18.       }
  19.     }
  20.  
  21.     function pause() {
  22.       if (ytplayer) {
  23.         ytplayer.pauseVideo();
  24.       }
  25.     }
  26.    
  27. </script>

Next we will use the SWFObject to load in the YouTube Chromeless video player. Notice the use of wmode: "opaque" in this example. Without this you will not be able to place any display objects above your videos.

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript">
  2.  
  3.       // allowScriptAccess must be set to allow the Javascript from one
  4.       // domain to access the swf on the youtube domain
  5.       var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "opaque" };
  6.       // this sets the id of the object or embed tag to 'myytplayer'.
  7.       // You then use this id to access the swf and make calls to the player's API
  8.       var atts = { id: "myytplayer" };
  9.       swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
  10.                          "ytapiplayer", "400", "300", "8", null, null, params, atts);
  11.  
  12. </script>

ActionScript Used to Load and Control the Video:

PLAIN TEXT
Actionscript:
  1. package com.sb.util
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.events.Event;
  5.     import flash.html.HTMLLoader;
  6.     import flash.net.URLRequest;
  7.    
  8.     public class JSVideoPlayer extends Sprite
  9.     {
  10.    
  11.         private var _html:HTMLLoader;
  12.         private var _ready:Boolean = false;
  13.        
  14.         public function JSVideoPlayer()
  15.         {
  16.             _html = new HTMLLoader();
  17.             _html.paintsDefaultBackground = false;
  18.             _html.width = 400;
  19.             _html.height = 300;
  20.             _html.addEventListener(Event.COMPLETE,
  21.                               onComplete);
  22.            
  23.             loadHTMLcontent()
  24.  
  25.             this.addChild( _html );
  26.         }
  27.         public function loadNewVideo(videoID:String):void
  28.         {
  29.             if(_ready){
  30.                 _html.window.loadNewVideo(videoID);
  31.             }
  32.         }
  33.        
  34.         public function playVideo():void
  35.         {
  36.             if(_ready){
  37.                 _html.window.play();
  38.             }
  39.         }
  40.  
  41.         public function pauseVideo():void
  42.         {
  43.             if(_ready){
  44.                 _html.window.pause();
  45.             }
  46.         }
  47.        
  48.         private function onComplete (e:Event):void
  49.         {
  50.             _ready = true;
  51.         }
  52.        
  53.         public function loadHTMLcontent():void
  54.         {
  55.             _html.load(new URLRequest('test.html'));
  56.         }
  57.    
  58.     }
  59. }

YouTube in AIR

YouTube in AIR

One of the limitations of using the HTMLLoader class is the inability to set the opacity of the video. For example you if wanted to fade the video out you would have to capture the current state of the video and replace it with a bitmap image that would then be faded out (download the zip file to see an example of this).

Source Files (ZIP)

Enjoy!

Sources:

  • Creating JavaScript functions within an ActionScript class in AIR, Marco Casario link
  • YouTube Chromeless Player Example page google.api

PS: This example is only for AIR and may not work for Flex applications deployed on web sites. Please visit 'YouTube in Flex applications' (On The Other Hand) for an example of how to do this in Flex.

]]> http://www.blackcj.com/blog/2008/10/14/youtube-in-air/feed/ 2 Mash up applications with Adobe AIR http://www.blackcj.com/blog/2008/10/14/developing-mash-up-applications-with-adobe-air/ http://www.blackcj.com/blog/2008/10/14/developing-mash-up-applications-with-adobe-air/#comments Tue, 14 Oct 2008 15:21:38 +0000 Chris Black http://www.blackcj.com/blog/?p=29 When doing some research on integrating YouTube videos into Adobe AIR applications I came across this presentation. Marco Casario talks about the design patterns and technologies that can be used to aggregate social media networks in AIR. The Adobe AIR Cookbook will be out in November 2008 and will have more information on these topics.

Developing Mash up applications with Adobe AIR
View SlideShare presentation or Upload your own. (tags: ria flex)

http://casario.blogs.com/mmworld/2008/10/developing-mash.html

I will be posting soon with an example Flex and AIR application that can play YouTube videos (without breaking the terms of service). Many people today are reconstructing the URL to the source FLV which is against the terms of service. Between this presentation and another blog entry about YouTube in Flex applications (On The Other Hand) I should be able to post an example for both.

]]> http://www.blackcj.com/blog/2008/10/14/developing-mash-up-applications-with-adobe-air/feed/ 0