Posts tagged "ActionScript"

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.

Amazon Adds Free Adobe AIR Native Extensions for Game Developers

a_com_W_logo_RGBFor game developers who want to reach more customers, the Amazon Appstore for Android is a great marketplace to deliver games for Kindle Fire and Android devices. Today, Amazon announced the launch of free Adobe AIR Native Extensions (ANEs) for In-App Purchasing and GameCircle integration for the Amazon Kindle Fire, making it even faster and easier for Adobe Gaming developers to add these features into their mobile apps. With Amazon’s announcement yesterday that it’s extending IAP to cover games for Mac, PC, and Web platforms, ActionScript developers now have even more options to reach customers.

Each week, millions of customers play GameCircle-enabled games, comparing scores and competing against friends. We’ve seen a lot of popular Flash and AIR games in the Amazon Appstore, driving increased revenue for Adobe gaming developers. SongPop from Fresh Planet, Bingo Blitz from Buffalo Studios, Machinarium from Amanita and Stick Tennis from Stick Sports are just a few examples of great games in the Appstore built with Adobe Gaming Technology. The addition of AIR Native Extensions makes it simple for developers using Adobe AIR to quickly integrate GameCircle and IAP support into their creations.

As we announced in December, the Adobe Game Developer Tools – available via the Adobe Creative Cloud – give game developers and publishers access to a powerful set of resources in one central location. Designed to streamline the game development process from creation to deployment, the Game Developer Tools help game publishers and developers reach the broadest possible audience worldwide – over 1.3 billion connected Windows and Mac PCs and over 500 million smartphones and tablets – 20 times the reach of the bestselling Xbox 360 gaming console. The new ANEs from Amazon complement this offering, and continuing to expand the audience reach for new games.

The Adobe Game Developer Tools include Adobe Scout, an advanced profiling tool that helps developers unlock significant performance optimization, and the Adobe AIR SDK, which enables developers to package ActionScript code into native apps for Kindle Fire along with other devices. Developers can find out more and sign up for a free membership at http://gaming.adobe.com.

Developers can access the free Adobe ANEs and read the blog from Amazon here.

We’re looking forward to seeing new games take advantage of these exciting new ANEs, and how game developers blaze new trails on Amazon!

Adobe Delivers New Game Developer Tools in Creative Cloud

We are thrilled to announce the release of our first Game Developer Tools in the Adobe Creative Cloud, giving developers and publishers access to a powerful set of resources in one central location. Adobe’s Game Developer Tools are designed to streamline the game development process from creation to deployment, and help game publishers and developers reach the broadest possible audience worldwide – over 1.3 billion connected Windows and Mac PCs and over 500 million smartphones and tablets – 20 times the reach of the bestselling Xbox 360 gaming console.

The gaming community is already buzzing about Adobe Scout, an advanced next-generation profiling tool that uncovers granular internal information in ActionScript-based mobile and browser content to unlock significant performance optimization opportunities. We’ve received rave reviews from developers who have been using pre-release versions of Scout to gain powerful insights and who are already enhancing their development processes with our Game Developer Tools.

As a special promotion, we’re including this first release of Scout in a free membership to Creative Cloud, along with the rest of our Game Developer Tools, including the Adobe Gaming SDK, Adobe Flash C++ Compiler, and trial versions of Flash Professional CS6 and Flash Builder 4.7 Premium:

–          The Adobe Gaming SDK provides the essential building blocks developers need to create and monetize amazing ActionScript games across browsers and mobile devices, including open source 2D and 3D frameworks (Starling, Feathers, and Away3D), and is a simple starting point for both new and experienced game developers.

–          The Adobe Flash C++ Compiler is a new tool chain that allows game developers to take native games and game engines for PCs, Xbox 360, PlayStation 3, and iOS and compile them to run directly on the web across browsers on over 1.3 billion connected PCs using Adobe Flash Player.

–          Adobe Flash Professional CS6 is an authoring tool to create engaging animation and games, including support for delivering animated assets ready for use with Starling and many other popular frameworks, and Adobe Flash Builder 4.7 Premium is an advanced ActionScript development environment that can be used to develop high-performance mobile and browser-based games. Flash Builder 4.7 Premium also improves productivity and time to market with support for the new ASC 2.0 compiler and the ability to test and debug apps directly on Apple iOS devices through USB or on the iOS simulator.

