Now that MAX 2011 Conference is started, Adobe just launched the Flash Player 11 and AIR 3. Take a look at the features introduced by each of them.

Flash Player 11 features

• Native 64-bit support (Flash Player desktop)
• Stage 3D accelerated graphics rendering
• Adobe Flash Access content protection support for mobile
• Native JSON (JavaScript Object Notation) support
• G.711 audio compression for telephony
• Garbage collection advice
• Cubic Bézier curves
• Secure random number generator
• Protected HTTP Dynamic Streaming (HDS) and Flash Access enhancements
• TLS secure sockets support (new for Flash Player)
• Socket progress events
• Native text input UI (mobile)
• JPEG-XR support
• Enhanced high-resolution bitmap support
• High-efficiency SWF compression support
• DisplayObjectContainer.removeChildren and MovieClip.isPlaying
• Sound.loadCompressedDataFromByteArray and Sound.loadPCMFromByteArray
• Asynchronous bitmap decoding

Test if you have Flash Player 11 installed here: http://blogs.adobe.com/sunil/2011/10/04/test/.

Get Adobe Flash Player 11 from here: http://get.adobe.com/flashplayer/

If you look for the debugger version of Flash Player 11 go to this link: http://www.adobe.com/support/flashplayer/downloads.html

AIR 3 features

• Stage3D (desktop only)
• Native extensions (all platforms)
• Android Market licensing integration (Android only, obviously)
• Captive runtime bundles (Android and desktop)
• Background audio playback (new feature in iOS; already works on Android)
• CameraRoll support for iPad
• Hardware-accelerated video (mobile)
• Native text fields (mobile)
• Front-facing camera support (iOS and Android)
• Mobile-encrypted local storage (brings feature parity between desktop and mobile)
• Device speaker control (mobile)
• Native JSON support (mobile and desktop)
• Socket improvements (mobile and desktop)
• H.264 video encoding (desktop only)
• JPEG XR support (mobile and desktop)
• Higher resolution bitmaps (mobile and desktop)
• Multichannel audio digital output (AIR for TV only)
• Advanced controller support (AIR for TV only)
• More easily removing all children from a container (all platforms)
• More easily determine if a MovieClip is playing (all platforms)
• Secure random number generation (mobile and desktop)
• Support for cubic bezier curves (all platforms)

Get Adobe AIR 3 from here: http://get.adobe.com/air/

The features were only listed. Read more bellow to find put more about each feature…
http://blogs.adobe.com/flashplayer/2011/10/adobe-flash-player-11-air-11-available-later-today.html
http://www.adobe.com/devnet/flashplayer/articles/whats-new-flash-player11.html
http://www.adobe.com/devnet/air/articles/air3_whatsnew.html

Adobe just released the version 1.6 of both OSMF and Strobe Media Playback. The main things added to them are:

• Stage Video support for hardware-accelerated video presentation (OSMF)
• Smartphone and tablet optimized chrome for Flash-enabled devices (Strobe Media Playback)
• HTML5 video player for non-Flash devices (Strobe Media Playback)
• JavaScript device detection library for selecting the appropriate player and chrome (Strobe Media Playback)
• DVR rolling window support, which allows you specify how far back from the live point viewers can rewind (OSMF)
• Late-binding audio for providing viewers with multiple audio track options, e.g. additional languages, director’s commentary, and “home” v. “away” coverage (OSMF)
• Improvements to HTTP Dynamic Streaming as well as the ability to better manage bitrate profiles with multi-level manifests (OSMF)

To read more follow these links…
http://blogs.adobe.com/osmf/2011/09/announcing-osmf-and-strobe-media-playback-1-6.html
http://www.pcmag.com/article2/0,2817,2392604,00.asp
http://www.streamingmedia.com/Articles/News/Featured-News/Flash-Media-Server-4.5-Delivers-to-iPad-%26-iPhone-77490.aspx

The Adobe® AIR® and Adobe Flash® Player Incubator is a technology preview program for more adventurous developers who are willing to experiment with Flash Platform runtime features that are in early development stages. Test the bleeding-edge capabilities of runtimes and contribute to the future of the Flash Platform. Please note that the capabilities in the Incubator builds may or may not be supported in future releases of the runtimes.

Adobe Flash Player 11 Incubator can be downloaded from http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html and debug versions are also available.

