Hi,  for example you have few components on the stage and you want to run different effects on them. So lets imagine we have label1, label2 and label3 and we want for example make label1 move to some place and after that animation is finished we will fade out label2 and label3 simultaneously.

So we can use Sequence and Parallel effects in Flex, to do this see code below:

<mx:Sequence >
	<mx:Move target="{label1}" yTo="0" duration="1500" />
	<mx:Parallel duration="2000">
		<mx:Fade target="{label2}" alphaTo="0" />
		<mx:Fade target="{label3}" alphaTo="0" />
	</mx:Parallel>
</mx:Sequence>

So why I’m telling this ? This is very simple, but there is a trick you always should use there this syntax target=”{…}” instead of target=”…” other way it wont work and you will be getting Error #1006 Value is not function.

Quick tip:

Did you set component’s cornerRadius to some value bigger then zero and expect corners to be rounded but it does not work ? Simply just set style borderStyle of that component to solid.

I’v spent a lot of time today trying to solve one issue. I had TileList and was using custom itemrenderer to display list’s item. My item-renderer had some textfields and image.
Issue: while dragging list’s item – image inside this draggable stuff does not displays. Was trying a lot of different ways, custom TileLists, dragProxies etc, no luck.

So how turned up, problem was with loading this image after dragImage created,  actually image seems to be loading, but! does not displays. So solution of this nightmare below:

1. Open custom item-renderer component mxml file

2. find your image tag, and change it to looks like this:

<mx:Image complete="thumbImageLoadComplete(event)" source="{data['thumb']}"  width="64" height="64" id="img" scaleContent="true" horizontalCenter="0" />

where is  source=”{data['thumb']}” image source that accept url to image(data['thumb']) and complete=”thumbImageLoadComplete(event)” event handler while image loading complete

3. Add this code

private function thumbImageLoadComplete(event:Event):void{
          var bp:Bitmap=dupeImage(img.content as Bitmap);
          img.source = bp; 
          data['thumb'] = dupeImage(bp);
        }
 
        private function dupeImage(source:Bitmap):Bitmap {
          var data:BitmapData = Bitmap(source).bitmapData;
          var bitmap:Bitmap = new Bitmap(data);
          return bitmap;
        }
 
 
        override public function set data(value:Object):void{
          super.data = value;
          if(data['thumb'] is Bitmap)
            data['thumb'] = dupeImage(data['thumb']); // we should copy bitmap itself everytime data changes, for example while filtering
        }

Where dupeImage is function that returns copied Bitmap from image content (source.content), in thumbImageLoadComplete we assign newly copied Bitmap to image source (img.source). And now attention!

data['thumb'] = dupeImage(img);

This line reassign data source value and assign Bitmap (copy of our image) instead using URL to image. Now i should to explain why we made this. By default TileList class using this class ListItemDragProxy for displaying stuff when drag items. If you’ll look inside this class you can see it create instances from your custom itemrenderer class and assign them the same values as in original items. So in code above we force images to use image Bitmap instead or url for loading image.

In this way we solve two problems – first is enabling image displaying(visible) while dragging item, second is preventing image loading second time(bandwidth & time saving)

data['thumb'] = dupeImage(img);

Hi guys, you know that for such elements as DataGrid, TileList etc in Flex you can use custom item-renderers for displaying data in cell in whatever way you want to. There are two ways of creating custom itemrenderer in Flex Builder, first one is inheritance – create *.as class file, second one is creating Flex-component. But today problem was: text fields were at wrong positions in custom item-renerer component while using in TileList, but in Flex Builder preview everything was ok, even more if to use this component not like item-renderer all textfields are at right positions. I was thinking may be something wrong with properties/size validation etc.

But as always solution turned up to be very simple(stupid). While using component like item-renderer – text elements(Label, Text, etc) inside it use textAlign = “center” by default if this property is not explicitly defined in MXML code, while Flex Builder use textAlign = “left” by default.

Сonclusion:

To avoid such unpleasant situations in the future we need explicitly set attributes/properties values for elements to make them works as we want