Creative Cloud paid membership includes full versions of Flash Professional and Flash Builder and will also include future versions of Scout following the introductory promotion. Of course, paid members also get access to all of the Creative Suite 6 apps, including other popular tools for game design, such as Photoshop and Illustrator.

The Adobe Flash Player has been at the forefront of online gaming for years and is used to power the 10 most popular games on Facebook including SongPop, FarmVille2, and Diamond Dash. Adobe’s latest Gaming technologies are the leading choice for social game studios like Zynga, Wooga and KIXEYE and are used by AAA game developers like Ubisoft as well as indie developers like Northway and Damp Gnat to help minimize the cost of targeting multiple platforms and mobile devices – including games for iPhones and iPads. Today’s release of Game Developer Tools makes it much easier for developers to maximize productivity, game quality and reach across PCs and mobile devices.

We’ll be celebrating this launch at our San Francisco office this evening with many local developers and publishers. Please feel free to stop by, or keep an eye out for a recap video in the next few days on Adobe’s Gaming YouTube channel. And, to find out more about the new Game Developer Tools and the Adobe Creative Cloud, visit gaming.adobe.com/getstarted.

Gaming Spotlight: FreshPlanet’s SongPop

How fast can you name a song clip? That is the question that SongPop, a game by FreshPlanet, puts out there for music fans looking for a challenge. This wildly popular music trivia game makes the most of social gaming, offering over 5 million daily Facebook and mobile app users the chance to compete to see who can name that song faster.

SongPop delivers a unified experience across desktop browsers on Facebook and extends that experience to mobile apps for iOS and Android. In using Adobe Gaming technologies, FreshPlanet was able to leverage a single code base, instead of having to build native apps for each mobile platform, and was able to easily streamline the workflow between designers, developers and animators.

FreshPlanet CTO and VP of Products Olivier Michon noted that Adobe Gaming technologies, “enabled us to code at top speed in Adobe ActionScript [and] rapidly integrate design assets and animations,” making development so easy that it only took two developers and one designer less than three months to complete SongPop for iOS and Android, and only one more month to launch it on Facebook.

For more on FreshPlanet and SongPop, check out their full story in, “Adobe Gaming & Fresh Planet: SongPop.” You can also get your hands on open sourced Native AIR extensions from FreshPlanet on their GitHub profile: https://github.com/freshplanet.

Developer Spotlight: A Follow Up with Jordan Casey of Casey Games

We had the chance to reconnect with young developer Jordan Casey, who recently released a new gaming app – Greenboy Touch. In our Developer Spotlight back in July, Jordan mentioned that he was going to slow down, but that obviously wasn’t the case! Read up on our latest interview with Jordan to find out more about his inspiration and the making of his latest Android and iOS game submitted to our Flash Rocks gallery.

What was your inspiration behind your new app, Greenboy Touch?

Greenboy Touch was based off a Flash game I developed about 2 years ago. I’m always trying new genres and I love different game concepts. While most of my games are just one specific style of gameplay, Greenboy Touch is made up of tons of different concepts. It is sort of a puzzle game.

We’d love to share more about the making of the app with our readers. What Creative Suite products did you use and did you have any favorite features?

I used Photoshop and Illustrator for graphics – they’re great tools! To develop the game I used Adobe AIR for iOS and for Android. I programmed in ActionScript 3.0, Flash and AIR, which are amazing. With the click of a button, I could switch a Flash game to a desktop app for Mac or PC back to an Android app to an iOS App. The program is great because it’s really visual and really powerful. ActionScript is an amazing language, and though so powerful, quite easy to pick up.

What was your experience like using Flash to create for Android and iOS? Are there any tips you would share with other developers?

The process was great. Like I said, with the click of a button I could go from iOS to Android. It’s just great. It’s the same as making a Flash game – the exact same, and with just a click, you get a native app! Just like that! It’s magic!

You’re juggling school and development. We want to know – what’s your secret? How are you doing it all?

Well, it is tough juggling between school, development, and lots of speaking events. To make up for time I missed while I’m away speaking, I take a 2-hour study course after school to catch up or study for exams. That way, I have my homework done and I can develop for about an hour or so.

Check out Greenboy Touch in action below.