The main thing added in Flash Player 11 Incubator is “Molehill” 3D APIs for Flash Player and AIR which is a new set of low-level, GPU-accelerated 3D APIs that enable advanced 3D experiences across devices through the Adobe Flash Platform runtimes.

This is a video to see what’s about “Molehill”:

To test the new 3D capabilities of Flash Player 11 Incubator see:

• http://alternativaplatform.com/en/demos/maxracer/
• http://molehill.zombietycoon.com/
• http://infiniteturtles.co.uk/projects/away3d/broomstick/ShallowWaterDemo.html
• http://aerys.in/minko-quake-3

Read more:
http://blog.everythingflex.com/2011/03/01/flash-player-11-incubator-program/

Table of contents

1. How to skin a container with padding in Flex 4 SDK – Spark
2. How to skin a button with icon in Flex 4 SDK – spark
3. How to transfer values from a Spark component to a skin part in Flex SDK 4

Sometimes you need to pass values from components to skin, for example having a dynamic layout. Using Flex sdk 4 you can transfer values using content property of the hostComponent ({hostComponent.content}).

I made a small example that use hostComponent.content, changing the values of HSliders the colors of the component will be changed.

So in mxml file you have to set the value for content property, that is an Object:

<fx:Script>
	<![CDATA[
		import com.flexer.skin.ContentButtonSkin;
		import mx.utils.ObjectProxy;
 
		[Bindable]
		public var colors:ObjectProxy = new ObjectProxy();
	]]>
</fx:Script>
 
<s:Button width="380" height="40" label="my custom button" 
              skinClass="com.flexer.skin.ContentButtonSkin" content="{colors}" />

Into skin file you can use it like this:

<s:HGroup left="1" right="1" top="1" bottom="1" gap="0">
	<s:Rect width="33%" height="100%">
		<s:fill>
			<s:SolidColor color="{hostComponent.content.leftColor}"/>
		</s:fill>
	</s:Rect>
	<s:Rect width="34%" height="100%">
		<s:fill>
			<s:SolidColor color="{hostComponent.content.centerColor}"/>
		</s:fill>
	</s:Rect>
	<s:Rect width="33%" height="100%">
		<s:fill>
			<s:SolidColor color="{hostComponent.content.rightColor}"/>
		</s:fill>
	</s:Rect>
</s:HGroup>

Please see attached project for a closer look.

Jozef Chúťka has did manage to create anaglyphs using Pixel Bender and displacement maps. The result is amazing!

There are multiple kinds of 2 color glasses used with anaglyphs but the demo in Jozef’s article is for the common cyan-magenta glasses.

To find out more read Jozef’s article: http://blog.yoz.sk/2010/06/anaglyphs-with-pixel-bender-and-depth-map/

Serge Jespers did post an article regarding the new application Innovation Mecom has built for Dräger Carina medical device. The application is a simulation that reproduces all functions of the real device. So it is possible to get a real good impression of it even without using a real device.

Watch the following demo about it.

You can experience the application for yourself following this link: http://www.draeger.com/local/products/carina_trainer/start.html

You can read how it was developed on the creator’s blog: http://www.ketzler.de/2010/07/simulations-of-medical-devices-on-touch-devices-desktop-iphone-ipad-android/

Last two week I seen two great applications that make use of multi-screen experience capabilities of Flash Platform.

1. Androideroids by Grant Skinner
2. Desktop MP3 Music Player by Mihai Corlan

The first is a prototype multiplayer asteroids game in which each player uses an Android phone as their game controller. The player connects to the game and on the main screen he can see 3rd person view of the whole game while in the same time he can see the 1st person view on their Android phones.

The second one is a mp3 player that can be controlled by any numbers of Android phones. Mihai did the application using AIR and Flex Framework. The communication between the remote controls (AIR apps running on Android phones) and desktop player is done using the peer to peer features of AIR 2 and Flash Player 10.1.

Demos of the running application can be found on each of the application pages. So take a look at them.

These two applications show the power of the Flash Platform for all types of devices: Computers, TVs, Phones, etc.

Enjoy!

Together with our friend, Mihai Corlan (Adobe Evangelist) we released FxGallery, a Drupal Image Module. Mihai came with the challenge to build an image gallery module for Drupal and we liked it and got involved into the FxGallery project.

FxGallery has 3 main view: Gallery View, Cover Flow View and Single View. The image module can manage 3 kinds of image galleries: Flickr, Picasa and Local Gallery that is saved directly in the Drupal. In Single View there is also the possibility to add comments for the local gallery.

