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

I don’t like some things in the Flash. For example it scaling system of parent/child objects.
So there is new issue i met yesterday: i was loading external SWF to my AS3 application, so it size was specified 400×300 pixels for example, but when it loaded – some stuff inside this SWF make it 3000px height and ofcourse that force my movieclip which contain this SWF to change it height on 3000px too. You should to know that if external SWF is AS1 or AS2 application then AS3 use AVM1Movie class to proccess this Flash-application, this mean that you can not manage elements inside this SWF.

The main thing i need is to prevent resizing of my container movieclip. So i was wishing for such property like overflow with value hidden line in CSS. I tried to use mask for my movieclip or my AVM1Movie instance, but what mask is doing it just hide stuff outside mask, but size remain the same, so it wont help you. Truly i’v started thinking that there is no solution, but i knew solution must be very easy for this. And really! There is very easy solution, is to use scrollRect for clipping display object

So code for my problem looks like:

  // Loader class to load externall stuff
  var my_loader:Loader = new Loader();
  // there we are saying to start loading from specified url
  my_loader.load(new URLRequest(my_url_string));
  // adding our loader to movieclip, Loader derived from DisplayObjectContainer, so we can make almost the same things as with Sprite, but Loader for example does not implement methods to manipulate childs
  my_movielcip.addChild(my_loader);
  // here is we'r catching event when clip is loaded
  my_loader.contentLoaderInfo.addEventListener ( Event.COMPLETE, clipLoaded);
 
  function clipLoaded(ev:Event):void{
     // our secret weapon line, force our newly loaded content to have init size. If it's has any stuff longer that width or height, Rectangle crop it using scrollRect property
     LoaderInfo(ev.target).content.scrollRect = new Rectangle(0, 0, ev.target.width, ev.target.height);
  }

I know this is very simple solution. But if you don’t aware of this it can take a while to find out this. I hope it will be usefull for you in the future.

Just imagine you are creating some custom panel for Adobe Flash CSx, and you want to find some element on stage or in some symbol. Ok, you can easily find it through JSFL DOM, but what’s next ? You’d probably want to make it selected, ok, code below will select element by instance name:

// getting all elements on the stage
var myElements = fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements;
// looping through all elements
for (var i=0; i < myElements.length; i++)
// check if element's name is what we want
  if( myElements[i].name == "element_name"){
    // clear selection
    fl.getDocumentDOM().selectNone();
    // make element selected
    myElements[i].selected = true;
    // as we found our element then quit the loop
    break;
}

Good, now our element is selected. But how can we make it be visible to user and in the center of our stage ? To achiev this we need to use zoomFactor:

Code below will force Adobe Flash IDE to show selected element in the center of  the stage window:

  fl.getDocumentDOM().zoomFactor +=  1;
  // leave zoomFactor unchanged
  fl.getDocumentDOM().zoomFactor -=  1;

For more detail info about JSFL API you can visit this link: http://help.adobe.com/en_US/Flash/10.0_ExtendingFlash/index.html