Search the Community

Hey everyone, At the moment I'm working on a small class for myself to make different animated buttons with javascript, html and css (personal pre-made buttons to add them to project in the future). I'm making as much different animation I can think of growing, shining, depth, vibrating etc etc... I am now at the part where I am making them compatible for all browsers as much as possible (it's horror...) and working on a button that scales larger on mouse over. In all browsers this works perfectly fine except in IE7, IE8, and most likely IE6 too but I cant test that one. In these browsers the button does animate somewhat but does not expand and when it animates it removes the gradient filter that was on it... I have no idea how to enter this in jsfiddle, it's fairly complex :/ Because I want it to use as few files as possible and only want 1 line of code in the main document to call a button from the class, I generate the html and css of the button inside the JS file. The gradient I use for IE 7-9 is: gradientIE79 = "filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="+ color2 +", EndColorStr="+ color1 +"); (color1 and color2 get added dynamically) and on the same button I use the follow Tween: TweenLite.to(button1, 0.25, { css:{scaleX:1.15, scaleY:1.15}}); What happens on my screen is that the button does show a sign of scaling, the top left corner of the button (I can see it because it still has a border around it) moves to the left corner to which it is supposed to tween. The problem is that the whole button move to the top left, it just re-positions instead of growing. Not only does it re-position but it also gets rid of the gradient that was on it as soon as the tween starts. I know it's all very confusing and I'm trying to explain it as good as I can. If there is anything not clear or if I left anything out, let me know. Thanks

Hi, I am trying to create an application where cards flip in 3D using TweenMax to change the rotationY properties of a movieClip. However, I am noticing that if I tween a card in scale + rotationY (to "flip it up") and then tween it back down (to "flip it down") - it doesn't land in the exact position as it was before I "flipped it up." The application I am building requires precision on this because my cards will be in a tightly aligned grid, this difference is noticeable and unwanted. I have attached a sample of the issue - click on the lighter blue card in the center of the grid and then again to flip it back. Notice the bottom and right gutters between that card and the others is overlapped now - like the card nudged 1px right and down after tweening. If anyone has any thoughts? My gut tells me this is just the cost for using a plugin to tween (which by the way I LOVE these plugins) - but maybe there is some way to get more precision through TweenMax on the final placement of the MovieClip. Also - I know I can place an onComplete call to a function that resizes/positions my movie clip after it tweens, but I am hoping to avoid that. Many thanks in advance! CardFlip.fla.zip

Hello, I´m trying to make a simple pinch zoom image scroll app in Adobe Air Mobile for Android and ios. I always having the same issue when I try to pinch the image zoom in and I activate the blitmask. I don´t have problems making this part. But when I pinch to zoom out, the image moves to different x and y coordinates, and sometimes the image disappears. IThe image upon zoom out moves off-center and doesn´t return to position zero. I know there is something in the blitmask that changes these values, but I´m not sure what exactly is going wrong. I always use blitmask.update() and enable or disable bitmapMode. Does anyone have an example for Flash with pinch zoom gestures with ThrowProps + blitMask? Thanks.

Hey guys, From time to time I get wierd rendering artifacts in Google Chrome when using TweenMax. They only appear in Chrome, so I'm pretty sure its a bug in that particular browser, but I'd really like to get rid of them. Does this only happen to me? Does anyone know a hack to git rid of these artifacts? There's a live demo of the issue here: http://ahrengot.com/...round/tweenmax/ ... Click anywhere to animate the box and see the issue. And here's a screenshot of the artifacts:

Hello, I have difficulty using the TransformManager.SCALE_WIDTH_AND_HEIGHT feature. Perhaps I have not understood the documentation or this is not the mission of this feature. What I want is to scale an object containing text that the text does not scale, eg import com.greensock.transform.TransformManager; import com.greensock.transform.TransformItem; import com.greensock.events.TransformEvent; var _manager:TransformManager = new TransformManager({hasSelectableTex:true}); var item:TransformItem = _manager.addItem(textBox,TransformManager.SCALE_WIDTH_AND_HEIGHT,true);//textBox is a movieClip that contains a text field item.addEventListener (TransformEvent.SCALE, onUpdateItem); function onUpdateItem (event:TransformEvent):void { trace (textBox.width,textBox.height,textBox.scaleX,textBox.scaleY); } I appreciate your help I attach a basic example of what I try to do. [Deleted example because it contained TransformManager files, thus granting free access to anyone in the forums]

Hi, I am really enjoying using this library and am fairly new to using the javascript version. I am having some problems with the css scale. I am trying to scale a div with a background image. They syntax I am using is TweenMax.to( $('.hero'), 1, {css:{scaleX:1.5,scaleY:1.5}, ease:Quad.easeInOut}) when the animation happens the div just disappears but only in IE7 and IE8, works perfect in everything else. Is my syntax incorrect? Thanks for any help anyone can offer, Travis

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.