If another object changes the transformation matrix of a DisplayObject, the DisplayObject has no means to recognize that it has been transformed, as it is transformed automatically. E.g., there is no kind of TRANSFORMATION_MATRIX_CHANGED event that is dispatched on the DisplayObject. If your DisplayObject still should react on a change of its transformation matrix, a workaround is necessary, which is described in the following approach. I show a short solution at first and will explain the actual problem and solution approach in more detail afterwards.

DISCLAIMER: I found no solution where the change of the transformation matrix can be recognized without changing the object that actually does the matrix transformation. If you know or find one, be so kind to post it in the comments.

Short Solution:

Your DisplayObject called UpdateDetectionSprite:

1
2
3
4
5
6
7

public class UpdateDetectionSprite extends Sprite{
public override function set transform(value:Transform):void{
	super.transform = value;
	this.updated = true;
}
//…
}

Object that does the matrix transformation called ActionObject:

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

public class ActionObject{
private function performTransformation():void{
	var transformedSprite:UpdateDetectionSprite = new UpdateDetectionSprite();
	var transform:Transform = transformedSprite.transform; 
	var matrix:Matrix = transform.matrix;
 
	//do something with matrix, e.g., move object by translation
	matrix.translate(10,20);
 
	//assign matrix to Transform object
	transform.matrix = matrix;
	//assign changed transform object to your DisplayObject. your overriden 
	//setter will be called, causing the update flag to be set.
	transformedSprite.transform = transform;
}
}

Actual Problem:
I have a Sprite (called UpdateDetectionSprite) in which I want to be informed, when the object has been transformed (moved, rotated or scaled). To establish that, one part of the approach is to override the appropriate setters for x, y, width, height, scaleX, scaleY and rotation in UpdateDetectionSprite. However, if the UpdateDetectionSprite is modified when its transformation matrix is changed, the mentioned setters will NOT be called, so UpdateDetectionSprite will not be informed on a matrix change, it will automatically transformed. My first idea was to override the setter for the matrix in order to react on the assignment of matrix to UpdateDetectionSprite, but the matrix itself actually is not a property of DisplayObject but a property of DisplayObject’s transform property. So I overrode the transform setter in UpdateDetectionSprite. In order to inform UpdateDetectionSprite that its matrix has been changed, you additionally have to set the transform property in ActionObject that does the transformation (see listing 2). That approach works as well with UpdateDetectionSprite as with each other DisplayObject.

Complete UpdateDetectionSprite:

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
55
56
57
58
59
60
61
62
63
64

public class UpdateDetectionSprite extends Sprite{
 
private var _updated:Boolean;
 
public override function set transform(value:Transform):void{
	this.updated = true;
	super.transform = value;
}
public override function set x(x:Number):void{
	if(this.x != x){
		this.updated = true;
	}
	super.x = x;	
}
public override function set y(y:Number):void{
	if(this.y != y){
		this.updated = true;
	}
	super.y = y;	
}
public override function set rotation(rotation:Number):void{
	if(this.rotation != rotation){
		this.updated = true;
	}
	super.rotation = rotation;	
}
public override function set width(width:Number):void{
	if(this.width != width){
		this.updated = true;
	}
	super.width = width;	
}
public override function set height(height:Number):void{
	if(this.height != height){
		this.updated = true;
	}
	super.height = height;	
}
public override function set scaleX(scaleX:Number):void{
	if(this.scaleX != scaleX){
		this.updated = true;
	}
	super.scaleX = scaleX;	
}
public override function set scaleY(scaleY:Number):void{
	if(this.scaleY != scaleY){
		this.updated = true;
	}
	super.scaleY = scaleY;	
}
public function set updated(updated:Boolean):void{
	if(updated){
		this.addEventListener(Event.EXIT_FRAME, updatedSprite);
	}
	this._updated = updated;
}
protected function updatedSprite(event:Event):void{
	//do something
	//...
	//...
	updated = false;
	this.removeEventListener(Event.EXIT_FRAME, updatedSprite);
}
}

For testing purposes, I additionally tried to write a custom Transform object called UpdateDetectionTransform that inherits from Transform, assign it to UpdateDetectionSprite’s transformation property and override the matrix setter in UpdateDetectionTransform. I do not know why, but it is not possible to assign a custom Transform object to the transform property. This code

1
2

this.transform = new UpdateDetectionTransform(this);
trace(this.transform);

will print ‘[object Transform]‘ to the console. This means that the assignment of UpdateDetectionTransform to this.transform does not work. I do not know why. If you know why, post it in the comments please.

Alternatively to my outlined approach above, you could dispatch a custom event in ActionObject on UpdateDetectionTransform.

Recently I wondered how I can get rid of that “View Source” entry in the context menu of Adobe Air as I wanted to add my own context menu there.

It turned out that I had to remove all the source folder entries in the project’s run configuration (see in the image above).

