My photography appeared in a Discovery Channel documentary!

Back in 2008, I shot a picture of the London Parliament from the London Eye during the evening hours of a cloudy day.  As with most of my photography, both personal and professional (aerial photography mainly), I posted it to SmugMug.  A few months later, I received a call from a producer who was doing work on a Discovery Channel documentary on Nostradamus.  He explained the price they were willing to pay for the use of my image for a few seconds in their upcoming film.  He went on to explain the rights they needed, the duration of the rights, blah  blah blah.  When he finished, I simply said, “You had me at ‘Discovery Channel’”.  Many months went by and I nearly forgot about it, but this weekend, I finally learned what documentary it was featured in — “Nostradamus Decoded“.  It’s a bit of a dooms-day flick, but hey!, it’s Discovery Channel!

Below is my original image (high-res version here) and a screenshot from the Discovery Channel use of it.  If you want to see how it appears, I found the entire film on YouTube in 9 parts.  Go to part 8 ( http://www.youtube.com/watch?v=CghrRuC2ROA ) and advance it to the 5:00 mark and wait a few secs.  Don’t look away or you’ll miss my 5 seconds of glory.

Many of you probably just rolled your eyes, but that’s too bad, I’m blogging it anyways!  ;-)

My original image:

Discovery Channel version (they edited it to make London look flooded and more gloomy):

Future conversations with me about photography will go something like this:

Stranger: Are you into photography?

Greg: Yes I am, I’ve even done some work for The Discovery Channel

;-)

Filed under: Aerial Photography, Photography Tagged: discovery channel, Photography

AIR for TV applications and the “safe viewing area” (aka “title safe area”)

Here’s another design consideration for AIR for TV applications.  (This and other tips will be incorporated soon into Adobe online documentation).

When designing your user interface for an AIR for TV app, be sure to consider the safe viewing area. The safe viewing area on a TV is the area of the screen that the end-user can actually see. This area is also known as the title safe area. Overscan is the portion of the actual image area that falls outside the safe viewing area. The safe viewing area can vary depending on the device. This concept originated with analog televisions in which the television’s physical design sometimes hid the edges of the displayed image. However, it still often applies today.

Adobe recommends an inset of 7.5% on each edge of the screen. For example, on a TV with a screen resolution of 1080p, a full-screen AIR application has a Stage.stageWidth of 1920 and Stage.stageHeight of 1080. The following figure shows the safe viewing area of the stage using 7.5%:

I’ll leave it to you to do the math for 7.5% for other screen resolutions such as 540p and 720p (stage dimensions of 960 x 540 and 1280 x 720, respectively).

Because of the safe viewing area, design your full-screen AIR for TV application as follows:

  • Use the entire stage dimensions for backgrounds, such as background images or background colors.
  • Use only the safe viewing area for critical application elements such as text, graphics, video, and user interface items such as buttons.

Depending on the device on which your application runs, the safe viewing area sometimes doesn’t apply. But to be sure your critical application elements are never hidden, always design to accommodate the safe viewing area.

Cirrus January 2011 update

Regarding the latest info from Michael Thornburg (Adobe) Codename Cirrus got refreshed and you can now leverage new two features.

One of them is sending developer key as as a second parameter of connect method, which improves security as key is not transmitted via URI.

So now you can call:

   var nc:NetConnection = new NetConnection();
   nc.connect("rtmfp://p2p.rtmfp.net", "000000000000000000000000-000000000000");

Second feature enables you to send direct relayed messages to clients, this can be helpful for some kind of signaling or init. We highly recommend to use this only one or twice per connection as it consumes much more resources on Cirrus than P2P introduction.

  // on sender peerID 9876 sending to peerID 1234
   nc.call("relay", null, "1234", "INVITE");
 
   // on receiver peerID 1234, this callback happens
   nc.client.onRelay("9876", "INVITE");

Original post here.

The Worst Phishing Attempt Ever. ROTFL!!!

The person who sent this must be only the second generation of their bloodline to walk upright.

From: System Programmer
Reply-To:
Date: Wed, 19 Jan 2011 16:03:08 -0800
To:
Subject: Service Alert

“Dear web mail user”

“This message is from web mail messaging center to all web mail
email account owners. On Wednesday,January 19th, 2011,
all Mail hub systems will undergo regularly scheduled maintenance.

Access to your e-mail via the mail client will be unavailable for some time
during this maintenance window. We are currently upgrading our data base
and e-mail account center see homepage. We are deleting all unsubscripted email
accounts to create more space for new accounts.

