Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dennis van Rijswijk

applyItemXML on FlexCrop not working

Recommended Posts

Hey everyone,

 

I have a problem with de FlexCrop and the applyItemXML on the TransformManager. I hope you can help me out. On my TransformManager i have a image with a FlexCrop object. This works all fine. Next i save the image proporties and the FlexCrop object separately in the database along with the xml from the function exportItemXML(). Also this is done without any problems.

 

If i want to put back the image and FlexCrop object in to a new TransformManager the FlexCrop object while not apply to the image object. I see that the FlexCrop object is set, the double click is there. And the FlexCrop object on the Transfrommanager has his saved properties applied because the width, height, scale and rotation are set.

 

My question:

 

What is the right way to reload a FlexCrop object and his target object? can someone give me a simple example of a working peace of code?

 

The code i use now:

 

First add the image object:

 

var _newImage:Image = Image();
_newImage.addEventListener(FlexEvent.READY, readyFunction);
_newImage.name = [unique name];
_newImage.source = [the image source];

myTransformManager.addElement(_newImage);

 

Than add the FlexCrop object when the above READY event is triggered:

 

private function readyFunction(evt:Event):void
{
var _imageCrop:FlexCrop = new FlexCrop(DisplayObject(evt.currentTarget), myTransferManager, true);
_imageCrop.name = [unique name];

//_xml is a var outside this function and contains the
//proporties recieved from the exportItemXML()

myTransferManager.applyItemXML(_xml);

_imageCrop.update();
}

 

I am working with Flashbuilder 4.6

 

Thanks...

 

Dennis van Rijswijk

Link to comment
Share on other sites

Hm, I don't notice any obvious mistakes right now. I wonder if you need to update() after a few milliseconds because Flex is notorious for lagging in terms of when things are truly ready and able to render properly. I also wonder if you're naming the Image object the same as your FlexCrop instance - if so, don't :)

 

If you're still having trouble, please send me a PM with a link to download a simple example Flex project that I can import to see what's going on. It doesn't need to be your production files - just something simple that replicates the issue.

Link to comment
Share on other sites

Thanks for the reaction.

 

No, both the image and the FlexCrop objects have a unique id. That can not be the problem.

Also the delay is not fixing the problem, i have tried that to.

 

Maybe a a stupid question, how does the FlexCrop nows what to crop?

 

Here is a export of the xml from exportItemXML();

 

xml from the image object:

 

<item name="9FE0A7E3-E601-4B5A-284F-D439EDE3F6EA" level="1" a="1" b="0" c="0" d="1" tx="202.1" ty="33.1" xOffset="0" yOffset="0" rawWidth="128" rawHeight="128" scaleMode="scaleNormal" hasSelectableText="0" minScaleX="-Infinity" maxScaleX="Infinity" minScaleY="-Infinity" maxScaleY="Infinity" lockScale="0" lockPosition="0" lockRotation="0" constrainScale="0" minWidth="1" maxWidth="Infinity" minHeight="1" maxHeight="Infinity"/>

 

and from the FlexCrop object:

 

<item name="9FE0A7E3-E601-4B5A-284F-D439EDE3F6EA_CROP" level="2" a="0.5390625" b="0" c="0" d="0.5704799890518188" tx="202.1" ty="33.1" xOffset="0" yOffset="0" rawWidth="128" rawHeight="128" scaleMode="scaleNormal" hasSelectableText="0" minScaleX="-Infinity" maxScaleX="Infinity" minScaleY="-Infinity" maxScaleY="Infinity" lockScale="0" lockPosition="0" lockRotation="0" constrainScale="1" minWidth="1" maxWidth="Infinity" minHeight="1" maxHeight="Infinity"/>

 

Greetings,

 

Dennis

Link to comment
Share on other sites

Maybe a a stupid question, how does the FlexCrop nows what to crop?

You mean what object to crop? That's the first parameter in the constructor (new FlexCrop(target...)).

 

Feel free to shoot me a sample link via PM so that I can see what's happening.

Link to comment
Share on other sites

You mean what object to crop? That's the first parameter in the constructor (new FlexCrop(target...)).

 

No, that's not what i mean. I mean the position, size and rotation to crop on the given target.

I will make a small Flex project so you can see what i mean ;-)

Link to comment
Share on other sites

Oh, I see what you were asking. A FlexCrop is basically a box that serves as a mask. You transform the box/mask and it crops the target.

Link to comment
Share on other sites

Ok, here is a flex project with the problem i have in the description above. After testing this code the same problem occurs. I hope you find something so you can send me in the right direction to solve this. The cropping is very important for me. I purchased this component for this function.

 

Thanks.

 

Greetings,

 

Dennis van Rijswijk

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:transform="com.greensock.transform.*">

