When I first saw the demos of Apollo and the HTML element with it's ability to be manipulated as if it's a MovieClip an idea popped into my mind.

It's taken a while for me to get the time and inclination to play with Apollo, Mike Downey's talk at LFPUG on Tuesday was enough of a reminder that I really should have a go.

So, my first Apollo app is tintrnet, it's a very poor visual pun on the colloquialism t'internet, literally tinting the internet, I dropped the "e" just to make it a little bit more Web 2.0 ;-)

The bulk of the code is pilfered from flashgen.com, obviously the addition of the colour picker is where the bulk of the work was, that and getting the colour transform to behave.

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:ApolloApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="820" height="640" applicationComplete="loadURL('http://www.google.com')">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             private function loadURL(uri:String) :void {
  6.                 browser.location = uri;
  7.             }
  8.             private function setURL(uri:String) :void {
  9.                 url_txt.text = uri;
  10.             }
  11.             private function setTint ( ) : void {
  12.                 var hex : Number = picker.selectedColor ;
  13.                 var red : Number = hex>>16;
  14.                 var grnBlu : Number = hex-(red<<16);
  15.                 var grn : Number = grnBlu>>8;
  16.                 var blu : Number = grnBlu-(grn<<8);
  17.                 browser.transform.colorTransform = new ColorTransform(1, 1, 1, 1, red , grn , blu , 0);
  18.             }
  19.         ]]>
  20.     </mx:Script>
  21.     <mx:Panel id="holder_panel" layout="absolute" width="100%" height="100%" x="0" y="0">
  22.         <mx:Label x="7" y="7" text="tintrnet (beta)"/>
  23.         <mx:TextInput id="url_txt" x="105" y="5" width="581" editable="true" enabled="true" />
  24.         <mx:Button id="go_btn" x="703" y="5" label="GO" click="loadURL(url_txt.text)"/>
  25.         <mx:ColorPicker id="picker" x="760" y="5" change="setTint()" />
  26.         <mx:HTML id="browser" width="100%" height="100%" y="30" locationChange="setURL(browser.location)" />
  27.     </mx:Panel>
  28. </mx:ApolloApplication>

This was just a bit of fun and a nice little taster of Apollo.

I forgot to add the air file for download: tintrnet.air

And here's a link to the runtime if you haven't already got it: Apollo Runtime

Socialise this post, find out more about the Socializer plugin for WordPress.

No Responses to “Apollo makes the tintrnet possible”  

  1. No Comments

Leave a Reply