As I work with Flex Builder 3 I downloaded and configured Air 2 with Flex SDK 3.4 accordingly to Adobe’s manual and everything worked and compiled nicely as well on Mac OS X as on Windows XP (yes, I tried both).

I tried to use UDP datagram sockets within my app (in order to get a direct TUIO connection via OSC/UDP), which are supported by Adobe Air beginning with Air 2. However, whenever I tried to start my compiled Air app in Flex Builder with the adl from Adobe Air 2 I got this error message:
VerifyError: Error #1014: Class flash.net::DatagramSocket could not be found. (with the additional stack trace).

I got rid of that message under Windows XP by following the hint by Adobe that the namespace in the app descriptor from Air has to be changed to Adobe Air 2 beta 2′s:

1

<application xmlns="http://ns.adobe.com/air/application/2.0beta2">

Now, my UDP datagram sockets work nicely under Windows XP. However, if I configure everthing accordingly under Mac OS X matters get worse. The app crashes and I get a native error stacktrace from the adl player.

In my opinion the implementation of the adl under Mac OS X is buggy, which is quite normal for a beta release. Thus, I filed an error message at Adobe’s website.

However, if you try to do the same and you get things working on Mac OS X it would be nice if you dropped me a comment.

By the way: I tried to use the new Touch functionality in Adobe Air 2 under Windows 7 with a HP Touchsmart and it works quite well (except there are no gestures supported as Windows 7 proposes them). Maybe, I find the time to write a follow-up article on this…

Update: It seems like the problem is not connected with Mac OS X but with my version of Flex Builder 3. I moved ahead to Flash Builder 4 beta 2 and now all the Adobe Air 2 beta 2 functionality works.

Recently I had the problem that my Flex code, which used the ResourceManager, would not find the resource bundle, which contained all resources for my application. However, the application compiled but it would always crash whenever the first time a resource should be loaded. I checked my compiler arguments a 1000 times but everything was correct and did work well in another Flex application. The problem was that my resource bundle was not present in the ResourceManager, it just did not load it.

My application did not have any UI elements just a visualization UIComponent that I wrote myself. Thus, I did not load any resources from my MXML. A some point I added a UI element (a Button) and tried to load a resource directly from that Button in order to see if it worked there:

1

<mx:Button label="@Resource(bundle='myResources', key='OBJECT')" />

And it worked fine in that Button and suddenly in the whole application as well. So it seemed to me that Flex refused to load the resource bundle if it was not referenced from the MXML. As I did not want to use an UI element in my application I looked for a workaround and stumbled upon this:

1
2
3

<mx:Metadata>
        [ResourceBundle("myResources")]
</mx:Metadata>

This piece of MXML code just needs to be added in the top of your Application or WindowedApplication in order to trigger the loading of the resource bundle.

What is UNFOCUS – FOCUS about?
How can we know what we do not see?

UNFOCUS – FOCUS is an interactive exhibition concept that tackles the filtering of media content. The focus of the work is a multi-touch table, which allows for the intuitive exploration of digital data with multi-touch.
Country specific picture worlds are being compared via Google search results. Known and unknown can be seen within different results. Multiple users can discuss possible reasons for this by exchanging their knowledge.

UNFOCUS – FOCUS is a multi-media multi-touch and fiducial application based on Flash. It has been created at the University of Cooperative Education Ravensburg as a Bachelor thesis’ work by Johannes Scherg and Farina Krause.

How has UNFOCUS – FOCUS been implemented?

Hardware components:

• Hitachi CP-X5 Projector with B&W Anti Infrarot Lowpass filter
• Sony PS3 Eye Webcam
• DI-Setup with 8x 45 850nm IR LEDs
• Gerriets Optitrans back-projection foil

Software components:

• tBeta 1.1
• reacTIVision 1.4
• SplitCam
• Adobe Flash

Flash frameworks:

• FiducialTUIOAS3
• Touchlib AS3-Klassen
• AS3CoreLib
• CustomEvent

A short video of UNFOCUS – FOCUS:

UNFOCUS FOCUS – Appetizer from Johannes Scherg on Vimeo.

Some more pictures:

The bridge TUIO → Flosc → Flash is now being replaced by the bridge TUIO → udp-tcp-bridge → Flash. The latter method renders the transformation of TUIO messages to a proprietary XML dialect obsolete. That speeds up the connection of the TUIO producer (e.g. Touchlib, CCV or Touché) to the Flash application itself (e.g. Vispol, Volvelles) and thus reduces lag.

Hopefully, TUIO producers will support the output of TUIO via TCP natively soon (as far as I know at least Touché does). However, you are on the safe side if you use memo’s cross platform, open source, C++ UDP TCP bridge.

The TCP tuio AS3 classes have been downloaded and adapted for the additional support of fiducials from Touchgateway.

So you can download fiducialtuioas3 in both flavors (via Flosc and via pure TCP TUIO) from the fiducialtuioas3 google code repoitory (on the right).

