Flash Player 10.2 beta with StageVideo on Labs

Great news everyone!

Flash Player 10.2 beta is now available to download. It features lot of great stuff including StageVideo, which dramatically reduces CPU costs and renders video on GPU.

Read the blog post about FP 10.2 by Thibault Imbert about it.

Get it here: http://labs.adobe.com/technologies/flashplayer10/

Tutorial: Getting started with StageVideo on Adobe Developer Connection

Introducing Flash Player 10.2 Beta!

A spicy Flash Player 10.2 BetaI told you, a lot of stuff is happening lately for Flash developers. I am happy to announce that we just posted a new Flash Player 10.2 Beta on labs. I will not cover here all the questions that are covered already in the FAQ and release notes but I would like to focus on the new features introduced in this new beta:

  • Internet Explorer 9 hardware accelerated rendering support – Flash Player takes advantage of hardware accelerated graphics in Internet Explorer 9, utilizing hardware rendering surfaces to improve graphics performance and enable seamless composition.
  • Stage Video hardware acceleration – A new method for video playback in Flash Player allows developers to leverage complete hardware acceleration of the video rendering pipeline, enabling best-in-class playback performance. Stage Video can decrease processor usage by up to 85% and enables higher frame rates, reduced memory usage, and greater pixel fidelity and quality.
  • Native custom mouse cursors – Developers can define custom native mouse cursors, enabling user experience enhancements and improving performance.
  • Support for full screen mode with multiple monitors – Full screen content will remain in full-screen on secondary monitors, allowing users to watch full-screen content while working on another display.

Obviously, there is no much code I can show you regarding IE9 GPU compositing, the Flash Player does this automatically by leveraging the new GPU compositing APIs on IE9 to actually render the Flash Player frames as surfaces and push them on screen through Direct3D9 whatever wmode value you use. Note that graphics computing is still done by the CPU but we use GPU APIs to composite and blit the Flash Player frames on screen. It is similar to what we did in the past with CoreAnimation on MacOS with Safari. This will improve rendering performance on existent content without any modifications.

Concerning Stage Video, this feature has been sneaked at FOTB earlier this year and at Max last month by Tinic. We are very happy to announce that YouTube is already leveraging Stage Video. This will dramatically change the way video performs in Flash and bring native video performance on MacOS, Windows and Linux. For more infos about the YouTube work, check the Flash Player team’s blog post.

To get an idea of how StageVideo performs, you can try the StageVideo enabled players here.
Make sure you are running it with Flash Player 10.2 beta.

I wrote a complete article on Devnet which goes into the details of StageVideo and wrote a very simple video player to illustrate how the StageVideo APIs work.

Here is a snaphost of the demo using Stage Video, playing the Big Buck Bunny movie in 1080p on my MacBook Pro :

Big Buck Bunny with Stage Video

For comparaison, here is a 720p video playing on YouTube, using about 40% of my MacBook Pro CPUs with Flash Player 10.1 :

YouTube without Stage Video

Now, let’s browse to same video with Flash Player 10.2 with Stage Video, CPUs usage drops to 9% :

YouTube with Stage Video

Pretty cool, hu ? If you make the test on YouTube, make sure you wait a few seconds, some ActionScript logic in the YouTube player makes the CPU usage go wild for a few seconds before reaching its normal state.

For info, the performance improvements are way bigger if you overlay content on top of video. In some cases, CPU usage can drop from 200% to 10% using Stage Video, check my first post about Stage Video for more infos.

While listening to my track and browsing the web through another tab, the pause and resume feature introduced in Flash Player 10.1 stops rendering the frames and only decodes sound. Flash Player CPU usage then drops to 5% :

Pause and Resume with browser tab

But that is not all, we added another nice feature related to cursors. A highly requested feature. The idea is simple, no more Mouse.hide() or onMouseMove handler or startDrag to have a custom cursor. You can now directly work at the OS level and assign your own custom native bitmap-based cursors. Here is a little code sample which illustrates the idea:

// we create a MouseCursorData object
var cursorData:MouseCursorData = new MouseCursorData("myCursor");
// we specify the hotspot
cursorData.hotSpot = new Point(15,15);
// we pass the cursor bitmap to a BitmapData Vector
var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(1, true);
// we create the bitmap cursor
var bitmap:Bitmap = new zoomCursor();
// we pass it to the bitmapDatas vector
bitmapDatas[0] = bitmap.bitmapData;
// we assign the bitmap to the MouseCursor object
cursorData.data = bitmapDatas;
// we register the MouseCursorData to the Mouse
Mouse.registerCursor(cursorData);
// whenever we neeed to show it, we pass the alias to the existing cursor property
Mouse.cursor = "myCursor";

Pretty cool? But wait, there is even better, you can also pass a series of BitmapData objects, then pass a specific frame rate and get automatic native animated cursor:

// we create a MouseCursorData object
var cursorData:MouseCursorData = new MouseCursorData("myAnimatedCursor");
// we specify the hotspot
cursorData.hotSpot = new Point(15,15);
// we pass the cursors bitmap to a BitmapData Vector
var bitmapDatas:Vector.<BitmapData> = new Vector.<BitmapData>(3, true);
// we create the bitmap cursor frames
var frame1Bitmap:Bitmap = new frame1();
var frame2Bitmap:Bitmap = new frame2();
var frame3Bitmap:Bitmap = new frame3();
// we pass it to the bitmapDatas vector
bitmapDatas[0] = frame1Bitmap.bitmapData;
bitmapDatas[1] = frame2Bitmap.bitmapData;
bitmapDatas[2] = frame3Bitmap.bitmapData;
// we assign the bitmap to the MouseCursor object
cursorData.data = bitmapDatas;
// we register the MouseCursorData to the Mouse
Mouse.registerCursor(cursorData);
// we just pas a frame rate
cursorData.frameRate = 1;
// whenever we neeed to show it, we pass the alias to the existing cursor property
Mouse.cursor = "myAnimatedCursor";

Very simple, but so cool. Game and RIA developers will love this feature.

Another addition, we enhanced the full screen behavior by allowing one screen to stay full screen while working on the other screen. This feature was also highly requested by the community and video industry. Very nice feature for Hulu, YouTube and other video websites. ;)

A lot of people expressed the need to actually detect if the current context allowed the SWF to go full screen. This would allow you to detect this at runtime and react appropriately. Departing from Flash Player 10.2, you will be able to use the allowFullscreen property on stage:

if ( !stage.allowFullScreen )
throw new Error ("Please use the allowFullScreen HTML tag.");

Finally, a little improvement regarding Flash Player version info in the context menu, Here is what you have today when right click, no way to know which exact version you have running :

Flash Player version info before 10.2

Here is what you will get starting from 10.2 :

Flash Player version info starting from 10.2

I agree, it was about time. But yes, way easier now ;)

To use those new APIs you need to use the special build 18623 of the Flex SDK 4.5, from the Hero Stable Builds table here.
You also need to use a specific compiler argument –swf-version=11 to target SWF11.

I hope you guys will enjoy those features. Give it a try and let us know about bugs or any feedback you may have, thanks!

Launching Flash Player 10.2 Beta

We’re happy to announce a beta release of Flash Player 10.2 for Windows, Mac, and Linux is now available for download on Adobe Labs. Flash Player 10.2 beta introduces a number of enhancements we’re excited to share, including Stage Video, a new API that delivers best-in-class, high performance video playback across platforms. The new beta also includes Internet Explorer 9 hardware acceleration support previewed earlier (in Flash Player “Square”), enhanced text rendering, and two popular requests from the community: a native custom mouse cursors API and support for full screen playback with multiple monitors.

Setting the Stage for Beautiful Video

A lot of folks want to deliver the best possible video experience to the widest number of people. Stage Video in Flash Player 10.2 beta advances that goal. This new capability will help web sites deliver smooth, beautiful video across devices and browsers by enabling access to hardware acceleration of the entire video pipeline. As we showed in a sneak peak just last month at Adobe MAX, Flash Player 10.2 beta with Stage Video can deliver brilliant HD video with dramatically little processing power. Working together with hardware vendors has helped us take advantage of the GPU to offload not only H.264 hardware decoding (introduced in Flash Player 10.1) but the rest of the video rendering pipeline, including color conversion, scaling, and blitting. How efficient is hardware acceleration in Flash Player 10.2 beta? Using Stage Video, we’ve seen laptops play smooth 1080p HD video with just over 0% CPU usage.