<fx:Script>
 <![CDATA[
  import com.greensock.transform.FlexCrop;

  import flash.utils.clearInterval;
  import flash.utils.setInterval;

  import mx.collections.ArrayCollection;
  import mx.controls.Image;
  import mx.events.FlexEvent;

  private var _savedImages:ArrayCollection;
  private var _imageObject:Image;
  private var _flexCrop:FlexCrop;
  private var _intervalID:uint;
  private var _i:int;

  private function addImage():void
  {
_imageObject = new Image();
ftm.addItem(_imageObject);

_imageObject.addEventListener(MouseEvent.DOUBLE_CLICK, addCropping);
_imageObject.doubleClickEnabled = true;
_imageObject.source = "https://www.pagectrl.nl/assets/elements/objects/element-gray-8.png";

/**
*Give image object a unique name
**/
_imageObject.name = String(Math.round(Math.random()*10000000));
  }

  private function addCropping(evt:MouseEvent):void
  {
evt.currentTarget.removeEventListener(MouseEvent.DOUBLE_CLICK, addCropping);

_flexCrop = new FlexCrop(DisplayObject(evt.currentTarget), ftm.manager, true);
_flexCrop.cropMode = true;

/**
 *Give FlexCrop a unique name
 **/
_flexCrop.name = evt.currentTarget.name + "_CROP";

ftm.selectItem(_flexCrop);
  }

  private function saveItems():void
  {
_savedImages = new ArrayCollection();

for(_i=0; _i<ftm.numElements; _i++)
{
 var _obj:Object = new Object();
 _obj['object'] = ftm.getElementAt(_i);
 _obj['xml'] = ftm.exportItemXML(ftm.getChildAt(_i))

 _savedImages.addItem(_obj);
}

ftm.removeAllChildren();
  }

  private function loadSavedImages():void
  {
for(_i=0; _i<_savedImages.length; _i++)
{
 if(_savedImages[_i].object.className == "Image")
 {
  _imageObject = new Image();
  ftm.addItem(_imageObject);

  _imageObject.doubleClickEnabled = true;
  _imageObject.source = "https://www.pagectrl.nl/assets/elements/objects/element-gray-8.png";
  _imageObject.addEventListener(Event.COMPLETE, setDelay);

  /**
   *Give image object the name of the saved image object
   **/
  _imageObject.name = _savedImages[_i].object.name;

  /**
   * Apply the xml
   **/
  ftm.applyItemXML(_savedImages[_i].xml);
 }
}
  }

  private function setDelay(evt:Event):void
  {
evt.currentTarget.callLater(addFlexCrop, [evt]);
  }

  private function addFlexCrop(evt:Event):void
  {
clearInterval(_intervalID);

for(_i=0; _i<_savedImages.length; _i++)
{
 if(_savedImages[_i].object.className == "FlexCrop")
 {
  if(_savedImages[_i].object.name == evt.currentTarget.name + "_CROP")
  {
   _flexCrop = new FlexCrop(DisplayObject(evt.currentTarget), ftm.manager, false);
   /**
	*Give FlecXrop object the name of the saved FlexCrop object
	**/
   _flexCrop.name = _savedImages[_i].object.name;

   /**
	* Apply the xml
	* */
   ftm.applyItemXML(_savedImages[_i].xml);

   /**
	* Update the crop object
	* */
   _flexCrop.attached = true;
   _flexCrop.update();
  }
 }
}
  }


 ]]>
</fx:Script>

<fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>


<s:BorderContainer left="10" bottom="10" right="10" top="68" dropShadowVisible="true">
 <transform:FlexTransformManager id="ftm" width="100%" height="100%"/>
</s:BorderContainer>

<s:Button x="10" y="15" label="Add image + FlexCrop" click="{addImage()}"/>
<s:Button x="160" y="15" label="Save image + FlexCrop" click="{saveItems()}"/>
<s:Button x="316" y="15" label="Add saved image + FlexCrop" click="{loadSavedImages()}"/>
<s:Label x="12" y="54" text="FlexTansformanager:"/>

</s:Application>

Link to comment
Share on other sites

Aha! Thank you so much for posting the example code - that was extremely helpful in seeing what was happening. And I see the problem...

 

When you create a FlexCrop, it basically swaps itself in for the target as far as the TransformManager is concerned. Think of it like a proxy of sorts. By default, any changes made to a FlexCrop are also made to its target (scale, rotation, position). You can change that behavior by setting its "attached" property to false which allows the FlexCrop and the target to move/scale/rotate independently. That's what the cropMode does - it essentially detatches the two and stops masking the target so that you can manipulate things.

 

When you were loading your XML and applying it to the FlexCrop, you didn't set "attached" to false, so the changes to FlexCrop were also being made to the target. All you need to do is set attached to false, then applyItemXML(), and then set attached back to true.

 

Make sense?

Link to comment
Share on other sites

Okay, this explanation gives me a clear view how FlexCrop works.

The code in my project is now updated with your solution and it works.

 

Thanks a lot for your help.

 

Greetings,

 

Dennis van Rijswijk

Link to comment
Share on other sites

While testing my project i discover the next problem:

 

1. Load the code above in a Flex project

2. Run the poject

3. Add 2 images to the TransfromManager

4. Double click on the 2 images to activate the FlexCrop

5. Crop 1 images in half en place it into right top corner

6. Click Save image + FlexCrop

7. Click on Add Saved images + FlexCrop

 

Repeat step 6 and 7 and see wat happens with the image in the right top corner? sometimes it happens on the first time you click on "Add saved images + FlexCrop".

If the image in the right corner is not jumps than repeat step 6 and 7.

 

When you add more images with FlexCrop to the TransformManager the problem will appears faster.

 

So it only appears when there are multiply images with FlexCrop added to the Transfromanager. If there is only one image with FlexCrop it works fine.

 

Have you any idea what i'm doing wrong?

Link to comment
Share on other sites

Aha, I see the problem. It's actually trying to be helpful by imposing the bounds (moving the objects that exceed the bounds back into the area), but since you're using FlexCrops the targets should be allowed to exceed the bounds. I've uploaded a fresh copy of TransformManager that should resolve that issue for you. Just log into your GreenSock account to download the latest version and let me know if it works well for you.

Link to comment
Share on other sites

Hi, thanks for the update.. it's working great.

 

You are the best ;-)

 

Greetings,

 

Dennis van Rijswijk

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.
×