Jump to content


Swap spark image source after flexcrop

Moderator Tag

Recommended Posts



I'm trying to change the source of a spark image in which has a flexcrop applied to it.  Simply changing the content image source combusts the flexcrop applied.  


Here's my idea


  1. find flexcrop on page
  2. export transform xml for item
  3. destroy transform
  4. change image source
  5. update rawWidth and rawHeight in saved xml
  6. Apply transform and flexcrop to image using updated xml

So i'm half way through coding this mammoth solution (I hope) and wondered if any one had any quicker ideas




Link to comment
Share on other sites

Have you tried something like this?:

  1. record the x, y, rotation, width, and height of the FlexCrop
  2. destroy() it. 
  3. change image source
  4. create a new FlexCrop on that image
  5. re-apply the x, y, rotation, width, and height (in that order)
Link to comment
Share on other sites

Thanks Jack, how would you recommend I apply re-apply the x, y, rotation, width and height?


When i've tried I keep ending up with a flexcrop with a width 0 height 0




var newFlexCrop:FlexCrop = new FlexCrop(Image(evt.currentTarget),img_tmanager.manager,false);
newFlexCrop.name = evt.currentTarget.name + "_crop";
newFlexCrop.attached = false;

// have tried setting it directly to the flex crop 
newFlexCrop.x = Image(evt.currentTarget).x;
newFlexCrop.y = Image(evt.currentTarget).y;
newFlexCrop.width = Image(evt.currentTarget).width;
newFlexCrop.height = Image(evt.currentTarget).height;

// and i've tried adapting the exported xml from the last session
lastTransXML[0].@rawWidth = Image(evt.currentTarget).width;
lastTransXML[0].@rawHeight = Image(evt.currentTarget).height;

var appliedDO:DisplayObject = img_tmanager.applyItemXML(lastTransXML,img_tmanager.parent,0x333300);

newFlexCrop.attached = true;
for each (var titem:TransformItem in img_tmanager.items) {

Link to comment
Share on other sites

Are you sure that your Image is reporting its width and height as non-zero? Flex is known for misreporting values for the first frame or two, like it needs a little breathing time to figure out the dimensions.


What does this say right before you apply it?:

Link to comment
Share on other sites

Yep the width is output at width 1819 and height 1311 using monsterDebugger


I've realised since I posted my last message that actually its the original flex crop width and height I need to repeat.  Not the image(evt.currentTarget).width.  But this doesn't really make a difference as the width and height are still coming out when applied as zero




Link to comment
Share on other sites

Hmmmm...tough to diagnose blind but I wonder if you're running into that Flex issue that's preventing the FlexCrop instance itself (which extends UIComponent) from correctly reporting its width/height/bounds for a few milliseconds after instantiation. Have you tried waiting 0.2 seconds or something and then checking the width/height? 


(this is one of the reasons I really dislike working with the Flex framework)


If you're still having trouble, please create a separate, simplified example with only the essential code and shoot it over to me so that I can publish on my end. 

Link to comment
Share on other sites

Great thanks.  I've implemented a .calllater to slow the process down a little. Spotted a big part of the problem was that I had applied the transformer to the image twice then applied the flex crop. I removed the second transform manager application and that simplified it into less randomness.


Next problem, when I have loaded the new image and set the flex crop to size please can you tell me how I can scale up  or down the image so it fits snuggly inside the flexcrop mask area?




Link to comment
Share on other sites

If your object is unrotated, it should be relatively simple using the getBounds() of the crop/mask and use those numbers for the x/y/width/hight. However, rotation throws a bit of a kink into things. I don't have time to walk you through all the code and math involved with something like that, but you could peek at our AutoFitArea class for some ideas (com.greensock.layout.AutoFitArea). I wish I had a simple solution for you. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.