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.

If you need to know the key codes when implementing a keyboard event use the following application that displays some info about the pressed key. First you need to click on the application to have focus on it then you can start trying out different key strokes.

Some key codes, ASCII codes tables are present bellow…
 

Some stuff about keyboard events bellow:
http://livedocs.adobe.com/flex/3/html/help.html?content=events_11.html
http://cookbooks.adobe.com/post_Global_keyboard_event_handling-304.html
http://livedocs.adobe.com/flex/3/html/help.html?content=Capturing_User_Input_3.html

Flash MiniBuilder is a lightweight IDE created for developing programs written in ActionScript 3. Flash MiniBuilder is itself written in ActionScript.

Two of the main raison tobe of MiniBuilder are:

• provide a completely free and cross platform alternative for developing ActionScript projects.
• provide an editor with a small footprint that would eventually run on smaller computers like netbooks or even pocket-size devices.

Extending, changing (and even integrating MiniBuilder with other software) is easy: MiniBuilder is itself written in your favourite language, AS3!

This and some of it’s unique features and concepts will make it the IDE of choice for lots AS3 developers.

MiniBuilder will benefit from Adobe AIR’s ability to launch applications from the browser. Code samples, online tutorials, code libraries will be able to provide a direct launch link for their projects: “launch this project in MiniBuilder” (This feature will be available in the first beta version.)

Because ActionScript virtual machine is now an open source project, we expect lots of solutions to adopt it for embedding. From the start, MiniBuilder targets several implementations of Tamarin AVM:

• Flash Player
• Adobe AIR
• Tamarin AVM shell
• Mod ActionScript (experimental web server module running ActionScript)

MiniBuilder will be available in 2 versions:

• Desktop MiniBuilder
• Web MiniBuilder

More about MiniBuilder and download information you can read at: http://code.google.com/p/minibuilder/.

If you ever got into the following error (see bellow after this paragraph) you must know how you can overcome it.

The error is triggered only in debugging. No trace of it in the normal run. But if you need to debug and get this error it will pause the debug session and even after lots of resume pressed you’ll won’t get over it because is a cyclic error.

undefined
	at flash.events::EventDispatcher/dispatchEvent()
	at mx.effects::Effect/effectStartHandler()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\Effect.as:1310]
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at mx.effects::EffectInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:580]
	at mx.effects.effectClasses::CompositeEffectInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\CompositeEffectInstance.as:172]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:150]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]

The error is triggered by Sequence and the code looks like this…

<mx:Sequence id="movement" repeatCount="0" startDelay="{delay}">
    <mx:Move id="movementUp" target="{this}" duration="{interval}" 
        yTo="0" />
    <mx:Move id="movementDown" target="{this}" duration="{interval}" 
        yTo="{_startYPos}" />
</mx:Sequence>

What’s the problem? After trying different things on the code I noticed that instead of setting the target property of the Sequence I did set up the target of each Move item. So by removing the target from each Move and adding one to Sequence may fix the problem.

Another thing to check is that the sequence is called only once for the target object. If the same effect is called twice or more on the same object and the previous effect did not finished their job a conflict appears. That means that starting the effect on a event that triggers more than once (ex: updateComplete, addedToStage) will end in this error also. Try use creationComplete event instead.

It is important to tell you that the Flex SDK I used to test this are 3.4 and 3.5 from Adobe Nightly Builds.

Hope this helps you.

What is AMF and a bit of history

Action Message Format (AMF) is a compact binary format that is used to serialize ActionScript object graphs. Once serialized an AMF encoded object graph may be used to persist and retrieve the public state of an application across sessions or allow two endpoints to communicate through the exchange of strongly typed data.

AMF was introduced in Flash Player 6 in 2001 and remained unchanged with the introduction of Actionscript 2.0 in Flash Player 7 and with the release of Flash Player 8. This version of AMF is referred to as AMF 0. In Flash Player 9, Action Script 3.0 was introduced along with a new Actionscript Virtual Machine (AVM+) – the new data types and language features made possible by these improvements prompted AMF to be updated. Given the opportunity to release a new version of AMF, several optimizations were also made to the encoding format to remove redundant information from serialized data.

Why AMF?

1. AMF is a compact binary format which means few bits to be transferred from the server to the client.
2. Using AMF you can call methods from the server as the method would be in you Actionscript code.
   In my opinion these two are the main advantages of AMF. There are others advantages as well that you may find important.

