Tag Archives: Air

Come over to The Nerdery to learn about Building Apps for the BlackBerry PlayBook

Come join us at The Nerdery at 7 p.m. on Monday, March 28th and learn all about building apps for the BlackBerry PlayBook from nerd-emeritus, Chris Black. Chris is an Interactive Developer who focuses on ActionScript development with Adobe Flex and AIR.

Chris’ presentation will show you how to leverage your existing skills to build apps for the PlayBook using HTML5 or Adobe AIR. In this session Chris will size up the PlayBook to the competition and cover everything you’ll need to get started with the BlackBerry Tablet OS. You’ll see how to build an AIR app from scratch, test using the PlayBook simulator, and walk through the steps for submitting to the BlackBerry App World. To conclude, Chris will show you how to cross compile the application to run on Android and iOS.

This presentation will be filled with demos showing the capabilities of the brand new AIR 2.6 SDK, and you’ll see how to cross compile to three different platforms in a single click.

Are you in? It’s bound to be a lot of fun. If you want to come on over to The Nerdery leave us a comment so we know how much pizza to order (yeah, there’ll be free pizza).

Filed under Events

Six Months on AIR: A Look at Skimmer

If you weren’t able to attend Minh and Chris’s Flashbelt presentation, we have the next best thing — the slide deck! Take a look to learn why they chose AIR to develop Skimmer, working with SQLite, and tips and tricks for developing applications using these technologies. When you’re done, make sure to check out Andrew’s Flashbelt recaps.

Filed under Technology

Tech Tips: Display TwitPic Images in Flex & AIR

Problem:
The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.
Read more

Filed under Technology

Tech Tuesday: Validate Twitter credentials in AIR

Problem: Your AIR application needs to validate the username / password and handle failure gracefully within the application. If the user enters the wrong information you do not want them to be prompted with a Windows prompt asking them to enter their Twitter username / password. If the application needs to hold on to the credentials for any reason the Windows authentication to the API will break the AIR application.

“The server twitter.com at Twitter API requires a username and password.”



Solution:
The URLRequest object has a property called ‘authenticate’ that must be set to false.
[as]
/**
*
* Setting result.authenticate to false prevents the operating system from
* taking over and prompting the user to authenticate. It allows the AIR
* application to take the correct action.
*
*/
private function twitterRequest (url : String):URLRequest
{
var result:URLRequest = new URLRequest (url);
if (this.authorizationHeader){
result.authenticate = false; // <--------- Most Important Line of Code!!!!
result.requestHeaders = [this.authorizationHeader];
}
return result;
}
[/as]

Most of the code from the example attached is from the Google code repository.

Here are the source files to an example AIR application that uses actionscript to verify Twitter credentials without prompting a windows box on failure.

I would like to give credit to Clayton (file_cabinet) for coming up with the solution to this problem. Thanks Clayton!

This was originally posted on blackcj.com, Chris Black’s personal blog. Chris is a Senior Developer at Sierra Bravo.

Filed under Technology

Tech Tuesday: Posting to TwitPic from Adobe AIR

TwitPic is a service that lets you share photos on Twitter by generating a tiny url to the image being uploaded. The flash.filesystem.File class allows Adobe AIR to post an image to TwitPic. By specifying the username, password and posting method it is possible to submit a query to the TwitPic API.

