blackcj.com » JavaScript 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 Flash Outperforms HTML5 on Mobile Devices http://www.blackcj.com/blog/2010/09/17/flash-outperforms-html5-on-mobile-devices/ http://www.blackcj.com/blog/2010/09/17/flash-outperforms-html5-on-mobile-devices/#comments Fri, 17 Sep 2010 18:30:28 +0000 Chris Black http://www.blackcj.com/blog/?p=867 ***Another Update: I’ve created a new post with a more complex animation and have also included SVG into the mix: http://www.blackcj.com/blog/2010/09/22/canvas-flash-and-svg-mobile-comparison/ ***

***Update: I’m already three steps ahead of this article. I have already received / analyzed the optimized JS in a later post. Please read all four articles on this topic before replying or your comment will be filtered. Thanks!***

Anybody notice a re-occurring theme here? Canvas performance on the new iPod Touch and iPhone 4G is laughable at 22FPS rendering simple animation. At least the Nexus One can muster up a decent 40FPS for basic canvas rendering. Flash Player 10.1 on the other hand, blows HTML5 out of the water running at 57FPS on the Nexus One! Let’s not forget to mention that HTML5 consumed TWICE the battery life as Flash for these tests on the Android. Unfortunately, Steve doesn’t want me to know the exact battery life on my iPod Touch so it wasn’t included in that part of the testing.

All of these test were done by benchmarking in browser performance. Native applications using AIR for Android yields even better performance but we’ll leave that for the day when HTML5 can export to an APK (native Android app).

Let’s take a peek at some live footage:

Frame rate comparison:

Keep in mind Flash Player 10.1 is relatively new. If Flash had been included with the original iPhone, you would have hated it. The new version, however, kicks ass. Would love to see some hacked iPhone Flash benchmarks to fill in the missing pieces on the above graph. If the iOS can’t render a little ball, HTML5 is going to be a hard sell for iDevices.

Why do we need 57FPS? Most web content targets 30FPS.The human eye really can’t differentiate after about 30FPS. Well, this is a single object rendered on the screen. Add some game logic, additional balls maybe a graphic and you’ll quickly find the 24FPS on the iPod dip down below 15. Having extra CPU cycles to do other things allows developers to target 30FPS when building games and animations.

Battery consumption after 10 minutes:

***Addition: The graph above is in percentage of batter drained after 10 minutes of animation during airplane mode (no cell or internet traffic to get in the way). A bit more crude than the first graph but I really didn’t want to sit around all afternoon waiting for my battery to drain. I’ll try to post some more battery data soon. The most important note is that Flash didn’t consume more battery than HTML5, which was counter to my initial hypothesis.***

This graph explains itself. Canvas consumes more battery power than Flash. It’s amazing that Flash can render something at 57FPS in half the battery power than it takes canvas to run at 40FPS.

Try it out:
HTML5 (JavaScript):
http://www.blackcj.com/blog/wp-content/jsdemos/BallBounce/

Flash (ActionScript):
http://www.blackcj.com/blog/wp-content/swfs/BallBounce/

Conclusion:
HTML5 will sit side by side with Flash. Gradient fonts, drop shadows, basic video and simple transitions are probably better suited for HTML5. When it comes to rendering display objects, animation and digital rights management for video, it would be silly not to use Flash. But wait Chris, HTML5 performance is going to get better! I’ll believe it when I see it. Adobe continues to raise the bar and it will be an uphill battle to catch up.

Graphs created using this tool:
http://nces.ed.gov/nceskids/createAgraph/

Afterthought:
I’m actually quite satisfied with the HTML5 canvas for Android. It will probably work for what I was planning to do. After the iOS exporter in CS5 failed to produce quality animation results, I was hoping for more from HTML5. Basically, I feel stuck having to code in Objective-C just to hit the iOS folks out there. This essentially ruined some of my plans for creating a game framework that runs Box2D cross platform. It basically made my purchase of an iPod Touch rather worthless. Unless Apple steps up I’m going to have to exclude iOS devices from my demos or re-code everything in a third language. The whole point is not to have to re-create the same code for every device in a different language.

]]> http://www.blackcj.com/blog/2010/09/17/flash-outperforms-html5-on-mobile-devices/feed/ 65 Define Popup Window Size in HTML Text http://www.blackcj.com/blog/2010/03/01/define-popup-window-size-in-html-text/ http://www.blackcj.com/blog/2010/03/01/define-popup-window-size-in-html-text/#comments Mon, 01 Mar 2010 21:31:08 +0000 Chris Black http://www.blackcj.com/blog/?p=709 Executing JavaScript in a Flash HTML TextField is both cool and a little scary. You can throw some inline JavaScript in your htmlText to dynamically specify a pop up window size when using target="_blank." This works in both ActionScript 2.0 and ActionScript 3.0.

Pop up Window Example:

Example of Inline Java Script

Get Adobe Flash player

(click on the link above to open a 200 x 300 pop up window)

PLAIN TEXT
Actionscript:
  1. // myTextField is a dynamic text field instance on the stage
  2. var link:String = "http://www.blackcj.com/"
  3. var jsText:String = "window.open('" + link + "','win','height=200,width=300,toolbar=no,scrollbars=yes'); void(0);"
  4. myTextField.htmlText = "<a href=\"javascript:" + jsText + "\"><u>blackcj.com</u></a>";

Any JavaScript tag can be run this way. Try adding an alert right after the window.open script. Notice how they both execute. Yet another reason to ALWAYS validate your input fields when displaying htmlText. Nothing worse than somebody adding some inline JavaScript to your Flash form.

Resources
http://www.webmasterworld.com/html/3429895.htm
http://kb2.adobe.com/cps/141/tn_14192.html

]]> http://www.blackcj.com/blog/2010/03/01/define-popup-window-size-in-html-text/feed/ 0 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