Some stats about AMF and its concurrent protocols available can be seen on James Ward’s Census Application (http://www.jamesward.com/census).

What you need

In order to complete this article you need the following things:

1. Flash Builder 4 (http://labs.adobe.com/technologies/flashbuilder4) or other IDE with Flex 4 SDK
2. AMFPHP (http://www.amfphp.org)
3. Local LAMP server (ex: Zend Server Community Edition, XAMPP, WAMP, etc)

Once you have those requirements satisfied we can go on.

At this moment the last version of AMFPHP is 1.9.

Setting up the server side

First of all create a folder in your htdocs or an alias so the web services, will be made available through your installed web server. In that place create a folder called webservices. Copy everything (but not the .htaccess file) that is in amf folder of the AMFPHP archive downloaded from amfphp.org to webservices folder. All your PHP web services will be in webservices/services folder.

Another thing to know is that you may need to put a crossdomain.xml file so the resulting swf file will be able to connect to the web services.

On same level with the webservices folder create _uploads folder (include the first underline). In this folder we will save our uploaded files.

This should be enough for now and we will go further to the next step.

Creating our upload web service

Create a new php file in webservices/services folder called upload.php. This will be the file that will contain our upload class and its methods and all its methods will be available in our flex upload application.

Create a class called upload as the file’s name. This class will have only one method named uploadFiles.

This method takes an object ($fileData) as parameter. This object contains the filename ($fileData["filename"]) and the file content as byte array ($fileData["filedata"]). The method gets those two and saves the file on the server location. It always returns true if it doesn’t crash. In case of a crash that means the file is not saved or an error is in our web service in which case we assume that the file is not saved. See upload.php bellow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class upload {
 
    // method saves files on the server
    function uploadFiles($fileData) {
        // new file path an name
        // to not overwrite the files we add the microtime before the file name 
        $myFilePath = '../../_uploads/'.
            preg_replace("/[^0-9]+/","_",microtime()).'_'.$fileData["filename"];
        // writing on the disk
        file_put_contents($myFilePath, $fileData["filedata"]);
        // returning response - is not used anywhere 
        return true;
    }    
 
}

Getting into the client side

We will use the Spark components of the Flex 4 SDK. This will ease up a lot the development needed to finalize our application. The states will help us a lot.

Bellow in you can see the content of my MultipleFileUploadUsingAMFPHP project.

Let’s look at the attributes of declaration which contains the paths and settings to reach to our upload web service. Our web service file is called upload.php and can be found in webservices/services/ folder. The url to our web server location is http://localhost/multiplefileupload/.

• endpoint: this must point to gateway.php; in our case the url is http://localhost/multiplefileupload/webservices/gateway.php
• source: this is the filename of the PHP file containing the web service without the “.php” extension; in our case is upload
• destination: is the method from the file and class defined in source; in our case uploadFiles

These three are the attributes to reach the web service. Of course we set up the result and fault event handlers, the id and the showBusyCursor to true to visually show that the application is working.

Now we will define four states that will display different components depending of the state we are in.

1. initUpload: the first state that will be displayed at starting

   

2. beforeUploading: this will show the list with the files chosen and some buttons

   

3. inUploadProcess: this will show the progress and will have a button for canceling the process

   

4. uploadFinalized: this will show all the files and the finalized button

   

Next we will have a panel that will contain a Spark list and a few buttons that will appear according to the state we are in. I will not stop explaining about the new features of Flex 4 SDK and Flash Builder 4 because that is over our scope for now.

A bit of theory – how the upload process work

Now I want to explain how the upload process will work. The whole process is based on a stack idea. Files are uploaded one at a time. After the current file is uploaded or it has failed the next one will take its place and will be processed.

All files that have been chosen for upload are stored in a FileReferenceList object (_refAddFiles). We will iterate through it and we will add each FileReference object to _arrUploadFiles array collection. This array collection is used to display the files in a list and iterate through it to process each file reference object.

The process is started calling startUpload() method. These are the steps taken for each file reference object from _arrUploadFiles array collection:

1. We add a complete event to current file reference
    

   _arrUploadFiles[_numCurrentUpload].data.addEventListener(
       Event.COMPLETE, handleFileLoadedComplete
   );

2. We instruct it to load the file in the application memory
    

   _arrUploadFiles[_numCurrentUpload].data.load();

3. When the file is loaded into the memory handleFileLoadedComplete is triggered
4. After the file is loaded into the memory we can read the content of the file
    

   var tmpFileContent:String = 
       fileRef.data.readUTFBytes(fileRef.data.length);

5. We call the upload web service
    

   myUploadService.uploadFiles(
       {filedata:tmpFileContent, filename:fileRef.name}
   );

6. The upload web service which is defined at the beginning with the tag will trigger one of its event handlers:
   • result event if it is a success – myUploadService_resultHandler
   • fault event if it is a failure – myUploadService_faultHandler
7. Result event will show in the list if the upload was successful with a green dot and the fault event will show that it has been an error and a failure with a red dot
8. The current file number is incremented and the process is started again with startUpload() method

These are the steps taken for each file contained in a file reference object from _arrUploadFiles array collection.

You should notice that you need to use readUTFBytes method to get the content of the file and send them through the web service. Also you will be able to read the data of a file reference (fileRef.data) only after the files is loaded. This means that load() method must be called and the when the load is complete a complete event is triggered. After this the fileRef.data is available.

The main application code listing can be seen in the source archive. I will not put the whole code here because has lots of lines.

About the custom list item renderer

In order to display a feedback icon for each file we have to create a custom item renderer for our Spark list control. We tell the list that we are using a custom item renderer by specifying the item renderer attribute like bellow:

itemRenderer="com.flexer.CustomListItemRenderer"

We won’t go deep into the inner things of the custom component only just to specify that the icon is added at the end like this:

<s:BitmapImage id="icon"
        source="{data.ico}"
        verticalCenter="0"
        right="3" />

The image is taken from data object which is present in each item of the list, and is horizontally aligned at 3 pixels from right. You can see the whole component code bellow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="CustomListItemRenderer"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    focusEnabled="false">
 
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override public function set labelText(value:String):void {
                super.labelText = value;
                labelDisplay.text = labelText; 
            }
        ]]>
    </fx:Script>
 
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke.normalAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.normalAndShowsCaret>
        <s:stroke.hoveredAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.hoveredAndShowsCaret>
        <s:stroke.selectedAndShowsCaret>
            <s:SolidColorStroke color="{selectionColor}" weight="1"/>
        </s:stroke.selectedAndShowsCaret>
        <s:fill>
            <s:SolidColor color.normal="{contentBackgroundColor}"
                color.normalAndShowsCaret="{contentBackgroundColor}"
                color.hovered="{rollOverColor}"    
                color.hoveredAndShowsCaret="{rollOverColor}"
                color.selected="{selectionColor}"
                color.selectedAndShowsCaret="{selectionColor}" />
        </s:fill>
    </s:Rect>
 
    <s:SimpleText id="labelDisplay"
        verticalCenter="0"
        left="3" right="3" top="6" bottom="4"/>
    <!-- our mini dot icon showing the state of the file -->
    <s:BitmapImage id="icon"
        source="{data.ico}"
        verticalCenter="0"
        right="3" />
 
</s:ItemRenderer>

This icon is set from the main application where three dot icons are embedded.

[Embed(source="assets/bullet_empty.png")]
private var _icoUploadNotStarted:Class;            
[Embed(source="assets/bullet_green.png")]
private var _icoUploadSucces:Class;            
[Embed(source="assets/bullet_red.png")]
private var _icoUploadFailed:Class;

{data.ico} contains the embedded icon.

Conclusion

AMF is a powerful data protocol and can be used for any kind of transfer. It has lots of advantages and is by far the most parsimonious protocol freely available.

Source files are available at the end of this article. Two zip archives and an fxp file exported from my Flash Builder 4 which contains also the php files (I used Flash Builder 4 with PDT and Zend Debugger).

Resources

http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf
http://www.amfphp.org/
http://www.amfphp.org/docs2/index.html
http://framework.zend.com/manual/en/zend.amf.html
http://www.themidnightcoders.com/products/weborb-for-net/overview.html
http://www.themidnightcoders.com/products/weborb-for-rails/overview.html
http://labs.adobe.com/technologies/flashbuilder4/
http://en.wikipedia.org/wiki/Action_Message_Format
http://www.zend.com/en/products/server-ce/
http://www.apachefriends.org/en/xampp.html
http://www.wampserver.com/en/download.php
http://sourceforge.net/project/showfiles.php?group_id=72483&package_id=257933
http://www.jamesward.com/census/