Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Handycam

  1. 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.
  2. 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);
  3. 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?
  4. 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.
  5. 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)?
  6. 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?
  7. Yes, the "var item:TransformItem =" part was the key. I didn't think of that.
  8. 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?
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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).
  15. I need to add items to a transform manager with additional properties, and then later list all the itms in that transform manager, along with these properties. (Flex 4) For example, I am adding something that has an image along with an associated name and price. Originally, I was adding an image, so I created a class extending Image: protected function addNewItem(obj:Object):void { var stageItem:AddedItem = new AddedItem(); stageItem.source = "images/full/"+obj.img; stageItem.itemName = obj.name; stageItem.itemPrice = obj.price; stageItem.addEventListener(Event.COMPLETE, selectMe); var centerLine:Number = workspace.width/2; stageItem.x = centerLine - 100; stageItem.y = 200; myManager.addItem(stageItem); updateItemCount(); } Which works fine. However, I can't figure out how to list the objects on command. If I loop through the transform items, there is no such property as name: private function listItems():void { for each ( var item:TransformItem in myManager.items ) { trace('item = '+item.name); } } gives an error, no property of name. I'm guessing this is actually simple, but I'm missing something obvious. To reiterate, I am looking to get the results of listItems and build an XMLList of the properties.
  16. I have an image which is loaded in a component. I have a transform manager around this image. The main app has an area the image is clipped to. I was thinking of allowing the users to use the TM to resize and move the image within this clip box but, of course, the handles are also clipped: Any suggestions?
  17. Conceptually I know what you're saying, but I am having a hard time figuring out how to add the correct items to the displayList. Do you have any examples of a working save/load? I have saved the xml file to the server. I can load it again. Of course the TM will be empty before load. All the possible objects that could be added are displayed in a list with a dataprovider of an XMLListCollection. So I would like to "pull" the same items out of this collection that are present in the xml file, and then applyFullXML to them.
  18. The ASDOC is correct, but I meant the tooltip: I thought required items in the tooltip were bold, but i could be wrong. OK, makes sense. It says in the docs that applyFullXML looks for the object to be in the displaylist. How does it "connect" an object? Meaning, if my transform manager is full of items I have added dynamically (as in the code snippet posted earlier) and then I applyFullXML to a new session where those items haven't been added? I assume I can keep track of the added items in an ArrayCollection or something on my own, but I guess I am unclear of the process by which they get "added" back to the transform mgr.
  19. Yes, that was it. I thought I had updated but perhaps I picked up an older project. EDIT: applyFullXML() is requiring 2 arguments although the help text looks as though only XML is required. One further question, I am adding objects to the transform manager from a list and adding my own metadata to the objects: protected function addNewItem(img:String, name:String, id:String):void { var newImage:Image = new Image(); newImage.source = "images/full/"+img; newImage.x = 100; newImage.y = 200; newImage.name = name; newImage.id = id; newImage.toolTip = "Double Click for More Info"; // to show pop up details newImage.doubleClickEnabled = true; newImage.addEventListener(MouseEvent.DOUBLE_CLICK,doubleClickItem ); myManager.addItem(newImage); } How might I extend/modify the exportFullXML() and importFullXML() to include these additional attributes?
  20. My transform manager is declared in the MXML And adding exportFullXML fails with undefined method: protected function saveBtn_clickHandler(event:MouseEvent):void { myManager.exportFullXML(); } Am I using it right?
  21. I have a project wherein I need to be able to let the user save the current state of the objects they have added to the TM and the position/scale/rotation of those objects. Further, I then need to be able to let them re-load this data and set up the TM exactly the way it was when they saved. Can this be done? Are there any examples I could refer to?
  22. Yes, that's very helpful. I have done some more with this. For example, my xml file for my selection list might have an entry like So, my list currently uses @img and @name. Click an item uses this: // add an item when clicked in the list protected function itemList_changeHandler(event:IndexChangeEvent):void { var list:List = List( event.currentTarget ); var img:String = event.currentTarget.selectedItem.@img; var name:String = event.currentTarget.selectedItem.@name; var id:String = event.currentTarget.selectedItem.@id; addNewItem(img, name, id); list.selectedIndex = -1; } And addNewItem is protected function addNewItem(img:String, name:String, id:String):void { var newImage:Image = new Image(); newImage.source = "images/full/"+img; newImage.x = 100; newImage.y = 200; newImage.name = name; newImage.id = id; newImage.toolTip = name; myManager.addItem(newImage); } Everything works, I'd get an image of pizza14, correct tooltip. So now in the selectionChange handler: private function onSelectionChange(e:TransformEvent):void { for (var i : int = 0; i < myManager.selectedItems.length; i++) { trace(myManager.selectedTargetObjects[i].id); var objID:String = myManager.selectedTargetObjects[i].id; snapTip(objID) } } private function snapTip(s:String):void { var msg:String = dataList..food.(@id==s).@description; Alert.show(msg); } That last part is a little kloodgy; what I want to do is figure out which xml node is associated with that transform object, and display other data attributes. That e4x expression seems to work, but I'd love to come up with a cleaner way. Eventually, however, I need to replace the Alert with a different component and have that component (e.g. a Panel) snap to a fixed position above the currently selected item and above it. Sort of like a Tool Tip, but I need users to interact with it. The goal is to have a panel with action items on it for the selected item, such as "view more info" or "visit web site". I only want this panel to appear when the given item is selected.
  23. I thought so. How do i figure out which instance is selected, specifically information associated with it? I have used a function like this to add an item: protected function addNewItem(img:String):void { var newImage:Image = new Image(); newImage.source = "images/full/"+img; newImage.addEventListener(Event.COMPLETE, selectMe); newImage.x = 200; newImage.y = 200; myManager.addItem(newImage); } When a user clicks a list of possible images, i get the "img" data point of xml the clicked item in the list, and pass it: // add an item when clicked in the list protected function thumbList_changeHandler(event:IndexChangeEvent):void { var list:List = List( event.currentTarget ); var img:String = event.currentTarget.selectedItem.@img; addNewItem(img); list.selectedIndex = -1; } So, assume I also have a "name" property which is assigned to the newItem. How do I get this on selection change? I have tried private function onSelectionChange(e:TransformEvent):void { for (var i : int = 0; i < myManager.selectedItems.length; i++) { trace(myManager.selectedItems[i].name); } But get null or undefined.
  24. I need to have transform manager objects which, when selected, displays another object (sort of like a "tool tip", but I will use a component). This tip should only appear when selected, follow the object around when moved, but not scale or rotate if the object is scaled or rotated. How should I approach this? I am using Flex 4. I can't make the tip part of the object being added to my TM, since then it would be included in the bounding box and be affected.