Posts tagged "app"

How to provide video rotation information to ActionScript as metadata

fp_air

By Jason Lee

Prior to Flash Player and AIR version 20, the Flash runtime does not correctly process the matrix field values in the Track Header Box and the Movie Header Box, as defined in the ISO specification ISO/IEC 14496-12:2008. As a result, in some instances, the user experiences an incorrectly resized and rotated video when the video is played back with Flash. The problem is particularly pronounced when playing videos that are recorded in portrait mode with old Android or iOS devices. This happens because these devices save video in landscape mode along with a matrix representing rotation transformation, when the users record the video in portrait mode.

Flash Player and AIR version 20 introduce a feature whereby video rotation meta-data is provided through ActionScript. This feature mitigates the problem discussed above by providing the video matrix information to ActionScript as a part of the meta-data object of the onMetaData event, an event handler of the NetStream object. This allows the ActionScript developers to render the video in the intended rotation matrix. It should be noted that the Flash Player engine does not automatically apply the video matrix information to the rendered video output, so as to avoid any resizing or rotation that is not intended by the ActionScript developer.

video-rotation-problem

The ActionScript code example below shows how to apply the rotation matrix to the Video object.

Note: The example assumes that the video is recorded along a matrix representing 90° clockwise rotation.

var video:Video = new Video();
 addChild(video);
 var nc:NetConnection = new NetConnection();
 nc.connect(null);
 var ns:NetStream = new NetStream(nc);
 ns.client = {};
 ns.client.onMetaData = ns_onMetaData;
 ns.client.onCuePoint = ns_onCuePoint;
 video.attachNetStream(ns);
 ns.play("Demo.mp4");
 
function ns_onMetaData(info:Object):void {
 trace("metaData");
 video.x = 0,
 video.y = 0;
 video.width = info.width;
 video.height = info.height;
 varmatrix:Matrix = video.transform.matrix; // Read old transform matrix of video object.
 varoldSize:Point = new Point(video.width, video.height);
 varnewSize:Point = new Point(Math.abs(info.matrix.transformPoint(oldSize).x), Math.abs(info.matrix.transformPoint(oldSize).y));
 matrix.translate(-(oldSize.x / 2), -(oldSize.y / 2));
 if (info.hasOwnProperty("trackHeaderBoxMatrix"))
 matrix.concat(info.trackHeaderBoxMatrix[0]); // Apply the matrix of the Track Header Box of Video Track provided by this feature to video object.
 // trackHeaderBoxMatrix is an array of MatrixObject because there can be one or more video tracks.
 if (info.hasOwnProperty("movieHeaderBoxMatrix"))
 matrix.concat(info.movieHeaderBoxMatrix); // Apply the matrix of the Movie Header Box provided by this feature to video object.
 matrix.translate((newSize.x / 2), (newSize.y / 2));
 video.transform.matrix = matrix; // Set new matrix to transform matrix of Video object.
 }
 function ns_onCuePoint(item:Object):void {
 trace("cuePoint");
 }

The feature works for NetStream objects using progressive download, which allows Flash runtime to download and directly parse a video file. However, this feature does not handle NetStream using RTMP or appendBytes, in which case, the matrix properties provided by this feature are not available. This feature provides the matrices for all file formats — MP4, M4V, F4V, and 3GPP in accordance with ISO specification ISO/IEC 14496-12:2008, when using progressive download. For all other file formats, such as FLV, the matrix properties provided by this feature are not available.

The matrix information provided by this feature can only be applied to an instance of the Video class. Therefore, with StageVideo, which uses GPU acceleration, for example, the matrix information is not applicable.

This feature introduces the following new properties of the object representing video meta-data, a parameter of onMetaData event handler:

  • Object.movieHeaderBoxMatrix: flash.geom.Matrix
  • Object.trackHeaderBoxMatrix: An array of flash.geom.MatrixtrackHeaderBoxMatrix is an array of MatrixObject because there can be one or more video tracks in a single video file.

If you are a Flash content developer and are having trouble getting a video to display in correct orientation, please try this new ActionScript functionality for handling video rotation meta-data.

Feathers updates to 2.2.0

Congratulations to Josh Tynjala and the Feathers open source project for the release of Feathers 2.2.0 this week. Feathers offers a large collection of ActionScript UI components and layouts for mobile and desktop. It is powered by Starling framework and  Adobe AIR.

feathers-video-player

What’s new in this release?

In version 2.2.0, Feathers UI includes a new media player framework, new layouts, and new animated transitions to visually enhance your games and apps.

Media player framework

