Search the Community

Showing results for tags 'bounds'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)


  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 7 results

  1. Offset draggable bounds

    One nice thing about using an element instead of min/max values for a Draggable's bounds is that the bounds automatically adjust if the bounding element resizes. But sometimes you don't want the bounds to extend all the way to an element's edges, so you have to pass in min/max values. The problem with this is that your bounds won't change on a resize, so you have to manually calculate and apply a new bounds object. What if we could combine the two approaches? There are many times where I want the bounds to be offset just a little bit from it's container, and have to decide between passing in min/max values or creating a new element specifically for the bounds. It would be nice if I could skip this, and just pass in an element with optional min/max values. Consider the following... Draggable.create(".box", { bounds: { target: "#container", minX: 10, maxX: "+=50", maxY: "-=25" } }); If the .box element is 100 x 100 and the #container element is 500 x 500, then the bounds would be calculated as: minX: 10, minY: 0, maxX: 450, maxY: 375 Here's a demo of what this would like in action. The container is in black, and the offset is in red. If you resize the window, it still maintains the offset bounds.
  2. Hello, I am very new to your api/code but definitely love it! Conceptually what is the best create a draggable div that snaps to a grid and can detect when it shares a cell with another div. Should I write validation a function in onThrowComplete (using the ThrowPropsPlugin)? Just looking for a little guidance.
  3. Hello, I am creating a barometer that has an interactive needle for the user to adjust. I used the draggable type rotation to set it to spin, however when I tried putting in the bounds, (bounds:{minRotation:0, maxRotation:90}), it is not recognizing the bounds at all. Also, when I have tried to get the info on where the needle's last rotation degree lands (onDragEnd:function() { console.log(this.rotation);}), the console logs it as undefined. Any clues why this is not being applied? Thanks, ErinD function init() { console.log("yeash!!!!"); needleImg= document.getElementById("bNeedle"); barometerImg=document.getElementById("barometer"); smallForm=document.getElementById("groupThis"); //console.log(needleImg);, 3, {css:{rotation:145, transformOrigin:"193px 47px"},ease:Elastic.easeOut}); Draggable.create(needleImg, { type:"rotation", throwProps:true, onDragEnd:function() { console.log(this.rotation);}, bounds:{minRotation:0, maxRotation:90} }); }
  4. Draggable invert bounds behavior

    Hello, Is there a way to invert the behavior of the bounds management. Having a box with bigger size than the container, that could be draggable but must fill the container. Best, Nico J.
  5. So I haven't had any luck finding an answer to this via Google or the forums here yet, so hopefully someone can help. Is there a way to specify what (other than the selected item) the selection rectangle uses to set its size, if a TransformManager is applied to a Sprite with multiple children? Scenario: I have a Sprite with 2 children: a Bitmap, and a Shape. The Shape has a blendmode of ERASE, so the user can "erase" the image below it, but if the user 'paints' outside the visible area of the image, it increases the selection box size. I only want the selection box to be sized to the image, not the size of the image + erase layer. Does that make sense? Thanks in advance! -Jarrod
  6. I recently updated my Transformer files, and noticed a different behavior I don't see mentioned in the change log. I have a parent object, with the size of 100% width and height, going to the size of the user's browser. So it's around 1000x800 roughly. There are other objects (images) added within this parent, that the FlexTransformManager are added onto. We set the bounds to be (-2000,-2000,6000,6000). The reason for this is so the images can be scaled quite large, and parts of the image are allowed to be scaled and dragged 'off stage'. With the recent update (or one since 1.952), the Transformer will no allow the images to be scaled beyond the bounds of the parent object, even though the bounds are set to a larger number. Is this new intended functionality, or a way I can remove this new default feature? It seems the items are now ignoring the bounds I give them, and constraining to the size of the parent. Thanks,
  7. 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.