Swap spark image source after flexcrop

[illustratordavid 1 Likes (Newbie)]

Hi,

 

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

 

Thanks

David

[GreenSock 12,412 Likes (Superhero)]

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)

[illustratordavid 1 Likes (Newbie)]

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

 

Thanks

David
 

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;
newFlexCrop.update();
for each (var titem:TransformItem in img_tmanager.items) {
titem.update();
}

[GreenSock 12,412 Likes (Superhero)]

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?:

trace(Image(evt.currentTarget).width);

[illustratordavid 1 Likes (Newbie)]

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

 

Thanks

David

[GreenSock 12,412 Likes (Superhero)]

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. 

[illustratordavid 1 Likes (Newbie)]

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?

 

Thanks

David

[GreenSock 12,412 Likes (Superhero)]

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.