[as]
package com.cb.twitpic
{
import flash.events.DataEvent;
import flash.events.Event;
import flash.filesystem.File;
import flash.net.FileFilter;
import flash.net.URLRequest;
import flash.net.URLRequestMethod;
import flash.net.URLVariables;

public class TwitPic
{
private var _file:File;

public function TwitPic()
{
_file = new File();
_file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,uploadCompleteDataHandler);
browse();
}
private function browse():void {
_file.addEventListener(Event.SELECT, fileSelected);
_file.browse( new Array( new FileFilter( “Images (*.jpg, *.jpeg, *.gif, *.png)”, “*.jpg;*.jpeg;*.gif;*.png” ) ) );
}

private function fileSelected(event:Event):void {
var urlRequest:URLRequest = new URLRequest(“http://twitpic.com/api/upload”);

// The API requires the request be sent via POST
urlRequest.method = URLRequestMethod.POST;

// Enter a valid Twitter username / password combination
var urlVars:URLVariables = new URLVariables();
urlVars.username = TWITTER_USERNAME;
urlVars.password = TWITTER_PASSWORD;
urlRequest.data = urlVars;

// The API requires the file be labeled as ‘media’
_file.upload(urlRequest, ‘media’);
}

private function uploadCompleteDataHandler(event:DataEvent):void
{
var resultXML:XML = new XML(event.text);

// Trace the path to the resulting image tiny url (mediaurl)
trace(resultXML.child(“mediaurl”)[0]);
}
}
}
[/as]
This can be used within an AIR application by importing TwitPic and initializing the class. An example can be supplied upon request.

This was originally posted on blackcj.com, Chris Black’s personal blog. Chris is a Senior Developer at Sierra Bravo.

Filed under Technology

Tech Tuesday: Resources for integrating SQLite in AIR

When doing research on integrating a SQLite Database into AIR I came across the following useful resources:
Learn what SQLite is About:
Introduction to the SQLite Database - David Tucker

Getting Started:
Introduction to SQLite in Adobe AIR

Tool for Creating and Modifying SQLite Databases:
SQLite Firefox Extension

By using a SQLite database it will be easy to filter data returned by services based on tags. A demo application that uses SQLite will be coming soon. Feel free to comment with any additional resources or cool demo applications that use SQLite.

This was originally posted on blackcj.com, Chris Black’s personal blog. Chris is a Senior Developer at Sierra Bravo.

Filed under Technology

Tech Tuesday — YouTube in AIR

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):

<script src="js/swfobject.js" type="text/javascript" />
<script type="text/javascript">

      function onYouTubePlayerReady(playerId) {
        ytplayer = document.getElementById("myytplayer");
      }
   
      // functions for the api calls
      function loadNewVideo(id, startSeconds) {
       if (ytplayer) {
         ytplayer.loadVideoById(id, startSeconds);
        }
       }
      
       function play() {
          if (ytplayer) {
            ytplayer.playVideo();
          }
        }
  
       function pause() {
         if (ytplayer) {
           ytplayer.pauseVideo();
         }
        }

  </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.

<script type="text/javascript"> 

       // allowScriptAccess must be set to allow the Javascript from one
       // domain to access the swf on the youtube domain
       var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "opaque" };
       // this sets the id of the object or embed tag to 'myytplayer'.
       // You then use this id to access the swf and make calls to the player's API
       var atts = { id: "myytplayer" };
       swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
                           "ytapiplayer", "400", "300", "8", null, null, params, atts);

</script>

ActionScript Used to Load and Control the Video:
[as]
package com.sb.util
{
import flash.display.Sprite;
import flash.events.Event;
import flash.html.HTMLLoader;
import flash.net.URLRequest;

public class JSVideoPlayer extends Sprite
{

private var _html:HTMLLoader;
private var _ready:Boolean = false;

public function JSVideoPlayer()
{
_html = new HTMLLoader();
_html.paintsDefaultBackground = false;
_html.width = 400;
_html.height = 300;
_html.addEventListener(Event.COMPLETE,
onComplete);

loadHTMLcontent()

this.addChild( _html );
}
public function loadNewVideo(videoID:String):void
{
if(_ready){
_html.window.loadNewVideo(videoID);
}
}

public function playVideo():void
{
if(_ready){
_html.window.play();
}
}

public function pauseVideo():void
{
if(_ready){
_html.window.pause();
}
}

private function onComplete (e:Event):void
{
_ready = true;
}

public function loadHTMLcontent():void
{
_html.load(new URLRequest(‘test.html’));
}

}
}
[/as]

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)

Sources

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

This was originally posted on blackcj.com, Chris Black’s personal blog. Chris is a Senior Developer at Sierra Bravo.

Filed under Technology