The project is kind of complex but not complex enough to use some Flex frameworks like Cairngorm. In the project we used the following libraries:

• XMLRPCFlash – for communication between the Flex client and the Drupal back end
• ActionScript 3 Flickr Library – for connecting to Flickr
• Picasa ActionScript 3 Library – for connecting to Picasa
• GreenSock Tweening Library – for some animations
• as3corelib – a utility library for ActionScript 3
• DisplayShelf Flex component – for the cover flow view

It was great to work with Mihai and Magda on this project and we hope that we will be able to develop it even further. The things we could do next are:

• Port it to Flex 4
• Add comment feature to Flickr and Picasa type of albums
• Implement deep linking
• Integration with Photoshop.com and other social web applications
• Mouse gestures using Flash Player 10.1

You can view a webinar held by Mihai and you can download the module and the sources from Mihai’s blog. Also a working example can be seen here: http://fxgallery.corlan.org.

I know you’ll want to know more so follow the following links:
http://myadobe.ro/2010/03/11/building-an-image-module-for-drupal/
http://corlan.org/creating-drupal-modules-with-flex/fx-gallery-drupal-module/
http://corlan.org/creating-drupal-modules-with-flex/
http://fxgallery.corlan.org

If you have a big project you will soon find out that you’ll need to have to versions of the application. One that you work on and one that you need to give it as a release build. On a release build you need to get rid of unwanted things like pre-filed login credentials that you need to have in the development (to rapidly get over login with one click instead of loosing time filing the fields) and that has not to be in the release build.

Here we have Conditional Compile Blocks or Conditional Compilation Definitions. This works like this: you define a variable that is set in the compilation arguments, and depending of theirs values we remove from compilation some unneeded lines of code.

For example in the properties of your Flex project in the Flex Compiler zone you have the following compile arguments:

-locale en_US -define+=CONFIG::development,true

and in code you can use it like this:

CONFIG::development {
    // this is a conditional compile block
    usernameTextInput.text = "myusername";
    passwordTextInput.text = "mypassword";
}

This means the because in the compile arguments we have CONFIG::development,true (which means that CONFIG::development is true) the code lines inside CONFIG::development{ } block will be compiled in the application.

If instead we have CONFIG::development,false (which means CONFIG::development is false) the code lines inside CONFIG::development{ } block will not be compiled.

So, using…

• -define+=CONFIG::development,true — the code lines are compiled in
• -define+=CONFIG::development,false — the code lines are not compiled in

You can define any conditional compile variable but you need to keep the CONFIG name space, like this:

-define+=CONFIG::myvar,true
-define+=CONFIG::debug,false
-define+=CONFIG::othervar,true

This is it, kind of simple.

You can see the the available arguments for MXML compiler by executing mxmlc -help command or by going here and scrolling down to the mxmlc 3.0 options section.

This Flex component allow you to play Youtube movies into you Flex applications and also to be able to customize the look of your player. Actually I put a main movie component and two control sections, one for:  play, stop, mute, unmute and time figures (current second and total number of seconds of the movie); the other one it’s for a visual playing time.

The Youtube API for ActionScript 3.0 (this is for Flash, but it’s working also in Flex) that I used it’s available on Google Code at: http://code.google.com/apis/youtube/flash_api_reference.html. Youtube API for  Flash and ActionScript 2 it’s available at: http://code.google.com/apis/youtube/flash_api_reference_as2.html.

I implement almost all functions available on this API (see Youtube class), but for this example I use just the basics ones. Also you will see that are some skins for buttons, that you can use.

In order to change the Youtube video ID just go to init() function into ChromelessYoutubeVideoPlayer.mxmml file and change the value._youtube it’s player component, and we set to this the ID value, also we add this to the canvas where this will be in design.

//set video ID
_youtube.videoId = "D-wvgqDWjnk";
_playerArea.addChild(_youtube);

The size of played move it’s set for the moment on Youtube class. It’s better to set the sive before movie starts to play, also, using this API, you can set the playback quality (small, medium, large, hd720) and to see the state of the movie ( unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5) ).

private function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);
 
// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
_player = _loader.content;
//load our video ID
_player.loadVideoById(_videoId);
//set movie size
_player.setSize(480,270);
}

I think that it’s better to download the source code, and just try to see how it’s work.