Handycam

I found some hints online on how to use GSAP3 with angular and it works well. However, for some reason I am unable to create a timeline which "shakes" the element as if it's saying "no" (back and forth 10 pixels on x 3 times). I am trying shakeTL = gsap.timeline({ repeat: 5, yoyo: true }); shake() { this.shakeTL.from(this.recipient.nativeElement, { x: 10, duration: 0.1 }),{ x: -10, duration: 0.1, clearProps: 'x' }; } This is called from a button click. The element shakes as expected but does not end up at the place it began (it's 10px to the right). Also, repeated clicks on the button do not work. I know there is a custom wiggle plugin but am looking for a solution without a paid plugin.

Yes, it is Flex. Good to know, thanks.

Tried that, did not work. Also the ASDOCs say null is the default anyway. To do it, I had to set a rectangle that is much larger than the container the TM is in or the TM itself, and set the bounds to that. [bindable] private var myrect:Rectangle = new Rectangle(-2000,-2000,4000,4000);

I seem to remember a way to allow object in the TM to not be constrained by the size of the TM instance; that is, they are free to bleed off the edges. For the life of me, I can't find the property. What is it?

I have an application where I ask the user dimensions of a room and then add 4 walls for them to use as a starting point (so they can tweak the room with drag and drop. protected function buildRoom(event:Event):void { // get numbers from dialog var w:Number = event.currentTarget.roomWidth; var l:Number = event.currentTarget.roomLength; var origin:Number = gridInc; trace('creating room '+w+' wide and '+l+' long.'); // get instances of wall objects from XMLListCollection var wallV1:Object = structural.getItemAt(0); var wallV2:Object = structural.getItemAt(0); var wallH1:Object = structural.getItemAt(1); var wallH2:Object = structural.getItemAt(1); // wall postions wallH1.x = gridInc; wallH1.y = gridInc; wallH2.x = gridInc; wallH2.y = wallV1.height+(gridInc-wallThickness); wallV1.x = gridInc; wallV1.y = gridInc; wallV2.x = wallH1.width+(gridInc-wallThickness); wallV2.y = gridInc; var wallH2y:Number = origin + (l * gridInc); var wallV2x:Number = origin + (w * gridInc); // first vertical wall addWall(wallV1, gridInc, gridInc, l, 'vert'); // second vertical wall addWall(wallV2, wallV2x, gridInc, l, 'vert'); // first horizontal wall addWall(wallH1, gridInc, gridInc, w, 'horiz'); // second horizontal wall addWall(wallH2, gridInc, wallH2y, w, 'horiz'); } /** add a new wall */ protected function addWall(obj:Object, posX:Number, posY:Number, len:Number, wallType:String):void { var actualLength:Number = len * gridInc; var stageItem:AddedItem = new AddedItem(); stageItem.source = "images/full/"+obj.img; stageItem.itemName = obj.name; var rn:int = Math.floor(Math.random() * 1000); stageItem.name = obj.name+"_"+rn; stageItem.addEventListener(Event.COMPLETE, selectMe); stageItem.x = posX; stageItem.y = posY; var item:TransformItem = ws.myManager.addItem(stageItem); updateItemCount(); } However, I have tried setting the width and/or height of the transform item both after it's added, such as item.height, in which case no items are added (or at least not visible) and I have tried right before it's added, as in stageItem.height, but then the bounding boxes are sized, not the artwork. What am I missing here? EDIT: BTW, the code posted works great in that the walls are posted, and the positioning is perfect. I just cannot set their size properly.

OK, I see what is happening now, but not sure how to handle it. The problem is from adding items with the same name more than once is confusing things. However, I am unclear on what to do about it. This goes back to by continuing problem about how to "find" the correct items to add to the TM before applyFullXML is called. I am adding items with this: protected function addNewItem(obj:Object):void { var stageItem:AddedItem = new AddedItem(); stageItem.source = "/wsbp/images/full/"+obj.img; stageItem.itemName = obj.name; stageItem.name = obj.name ws.myManager.addItem(stageItem); updateItemCount(); } I was using stageItem.name = obj.name to give the Transform item a name i could associate with the original graphic, so when I load the XML I can fetch is and add it before applyFullXML. So of course, multiple TIs have the same name now, which is obviously not good. If I don't assign a name like I am here, the default item names are things like "AddedItem234", each unique. But how do I know what "AddedItem234" is, so I can load the correct graphic (AddedItem class)?

I can't figure this out, since this had been working fine but I use TM to create a room, like this: Where the orange items have lockScale true and the gray walls do not. I have also disabled constrainScale on the TM in MXML, so you can stretch the walls to make a room. I save the whole thing with exportFullXML, and load it, but although the orange items are always correct, the wall objects are not: Why would this be?

Yes, the "var item:TransformItem =" part was the key. I didn't think of that.

I have an app where some items can be resized and some cannot: A room with furniture. I want items that define the room, such as the walls and windows, to be resizable but not things like appliances, which have a fixed size. I was hoping to do this with only one transform manager, since I need to save this as XML and wanted to avoid having to deal with 2 XML files (or is that the better way to go?) So my handler which adds objects (AddedItem extends Image) to the TM instance is: protected function addNewItem(obj:Object):void { var stageItem:AddedItem = new AddedItem(); stageItem.source = "/wsbp/images/full/"+obj.img; stageItem.itemName = obj.name; stageItem.name = obj.name; stageItem.addEventListener(Event.COMPLETE, selectMe); stageItem.x = 50; stageItem.y = 50; if (obj.sc =="n") { THESE ITEMS WOULD BE LOCKED } ws.myManager.addItem(stageItem); updateItemCount(); } Of course, my Class doesn't understand lockScale, so I can't just set it in the IF statement. How would you recommend managing this?

Is there a way to get the bounding box of all the items in a FlexTransformManager? I am going to need to put my TM in a "zoomable" area, and was looking into a way to provide a "fit to window" button.

Yes, that turned out to be the key item. That and the confusion over the FlexTransformManager being a DisplayObjectContainer. It works like a charm now! Very impressive. This project has a lot of interesting feature requests, so I might need to pick your brain some more. Thanks for your help on this.

I will try that and report back. For the simplified case I emailed, I stripped out the save and reload to focus on the reparenting thing. If you take a look at my original post, you can see how I was trying to do it. The saving the xml works, I get an XML file like I posted originally. I load that in, it loads correctly. So, I loop through my XMLList of all the objects in the project, add the ones that match the XML file to the TM, and applyFullXML. I thought I had it, except as you can see although there are TransformItems with names that match the XML, only one was moved to its gray box while the other 2 did not. I will add in that part to my test project and send it along later. Thanks.

Thanks. I sent you a new file with some explanation. For the benefit of others, I reiterate a bit here. That's my confusion, How do I add this item to a DisplayObject and THEN to the TM? In my example, I have a BorderContainer (id='container') with a TM (id='myManager') inside of it. So, I create a new Image instance, set up its source etc. and I can then add it to "container". But a subsequent call to add it to the TM does not work (if I only add it to the TM, it works). protected function addNewItem(img:String):void { var newImage:Image = new Image(); newImage.source = "images/full/"+img; newImage.x = 100; newImage.y = 200; newImage.name = "bird"; container.addElement(newImage); myManager.addItem(newImage); } The relationship between this parent object and the TM escapes me, sorry. Any example you can provide would be appreciated.

I have emailed you the Flex file. It's as stripped down as it can be, I doubt you can run it but maybe you can see what I've been trying. This is the first part I am missing... the TM is myManager, which is a child or a BorderContainer "workspace" which is a child of a VGroup "mainContainer". When I try to add my elements, where do I add them? The first time around, I am adding to the TM, but are you saying to prepare for reload I don't? That's the second part that's confusing me... I guess I am having a hard time seeing how it "finds" them if they are no part of the TM.

I tried to follow the earlier post on this, and got close, but I am confounded now. Here's what I have been doing: 1. I add the items in the first place to my TM Manager by getting something selected in a List when the add button is clicked. I set the instance's name based on an XML node of the selected item, which works fine. protected function addNewItem(obj:Object):void { var stageItem:AddedItem = new AddedItem(); stageItem.source = "/ttest/images/full/"+obj.img; stageItem.itemName = obj.name; stageItem.name = obj.name; var centerLine:Number = workspace.width/2; stageItem.x = centerLine - 100; stageItem.y = 200; myManager.addItem(stageItem); } To save the XML, I do the following: protected function saveBtn_clickHandler(event:MouseEvent):void { var saveData:XML = new XML(); saveData = myManager.exportFullXML(); var objSend:Object = new Object(); var dataString:String = saveData.toXMLString() objSend.data = dataString; objSend.filename = filename; objSend.userid = userid; sendData.send(objSend); } which saves this: and my stage looks like this: So now I load my xml, using an http service, and it loads like the data that was saved. I loop through this loaded xmllist and get all the "name" attributes. Then, I compare these names in a loop against the loop of all the items in all my lists to get the matches, which seems to work. Then I am trying to add each item back, like this: protected function addSavedItem(obj:XML):void { var stageItem:AddedItem = new AddedItem(); stageItem.source = "/ttest/images/full/"+obj.img; stageItem.itemName = obj.itemName; stageItem.name = obj.itemName; trace(" adding saved stage item name = "+stageItem.name); myManager.addItem(stageItem); myManager.applyFullXML(roomXML,myManager); updateItemCount(); } Which gives me this: As you can see, tracing each transform item's name gives me the correct name (in red here) and obviously the gray boxes are the correct size. But 2 of the 3 items are on the stage but not in the correct positions (i.e., the gray boxes).