AIR for TV Stage property settings

In my last blog entry discussing a TV’s safe viewing area, I mentioned the Stage.stageWidth and Stage.stageHeight properties of a full-screen application on a TV with a 1080p screen resolution.  Let’s look a little more at how to set these and other Stage properties with regard to AIR for TV apps.

Stage.stageWidth and Stage.stageHeight

If you are writing a full-screen AIR for TV application for a specific device, go ahead and  hard-code Stage.stageWidth and Stage.stageHeight to the device’s screen resolution. However, to write a full-screen application that runs on multiple devices, use the Capabilities.screenResolutionX and Capabilities.screenResolutionY properties to set your Stage dimensions. For example:

stage.stageWidth = Capabilities.screenResolutionX;
stage.stageHeight = Capabilities.screenResolutionY;

Stage scale mode

Set Stage.scaleMode to StageScaleMode.NO_SCALE, and listen for stage resize events.

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, layoutHandler);

This scale mode setting results in the following:

  • When the application’s window changes size, the stage contents maintain their defined size. The runtime performs no automatic layout or scaling. Also, the runtime dispatches the Stage class’s resize event. Therefore, you have full control over how to adjust the application’s contents when the application begins and when the application window resizes.
  • You can use the stageWidth and stageHeight properties of the Stage class to determine the actual pixel dimensions of the application’s window. Therefore, in full-screen applications, these properties correspond to the screenResolutionX and screenResolutionY properties of the Capabilities class.

Stage alignment

Set Stage.align to StageAlign.TOP_LEFT:

stage.align = StageAlign.TOP_LEFT;

This alignment places the 0,0 coordinate in the upper-left corner of the screen, which is convenient for content placement using ActionScript. Therefore, this alignment works nicely with StageScaleMode.NO_SCALE, since your application is in charge of layout.

Stage display state

Set Stage.displayState in a full-screen AIR for TV application to StageDisplayState.FULL_SCREEN_INTERACTIVE:

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

This value sets the AIR application to expand the stage over the entire screen, with user input allowed.

Stage quality

You can set the Stage.quality property for an AIR for TV application to StageQuality.Best or StageQuality.High, specifying the rendering quality for all Stage objects. For example:

stage.quality = StageQuality.High;

Tour de Flex expanded to include mobile samples!

Tour de Flex now has a bunch of new mobile samples!   This brings Tour de Flex to 609 total samples!  If you haven’t checked out Tour de Flex lately, you should.

Holly Schinsky wrote a blog post with more details on the new samples.

If you are ready to try your first mobile app in Flex, I suggest you grab Adobe AIR Launchpad and Tour de Mobile Flex.  They are the perfect next steps.

Filed under: Adobe AIR, Adobe Flex, AIR for Android, Tour de Flex Tagged: Adobe AIR, Adobe Flex, burrito, Flex, hero, mobile, Tour de Flex

Lapse It – time-lapse video app made with AIR for Android

I just came across this very nicely made time-lapse video application in the Android Market. Lapse It is built with Flex 4.5 and runs on the AIR runtime. You can set the capture interval to anything from 1 second to as long as you like. You can also limit the length of your capture by limiting the amount of frames, by setting a time or you can stop it manually. Lapse It will capture frames with a resolution up to 720p (the free version is limited to 240×160) and the final result can be either a JPEG sequence or an FLV video. The app also has a built-in video player so you can immediately see the result and will even allow you to directly upload it to YouTube.

I was going to record the sunrise this morning… But then I remembered that I actually live in Belgium and are in the middle of the winter… ;-) The chances for sun are very slim and this morning it was too cloudy to record anything useful. I love time-lapse video so you can bet on the fact that I will be using this app whenever I can!

Go check it out!

EaselJS / Canvas Generative Graphics Flickr Set

Just a quick note, but I have created a Flickr set which contains some of the generative graphics I have been creating using canvas, JavaScript and EaselJS.

You can view the set here.

I havent released all of the code used to create all of the examples, but I will release the code / examples as I finish them. Ill post new images on the set whenever I create something I think is interesting.

Stealing content was never easier than with HTML5

HTML5 makes adding video and audio content to your site very easy but there is currently no way to protect that content. If we’re all completely honest we know that content protection is still a big deal for record companies, movie studios, and TV channels, yet HTML5 puts their content just up for grabs. Let me give you a few examples.

Before I continue I want to make a few points clear. First, I don’t want to get anyone in trouble! Second, this is not an attack or anything like that. Third, I do not want to encourage anyone to steal any content. I will therefore not go in to any details. This blog post is just to point out that you need to take these things in to account when you’re working with premium content!

Unnamed video site
Video site X just rolled out a brand new HTML5 video player. Like I said, HTML5 makes it really easy to add video content to your site but it makes it equally easy to download that content. It only takes a “view source” to find the URL to the video file. Some video sites have also noticed that and are now building custom JavaScript based players in an attempt to make it more difficult to get to the video file. On this one site I counted almost 3000 lines of JavaScript code for a rather basic video player with sharing functionality. 3000 lines of code and it still only took me three clicks to download the video file! I already hear some of you saying that you can also easily get the video file from a Flash based video player. If you use progressive download that is completely true. I’ll get back to that later in this post.

Unnamed new music discovery site
The release of the beta version of this new music discovery site is actually what sparked the idea to write this post. As per usual the tech blogs were buzzing about it as a new music discovery site that didn’t use Flash because Flash is dead. So I checked it out… This particular site gives you unrestricted access to the entire music library. I was able to look up any artist and play back any song in high quality… I can also buy the song on the site for the industry standard $0.99. But with just two clicks I was able to download any song from any artist straight to my desktop without actually buying it. No need for torrents or the risk of downloading viruses. It’s all right there on this official music discovery site in high quality AAC audio (in an M4A file).