VideoPlayer component uses Texture.fromNetStream() to display video textures, which was added in Starling 1.7.

SoundPlayer is another component in the media player framework intended for playing audio files.

Layouts

FlowLayout and WaterfallLayout add new layout options to Feathers containers.

Animated transitions

Two new animated transitions have been introduced to enhance screen navigators: Wipe and Iris.

Example: Here is a quick example of VideoPlayer component:

var player:VideoPlayer = new VideoPlayer();
player.layout = new VerticalLayout();
player.setSize( stage.stageWidth, stage.stageHeight );
this.addChild( player );

To play a video file, pass the URL to the videoSource property:

player.videoSource = "http://example.com/video.m4v";

We need to add an ImageLoader component as a child of the VideoPlayer to display the video texture:

var loader:ImageLoader = new ImageLoader();
var loaderLayoutData:VerticalLayoutData = new VerticalLayoutData();
loaderLayoutData.percentWidth = 100;
loaderLayoutData.percentHeight = 100;
loader.layoutData = loaderLayoutData;
player.addChild( loader );

When VideoPlayer dispatches Event.READY, we can pass the video texture to the ImageLoader:

function readyListener( event:Event ):void
{
    loader.source = player.texture;
}
player.addEventListener( Event.READY, readyListener );

A number of media player controls such as PlayPauseToggleButton and SeekSlider may be added as children too.

See How to use the Feathers VideoPlayer component for complete details.

Get started with Feathers UI 2.2.0

You can find the Feathers UI 2.2.0 release notes on the project’s Github page.

Developers are encouraged to download the latest stable version from the Feathers website.

Flash-Based Machinarium Game is Now #1 iPad App, Delivered Using Adobe AIR

We’re very excited to announce that Machinarium, an award-winning, point-and-click adventure and puzzle game developed with Flash technology is now the #1 iPad app in all paid categories in the U.S. and 12 other countries after just one day! This popular app comes on the heels of other top rated, Flash-based apps on iTunes, Android Market and BlackBerry AppWorld like Politifact (#1 news app on iTunes, Top 100 app in all of iTunes), Dr Stanley’s House (#1 most popular gaming app on iTunes China) and apps from ESPN, Coca-Cola, Facebook, California Academy of Sciences and others.

Previously available as an in-browser game on desktops via Flash Player, Machinarium was ported as a Flash-based app for the iPad 2 and is coming to Android Market and BlackBerry AppWorld soon – all with the power of Adobe AIR. Machinarium is gaining traction worldwide as the top app in iOS App Stores in several other countries as well, and is also the iPad Game of the Week. The game was designed by Amanita Design in the Czech Republic and one of our gaming evangelists, Tom Krcha, has posted an interview on his blog with Machinarium designer and director, Jakub Dvorský. Check it out, and you can download the game here!

POST UPDATED: 9/10/11

Adobe AIR and Linux: Increasing Distribution on Devices

As the market for applications is increasingly led by mobile devices, Adobe is investing more in simplifying app development and deployment for mobile operating systems.  By the end of 2011, we expect that there will be more than 200M smartphones and tablets which can download and run Adobe AIR apps, including devices running Android, BlackBerry Tablet OS and iOS.

The recent release of Adobe Creative Suite 5.5, including Flash Builder 4.5, enables developers to deliver their experiences on the web and as apps across all the major mobile platforms, as well as popular television, Blu-ray player and set top box platforms.  We’re committed to working with our partners to bring Adobe’s runtime technologies to the platforms and devices that are important to end users and developers, including new hardware and operating systems as they come to market.

To support the variety of Linux-based platforms across PCs and devices, we are prioritizing a Linux porting kit for AIR (including source code), which Open Screen Project (OSP) partners can use to complete implementations of AIR for Linux-based platforms on PCs, mobile devices, TVs and TV-connected devices.  We will no longer be releasing our own versions of Adobe AIR and the AIR SDK for desktop Linux, but expect that one or more of our partners will do so.  The last Adobe release of AIR for desktop Linux is AIR 2.6.  By focusing on the porting kit and support of partner implementations, we expect to provide broader support for AIR across Linux-based PCs and devices, whereas our own desktop Linux releases have accounted for less than 0.5% of lifetime AIR downloads.

Existing AIR applications will continue to work on Linux PCs provided they target AIR 2.6 or below, and users may continue to use their existing AIR applications without interruption. However, users will not be able to install applications or apply application updates (including security updates) that require a later version of AIR, unless and until such later versions are released by an OSP partner.
 
We will of course share more information about any partner plans to support AIR for desktop Linux.  In the meantime, for more information please review the FAQ.