gparker

Thanks for the fast response and elegant solution! You even used the cat example image, nice! Making another layer with that blend mode is something I hadn't considered but it certainly accomplishes the effect I disired, gratitude.

Hi, I'm already using TweenMax for other things on my project so I just thought I'd see if I could use it for this too. I'm wondering if it's possible through the colorMatrixFilter or colorTransform to selectively tint only a certain color range/selection? I'm asking this because I have a dithered (solid black and white) image I am trying to tint, and we only want to tint the black part of the image, leaving the white pixels white. I couldn't figure any way to do it looking at the examples. Basically, I want to find all of the solid black pixels and change them to the selected color, while leaving the white pixels alone. This feature works using the colorTransform IF the image is black with the other areas have alpha transparancy, but doesn't work if the image has white instead of alpha. So, I'm almost suspecting I'm going to have to do some kind of a selection mask for the color transform, but wanted to ask here in case there was an easier way to do it. Attached is an example of how the original B&W image looks and how I want the colorized image to look. I can achieve this effect with a Color Fill : Blend Mode: Color Dodge filter in Adobe Fireworks.

Thanks man, adjusting that did the trick! My text display objects already contain custom edges (drawn with a dashed line over a solid line) so that edge was somewhat unnecessary in my scenario. Reducing it to 1 or 2 seems to have good results for me.

OK, so here I have a problem that I could really use an answer to!!! ASAP preferably... I have a display object that has it's own behavior for double click. When it's not super small, I can still double click and get the function to happen. However, when it's added to TransformManager and it becomes small, say like 4-6px tall (even if it's 100px wide), then it's IMPOSSIBLE to double click it, because some invisible drag border of the transform manager is in the way! I have set the manager.lineThickness = 0; which removes the visible line around it, but there is something else still there that's in the way. Can anyone offer me some solution as to how I can get rid of this invisible border that's overlaying my display object and obstructing it's behavior?

Man, this is hilarious, go figure. I post at the end of the day, having given up. Then I try one more thing and it works! If you have handle size = 0, then this can be used to totally kill the handles... Placed at the end of the if (_handles.type == "corner") { if(_handleSize == 0) { //kill ALL the handles!!! s.graphics.clear(); s.visible = false; r.graphics.clear(); r.visible = false; s.mouseChildren = false; r.mouseChildren = false; }

OK, I have the Transform Manager implemented into my project pretty well, but there is one last little thing is driving me CRAZY!! I've been working on it for a while and can't quite fix it, so I need some help! Part of my application uses the Transform Manager in a rather locked down state. I am using it here mainly for it's group move + bound constrain capabilities. This works great. The issue is that I want the handles hidden, but for some reason I am getting interference with what I assume is a remnant of the corner (rotation) handle. Here are the settings I am using manager.constrainScale = true; manager.hideCenterHandle = true; manager.forceSelectionToFront = false; manager.autoDeselect = false; manager.arrowKeysMove = true; manager.handleSize = 0; manager.lockScale = true; manager.lockRotation = true; (note: manager.bounds are set elsewhere) OK, to explain this better... when I have to objects that are very close, and I select one, when I mouse over the other one that is close to it, the mouse cursor changes into a generic arrow when in the corner region (outside the box) of the selected object, but when you move a little outside the corner region then it turns into the arrows move icon for that other object. So, the invisible corner/rotation or whatever it is object is NOT desired to show up or be functional, and yet something on the corners it is causing mouse over issues on other non-selected objects that are near the corner regions. The main problem is you can't select the other objects if your mouse is over this area that is being blocked by the rotation handle or whatever it is. Any help here? I tried messing with some stuff in the redrawHandles() function of the "corner" if statement, but it didn't seem to have any effect on my issue.

I found where this happens in the TransformManager.... happens at this function private function onMouseDownItem($e:TransformEvent):void { if (isKeyDown(Keyboard.CONTROL)) { So, I just took out that part and it works as expected... with no deselect. or, I could have added in something like if (isKeyDown(Keyboard.CONTROL) || isKeyDown(Keyboard.SHIFT)) { to make them work the same way. I can only assume that someone had a request to deselect items from the selection Via CTRL second click, but you might want to add that to the documentation or set it as an option, since some developers may not be aware that this will happen (documentation lead me to believe that SHIFT and CTRL keys would have the same behavior). If you have a good QA department, they WILL find out that this happens and raise a defect about it being unexpected behavior

I don't see anything in the documentation about this, but it appears that when you Shift+Click things, it only adds them to the selection. However, if you Ctrl+Click is can also remove the item from the selection on the second click. Is this intentional? I wanted Shift and Ctrl to have the same behavior and this is an issue since currently, they don't.

SUCCESS! I was able to get the updated width and scale of the objects doing this: add them to the manager like so (any of the TransformEvents seem to work, here I'm just using the SELECT_MOUSE_UP but will probably change it to something more robust later): var tmItem:TransformItem = manager.addItem(region); tmItem.addEventListener(TransformEvent.SELECT_MOUSE_UP, tmOnMouseUp); private function tmOnMouseUp(event:TransformEvent):void { var tmItem:TransformItem = event.target as TransformItem; MonsterDebugger.trace(this, "function tmOnRelease width:"+tmItem.width); MonsterDebugger.trace(this, "function tmOnRelease scaleX:"+tmItem.scaleX); } that returns both values, so I can use that to get them to update it elsewhere in the application where Flex is being stubborn and not updating it. Although, I will probably have to set the scaleX to 1 if I manually update the width on the object container, so I may just update the data model for the object's export info. Hope this may help if someone runs into something similar.

Wow, wouldn't you know it. Within minutes of posting this long rabble, I solved it. I just set the manager.bounds later on after the objects had been rendered on the stage and now it all works as expected! So.... it's a non-issue really. You can delete this thread if you want, or leave it for others to see, whatever works. Thanks.

Hi again, OK so I need some help once more. I've ran into an issue where trying to add bounds is causing odd behavior. If I set the bounds to the full size, the bound drag/scale behavior works as expected, but the movieclips I'm trying to transform get compacted into a smaller scale version of my product area when it's loaded (almost like it's trying to enforce the bounds without the scale that is applied to the parent MC of the added objects). However, if I apply the scale multiplier to the bounds, then the movieclips appear in their correct locations, but they can be dragged far off to the right and bottom. I guess my confusion and question on all of this is: is there a way to set the manager to reside in a particular movieclip so it picks up the scale of it? Or do i need to do something else? Here is part of my code that's related to this issue, with some lengthy parts commented out to explain what they're doing. This is AS3 in a Flex application (the dataProvider.layouts contains a bunch of layer nodes of parsed XML that contains text and image objects) public var manager:TransformManager = new TransformManager(); private var _layoutCanvas:Canvas; public function renderPanel():void { var xScale:Number = _panelSprite.width / _dataProvider.width; var yScale:Number = _panelSprite.height / _dataProvider.height; layoutCanvas.scaleX = xScale; //I also tried to apply these scales at the end of all the code, it didn't help layoutCanvas.scaleY = yScale; var layout:LayoutVO = _dataProvider.layouts.getItemAt(0) as LayoutVO; for( var i:int = 0; i < layout.layers.length; ++i ) { var layer:LayerVO = layout.layers.getItemAt(i) as LayerVO; var region:EditableRegion; //extends UIComponent switch( layer.type ) { case "text": var textVO:TextVO = layer.content as TextVO; var textRegion:TextRegion = new TextRegion(); //extends EditableRegion region = textRegion; break; case "image": var imageVO:ImageVO = layer.content as ImageVO; var imageRegion:ImageRegion = new ImageRegion(); //extends EditableRegion region = imageRegion; break; } if( region ) { var position:PositionVO = layer.frame.position; region.x = position.xOffset; region.y = position.yOffset; region.width = position.width; region.height = position.height; region.dataProvider = layer; layoutCanvas.addChild( region ); editableRegionsArray[i] = region; if(layer.movable) { var tmItem:TransformItem = manager.addItem(region); tmItem.addEventListener(TransformEvent.SELECT, checkContents); tmItem.addEventListener(TransformEvent.RELEASE_CURSOR, tmOnRelease); } } } //Transform Manager options setup var boundsRect:Rectangle = new Rectangle(_dataProvider.boundsPosition.xOffset, _dataProvider.boundsPosition.yOffset, _dataProvider.boundsPosition.width, (_dataProvider.boundsPosition.height)); manager.bounds = boundsRect; manager.constrainScale = true; manager.hideCenterHandle = true; manager.forceSelectionToFront = false; } So, basically, this rect: var boundsRect:Rectangle = new Rectangle(_dataProvider.boundsPosition.xOffset, _dataProvider.boundsPosition.yOffset, _dataProvider.boundsPosition.width, (_dataProvider.boundsPosition.height)); Makes the bounds BEHAVIOR as expected, but jacks up the placement of the editableRegions. and this Rect (or no bounds set at all) results in the editableRegions being placed correctly, BUT then the bounds at the right and bottom bounds are WAY off the expected edge. var boundsRect:Rectangle = new Rectangle(_dataProvider.boundsPosition.xOffset, _dataProvider.boundsPosition.yOffset, (_dataProvider.boundsPosition.width*xScale), (_dataProvider.boundsPosition.height*xScale)); So, do you have any idea have I can get the bounds behavior to be scaled correctly with the layoutCanvas, which is scaled and has the displayObjects added to it? I tried to add the bounds before the objects were added to the manager and that didn't change anything. I can give more info if needed.

Yes, I am using Flex for this application. However, I'm opting not to use the FlexTransformManager, since all of my application display objects I'm manipulating are created programmatically through actionscript, not mxml. I will admit that I didn't investigate the FlexTransformManager very much since the standard one seemed to work fine right off the bat, but if you believe I should be using that instead let me know. The application is pretty large and I'm using DeMonster Debugger for the traces, but I'll see if I can't isolate a part of the code that's doing this and make an example (excluding your class). It may be something else Flex related like I need to run a invalidateDisplayList(); or something when it changes... Thanks for the feedback, I'll work on this a bit more and post back in a bit.

OK, I have been reviewing the export/apply item XML that's included with TransformManager. At first I didn't understand why you needed the Transform Matrix, but given that you can rotate two images different ways, group them, then resize them (non proportional) it's easy to see how they quickly turn into non-rectangular shapes. However, my application won't use crazy skewing like that, it will always have the constrainScale = true on. Given that, I'm wondering if it's possible to just export the movie clip's x, y, width, height, and rotation? I've noticed that while tracing the object that TransformManager is transforming, I can see changes to the x, y, and rotation by default. However, the width/height doesn't change, nor does the scaleX or scaleY, so I'm thinking that the sizing is handled by the matrix. However I'm not familiar with working with the transform matrix. Is there an easy way to remove that transform matrix when it's done scaling so I can get the new width and height? I ask because I need these values and we already have a complicated export/import XML schema set up in my application, and I don't have time or the project requirements to add in your more complex positioning XML. I just need to get the new width and height of an object when it's done transforming, so yeah... let me know if that's possible, thanks! edit: I've also tried this: manager.addItem(myDisplayObject, "scaleWidthAndHeight"); which will return the width and height, but then it doesn't scale any children of the object. So, I guess I'm wondering if there is a way to do it where the "scaleNormal" behavior is on, except at the end of the transform, set the width and height to the object?

Yes, that did help. I was able to accomplish what I wanted to do in the following manner: in private function redrawHandles() in the TransformManager class, I added this to the end, (green text is pre-existing code) } else if (_handles.type == "center") { s.visible = !_hideCenterHandle; } else if (_handles.type == "stretchH" || _handles.type == "stretchV") { s.visible = !_hideCenterHandle; } That basically hides the middle resize handles if the center resize handle is hidden, and it seems to work pretty well. I could make a new attribute to only hide the middle handles based off how the _hideCenterHandle works, but for my purposes if I'm hiding that then I wanted those hidden as well. Thanks again for the help here, this is a cool code base to work with!

Thanks for the response. To elaborate a bit more, the reason I wanted the users to be able to rotate but not scale is for the TLF text fields I'm using. I recently convinced my company to purchase TransformManager for my project and the end result is for print. I have a separate UI tool that is used to adjust the font size (which in turn resizes the container's width/height to match the font). I'm unsure if it's possible to print inbetween font point sizes, like we go 8, 9, 10, 11, 12, 14, 16.... but if I let them size the text with this tool, it would in theory allow font point sizes any number in between that such as 13.1245 or something and I'm not sure that the TLF or the printing process supports that. I'm also not sure if it's possible for Transform Manager to tell me what font size of the TLF text field inside the container would be after adjusting the scale? I kind of assumed it wouldn't be able to tell me that, but if it can somehow, I'll try to play around with it. I'll check out the lockScale value to see how it works. That will probably help me some, but you haven't mentioned where I might look to hide the middle resize buttons, could you point me to where I might start to look to turn those off? I know it's not just a value, it's something I will have to manually comment out or otherwise modify. On multi-line text fields or images they're nice but on small single line text fields it just looks like too many buttons on the container, so I'm trying to hide them.