All I don't know » Flex

FFK11 – beyond tellerrand notes

derRaab — Fri, 08 Apr 2011 22:03:46 +0000

I’m still not sure if “beyond tellerrand” is a subtitle or will become the new brand for the one and only Flashforum conference here in germany. Sascha Wolter and Marc Thiele did a great job as always and even I never went to another conference, FFK seems still to be a special one. Again I was lucky listening to some really cool stuff.

Interestingly most of my last year notes are still up to date, which doesn’t help if you don’t keep them in mind. So I think it’s a good idea to read my own notes from time to time.

That’s what I became aware of this time:

AIR 2.6

Lee Brimelow mentioned AIR 2.6 on iOS is faster than on Android! Yeah.
Adobe is working hard on increasing performance near to native code.
Installing a runtime seems to be annoying for Android users, so Adobe is thinking about compiling for Android like for iOS. Which might bring some extra performance as well.
I asked Lee Brimelow about AIR on Windows Phone 7 and he said something like “Adobe is currently not working on that and it would be a lot of work”. Well, of course Microsoft is not interested having AIR on their system, but it would be a really important platform for all of us. So in my opinion Adobe at least has a small team checking out what’s possible. What do you think about Windows Phone 7 and AIR support?

Flex Builder 4.5

You can get Flex SDK 4.5 already, but there’s also a way to join the private pre-release program to get early access to Flex Builder 4.5. Just visit http://www.surveymonkey.com/s/flexprerelease. They are working on some useful stuff and it might be a good idea to test some of the new features.
Deepa Supramaniam mentioned spark MXML skins have performance issues on mobile devices. That’s why they created pure ActionScript spark skins for mobile applications. Hopefully, within the private beta Flex SDKs, we’ll find some great improvements: http://www.riagora.com/2011/03/preview-of-flex-on-ios/.

NUI