In the nuigroup there are a threads about fiducialtuioas3 here and here.

With a little workaround it is possible to load files into Flash in a way that it feels just as if you would do it with a common application: You are being asked with a standard system file dialog, which file you want to load in your application.

However, at first you have to park (i.e. upload) your file on a server in order to make it “publicly” available for your Flash app:

Figure 1: Howto save and load text files with AS3

But step by step. The procedure goes like this:

• You open up a file browser in Flash.
• The user chooses a file from your HD and clicks OK.
• The file is being uploaded from your HD to the server.
• Flash loads the file from the server in itself.

This code should do all the file handling in Flash for you:

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

private var fileRef:FileReference;
private const FILE_UPLOAD_URL:String = 
        "http://your-server.com/path/to/upload/flashUpload.php";
private const UPLOADED_XML_URL:String = 
        "http://your-server.com/path/to/upload/";
 
private function initializeFileRef():void{
    //FileReference allows you to open up system file chooser dialogs and 
    //to simply upload files on a webserver
    fileRef = new FileReference();
 
    //after a file has been chosen in the file chooser dialog the function 
    //fileSelected will be called.
    fileRef.addEventListener(Event.SELECT, fileSelected);
 
    //after the chosen file has been uploaded to the server the function 
    //uploadCompleted will be called
    fileRef.addEventListener(Event.COMPLETE, uploadCompleted);
}
 
/**
 * upload chosen file from file chooser dialog to server
 */
private function fileSelected(evt:Event):void {
	fileRef.upload(new URLRequest(FILE_UPLOAD_URL), "uploadFile");
}
 
/**
 * load uploaded file from server into flash
 */
private function uploadCompleted(evt:Event):void {
	var uploadedFileUrl:String = UPLOADED_XML_URL + fileRef.name;
	var message:String;
	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, downloadInFlashCompleted);
 
    loader.load(new URLRequest(uploadedFileUrl));
}
 
/**
 * file has been completely loaded into Flash. You can now do with it
 * whatever you want to do.
 */
private function downloadInFlashCompleted(evt:Event):void {
	trace(evt.target.data);
}

The script at http://your-server.com/path/to/upload/flashUpload.php should look like this:

1
2
3
4
5
6
7

<?php
move_uploaded_file($_FILES['uploadFile']['tmp_name'], 
    $_FILES['uploadFile']['name']);
#return something to flash. Otherwise the Event.Complete 
#listener will not trigger.
echo "somethingThatFlashGetsAResponseToItsRequest.";
?>

Download the Flash and the PHP example files.

However, as so often with Actionscript libraries there is NO documentation pertaining TwitterScript available on its Google code page, there is no example included in the source code and the source code is not commented. What could be so difficult about providing a little piece of code like this:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
      addedToStage="init()">
  <mx:Script>
    <![CDATA[
      import twitter.api.data.TwitterStatus;
      import twitter.api.events.TwitterEvent;
      import twitter.api.TwitterSearch;
        import twitter.api.Twitter;
 
      private static const TWITTER_USER:String = "stephenfry";
 
      private var _twitter:Twitter;
      private var _twitterSearch:TwitterSearch;
 
      private function init():void{
        _twitter = new Twitter();
        _twitterSearch = new TwitterSearch();
 
        _twitter.loadUserTimeline(TWITTER_USER);
        _twitter.addEventListener(TwitterEvent.ON_USER_TIMELINE_RESULT, 
            userTimelineResult);
 
        _twitterSearch.addKeyword("ipad");
        _twitter.addEventListener(TwitterEvent.ON_SEARCH, onSearchResult, 
            false,0,true);
        _twitter.search(_twitterSearch);
      }
 
      private function userTimelineResult(e:TwitterEvent):void {
        var twitterStatus:TwitterStatus;
        for (var i in e.data) {
          twitterStatus = e.data[i]
          trace("user tweets",twitterStatus.text)
        }
      }
 
      private function onSearchResult(event : TwitterEvent) : void{
        var twitterStatus : TwitterStatus;
        for (var i : int = 0; i < event.data.length; i++){
          twitterStatus = event.data[i];
          trace("search result:",twitterStatus.text);
        }
      }
    ]]>
  </mx:Script>
</mx:Application>

This example originates to Trevor Boyle’s blog. Improved by Kimi.

Thus, the Touchlib’s TUIO classes can simply be replaced with Frederic’s classes and everything should still work as before. However, there is one slight change in the package structure: the TUIO classes are now lying inside the package tuio and not in the package flash.events.

I have made Frederic’s Tuio Fiducial AS3 classes available on Google code in a project called fiducialtuioas3.

If you want to use reacTIVision fiducials in Flash, Flex or Adobe Air you are heartily invited to use these classes in your private and professional project.

Examples of what has been done so far with those classes:
Tangible Vispol
Pf Design Media Installation

If you have a nice project with fiducialtuioas3 it would be great if you shared a link with us via mail or in the comments.