To complete and keep your web mail account, you must reply to this email
immediately and enter your user name here (——————-) and password
here
(——–) Failure to do this will immediately render your email address here
(===================== deactivated from our database.

You can also confirm your email address by logging into your account:.

Thank you for using web mail”

Adobe InMarket experience

Today I published my Resicon application to Adobe InMarket. At the moment Adobe InMarket is just a front end for online application stores like Adobe Marketplace or Intel AppUp. It’s goal is to make distribution and monetization of AIR based applications as simple as possible. Adobe is also working to integrate it with other online application [...]

Getting Started with the Canvas Element and EaselJS

One of the features of HTML5 that developers are most excited about is the Canvas element. The Canvas element essentials provides a bitmap canvas for dynamically rendering shapes and bitmap graphics. It is very similar to the Flash Player’s Bitmap and BitmapData classes.

However, working with the Canvas element can be difficult, especially if you need to manage, update and or / animate multiple shapes and bitmaps. Unlike the Flash Player, the Canvas element does not have a concept of a display list or individual items to render. Instead, it provides a single Canvas on which to draw, and it is up to the developer to determine what needs to be rendered and when.

Grant Skinner has release a JavaScript library named EaselJS, which attempts to provide a Flash like DisplayList API in order to make it easier to work with the Canvas element. The library is just an alpha release, but is surprisingly full featured at this early stage. If you are interested in experimenting with the Canvas API, this is a great way to get started.

In this post, I will show how to get started animating content in the Canvas element using the EaselJS JavaScript library.

Here is a list of the main classes in the library:

  • DisplayObject : Abstract base class for all display elements in EaselJS. Exposes all of the display properties (ex. x, y, rotation, scaleX, scaleY, alpha, shadow, etc) that are common to all display objects.
  • Stage : The root level display container for display elements that wraps the Canvas element.
  • Container : A nestable display container, which lets you aggregate display objects and manipulate them as a group.
  • Text : Renders text in the context of the display list.
  • Bitmap : Draws an image, video or canvas to the canvas according to its display properties.
  • BitmapSequence : Displays animated or dynamic sprite sheets (images with multiple frames on a grid), and provides APIs for managing playback and sequencing.
  • Graphics : Provides a simple but powerful API for dynamically drawing vector graphics.
  • Shape : Renders vector art via the Graphics object within the context of the display list.

You can view the complete api docs here.

Now, before we get started, lets look at where you can actually use the Canvas element (and thus EaselJS). Canvas is part of the HTML5 specification, and is supported in the latest version of most current browsers, including:

  • Safari
  • Google Chrome
  • Opera
  • Firefox

However, there is one exception, and it is a pretty big one. Internet Explorer does not currently support the Canvas element (although the next version of the Internet Explorer will). According to NetMarketShare, Internet Explorer 6, 7 and 8 make up about 57% of the browser market, which is a large segment of users. There is a project named ExplorerCanvas that attempts to replicate Canvas support in Internet Explorer, but EaselJS has not been tested with it yet. Keep these points in mind when considering using the Canvas element.

Now that we have a good idea of where and when we can use the Canvas element, lets look at a simple example. In this example, we will use EaselJS to dynamically draw a circle and animate it across the Canvas. This will show us how to set up the library, introduce us to some basic concepts when working with the library, and show how to animate a graphic.

First, here is the working example:

Now, lets look at the code, with comments:

<!DOCTYPE html>
<html lang="en">
 
<head>
	<meta charset="utf-8" />
 
	<meta name="author" content="Mike Chambers" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="copyright" content="Mike Chambers" />
	<meta name="robots" content="index,follow" />
 
	<title>TITLE</title>
 
	<style>
		#stageCanvas
		{
			background-color:#333333;
		}
	</style>
 
	<!-- import the Easel library. Downloaded from:
		http://easeljs.com/
	-->
	<script src="scripts/easeljs.js"></script>
 
	<script>
 
		//check and see if the canvas element is supported in
		//the current browser
		//http://diveintohtml5.org/detect.html#canvas
		if(!(!!document.createElement("canvas").getContext))
		{
			var wrapper = document.getElementById("canvasWrapper");
			wrapper.innerHTML = "Your browser does not appear to support " +
			"the HTML5 Canvas element";
			return;
		}
 
		//EaselJS Stage instance that wraps the Canvas element
		var stage;
 
		//EaselJS Shape instance that we will animate
		var circle;
 
		//radius of the circle Graphics that we will draw.
		var CIRCLE_RADIUS = 10;
 
		//x position that we will reset Shape to when it goes off
		//screen
		var circleXReset;
 
		//EaselJS Rectangle instance we will use to store the bounds
		//of the Canvas
		var bounds = new Rectangle();
 
		//initialize function, called when page loads.
		function init()
		{
 
			//Normally, we would do some detection for the Canvas
			//element here. See http://www.modernizr.com/ for
			//a useful library for detecting HTML5 support.
 
			//get a reference to the canvas element
			var canvas = document.getElementById("stageCanvas");
 
			//copy the canvas bounds to the bounds instance.
			//Note, if we resize the canvas, we need to reset
			//these bounds.
			bounds.w = canvas.width;
			bounds.h = canvas.height;
 
			//pass the canvas element to the EaselJS Stage instance
			//The Stage class abstracts away the Canvas element and
			//is the root level display container for display elements.
			stage = new Stage(canvas);
 
			//Create an EaselJS Graphics element to create the
			//commands to draw a circle
			var g = new Graphics();
 
				//stroke of 1 px
				g.setStrokeStyle(1);
 
				//Set the stroke color, using the EaselJS 
				//Graphics.getRGB static method.
				//This creates a white color, with an alpha
				//of .7
				g.beginStroke(Graphics.getRGB(255,255,255,.7));
 
				//draw the circle
				g.drawCircle(0,0, CIRCLE_RADIUS);
 
				//note that the circle has not been drawn yet. 
				//the Graphics instance just has the commands to
				//draw the circle.
				//It will be drawn when the stage needs to render it
				//which is usually when we call stage.tick()
 
			//create a new Shape instance. This is a DisplayObject
			//which can be added directly to the stage (and rendered).
			//Pass in the Graphics instance that we created, and that
			//we want the Shape to draw.
			circle = new Shape(g);
 
			//set the initial x position, and the reset position
			circle.x = circleXReset = -CIRCLE_RADIUS;
 
			//set the y position
			circle.y = canvas.height / 2;
 
			//add the circle to the stage.
			stage.addChild(circle);
 
			//tell the stage to render to the canvas
			stage.tick();
 
			//Subscribe to the Tick class. This will call the tick
			//method at a set interval (similar to ENTER_FRAME with
			//the Flash Player)
			Tick.addListener(this);
		}
 
		//function called by the Tick instance at a set interval
		function tick()
		{
			//check and see if the Shape has gone of the right
			//of the stage.
			if(circle.x > bounds.w)
			{
				//if it has, reset it.
				circle.x = circleXReset;
			}
 
			//move the circle over 10 pixels
			circle.x += 10;
 
			//re-render the stage
			stage.tick();
		}
	</script>
 
 
</head>
<body onload="init()">
	<div width="400" height="300" id="canvasWrapper">
		<canvas width="400" height="300" id="stageCanvas"></canvas>
	</div>
</body>
</html>

 

You can download the code for the example from here.

As you can see, the code is pretty simple, and its structure is very similar to using the DisplayList API within the Flash Player.

There are a couple of things that are important to point out.

The EaselJS Stage instance wraps the Canvas element, and handles when and how items are rendered. The stage is only rendered when you call stage.tick(), and for performance reasons, you should only call this if something has changed and you need to update the canvas.

The Tick class handles time management. It will call a tick method on any object that has subscribed to be notified. This is analogous to the ENTER_FRAME event in ActionScript.

If you resize the canvas, then its contents will be erased. However, using EaselJS, all you need to do is call stage.tick() after resizing in order to re-render the graphics.

Given the lack of Canvas support in Internet Explorer, it is important that you detect for Canvas support in the browser, and provide an appropriate fall back for the user. I have some simple code in the example above, or you can use the Modernizr JavaScript Library which provides an API for detecting support for HTML5 features.

Finally, this is an early release of the library, and thus APIs may (and probably will) change. In addition, some things which you might expect to work may not be supported yet. For example, there are currently no APIs to retrieve the height / width of a DisplayObject (you will have to figure it out yourself). However, in general, the library is very robust and has been used in some production projects.

Here are some resources which are useful if you want to start playing around with the Canvas element via EaselJS:

Post any questions / comments in the comments section below.

Working with Flex RPC Services in ActionScript Mobile Projects

In a previous post I showed you how you can use the QNX UI components in a Flex Mobile Project in order to use Flex RPC services (REST Style Services/Web Services/Remoting). What if you want to use Flex RPC services in an ActionScript Mobile Project? It isn’t possible, isn’t it? Wrong, you can make it work with a little bit of extra-work.

This is working because, as my colleague Renaun Erickson said, Flex != MXML. In other words if you add the right parts from the Flex framework to your project you will be able to reuse these Flex services. Though, you won’t be able to write MXML code. Evertything will be just ActionScript code.

Once you created a new ActionScript Mobile Project (these project supports Android and BlackBerry Tablet OS as target platforms) there are two steps you have to complete to enable Flex RPC support.

Step 1. Right-click on the project name and choose Properties. Then click on the ActionScript Build Path entry. You will notice there are already some parts of the Flex framework added.

Expand the first entry (Flex Hero) and add these two SWCs: framework.swc and rpc.swc (on my computer these SWCs are in /Applications/AdobeBeta/Adobe Flash Builder Burrito/sdks/4.5.0/frameworks/libs). Then you have to add the bundles for the default locale. So, this time, click on the “Add SWC Folder…” button and add the locale folder from Flex SDK (on my computer this is the path: /Applications/AdobeBeta/Adobe Flash Builder Burrito/sdks/4.5.0/frameworks/locale/en_US).

Once you apply these changes your project should compile with no errors.

Step 2. You have to do some of the work the Flex compiler does for you automatically when you work with Flex projects. Remember, this project is an ActionScript project. You have to register a number of classes used by the AMF3 protocol. If you don’t do this, HTTPService will work, but when you try to use RemoteObject (this method uses AMF3 for encoding the messages) you will get this error:

TypeError: Error #1034: Type Coercion failed: cannot convert Object@3779ee1 to mx.messaging.messages.ErrorMessage.

Fortunately, this is an easy fix. You can register the classes needed at the top of your ActionScript application (in my project this class is named PlaybookRPC):

[SWF(height="600",width="1024")]
public class PlaybookRPC extends Sprite {

   registerClassAlias("flex.messaging.messages.RemotingMessage", RemotingMessage);
   registerClassAlias("flex.messaging.messages.CommandMessage",CommandMessage);
   registerClassAlias("flex.messaging.messages.AcknowledgeMessage",
           AcknowledgeMessage);
   registerClassAlias("flex.messaging.messages.ErrorMessage", ErrorMessage);
   registerClassAlias("DSC", CommandMessageExt);
   registerClassAlias("DSK", AcknowledgeMessageExt);
   registerClassAlias("flex.messaging.io.ArrayList", ArrayList);
   registerClassAlias("flex.messaging.config.ConfigMap", ConfigMap);
   registerClassAlias("flex.messaging.io.ArrayCollection", ArrayCollection);
   registerClassAlias("flex.messaging.io.ObjectProxy", ObjectProxy);

   // You may want to register pub/sub and other rpc message types too...
   registerClassAlias("flex.messaging.messages.HTTPMessage", HTTPRequestMessage);
   registerClassAlias("flex.messaging.messages.SOAPMessage", SOAPMessage);
   registerClassAlias("flex.messaging.messages.AsyncMessage", AsyncMessage);
   registerClassAlias("DSA", AsyncMessageExt);
   registerClassAlias("flex.messaging.messages.MessagePerformanceInfo",
           MessagePerformanceInfo);

   public function PlaybookRPC() {
      super();

      // support autoOrients
      stage.align = StageAlign.TOP_LEFT;
      stage.scaleMode = StageScaleMode.NO_SCALE;

   }
}

Now, you are ready to use Flex RPC services in this project. You can write something along these lines if you want to use Remoting:

var remoting:mx.rpc.remoting.RemoteObject = new RemoteObject("AuthorsService");
remoting.source = "AuthorsService";
remoting.endpoint = BASE_URL + "remoting/gateway.php";
var token:AsyncToken = remoting.getData();
var responder:Responder = new Responder(onResult, onFault);
token.addResponder(responder);

You can download my project from here (server side services are not included). I haven’t tried Web Services (WSDL/SOAP) or Messaging (Producer/Consumer) but I don’t see any reason for not working.

Using The PlayBook AIR SDK with Flex “Hero” Mobile Projects

When I first started doing PlayBook development with Flash Builder “Burrito” I found it kind of confusing how the PlayBook SDK installed itself. During the install process, the PlayBook AIR SDK installer prompts you for two locations; one is the location of your Flash Builder installation and the second is an existing AIR 2.5 SDK installation. If you’re using Burrito, it drops a new SDK into the sdk folder of the Burrito install (blackberry-tablet-sdk-0.9.x) and then defaults to the 4.5.0 sdk in the next screen as the AIR 2.5 SDK.

If you’re used to doing Android development then the first thing you probably did was go to create a new Flex Mobile or ActionScript Mobile Project using the PlayBook SDK. Unfortunately you’ll get this screen:

Luckily, when you selected the existing AIR 2.5 SDK (assuming you put it in the default 4.5.0 folder or any version of the “Hero” SDK with mobile components) the PlayBook installer has already linked the PlayBook SDK to that sdk. So when you create a Flex Mobile project with the Flex Hero SDK set you’ll see the required QNX .swc files already linked:

But I ran into an issue when I tried to upgrade. My colleague Mihai has a great runthrough of how to migrate from the 0.9.1 PlayBook SDK to the 0.9.2 SDK. But after I tried to upgrade all of my Flex Hero projects kept referring to the old 0.9.1 SDK. And any new Flex Hero projects I created would reference the old 0.9.1 installation. What I discovered was that something during the install process wasn’t overwriting the link in the 4.5.0 folder to the old SDK.

It seems like there is a bug that won’t overwrite the reference to the 0.9.1 correctly but the SDK is referenced in the Flash Builder preferences under Target Platforms. I just had to change it from 0.9.1 to 0.9.2 and all of my old projects as well as all of the new projects started using the new version.