Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jackfreak

FlexTransformManager and Text components problem

Recommended Posts

Hi Jack. I'm having a problem with FlexTransformManager when I add a TextArea or any other Flex text component to the transformManager.

When I add the TextArea instance to my flexTransformManager and innmediately select it with selectItem(), it doesn't draw the bounding box nor the handles properly. I see only one handle in the top-left corner of the TextArea I added.

 

My code is like this:

var transformItem:TransformItem = flexTransformManager.addItem(textArea, TransformManager.SCALE_WIDTH_AND_HEIGHT);
flexTransformManager.selectItem(transformItem);

 

I even tried to wrap the TextArea in a Canvas, but the problem remains.

The strange thing is that it works perfectly with any other type of objects, like Image component.

 

Another thing to notice is that this didn't happen when I was using version 1.85. This bug started when I updated to 1.891. Now I am using 1.91.

 

Can you take a look a it ? Cause I couldnt find any way to fix this.

(btw, Im currently using Flex 4).

 

Thanks

Link to comment
Share on other sites

Sorry about that - would you mind trying the latest version (1.911) (just posted)? I believe it's fixed.

Link to comment
Share on other sites

Hey Jack, thanks for your quick answer. Sadly, it didn't quite worked.

 

I grabbed a copy of the FlexTransformManagerDemo and Im testing there.

 

When I add a text component directly with addItem, it doesn't work.

private function init():void {
myManager.addEventListener(TransformEvent.SELECTION_CHANGE, onSelectionChange, false, 0, true);
myManager.addEventListener(TransformEvent.SCALE, onScale, false, 0, true);
myManager.addEventListener(TransformEvent.FINISH_INTERACTIVE_SCALE, onFinishInteractiveScale, false, 0, true);	
myManager.addEventListener(TransformEvent.DOUBLE_CLICK, onDoubleClick, false, 0, true);	

var ret:RichEditableText = new RichEditableText();
ret.text = "Hello World!";

var ti:TransformItem = myManager.addItem( ret );
myManager.selectItem(ti);
}

 

When I add a text component directly with addItem, AND I explicitly set it's width and height, it DOES work.

private function init():void {
myManager.addEventListener(TransformEvent.SELECTION_CHANGE, onSelectionChange, false, 0, true);
myManager.addEventListener(TransformEvent.SCALE, onScale, false, 0, true);
myManager.addEventListener(TransformEvent.FINISH_INTERACTIVE_SCALE, onFinishInteractiveScale, false, 0, true);	
myManager.addEventListener(TransformEvent.DOUBLE_CLICK, onDoubleClick, false, 0, true);	

var ret:RichEditableText = new RichEditableText();
ret.width = 200;
ret.height = 200;
ret.text = "Hello World!";

var ti:TransformItem = myManager.addItem( ret );
myManager.selectItem(ti);
}

 

And finally, when I add a text component WRAPPED in a Canvas (which is exactly what I need to do in my project), doesn't work either.

It didn't matter whether I set a width/height to the Canvas and/or the RichEditableText.

private function init():void {
myManager.addEventListener(TransformEvent.SELECTION_CHANGE, onSelectionChange, false, 0, true);
myManager.addEventListener(TransformEvent.SCALE, onScale, false, 0, true);
myManager.addEventListener(TransformEvent.FINISH_INTERACTIVE_SCALE, onFinishInteractiveScale, false, 0, true);	
myManager.addEventListener(TransformEvent.DOUBLE_CLICK, onDoubleClick, false, 0, true);	

var canvas:Canvas = new Canvas();
       canvas.width = 200;
       canvas.height = 200;
canvas.setStyle("backgroundColor", 0xff0000);

var ret:RichEditableText = new RichEditableText();
ret.width = 200;
ret.height = 200;
ret.text = "Hello World!";

canvas.addChild(ret);

var ti:TransformItem = myManager.addItem( canvas );
myManager.selectItem(ti);
}

 

It seems to be an initialization problem, because in all cases when I deselect and re-select the item with the mouse it draws everything perfectly.

 

I'll keep trying to see if I can figure it out, but I would appreciate if you take a look at it. It's a great component specially for Flex appz.

 

Thanks

Link to comment
Share on other sites

Yep, this is yet another bug in the Flex framework - SOOO frustrating (and why I generally avoid Flex). You can see the issue if you getBounds() on the canvas like trace(canvas.getBounds(canvas)) which in your case should result in a 200x200 rectangle. But no, it reports a width/height of 0! You need to wait about 1 frame (an ENTER_FRAME event) for it to instantiate properly and report its size/bounds accurately. So you could do this:

 

[add your item, then...]
this.addEventListener(Event.ENTER_FRAME, _updateSelectionBox);
private function _updateSelectionBox(event:Event):void {
this.removeEventListener(Event.ENTER_FRAME, _updateSelectionBox);
myManager.updateSelection(false);
}

Link to comment
Share on other sites

Yeah, some of the bugs are really frustrating but with time and patience I learned to like Flex (for some projects).

I've already tried to wait 1 frame to execute selectItem() and/or updateSelection() and didn't worked.

 

Anyway, I just tried your suggestion in the FlexTransformManagerDemo and it works. The funny thing is that when I use the solution in my app, it doesn't!! :shock:

I've found that In my app I have to wait 2 frames for the box and handlers to draw properly.

 

The strangest thing is that works ok with 1.85, so it's not just the Flex getBounds() bug.

 

I'll keep digging, thanks.

Link to comment
Share on other sites

It works! :D

 

As far as I could see, it works when

- The component to add is declared on the mxml

- The component to add is created with "new SomeComponent()", and then explicitly assigning width/height.

 

I would recommend to remove the "!t.hasOwnProperty("content") && " in the updateSelection() method leaving only "t.width != 0" as the condition:

if (!t.hasOwnProperty("content") && t.width != 0) { //in Flex, SWFLoaders/Images and some other components don't accurately report width/height
var m:Matrix = t.transform.matrix;
t.transform.matrix = new Matrix(); //gets rid of all transformations. Bugs in the Flex framework prevented getBounds() from accurately reporting the width/height, so I had to remove all transformations and check it directly with object.width and object.height.
r = t.getBounds(t);
_dummyBox.graphics.drawRect(r.x, r.y, t.width, t.height);
_dummyBox.transform.matrix = t.transform.matrix = m;
} else {
r = t.getBounds(t);
_dummyBox.graphics.drawRect(r.x, r.y, r.width, r.height);
_dummyBox.transform.matrix = t.transform.matrix;
}

because it has problems with spark TextArea and RichEditableText and I guess all others spark text components when they are created with AS instead of mxml. They have the same issue that Image and SwfLoader, getBounds() reports width 0 when they enter the "else" statement (r.width).

 

I'll remove it for my project, and I leave it to you wether to make this modification or not, u know your code better than me ;) , maybe this mod breaks something when using TransformManager in Flash, I don't know.

 

Thanks man!

Link to comment
Share on other sites

  • 2 years later...

Hi,

 

I have a some issue while working with text area and FlexTransformManager. I am creating a textarea dynamically but while rotating it the text is getting disappeared ....

 

what exactly am i missing out?

 

Code is :

 

import com.greensock.transform.FlexTransformManager;

import fl.core.UIComponent;

import mx.controls.TextArea;

 

 

var flxTransformManagerObj:FlexTransformManager = new FlexTransformManager();

flxTransformManagerObj.width = 300;

flxTransformManagerObj.height = 300;

flxTransformManagerObj.allowDelete = true;

flxTransformManagerObj.constrainScale = true;

flxTransformManagerObj.lockRotation = false;

this.addChild(flxTransformManagerObj);

 

var textAreaObj:TextArea = new TextArea();

textAreaObj.width = 300;

textAreaObj.height = 300;

textAreaObj.text = "This is sample text in the text area";

flxTransformManagerObj.addChild(textAreaObj);

 

I am using FLEX 4.6

 

Thanks

Link to comment
Share on other sites

You'll need to embed fonts in your text fields to be able to rotate them in flash. From a related thread:

 

That's just a Flash limitation - you MUST embed fonts properly in the TextField for it to be able to be rotated. Once you embed your fonts, it should work fine. Check Adobe's docs or Google for instructions on embedding fonts.
Link to comment
Share on other sites

You'll need to embed fonts in your text fields to be able to rotate them in flash. From a related thread:

 

Hi,

I have used the folllowing :

 

 

<mx:Style>

@font-face {

src:url("Assets/fonts/myriad-web-pro.ttf");

fontFamily: myFontFamily;

advancedAntiAliasing: true;

unicodeRange:

U+0041-U+005A,

U+0061-U+007A,

U+0030-U+0039,

U+002E-U+002E;

}

.myFontFamily

{

fontSize: 25;

}

</mx:Style>

 

 

var flxTransformManagerObj:FlexTransformManager = new FlexTransformManager();

flxTransformManagerObj.width = 300;

flxTransformManagerObj.height = 300;

flxTransformManagerObj.allowDelete = true;

flxTransformManagerObj.constrainScale = true;

flxTransformManagerObj.lockRotation = false;

this.addChild(flxTransformManagerObj);

 

var textAreaObj:TextArea = new TextArea();

textAreaObj.width = 300;

textAreaObj.height = 300;

textAreaObj.styleName = "myPlainStyle";

textAreaObj.text = "This is sample text in the text area";

 

flxTransformManagerObj.addChild(textAreaObj);

 

But still when i tried rotation with text the text disappears.... Kindly help ....

Link to comment
Share on other sites

When i encountered that problem i was working with pure AS3 not Flex, but looking at you your code i think i know whats your problem.

 

This is the code i use to created the textfield:

 

var font: Font = new FuturaStdBold();

_textFormat = new TextFormat();
_textFormat.size = DEFAULT_TEXT_SIZE;
_textFormat.align = DEFAULT_TEXT_ALIGN;
_textFormat.font = font.fontName;

_textField = new TextField();
_textField.width = DEFAULT_TEXT_WIDTH;
_textField.height = DEFAULT_TEXT_HEIGHT;
_textField.x = (_container.width - _textField.width) / 2;
_textField.y = (_container.height - _textField.height) / 2;
_textField.type = "input";
_textField.multiline = true;
_textField.embedFonts = true;

 

Pay special attention to the part:

 

_textField.embedFonts = true;

 

the 'embedFonts' property had to be true.

 

Hope it helps 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.

×