LilaQ

Hey guys, I'm currently trying to make a 3d-watch, digital style. I'm having two problems: 1) rotateX: "+=90" and rotate "-=90" both rotate in the same direction 2) I want to rotate the cubes 90 degrees, so the side with the correct second / hour / minute is shown. But after a while, the rotation is completely off and the cubes are shown 90-degree-ish, which gets worse the longer you let the script run I managed to make a CodePen of the project, please have a look at it yourselves. Thanks in advance for your help! Best regards,

Oh boy, thanks for clearing that up, missed that completely. Thanks Diaco.AW Even inline placing works without a flaw, now that it's positioned correctly

Hi guys, can't staggerFromTo -> onCompleteAll handle anonymous functions? I do this with a normal onComplete in a regular Tween all the time, since I think it's more intuitive to have the functions inline. My call: TweenMax.staggerFrom($(".kontakt-artist"), 1, {transformOrigin: "100% 0%", scaleX: 0, onCompleteAll: function() { console.log("should be rotating"); TweenMax.staggerFromTo($(".kontakt-image"), 0.4, {rotationX: 360, opacity: 0}, {rotationX: 0, opacity: 1}, 0.25); }}, 0.25); The console output: Thanks for your help!

clearProps was exactly what I was looking for, thanks! Greensock makes just perfect pieces of software, I am more and more amazed every day, and very glad that I decided to get a business licence. I have been using your software since 2010 (AS3 days), and just want to say thanks for this wonderful state-of-the-art piece of software and the awesome support. Big, big thumbs up, guys! Best wishes, LilaQ

Hey guys, just experienced this the second time. I make an animation on a menu-item, which has a hover effect (pure css, item:hover). But after the animation is done, the hover effect no longer works. Is there a solution to this? Thanks in advance

I'd be in the club for months if I weren't a poor german scholar : / The Sprite method worked quite well, but how does the performance differ between Bitmap-Only and Bitmap-in-Sprite operations? Thanks for all your help Greets Jan

Ok, that was a quite obvious mistake - thanks Additional question - How can i set the center point of the Bitmap to its real center (for any kind of transformations)? Since the "container" method won't work. Thanks in advance LilaQ