Quality and performance are important, and so are richness and reach. Accordingly, Stage Video supports fully interactive, rich content combined with video. 1 billion people have Flash Player today. Because Stage Video works across browsers, when the final shipping version of Flash Player 10.2 is released, users will benefit from Stage Video accelerated content with a simple Flash Player update. We’re also introducing Stage Video across devices. In fact, today Google TV already takes advantage of Stage Video in Flash Player to deliver gorgeous 1080p HD video playback on TVs.

For content providers, Stage Video will work with all of the existing video viewed in Flash Player once they utilize the new API in their video player SWFs. This means their websites will continue to benefit from Flash Player’s advanced streaming for smooth, higher quality playback, DVR-like playback control, content protection, and consistency, with no changes to their encoded videos or infrastructure. Developers can learn more about how to enable their sites to take advantage of Stage Video today, and sites like YouTube have already started adding early support for Stage Video.

Other Enhancements

In addition to enhanced video playback, Flash Player 10.2 beta includes Internet Explorer 9 GPU support. In some of our tests this has yielded up to 35% improvement in rendering performance with Microsoft’s latest browser. Some other features are less about big numbers but little details that make experiences better. Flash Player has long allowed viewers to enjoy true full screen playback with one click. With Flash Player 10.2 beta, users with multiple monitors will be able to watch videos in true full screen on one display while multi-tasking on another (we heard you!). And we’re including another popular request from designers and developers: support for native custom mouse cursors. The new API allows developers to create their own cursors, static or animated, and ask the native OS to render them rather than use resources to manually draw custom cursors. This opens up new creative possibilities and can improve responsiveness in games, applications, and other content. Finally, the Flash Player 10.2 beta release also includes new sub-pixel text rendering enhancements that leverage Adobe typography research to further enhance readability of text in Flash Player, especially for complex character-based languages.

We encourage developers to install Flash Player 10.2 beta to check out these upcoming features. Developers with the beta can check out the Stage Video demos on Adobe Labs, including a demonstration of Stage Video from our friends at YouTube. If you’re an end-user, you probably don’t need to download the beta – you’ll benefit from Stage Video with the final release of Flash Player 10.2 next year as websites take advantage of it. We’ve found the beta to be pretty stable and ready for broad testing, but keep in mind this is a pre-release version of Flash Player, so not everything will be fully baked. If you encounter any issues, please file a bug in our public database so we can investigate. We appreciate your help and feedback.

We’re excited about what’s coming, and we hope you like it!

Tom Nguyen
Product Manager, Flash Platform Runtimes

Dreamforce 2010 and Cloudstock

I’ll be speaking at Dreamforce again this year! I have two sessions that are going to be super fun! First is a panel called “Cloud Mobility: Taking Critical Business Functions With You, Whenever, Wherever” on Wednesday at 3:15 PM. Then on Thursday at 11am I’ll be co-presenting a session on “Building Rich User Interfaces with Adobe Flash Builder for Force.com” with Markus Spohn from Salesforce.com.

Preceding Dreamforce is the Cloudstock event where you can see some other great presentations related to Flex and RIAs. Lee Brimelow will be doing a presentation on “Flex and Flash Platform on the Cloud” that is guaranteed to entertain and educate. There will also be presentations from Nigel Pegg on Real-time Apps and Keith Sutton on “Adobe’s Cloud Offerings for Developers and Enterprises”.

It’s going to be a great week! I hope to see you at Dreamforce 2010!

AIR for TV apps documentation available

If you are developing AIR applications for Adobe AIR for TV, or want to be, check out this Adobe Developer Connection page:  Flash Platform for TV.  You’ll find FAQs, tutorials, demos, and documentation to get you going.

A few documentation highlights include:

The StageVideo class

AIR for TV devices use hardware accelerators to decode and present video, which provide the end-user a great viewing experience while off-loading the device’s CPU.  To take advantage of this video hardware, use the StageVideo ActionScript class instead of the Video class in your application. Read more about the StageVideo class in:

AIR for TV profile support

A device profile defines the set of APIs and capabilities typically supported on a particular class of device.  Your AIR for TV applications will use either the tv or extendedTV profile.  To get an overview of what’s supported in these profiles, see Building Adobe AIR Applications — Device profiles.

Packaging your AIR for TV application

For information about how to package your AIR for TV app, see Developing AIR applications for television devices.

Untappd – Down with Mobile Apps