Wolfgang Henseler (Talk I missed at FFK10) opened my mind according NUI.
Don’t think of apps on mobile devices but of services allowing you reaching your goal faster than a website.
Think about providing services, combining them, rethinking them.
Use less design and let objects provide their functionalities (e.g. tap on image to get some options).
My brain is very busy with that NUI thing. E. g. he mentioned the Siri iPhone app. It’s not about how it looks like (not so cool) but how it works! Combining lots of possibilities with a really easy interface (speech) . He was also talking about “in body technology” (sensors and stuff like that.) and http://www.tedmed.com/
After Dennis Ippels Kinect (OpenKinect / http://www.primesense.com/) introduction I finally know something about the magic behind this device as well.

Molehill

http://tinyurl.com/molehilldemos. What can I say. Molehill performance is stunning (for the web).
And keep in mind that you need to set wmode="direct" within your HTML settings! Otherwise you won’t get hardware acceleration.
Molehill itself is way to low level for most of us. So we’ll use 3D frameworks as we did before.
Away 3D currently seems to be the weapon of choice.
David Lenaerts gave us some real insights. Thanks, man!
And if you’re using FDT you should check out: http://blog.powerflasher.de/macht-euer-fdt-molehill-ready/ (german).

Additional useful links:

http://www.appannie.com/
http://flixel.org/
http://pushbuttonengine.com/ (like last year!;)

Flex 4 DragManager.doDrag() with .acceptDragDrop() error

derRaab — Fri, 14 Jan 2011 11:06:44 +0000

While diving into the Flex 4 spark framework I ran into a problem using

mx.managers.DragManager.doDrag() with
mx.managers.DragManager.acceptDragDrop():

If you just drag, accept on dragDrop and then drop without moving the mouse you’ll get this error:

TypeError: Error #1009:
at mx.managers.dragClasses::DragProxy/mouseUpHandler()
[E:\dev\4...\mx\managers\dragClasses\DragProxy.as:591]

This is, because DragProxy didn’t receive a MouseEvent yet. So what you can do is manually send one. See this little use case and test for yourself:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
 
            applicationComplete="construct()"
            height="100%"
            width="100%">
    <fx:Script>
        [CDATA[
            import mx.controls.Alert;
            import mx.core.DragSource;
            import mx.core.UIComponent;
            import mx.managers.DragManager;
 
            private function construct() : void
            {
                // Get notified whan a global error occurs
                loaderInfo.uncaughtErrorEvents.addEventListener( UncaughtErrorEvent.UNCAUGHT_ERROR, errorHandler );
            }
 
            private function onButtonMouseDown( event : MouseEvent ) : void
            {
                var button : UIComponent = UIComponent( event.target );
                var dragSource:DragSource = new DragSource();
 
                DragManager.doDrag( button, dragSource, event );
 
                // Accept dragDrop
                if ( acceptDragDropCheckBox.selected )
                {
                    DragManager.acceptDragDrop( this );
                }
 
                // Avoid error
                if ( avoidErrorCheckBox.selected )
                {
                    button.dispatchEvent( new MouseEvent( MouseEvent.MOUSE_MOVE, true,false, button.mouseX, button.mouseY ) );
                }
            }
 
            protected function errorHandler( e : UncaughtErrorEvent ) : void
            {
                Alert.show("An error has occurred and been caught by the global error handler: " + String( e.error ), "My Global Error Handler");
                e.preventDefault();
            }
        ]]>
    fx:Script>
    <s:Label x="20" y="10" text="If you accept dragDrop you need to avoid the error!"/>
    <s:CheckBox id="acceptDragDropCheckBox" x="20" y="30" label="Accept DragDrop"/>
    <s:CheckBox id="avoidErrorCheckBox" x="20" y="50" label="Avoid error"/>
    <mx:Button id="dragButton" x="20" y="110" mouseDown="onButtonMouseDown(event)" label="Drag me. Or click me for error!"/>  
s:Application>

UPDATE:

A much better way to avoid this error is listening to a DragEvent.DRAG_ENTER before calling DragManager.acceptDragDrop():

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
 
            dragEnter="dragEnterDataRenderer(event)"
 
            height="100%"
            width="100%">
    <fx:Script>
        [CDATA[
            import mx.core.DragSource;
            import mx.core.UIComponent;
            import mx.events.DragEvent;
            import mx.managers.DragManager;
 
            private function onButtonMouseDown( event : MouseEvent ) : void
            {
                var button : UIComponent = UIComponent( event.target );
                var dragSource:DragSource = new DragSource();
 
                DragManager.doDrag( button, dragSource, event );
            }
 
            private function dragEnterDataRenderer( event : DragEvent ) : void
            {
                DragManager.acceptDragDrop( this );
            }
        ]]>
    fx:Script>
    <mx:Button id="dragButton" x="20" y="20" mouseDown="onButtonMouseDown(event)" label="Click me. Drag me. No Error."/>  
s:Application>

Open Source Media Framework 1.0

derRaab — Fri, 28 May 2010 12:30:19 +0000

Adobe recently released OSMF version 1.0! Again just some links:

OSMF Blog – Announcing OSMF 1.0!
Source ZIP
Release Notes PDF
ASDocs ZIP

Flash Performance Visualizer

derRaab — Wed, 26 May 2010 17:43:48 +0000

Mr.doop’s Hi-ReS! Stats is a must have for every ActionScript developer. Seems to be still no. 1!
And I don’t want to search again… So here just the links:

Mr.doop’s blog | Hi-ReS! Stats
~~Mr.doop’s Stats.as @ GitHub~~

Update – Most recent version I found:
http://code.google.com/p/mrdoob/source/browse/trunk/libs/net/hires/debug/Stats.as

Undocumented XMLUtil class in Adobe Flash CS5?

derRaab — Tue, 18 May 2010 09:39:14 +0000

I tried to recompile an older Flash CS 4 project with Flash CS 5 but got this compile time error 1061: Call to a possibly undefined method reuseNodes through a reference with static type Class caused by the usage of one of my utility classes:

This didn’t work

import de.superclass.util.XMLUtil;
...
XMLUtil.someMethod();

This still works

...de.superclass.util.XMLUtil.someMethod();

So there was no error in my class because it’s still usable when I use the full class package but it didn’t work when I just import it with the import statement.

After some research I found an undocumented XMLUtil class which avoids the correct access to my de.superclass.util.XMLUtil class.

This class doesn’t exist in Flash CS 4 but is available in Flash CS 5. Simply create a new FLA in Flash CS 5 an run this code on timeline

trace( describeType( XMLUtil ) );

and you’ll get this result:

 name="XMLUtil" base="Class" isDynamic="true" isFinal="true" isStatic="true">
   type="Class"/>
   type="Object"/>
   name="kAttrYMin" type="String"/>
   name="kAttrXMax" type="String"/>
   name="kAttrYMax" type="String"/>
   name="kAttrObj0" type="String"/>
   name="kAttrObj1" type="String"/>
   name="kAttrX0" type="String"/>
   name="kAttrY0" type="String"/>
   name="kAttrX1" type="String"/>
   name="kTagGravity" type="String"/>
   name="kAttrY1" type="String"/>
   name="kTagCollideSpace" type="String"/>
   name="kAttrType" type="String"/>
   name="kTagRigidBody" type="String"/>
   name="kAttrPin" type="String"/>
   name="kTagRect" type="String"/>
   name="kAttrSlider" type="String"/>
   name="kTagJoint" type="String"/>
   name="kAttrLength" type="String"/>
   name="kTagSpring" type="String"/>
   name="kAttrStrength" type="String"/>
   name="kTagFrames" type="String"/>
   name="kAttrDamping" type="String"/>
   name="kTagFrame" type="String"/>
   name="kAttrSimSpeed" type="String"/>
   name="kTagFluid" type="String"/>
   name="kAttrAxis" type="String"/>
   name="kTagEmitter" type="String"/>
   name="kAttrAsset" type="String"/>
   name="kTagOrigin" type="String"/>
   name="kAttrSpring" type="String"/>
   name="kTagKeyframes" type="String"/>
   name="kAttrSpringStrength" type="String"/>
   name="kTagKey" type="String"/>
   name="kAttrSpringDamping" type="String"/>
   name="kTagView" type="String"/>
   name="kTagGeom" type="String"/>
   name="kAttrIndex" type="String"/>
   name="kAttrCollideType" type="String"/>
   name="kAttrCellSize" type="String"/>
   name="kAttrSpringValue" type="String"/>
   name="kAttrCollideSpace" type="String"/>
   name="kAttrRowDimen" type="String"/>
   name="kAttrDensity" type="String"/>
   name="kAttrColDimen" type="String"/>
   name="kAttrPosX" type="String"/>
   name="kAttrTimeStep" type="String"/>
   name="kAttrPosY" type="String"/>
   name="kAttrTime" type="String"/>
   name="kAttrAngle" type="String"/>
   name="kAttrColor" type="String"/>
   name="kAttrVelX" type="String"/>
   name="kAttrStrokeColor" type="String"/>
   name="kAttrVelY" type="String"/>
   name="kAttrAlpha" type="String"/>
   name="kAttrVelA" type="String"/>
   name="kAttrFPS" type="String"/>
   name="kAttrCOR" type="String"/>
   name="kAttrSprings" type="String"/>
   name="kAttrCOF" type="String"/>
   name="kAttrLimits" type="String"/>
   name="kAttrFixed" type="String"/>
   name="kAttrMinAngle" type="String"/>
   name="kAttrID" type="String"/>
   name="kAttrDBlend" type="String"/>
   name="kAttrPoseStrength" type="String"/>
   name="kAttrPoseDamping" type="String"/>
   name="kAttrBodyDamping" type="String"/>
   name="kAttrX" type="String"/>
   name="kAttrY" type="String"/>
   name="kAttrXMin" type="String"/>
   name="prototype" access="readonly" type="*" declaredBy="Class"/>
   name="nodeHasAttribute" declaredBy="XMLUtil" returnType="Boolean">
     index="1" type="XML" optional="false"/>
     index="2" type="String" optional="false"/>
  >
   name="getIntAttribute" declaredBy="XMLUtil" returnType="int">
     index="1" type="XML" optional="false"/>
     index="2" type="String" optional="false"/>
     index="3" type="int" optional="true"/>
  >
   name="getNumberAttribute" declaredBy="XMLUtil" returnType="Number">
     index="1" type="XML" optional="false"/>
     index="2" type="String" optional="false"/>
     index="3" type="Number" optional="true"/>
  >
   name="getBoolAttribute" declaredBy="XMLUtil" returnType="Boolean">
     index="1" type="XML" optional="false"/>
     index="2" type="String" optional="false"/>
     index="3" type="Boolean" optional="true"/>
  >
   name="getStringAttribute" declaredBy="XMLUtil" returnType="String">
     index="1" type="XML" optional="false"/>
     index="2" type="String" optional="false"/>
     index="3" type="String" optional="true"/>
  >
   type="XMLUtil">
     type="Object"/>
  >
>

So I had to rename my class to de.superclass.util.XMLUtils.

You might run into the same problems when using mx.utils.XMLUtil (Flex Framework) or com.adobe.utils.XMLUtil (AS3CoreLib) but I didn’t test it!

UPDATE:
I found XMLUtil classes in
Adobe Flash CS5/Common/Configuration/ActionScript 3.0/libs/ik.swc and
Adobe Flash CS5/Common/Configuration/ActionScript 3.0/libs/PffLib.swc

Removing the $(AppConfig)/ActionScript 3.0/libs directory within the ActionScript export settings avoids the problem. But I have no time to test if this directory is necessary. If you run into problems please leave me a comment!

Aligning Flash TextField instances visually correct

derRaab — Sun, 16 May 2010 01:44:12 +0000

I was looking for an easy way to align TextField instances with different font sizes visually correct. I really thought this wouldn’t take much time but it turned out to become really frustrating.

So think about a simple scenario: Try to align two TextField instances with different font sizes side by side. If you just set the TextField.y property to the same value you will recognise that different font sizes have different top margins. Well, you might fix that by hand if you have a static layout but what if you don’t know what kind of Text will be displayed? In my case I needed to align text always on top with the same margin regardless of the headline font size.

I tried hard to get this done by using different methods provided by the TextField class. Then I tried to work with the TextLineMetrics class as well. Nothing worked properly for me. I needed to work with CSS formatted HTML text so I was looking for a margin-top style or something similar. Not available. Hm.

Then I remembered my solution about finding the alpha bounds within external loaded PNG files and used that. Well, the main downside is that I need to create a BitmapData instance to determine the exact text bounds but otherwise it worked out very well.

It all comes down to two simple methods that will slip into my library. At the end you will receive a rectangle representing the bounds on the TextField instance.

If you know a different way to obtain the same exact result please leave me a comment!

Here’s my solution:

function getDisplayObjectAlphaBounds( displayObject : DisplayObject, smoothing : Boolean = true ) : Rectangle
{
    var bitmapData : BitmapData = new BitmapData( displayObject.width, displayObject.height, true, 0 );
        bitmapData.draw( displayObject, null, null, null, null, smoothing );
 
    var alphaBounds : Rectangle = bitmapData.getColorBoundsRect( 0x01000000, 0x01000000 );
 
    bitmapData.dispose();
 
    return alphaBounds;
}
 
function getTextFieldTextBounds( textField : TextField, smoothing : Boolean = true ) : Rectangle
{
    var background : Boolean = textField.background;
    var backgroundColor : uint = textField.backgroundColor;
    var border : Boolean = textField.border;
    var borderColor : uint = textField.borderColor;
    var opaqueBackground : Object = textField.opaqueBackground;
 
    textField.background = false;
    textField.border = false;
    opaqueBackground = null;
 
    var textBounds : Rectangle = getDisplayObjectAlphaBounds( textField, smoothing );
 
    textField.background = background;
    textField.backgroundColor = backgroundColor;
    textField.border = border;
    textField.borderColor = borderColor;
    textField.opaqueBackground = opaqueBackground;
 
    return textBounds;
}
 
var textFormat : TextFormat = new TextFormat();
    textFormat.align = TextFormatAlign.CENTER;
    textFormat.color = 0x0000FF;
    textFormat.font = "Arial";
    textFormat.size = 30;
 
var textField : TextField = new TextField();
    textField.border = true;
    textField.borderColor = 0x0000FF;
    textField.background = true;
    textField.backgroundColor = 0x000022;
    textField.defaultTextFormat = textFormat;
    textField.height = 260;
    textField.text = "\nThis text\ncan be\naligned\nproperly!";
    textField.width = 300;
    textField.x = 30;
    textField.y = 30;
 
addChild( textField );
 
// Get bounds
var textBounds : Rectangle = getTextFieldTextBounds( textField );
 
// Draw bounds
var shape : Shape = new Shape();
    shape.x = textField.x;
    shape.y = textField.y;
 
var g : Graphics = shape.graphics;
    g.lineStyle( 1, 0x00FFFF );
    g.drawRect( textBounds.x, textBounds.y, textBounds.width, textBounds.height );
 
addChild( shape );

FFK10 – Flashforum conference notes

derRaab — Tue, 20 Apr 2010 12:59:10 +0000

Every year I spend two days sitting in the audience of the Flashforum conference (FFK) listening to great speakers and getting impressed by their experiments and thoughts. It’s also a good way to renew some of the basic knowledge in Flash development and of course to meet some friends in the Flash scene.

So this are most of my notes:

Flash / Flex development:

Jessee Freemans Flash Augmented Reality Debug Tool provides an easy way to start with augmented reality development.
Use stunning Hype-Framework effects.
Dive into dynamic sound generation with André Michelles Audio-Sandbox.
Have a look at the PushButton-Engine for component based development.
Remember that Flex 4 includes a lot of performance features! It’s highly recommended to switch as soon as possible. For example the Embed-tag reduces PNG file size and lots of improvements are made within the Flex components.
Watch the Adobe TV video preview: Flex for mobile devices
See Christian Cantrell’s blogpost One Application , Five Screens (Including the iPad)
Great tip: ByteArray.org – Why cacheAsBitmap is bad
Adobe’s Mobile Development Guide for the Flash platform (applies also to desktop applications) contains performance tips like:
- DisplayObject.width / height should be divisible by 2 as often as possible
- Try to avoid Events and / or stop propagation as soon as possible
- Set DisplayObject.mouseEnabled=false if possible
- Stop MovieClip animations when removed from stage
- Use TextField.opaqueBackground=true if possible
- Use final statement (final class ClassName {})
- Use BitmapData.get / setVector()

HTML / JavaScript basics:

Use “Sprites” with HTML / CSS (load only one bitmap graphic containing all the asset images for your page and show only the particular relevant parts) and preload next page assets using AJAX while your current page is idle.
Since usually only 2 simultaneous domain http requests are supported by browsers it’s a good practice to distribute contents from various ip addresses (use asset-servers for example).
Load only visible parts of your site using JavaScript viewport events.

Useful workflow utils:

Subversion Server – Hosting
Omni Focus – Personal task management
Planning Poker – Consensus-based estimation technique for estimating
Pivotal Tracker – Agile project management tool
IDEO Method Cards – iPhone application
Basecamp – Get projects done

Flash and Amazon SimpleDB

derRaab — Fri, 26 Mar 2010 21:05:28 +0000

I did some research about using Amazons SimpleDB service within a Flash based application and found these basic facts:

http://sdb.amazonaws.com/crossdomain.xml is not available. This means no direct calls from Flash clients in browsers are possible!
Even if it would be possible some day, you would need to find a secure way to deliver your AWS key to the Flash client.
Using a web proxy is a solution that would cause a lot of traffic on your server.

So using Amazons SimpleDB for browser based Flash applications makes not much sense to me.
It might be more useful for Flash applications running on local machines like Flash projectors or Adobe AIR applications but there is still a security problem with hiding your AWS key.

Anyway, I found two ActionScript libraries that might be useful:
http://code.google.com/p/actionscript-simpledb-library/
http://developer.amazonwebservices.com/connect/entry.jspa?externalID=1365

And this thread in Amazons discussion forums:
http://developer.amazonwebservices.com/connect/thread.jspa?threadID=19698

ActionScript 3 API Reference for the iPhone

derRaab — Fri, 29 Jan 2010 09:08:40 +0000

http://www.mikechambers.com/as3iphone/

Nice to have!

Create Custom Flex Components with Flash

derRaab — Thu, 09 Apr 2009 16:52:49 +0000

I found a Adobe TV Video which contains basic knowledge how to create custom Flex components with Flash CS3: