Jozef Chúťka's blog » Flex

Quick tip: Embedded MovieClip not MovieClip?

Jozef Chúťka — Thu, 06 May 2010 10:14:46 +0000

When embedding MovieClips (with only one frame) from Flash .swf file into your Flex projects, you can fall into runtime issues:

[Embed(source="assets/preloader.swf", symbol="preloader")]
public static const PRELOADER_CLASS:Class;
MovieClip(new Assets.PRELOADER_CLASS());

TypeError: Error #1034: Type Coercion failed: cannot convert *** to flash.display.MovieClip.

Why coercion failed when my symbol is for sure MovieClip? The answer is simple:

Flash will type the symbol based on the number of frames in it’s timeline. If the symbol has only 1 frame it will be typed as a Sprite, 2 or more frames it will be typed as a MovieClip.

Possible solutions:

add 1 more frame (so the frame count is more than 1)
or cast embedded asset as flash.display.Sprite (prefered while there is no need for MovieClip with one usable frame + Sprite container consumes less memory)

The day is saved thanks to Felix Turner.

Flex Charts – interpolating values in Series

Jozef Chúťka — Fri, 04 Dec 2009 10:12:16 +0000

Recently, I felt into problem with chart when using interpolateValues parameter set to true. You expect it to work as described in Language Reference. And guess what, it works , but make sure you provide correct numeric values (not strings – those were problematic in my case). Parameter interpolateValues is able to draw a continuous line by interpolating the missing value. Missing values means null (v1 in example) or when key is omited (v2).

If you want to use Charts in Flex, download data visualization components for your flex builder and copy content into sdk directory.

Notice numeric vs. string values in dataProvider. Result:

9 slice scale for bitmaps in flash (no hacks)

Jozef Chúťka — Sun, 15 Nov 2009 10:37:22 +0000

9 slice scale is a nice feature, but when you try to use 9 slice in flash ide on MovieClip with bitmap, you will notice a problem. It will just not work as expected. So first thing you try is “Break Apart”, with same result. You are almost there, but due to the solution is not documented you need a small hint: After break apart (ctrl + b), select each of nine slices one by one and group (ctrl + g) individually and voilà its done. See snapshot and result images…

1. original image.png

2. symbol after break apart

3. symbol2 after break apart and individual grouping

4. result in flash cs4 ide symbol, symbol2

5. 9 slice scale in flex (maintainAspectRatio used just for purpose, no impact on 9 slice scale)

6. result from flex

gSkinner released BitmapSlice9 command for Flash Pro. It makes all this happen by one click.

Flex 3 profiling not working (update)

Jozef Chúťka — Thu, 29 Oct 2009 16:03:53 +0000

The profiler is a part of the Flex Builder IDE, that listens for messages from the profiler agent. The profiler agent is a swf launched in parallel to your main swf. It is located in your Flex workspace at .metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf. Your IDE gets this agent to start by editing your mm.cfg and adding a “PreloadSwf” line. The agent uses the flash.sampler.* API to gather data on your main swf, and sends it to the IDE using TCP on a preconvened port. This port is 9999 by default, you can change it in Preferences/Flex/Profiler/Connections.

If you can not get your profiler working, there are few methods you should try:

close all other tabs
install debug player
change browser
change port
disable firewall / antivirus
define PreloadSwf path
localhost / 127.0.0.1
allocate console
ultimate methods (what worked for me)

Update (Feb 12, 2010): Close all other tabs

Fastest thing to do is to close all other tabs in your browser, close all other instances of browser and than try profile again.

Install debug player

Make sure you have installed debug version of flash player. Well, you probably have… so skip this one.

Change browser

It may seem to be weird but it works. All browsers (chrome, opera, ff) except for internet explorer use same flash player, switching to any other browser may fix your profiling. You can change browser in flex / window / preferences / general / web browser / use external / add …

Change port

Try change default port (flex / window / preferences / flex / profiler / connections / port number) to something else (7777, 8888), there were reports that simple port change helped to solve problem.

Disable firewall / antivirus

Do this on your own, if you are not sure about what you are doing call admin. The aim is to unblock port that is used for profiling. Try disable default windows (os) firewall or make exception. To make exception on your eset smar security use following procedure:

Open Smart Security.
If you are in standard mode and do not see a menu in the top right hand corner click Setup->Toggle Advanced Mode.
Click on the ‘Enter entire advanced setup tree…’ link at the bottom.
Click Personal Firewall->Protocol Filtering.
Make sure ‘Enable application protocol content filtering’ is selected.
Below that select Redirect traffic for filtering->HTTP and POP3 ports.

Define PreloadSwf path

If your IDE does not edit your mm.cfg file properly, change PreloadSwf property in manually. This is undocumented, but adding the property manually is reported as working solution. Try add the following line to the file

PreloadSwf= C:/...flexworkspace/.metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf?host=localhost&port=9999

If you got the the path to the profile agent wrong. You can check this by looking in the flash text logs. If the preload went wrong, you should see a message like:

PreloadSwf paths must be local trusted: C:/...flexworkspace/.metadata/.plugins/com.adobe.flash.profiler/ProfilerAgent.swf?host=localhost&port=9999

Make sure path directs to local trusted area!

localhost / 127.0.0.1

If the profiler in Flash Builder does not work, check if localhost does resolve to 127.0.0.1 on your machine. If not fix the hosts file. – Mario Klingemann (quasimondo)

allocate console

If the Flash Profiler does not start: switch off “Allocate Console” in the Profile Configurations Common tab. – Mario Klingemann (quasimondo)

Ultimate methods (what worked for me)

I spent almost hour trying to figure out why my profiler wont connect in one workspace and works just fine in another even with same settings. I tried every mentioned method but niether worked. While randomly trying all methods I finally came to something new:

Profiling can only be performed on the debug version of an application.

What the hell? Of course I am using debug player and pushing “profile it” button so what is wrong? I tried reinstall player to other versions but did not worked. Well, if you were able to came this far you may wonder what solution I finally figurd out. It is definitely not elegant solution nor correct but works, thats why I called it ultimate . Click profile button as fast as you can (5 times in row) and behold! Randomly you get your profile perspective connected and working (if not, try few times)! So definitely a flex bug.

Sources:

Flex IFrame – Web browser in flash (update)

Jozef Chúťka — Mon, 19 Oct 2009 10:45:21 +0000

You can not have a web browser inside your web flash applications right? Well, you can! This solution uses html iframe to generate fake build in browser. So the behaviour of the browser in flash is the same as the one you are previewing this flash in (it is the same one). The best part of it is, you can manipulate with the position and size of this browser directly from flash. sk.yoz.html.IFrame solution was inspired by Alistair Rutherford, www.netthreads.co.uk.

sk.yoz.html.IFrame
FlexIFrame.js
Application
Application html

Flex Iframe application

Core of this thing is sk.yoz.html.IFrame class. It extends Canvas that is used to inherit properties and methods for positioning and sizing. There is one in order to make it work – every IFrame element must have id!

package sk.yoz.html
{
    import flash.events.Event;
    import flash.external.ExternalInterface;
    import flash.geom.Point;

    import mx.containers.Canvas;

    public class IFrame extends Canvas
    {
        public var methodResize:String = "FlexIFrame.resize";
        public var methodMove:String = "FlexIFrame.move";
        public var methodNavigate:String = "FlexIFrame.navigate";
        public var methodVisibility:String = "FlexIFrame.visibility";

        public var positionChanged:Boolean = false;
        public var sizeChanged:Boolean = false;

        private var _autoResize:Boolean = false;
        private var _url:String = '';

        public function IFrame()
        {
            super();
            addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler)
        }

        override public function set id(value:String):void
        {
            super.id = value;
        }

        protected function addedToStageHandler(event:Event):void
        {
            positionChanged = true;
            sizeChanged = true;
            invalidateProperties();
        }

        public function set autoResize(value:Boolean):void
        {
            _autoResize = value;
            if(value)
                addEventListener(Event.RESIZE, autoResizeHandler);
            else
                removeEventListener(Event.RESIZE, autoResizeHandler);
        }

        public function get autoResize():Boolean
        {
            return _autoResize;
        }

        protected function autoResizeHandler(event:Event):void
        {
            positionChanged = true;
            sizeChanged = true;
            invalidateProperties();
        }

        override protected function commitProperties():void
        {
            super.commitProperties();

            if(positionChanged)
            {
                var point:Point = localToGlobal(new Point(0, 0));
                callJS(methodMove, point.x, point.y);
                positionChanged = false;
            }

            if(sizeChanged)
            {
                callJS(methodResize, width, height);
                sizeChanged = false;
            }
        }

        public function set url(value:String):void
        {
            _url = value;
            callJS(methodNavigate, value)
        }

        public function get url():String
        {
            return _url;
        }

        protected function callJS(method:String, ... values):void
        {
            if(!id)
                throw new Error("IFrame id is not defined");
            var args:Array = [method, id];
            try
            {
                ExternalInterface.call.apply(ExternalInterface, args.concat(values));
            }
            catch(error:Error)
            {
                trace(error.message);
            }
        }

        override public function set visible(value:Boolean):void
        {
            super.visible = value;
            callJS(methodVisibility, value);
        }

        override public function set width(value:Number):void
        {
            super.width = value;
            callJS(methodResize, value, height);
        }

        override public function set height(value:Number):void
        {
            super.height = value;
            callJS(methodResize, width, value);
        }

        override public function set x(value:Number):void
        {
            super.x = value;
            var point:Point = localToGlobal(new Point(0, 0));
            callJS(methodMove, point.x, point.y);
        }

        override public function set y(value:Number):void
        {
            super.y = value;
            var point:Point = localToGlobal(new Point(0, 0));
            callJS(methodMove, point.x, point.y);
        }
    }
}