Update: This was recently the topic of a post by Fred Wilson, a very well known VC. I’m riffing on it now because I had an example today that drove it home for me.

I hate that mobile apps have taken the world by storm. I hate not being able to access something because I have an Android phone and all that the site has is an iPhone app. As a developer I hate having to build for a crap-ton of different platforms to make sure my users have access to my content. If only there was some global phenomenon that was accessible on a mobile device and was completely cross-platform. Oh wait, there is, it’s called THE WEB.

Why in the hell are we building native mobile applications when we can just build a web application to accomplish the same thing? Now, I understand that there are some requirements, like camera, that force us into the native realm. But if you aren’t using the camera or some other device-specific API, you should be building a web app.

This is why I love Untappd so much. Untappd is essentially Foursquare for beer. Instead of checking into a location, you can “check-in” what beer you’re drinking. Instead of doing the native app thing, they built a mobile site. I can access it from any device. It uses the browser-based GPS API to get my location so I can attach that to my beer, and there’s no stupid install needed. Just a wonderful web app with all of the functionality I need accessible from anywhere.

I realize there are some caveats beyond the device-specific APIs, but there has to be ways around them. One of the biggies is responsiveness. I think this one is kind of a cop-out because a great web-app will be able to create a UI in such a way that it feels just as responsive as a native app. jQuery mobile and Sencha Touch are great at this. The biggest thing is monetization. Currently it’s really hard to monetize web apps and it’s very easy to monetize native mobile applications. This is one of the reasons I’m so jazzed on the idea of the Chrome web store. Being able to make money on web apps could (I think) help change the tide and encourage more developers to go the web app route.

It’s a shame that we’re able to do such cool stuff on the web but that developers are jumping through hoops to lock down their content to specific devices. We’ve got technologies like Phonegap in the interim, but the sooner we get back to the web, the better.

P.S. My username on Untappd is ryanstewart.

Closing Thoughts from Infonex Social Media for Public Sector

Infonex only recently asked me to chair the event in Ottawa this week; however, I am very glad I had the opportunity to do so.  A special shout out to Philippe Renoir (@philipperenoir) who jumped in to co-chair the event.  Almost every speaker had a good message or some important lessons to impart.
Some items that distinguish Social Media from regular media:

Reach
– enables anyone to reach a global audience (potentially for free).
Accessibility – industrial media typically owned privately; social media tools are generally available to anyone at little or no cost.
Bi-directional – Conversation rather than publish pattern. Synchronous vs. Asynchronous!
Usability – industrial media production typically requires specialized skills. Most social media sites do not. Some define new skills, so anyone can operate the means of production.
Concurrency/Speed – the time lag by conventional media = long. Social media is virtually instantaneous responses; participants determine any delay in response).
Mutability – industrial media, once created, cannot be changed easily, whereas social media can be altered almost instantaneously by comments or editing. Newspapers are technically out of date the moment they leave the press and any notes scribbled on them are not seen by all readers.
Uncontrollable – no central point of control.
Measurable – unlike normal media you can determine who has spent time ingesting your message (not true for all forms of media)
Here is a quick summary of some of the messages I heard about public sector social media:
  1. Look before you leap: Before starting on a social media project, take the time to understand what you are getting into.  Use experience (yes – consultants) if required.
  2. Realize that is it better to be part of the conversation than being defined by it! Some people had issues with risk adverse managers who insisted that somehow the conversations in social media being negative to them are not happening.  Be part of the conversation and help your community.
  3. Determine whose voice you are talking with.  Are you talking for your department in an official capacity or are you a person who is sharing personal experiences?
  4. Conduct you social media campaigns with a strong ethics policy.  Identify yourself if commenting on a subject you are part of.  Disclose conflicts of interest. Be authentic (thanks @philipperenoir!)
  5. Be accountable.  Set a clear and consistent policy for communications and ensure it is regularly reviewed.  This also prevents potential issues if employees are dismissed for non-adherence.
  6. Ensure everyone in your government department buys in.  Make sure they have knowledge of the policy mentioned above and have a chance to provide input.
  7. Have clear, concise goals and metrics to judge your goals.  Understand what you are attempting to do and use the social media networks wisely.
  8. Don’t build it yourself!  Your chances of attracting a critical mass on your own platform are probably fairly small.  Using existing platforms is likely a better path (if possible).
  9. Start with baby steps.  Small manageable projects to start with will probably have better results.
  10. Don’t try to control social media!  You cannot and trying to do so will be like pouring gasoline on a fire.
All these are of course nonexclusive and perceived with my own filter!  Your actual mileage may vary.  Please comment if I missed something.
Time to fly back to snowy Vancouver!

MAX Racer Remote Device Controller in AIR for Android

Quick heads-up my friends. When we first demoed MAX Racer, we have previewed initial support for USB Steering Wheel, etc. This support is a sneak peek feature in Flash Player, not available right now.

This really needs you have one of these devices at home. So we were thinking about more lightweight way of controlling the game and device or mobile phone is ideal for this.

I’ve built a little app in Flex Mobile “Hero” for AIR for Android, that controls the game by sending accelerometer, speed info, brake and so on using local P2P connection over WIFI.

Check the video how it works:


Schema overview:

Enter PIN (basic level of security, so only your device controls the game at the time):

Controller screenshot:

Sources:

Download here
The *.fxp project contains Flex Mobile “Hero” project, open this in Flash Builder “Burrito”. The other classes are the other side (Receiver).

Good luck, folks! Let me know.

P2P Gaming Libs from my MAX 2010 session

Lot of you guys are asking for libs I’ve used in my Adobe MAX 2010 session Building P2P Multiplayer Games.

It’s still work in progress, but you can basically grab SWC libraries here with example.

I don’t want to publish source now as it needs several changes, refactor, comments, etc. But source-code should be available soon :)

This library has been used for MAX Racer without no change. So it’s kickass tested stuff! But not completely finished and documented yet. So this is the disclaimer, I do not provide any guarantees.

If you want to start playing with it, go ahead. Comments are highly welcome!

This engines creates a full mesh network via DIRECT_CONNECTIONS NetStreams among all connected users. Thanks to that, you get lowest latency possible and it’s highly suitable for realtime gaming.


Create a P2PGame

function connect():void{
game = new P2PGame(SERVER+DEVKEY);
game.addEventListener(Event.CONNECT, onGameConnect);
game.addEventListener(Event.CHANGE, onUsersChange);
game.connect(userNameStr);
}

User table

This game engine maintains also user table via Distributed Hash Table technique.

First registed listeners. You have 4 different events: USER_ADDED, USER_REMOVED, USER_UPDATED, USER_IDLE (when he does nothing for certain amount of time)

private function onGameConnect(event:Event):void{
game.session.mainChat.addEventListener(PeerStatusEvent.USER_ADDED, onUserAdded);
game.session.mainChat.addEventListener(PeerStatusEvent.USER_REMOVED, onUserRemoved);
}

You can also listen to Event.CHANGE on P2PGame class as well, this basically means that user table has changed with no other specific info.

private function onUsersChange(event:Event):void{
// write user names
// you have userNames (Array of Strings), userNamesString (String), userList (String)
txtUsers.text = "Users: \n"+game.session.mainChat.userNamesString;
 
for each(var user:Object in game.session.mainChat.userList){
	//createPlayer(user)
}
}

Sending realtime data to P2P mesh

On P2PGame class you have bunch of functions available. Every call distributes the message to each peer in the group.

public function sendMousePositions(x:uint,y:uint):void
public function sendMovement(direction:uint, down:Boolean):void
public function sendPosition(position:Object):void
public function sendRotation(rotation:Number):void
public function sendSpeed(speed:Number):void

Then you have specific game logic messages:

public function sendStartGame():void
public function sendGameOver():void

Receiving realtime data from P2P mesh:

I have implemented series of callbacks, which you can register on P2PGame class for movement, position, mouse position, rotation, speed. It should be suitable for simple games. You can extend P2PGame class to add more if you want.

public var receiveMovementCallback:Function;
public var receivePositionCallback:Function;
public var receiveMousePositionCallback:Function;
public var receiveRotationCallback:Function;
public var receiveSpeedCallback:Function;

Events

And also some events on P2PGame class:

[Event(name="change",type="flash.events.Event")]
[Event(name="connect", type="flash.events.Event")]
[Event(name="startGame", type="GameEvent")]
[Event(name="gameOver", type="GameEvent")]

Demo and libraries

Demo is available here to try (Run in multiple windows)

Libraries with source-code of SharedMovements examples

Good luck!