Flash
I already mentioned that it’s also pretty easy to download a file used in a Flash based media player if the site uses progressive download. The difference between HTML5 and Flash in this case is that you CAN protect your content when using Flash. As there still is no standard audio/video codec in the HTML5 spec there also is no way to stream video and audio content using HTML5 across different browsers. Companies (including Apple) have been experimenting with streaming technologies but I’m sure you remember that that only worked in a specific version of Safari on a specific version of iOS. The HTML5 spec also has no guidelines for any sort of content protection.

Flash does work cross browser and cross platform (as I’m sure all of you know). With the use of Flash Media Server you can also completely protect that content and get the added benefits of features such as adaptive streaming (to adapt to changing connection speeds), reduced bandwidth usage, DRM, multicasting, peer to peer delivery, and more. Bottom line: Flash is still the best platform to stream (premium) video and audio content.

Game developer: “Why I’m Moving From HTML5 To Flash”

No… That’s not a typo. Yes… You read that correctly. This game developer is dropping HTML5 in favor of Flash!

These guys are working on a game that recently got a lot of attention on Reddit and Twitter. The prototype is written in HTML5/JS but they are now abandoning HTML5 and are moving to Flash!

Their main concerns are the “spotty” browser support, slow performance and the fact that there is no ecosystem for selling HTML5 games.

Is html5 the future? I sure hope so! Unfortunately, it isn’t the present.

Full story on http://blog.tametick.com/2011/01/why-im-moving-from-html5-to-flash.html

AS3 Package level functions and Java static imports

It’s a hidden treasure for lot of people but AS3 provides a mechanism to declare functions like setTimeout or setInterval called package level functions. These functions are defined inside packages like flash.utils.setInterval or flash.utils.setTimeout but can be used as if they were static functions.

This is a feature widely used in FlexUnit but that can be used in lots of other circumstances to reduce the amount of code and reduce its verbosity.

The mechanism to create a package level function is pretty simple. Here are the steps required to create a custom package function:

  • You create a class where the function will be defined. i.e: your/package/Assert.as
  • You declare a public function at the package level. Note that there’s no class definition.
    package my.pack
    {
        public function assert()
        {
        }
    }
  • Then you can use it from every where you wish
  • package
    {
        import my.pack.assert;
       
        public class testPackagefunctions
        {
            public function testPackagefunctions()
            {
                assert();
            }
        }
    }

When creating package level functions, the only restriction to bear in mind, is that the function name exposed must be the same name as the name of the file that contains it. i.e. If I expose the assert function, the filename that defines it must be assert.as. This implies that there can only be one function definition per file. If you need more you can create as many files as you need.

Package level functions in AS3 are directly comparable to static imports in Java. In java we can write code like:

package {
    import static my.pack.Assert.*;

    public static void main(String[] args) {
        assert();
    }
}

By using an static import in Java, static methods defined in the Assert class (in the example above) are made available directly so there’s no need to write Assert.assert. Again this is a feature used a lot in jUnit, Hamcrest or lamdaj libraries.

Autocompletion in Java in regards to static imports is not automatic. If you want to have autocompletion with static imports you can use Preferences > Java > Editor > Favorites and add there the Types or classes you want to use static imports for.

EaselJS / Canvas Example : Follow Drone

As I posted the other day, I have been spending some time playing around with dynamic drawing with the HTML5 Canvas element and EaselJS. I have put together quite a few examples and experiments and will be posting them (along with what I learned from them) over the next couple of weeks.

The first example I want to share is a simple one which I call “follow”. It basically uses EaselJS to create a snake like shape that follows you mouse. Here is a screen shot of a graphic I created with it:

 

Here is an inline version of the example that you can play with. Just click to toggle whether the drone follows your mouse (requires a browser with support for the HTML5 Canvas element).

You can view the example fullscreen (which looks better) here.

You can view, as well as download all of the code from my GitHub repository (released under an MIT License).

Im going to write a series of posts over the next couple of days on a couple of things I learned while building this example. In the mean time, here is the main gist of what is going on:

  • I am drawing to a canvas, but telling EaselJS to not clear the canvas when it redraws. This makes it very easy to create a persistent design, and since I only have one Shape to track / render, it helps keep CPU usage down.
  • On Mouse based devices, I use a second overlay canvas, and display the mouse point, and a line showing the direction the drone is moving in.
  • The example has support for multitouch when running on iOS devices (works really well on the iPad). It also works on Android, but not as well as Android only supports single touch events in JavaScript and has some aliasing issues when drawing to Canvas.

Again, you can view the full version of the example here, and view and download all of the code from here.

I will be making some more posts over the next couple of days, going into more detail on the example, as well as some of the lessons I learned from making it. In the meantime, post any questions or comments below.

Open Source Media Framework Marketplace

If you’re doing anything with video you’ve probably heard of the Open Source Media Framework (OSMF). It’s one of the cooler projects at Adobe and provides a component that can be customized and extended for whatever you want from video delivery.

OSMF includes a robust plug-in architecture that lets developers extend it and add features. The OSMF team has put together a marketplace for tutorials, white papers, and plug-ins for OSMF. It looks like it’s a great resource for all things OSMF and a bunch of the Flash media rockstars have already contributed content. The guys at Realeyes Media have put up an example plugin that lets you track analytics when using OSMF. Almer/Blank has a reference card that covers the important parts of OSMF. And Jodie O’Rourke has a getting started article for an introductory look at OSMF.

I think it’s a cool way to expose a bunch of developer-related content. If you’re knowledgeable about OSMF, definitely think about contributing some content. And if you’re just wanting to show video, take a look at some of the plug-ins and documents that make it easy. And everyone should check out the StageVideo Plugin for using StageVideo with OSMF.