FlexIFrame.js is JavaScript file. It uses your flex IFrame id from to create (html iframe) or use html element (any element) with the same id (id in flash = id in html). So you can use your prefabricated html elements (banners etc).

var FlexIFrame = {
    get: function(id)
    {
        var iframe = document.getElementById(id);
        if(!iframe)
            return FlexIFrame.create(id);
        return iframe;
    },

    create: function(id)
    {
        var iframe = document.createElement('iframe');
        iframe.id = id;
        iframe.frameborder = 0;
        iframe.style.position = "absolute";
        iframe.style.zIndex = 1;
        iframe.style.border = "none";
        document.body.insertBefore(iframe, document.body.firstChild);
        return iframe;
    },

    resize: function(id, width, height)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.width = width + "px";
        iframe.style.height = height + "px";
    },

    move: function(id, x, y)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.left = x + "px";
        iframe.style.top = y + "px";
    },

    navigate: function(id, url)
    {
        var iframe = FlexIFrame.get(id);
        iframe.src = url;
    },

    visibility: function(id, visible)
    {
        var iframe = FlexIFrame.get(id);
        iframe.style.display = visible ? "block" : "none";
    }
}

This is simple applicationion presenting draggable TitleWindow with “web browser” inside:

Finally do not forget to add flexiframe.js into your .html file:

...

Update (Feb 8, 2010): flexiframe.js resize() method uses style property for width and height (instead of original html element width, height)

Embedding assets wisely

Jozef Chúťka — Wed, 14 Oct 2009 08:16:07 +0000

You can embed various types of assets in your Adobe Flex applications (.jpeg, .png, .swf, .mp3, .svg, .ttf …). Embedded assets are compiled into the SWF file of your Flex application. They are not loaded at run time and you do not have to deploy the original asset files with your application. Read more about embedding assets on Adobe.

Basics first. How to make your symbol from Flash library visible for Flex (see images on the bottom of the artice):

1. Create your symbol and linkage (library (Ctrl+L) / {your symbol} / Linkage…).
2. Linkage Properties, set your class name that will be used in [Embed] meta.
3. Export .swf file and make Assets.as.

It is very handy to use central assets class. This is how I make my assets accessible in Flex application:

package
{
    import mx.core.SpriteAsset;

    public class Assets extends Object
    {
        // change/to/your/uber/cool/path/and/filename.whatsoever
        // you can also embed graphic files (.jpeg, .png, )
        [Embed(source="../libs/assets.swf#symbol1")]
        public static const symbol1Class:Class;
        public static const symbol1SpriteAsset:SpriteAsset = new symbol1Class();

        [Embed(source="../libs/assets.swf", symbol="symbol2")]
        public static const symbol2Class:Class;

        // embedding Bitmap
        [Embed(source="../libs/image.png")]
        public static const imageClass:Class;
        public static const imageBitmap:Bitmap = new imageClass();

        public function Assets()
        {
            super();
        }
    }
}

There are two ways how to ask for your symbol from .swf library – 1. source=”…#symbol1″ or 2. source=”…” symbol=”symbol2″. Symbol name is whatever you set in Linkage Properties Class in Flash (not symbol name in library!).

Usage example:

Embedding proccess and example result in images:

Flash linkage symbol

Flash linkage properties

Flex embedded symbols

Update: ActionScript 3 singleton pattern

Jozef Chúťka — Thu, 08 Oct 2009 09:20:26 +0000

In software engineering, the singleton pattern is a design pattern that is used to restrict instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects (say, five). Some consider it an anti-pattern, judging that it is overused, introduces unnecessary limitations in situations where a sole instance of a class is not actually required, and introduces global state into an application. (wikipedia)

In search of the best actionscript 3 singleton pattern I came to this one. It uses private lock so user is not allowed to create new instance…

package
{
    public class MySingleton
    {
        private static const SINGLETON_LOCK:Object = {};
        private static const _instance:MySingleton = new MySingleton(SINGLETON_LOCK);

        public function MySingleton(lock:Object):void
        {
            if (lock != SINGLETON_LOCK)
                throw new Error("Invalid Singleton access. Use MySingleton.instance.");
        }

        public static function get instance():MySingleton
        {
            return _instance;
        }
    }
}

usage:

var singleton:MySingleton = MySingleton.instance;

Simplier method:

package
{
    public class MySingleton
    {
        private static const _instance:MySingleton = new MySingleton();

        public function MySingleton()
        {
            if(instance)
                throw new Error("Invalid Singleton access. Use MySingleton.instance.");
        }

        public static function get instance():MySingleton
        {
            return _instance;
        }
    }
}

Lazy instance:

package
{
    public class MySingleton
    {
        private static var _instance:MySingleton;
        private static var creationPhase:Boolean = false;

        public function MySingleton()
        {
            if(!creationPhase)
                throw new Error("Invalid Singleton access. Use MySingleton.instance.");
        }

        public static function get instance():MySingleton
        {
            if(!_instance)
            {
                creationPhase = true;
                _instance = new Singleton();
                creationPhase = false;
            }
            return _instance;
        }
    }
}