Hey greensock, I was just trying to scale a Bitmap with a TranformMatrix (since it's the only way I can think of to scale a Bitmap from the center point) My code is something like this: TweenMax.to(myBitmap, 4, {transformMatrix{a:2}}) But it errors that "transformMatrix is not a property of Bitmap and there is no default value" - even if I assign an new Matrix to my Bitmap via myBitmap.tranform.matrix = new Matrix(); Is there any way to accomplish what I am trying to do? I need this as a Bitmap, since it uses too much cpu power if I tween it as a MovieClip or something else. A container isn't possible, too, because it would crop off the bitmap when I place it on a negative x-value. I hope you can help me out. Thanks in advance Greets, Jan

Hey greensock, I was wondering if you could give me a hint on how you did the Bezier Example? So that the user can add bezier points to the line, pull them back and forth... Cause I would really love to implement this in a game I'm currently developing as some sort of map editor Thanks in advance. Greets, LilaQ

Hey, thanks for your reply. I'm not quite familiar with the BitmapData class, but I'll work into that. Another thing I just found out is that Tim used seperate Tweens for the x and y coordinates on the flakes. My question is now, does that improve the speed on the animation itself? Or is it the same amount of calculations for the cpu if you use a combined Tweenlite.to for the x and y coordinates? Thx for all your help, it's really appreciated Greez, LilaQ

Hey, thx, I should have the most up-to-date version of the classes I got it running so far. I was inspired by the page you have linked on your mainpage (http://www.timsoret.com/flash/snow/) Actually I'm trying to find out how Tim's Animation can run so smoothly. Mine is struggling with about 300 flakes, while his can handle roundabout 2500. I'm not quite sure what processes are stressing out the CPU most, so maybe you could have a look at my code and tell me what could be made better. I don't want to copy Tim's Animation, just want to learn how to optimize ActionScript 3 code properly, since I started coding AS3 only 3 weeks ago. package { import com.greensock.plugins.GlowFilterPlugin; import com.greensock.plugins.BezierThroughPlugin; import com.greensock.plugins.TweenPlugin; import flash.net.URLRequest; import flash.display.Loader; import flash.events.Event; import com.greensock.easing.*; import com.greensock.TimelineMax; import flash.display.Sprite; import com.greensock.TweenMax; /** * @author LilaQ */ public class Main extends Sprite { private var CircleTimeline:TimelineMax = new TimelineMax(); private var i:int = 0; private var curCircle:Circle; private var picture:Loader = new Loader(); public function Main() { picture.load(new URLRequest("flake.png")); picture.contentLoaderInfo.addEventListener(Event.COMPLETE, Init); } private function Init(e:Event) :void { trace("Main.Init(e)"); var bg:Sprite = new Sprite(); bg.graphics.beginFill(0x000000); bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill(); addChild(bg); TweenPlugin.activate([bezierThroughPlugin, GlowFilterPlugin]); //CircleTimeline.addCallback(, 5); for (i = 0; i < 300; i++) { trace("Main.Init(e)"); curCircle = new Circle(); addChild(curCircle); curCircle.x = Math.random() * stage.stageWidth; curCircle.y = -120; curCircle.cacheAsBitmap = true; CircleTimeline.insert(new TweenMax(curCircle, Math.random()*5, //curCircle.rand*0.5+3 {bezierThrough:[{x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight},{x:Math.random()*stage.stageWidth, y:stage.stageHeight+20}], orientToBezier:true, ease: Linear.easeNone, rotation: 900, onComplete: reAddCircle, onCompleteParams:[curCircle] } )); // Delay ,(-curCircle.rand-3) addChild(curCircle); } CircleTimeline.play(); //CircleTimeline.addCallback(slowDown, 5); } private function reAddCircle(target:Circle) :void { curCircle = target; curCircle.x = Math.random() * stage.stageWidth; curCircle.y = -120; CircleTimeline.insert(new TweenMax(curCircle, 5, {bezierThrough:[{x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight},{x:Math.random()*stage.stageWidth, y:stage.stageHeight+20}], orientToBezier:true, ease: Linear.easeNone, rotation: Math.random() * 900, glowFilter:{color:0xffffff, alpha:0.8, blurX:5, blurY:5, strength: 3, quality: 2}, onComplete:reAddCircle, onCompleteParams:[curCircle] }), CircleTimeline.currentTime); // Delay addChild(curCircle); } } } The Circle class (now with an image): package { import flash.events.Event; import flash.net.URLRequest; import flash.display.Loader; import flash.display.Sprite; /** * @author LilaQ */ public class Circle extends Sprite { public var rand:Number; private var target:Loader = new Loader(); public function Circle() { target.load(new URLRequest("flake.png")); target.contentLoaderInfo.addEventListener(Event.COMPLETE, Init); } private function Init(e:Event) :void { rand = Math.random(); target.alpha = Math.random()+0.5; target.cacheAsBitmap = true; target.scaleX = rand*0.4; target.scaleY = rand*0.4; target.alpha = rand*0.4; addChild(target); } } } Your help would be greatly appreciated. Greetz, LilaQ

Ok I made progress. I just use "insert" in the reAddCircle function, and delayed it to "currentTime". Works ok so far. Just need to make the snow fall less periodically, at the moment, the snow comes in "waves"

Hey, thx for the quick reply Here is my complete code (except the Circle class, but that just draws a simple Circle with random size) package { import com.greensock.plugins.BezierThroughPlugin; import com.greensock.plugins.GlowFilterPlugin; import com.greensock.plugins.TweenPlugin; import flash.events.Event; import com.greensock.TimelineMax; import flash.display.Sprite; import com.greensock.TweenMax; /** * @author LilaQ */ public class Main extends Sprite { private var CircleTimeline:TimelineMax = new TimelineMax(); private var i:int = 0; private var curCircle:Circle; public function Main() { stage.addEventListener(Event.ACTIVATE, Init); } private function Init(e:Event) :void { var bg:Sprite = new Sprite(); bg.graphics.beginFill(0x000000); bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill(); addChild(bg); TweenPlugin.activate([bezierThroughPlugin, GlowFilterPlugin]); //CircleTimeline.addCallback(, 5); for (i = 0; i < 30; i++) { curCircle = new Circle(); curCircle.x = Math.random() * stage.stageWidth; curCircle.y = -120; CircleTimeline.insert(new TweenMax(curCircle, curCircle.rand*0.5+3, {bezierThrough:[{x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight},{x:Math.random()*stage.stageWidth-50, y:stage.stageHeight}], orientToBezier:true, glowFilter:{color:0xffffff, alpha:0.8, blurX:5, blurY:5, strength: 3, quality: 2}, onComplete: reAddCircle } ),(-curCircle.rand-3)); // Delay addChild(curCircle); } //CircleTimeline.addCallback(slowDown, 5); } private function reAddCircle() :void { trace("Main.reAddCircle()"); curCircle = new Circle(); curCircle.x = Math.random() * stage.stageWidth; curCircle.y = -120; CircleTimeline.insert(new TweenMax(curCircle, curCircle.rand*0.5+3, {bezierThrough:[{x:Math.random()*stage.stageWidth, y:Math.random()*stage.stageHeight},{x:Math.random()*stage.stageWidth-50, y:stage.stageHeight}], orientToBezier:true, glowFilter:{color:0xffffff, alpha:0.8, blurX:5, blurY:5, strength: 3, quality: 2} } ), CircleTimeline.duration); // Delay addChild(curCircle); } private function slowDown() :void { if(CircleTimeline.timeScale == 1) CircleTimeline.timeScale = 0.3; else CircleTimeline.timeScale == 1; } private function reverse() :void { trace("Main.reverse(tE)"); CircleTimeline.reverse(); } private function replay() :void { trace("Main.replay(tF)"); CircleTimeline.play(); } } } Your explanation makes sense of course. My idea was to add a new snowflake every time a current one hits its finishing point, so there are alway (at the moment) 30 flakes in a tweening motion. So I thought with every new snowflake the timeline should extend itself to the current length + the length of the new flake. I'll try around a little bit while you can a look at my code I hope I don't have any embarissing flaws in the code Thanks in advance. Greetz, LilaQ

Hey there, I'm trying to add Tweens to the timeline when it's already running. I tried to .insert or .append a new Tween via a onComplete call of a prior tween (I'm trying to build some fancy snow animation) But even if I set the delay to timeline.duration, the next Tweens won't kick in Any ideas what I might be doing wrong? Thx in advance. Greetz LilaQ