temeraire

Fabulous, thank you! ?

Hi I'm having the same problem -- but I don't see the fork button anywhere. For instance, this one: https://codepen.io/GreenSock/pen/8586b002d06797032bb34a647adc01b2 Anyone know why? Thanks!

Hi Carl, Thanks. I was using 11.6 but have now upgraded to 12.1.2. And I've fixed it. What was happening was that when I declared timeline, I also instantiated it. That caused it to run no matter where I called the initTweens() function -- it just ran when the swf loaded. What I've done now is this: private var timeline:TimelineLite; And then I only instantiate it in the initTweens function: private function initTweens():void { timeline = new TimelineLite(); ... Thanks!

Hi, I have four multiple choice questions (sprites containing text fields) that I initially set to not visible. When a button is clicked, I make them visible, then I want them to fade to alpha 0, with only the correct answer remaining. The following code accomplishes this -- but only when I call initTweens() on the addedToStage handler. If I try to call it from the button click event -- playClickHandler -- the alpha fades don't happen. Can anyone see why? (Sorry, can't figure out how to format code) Thanks. package { import com.greensock.TimelineLite; import com.greensock.TweenLite; import com.greensock.easing.*; import flash.display.Bitmap; import flash.display.GradientType; import flash.display.Graphics; import flash.display.Shape; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Matrix; import flash.net.URLRequest; import flash.net.navigateToURL; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; import views.Icons; [sWF(width="400", height="350", backgroundColor="0xffffff")] public class game extends Sprite { //sprites private var container:Sprite; private var question:Sprite = new Sprite(); private var answer1:Sprite = new Sprite(); private var answer2:Sprite = new Sprite(); private var answer3:Sprite = new Sprite(); private var answer4:Sprite = new Sprite(); private var explanation:Sprite = new Sprite(); private var playButton:Sprite; //text fields private var txtQuestion:TextField = new TextField(); private var txtAnswer1:TextField = new TextField(); private var txtAnswer2:TextField = new TextField(); private var txtAnswer3:TextField = new TextField(); private var txtAnswer4:TextField = new TextField(); private var txtExplanation:TextField = new TextField(); private var vBuffer:Number = 10; //strings for textfields private var currentQuestion:String; private var currentAnswer1:String; private var currentAnswer2:String; private var currentAnswer3:String; private var currentAnswer4:String; private var currentExplanation:String; private var questionSets:Array = []; private var timeline:TimelineLite = new TimelineLite(); private var fadeSpeed:Number = 3; private var bmpplayButton:Bitmap; private var centeredAnswerPosition:Number; //create a keyword which will trigger the presentation of a given questionSet private var keyWord:String; private var questionObj:Object; private var textWidth:Number = 400; private var textHeight:Number; public function game() { this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } private function addedToStageHandler(e:Event):void { bmpplayButton = new Icons.PlayButtonMedium(); loadData("amzn"); setUpQuestion(); //initTweens(); //this works } private function playClickHandler(e:MouseEvent):void { makeVisible(); initTweens(); //code runs, but this doesn't work -- the alpha changes don't happen. } private function makeVisible():void { answer1.visible = true; answer2.visible = true; answer3.visible = true; answer4.visible = true; explanation.visible = true; } private function initTweens():void { timeline.insert(TweenLite.to(answer1,fadeSpeed, {autoAlpha:0, delay:4}),0); timeline.insert(TweenLite.to(answer3,fadeSpeed, {autoAlpha:0, delay:7}),0); timeline.insert(TweenLite.to(answer4,fadeSpeed, {autoAlpha:0, delay:10}),0); timeline.insert(TweenLite.to(answer2, 2, {x:100,scaleX:2, scaleY:2, delay: 12}),0); timeline.insert(TweenLite.to(explanation, fadeSpeed, {autoAlpha:1, delay:14}),0); timeline.append(TweenLite.delayedCall(3, clear)); } private function setUpQuestion():void { container = new Sprite(); container.name = "container"; container.buttonMode = true; container.useHandCursor = true; addChild(container); txtQuestion.name = "txtQuestion"; txtQuestion.width = textWidth; txtQuestion.wordWrap = true; txtQuestion.multiline = true; txtQuestion.type = TextFieldType.DYNAMIC; txtQuestion.autoSize = TextFieldAutoSize.LEFT; question.addChild(txtQuestion); var textFormat:TextFormat = new TextFormat("Arial", 14, 0x000000, false, false, false, "", "", "left", 0, 0, 0, 0); txtQuestion.setTextFormat(textFormat); txtQuestion.defaultTextFormat = textFormat; txtQuestion.text = currentQuestion; answer1.y = question.y + question.height + vBuffer; txtAnswer1.width = textWidth; txtAnswer1.wordWrap = true; txtAnswer1.multiline = true; txtAnswer1.type = TextFieldType.DYNAMIC; txtAnswer1.autoSize = TextFieldAutoSize.LEFT; txtAnswer1.setTextFormat(textFormat); txtAnswer1.defaultTextFormat = textFormat; txtAnswer1.text = currentAnswer1; answer1.addChild(txtAnswer1); answer1.visible = false; answer2.y = answer1.y + answer1.height + vBuffer txtAnswer2.width = textWidth; txtAnswer2.wordWrap = true; txtAnswer2.multiline = true; txtAnswer2.type = TextFieldType.DYNAMIC; txtAnswer2.autoSize = TextFieldAutoSize.LEFT; txtAnswer2.setTextFormat(textFormat); txtAnswer2.defaultTextFormat = textFormat; txtAnswer2.text = currentAnswer2; answer2.addChild(txtAnswer2); centeredAnswerPosition = stage.stageWidth/2 - answer2.width/2; answer2.visible = false; answer3.y = answer2.y + answer2.height + vBuffer; txtAnswer3.width = textWidth; txtAnswer3.wordWrap = true; txtAnswer3.multiline = true; txtAnswer3.type = TextFieldType.DYNAMIC; txtAnswer3.autoSize = TextFieldAutoSize.LEFT; txtAnswer3.setTextFormat(textFormat); txtAnswer3.defaultTextFormat = textFormat; txtAnswer3.text = currentAnswer3; answer3.addChild(txtAnswer3); answer3.visible = false; answer4.y = answer3.y + answer3.height + vBuffer; txtAnswer4.width = textWidth; txtAnswer4.wordWrap = true; txtAnswer4.multiline = true; txtAnswer4.type = TextFieldType.DYNAMIC; txtAnswer4.autoSize = TextFieldAutoSize.LEFT; txtAnswer4.setTextFormat(textFormat); txtAnswer4.defaultTextFormat = textFormat; txtAnswer4.text = currentAnswer4; answer4.addChild(txtAnswer4); answer4.visible = false; explanation.y = answer4.y + answer4.height + vBuffer; explanation.alpha = 0; //hide it txtExplanation.width = textWidth; txtExplanation.wordWrap = true; txtExplanation.multiline = true; txtExplanation.type = TextFieldType.DYNAMIC; txtExplanation.autoSize = TextFieldAutoSize.LEFT; txtExplanation.y = txtAnswer4.y + txtAnswer1.height + vBuffer; txtExplanation.setTextFormat(textFormat); txtExplanation.defaultTextFormat = textFormat; txtExplanation.text = currentExplanation; explanation.addChild(txtExplanation); explanation.visible = false; playButton = new Sprite(); playButton.name = "play"; playButton.buttonMode = true; playButton.useHandCursor = true; playButton.addChild(bmpplayButton); playButton.x = stage.stageWidth/2 - playButton.width/2; playButton.y = explanation.y + explanation.height + 5*vBuffer; playButton.addEventListener(MouseEvent.CLICK, playClickHandler); container.addChild(question); container.addChild(answer1); container.addChild(answer2); container.addChild(answer3); container.addChild(answer4); container.addChild(explanation); container.addChild(playButton); } private function loadData(questionSet:String):void { switch(questionSet) { case "cap": currentQuestion = "What is the term for the number of a company's shares currently available for trading?"; currentAnswer1 = "The Cap" ; currentAnswer2 = "The Float"; currentAnswer3 = "The Book"; currentAnswer4 = "The Major Leagues"; currentExplanation = "If a large percentage of the float is 'short' then it can set up a short squeeze."; break; case "amzn": currentQuestion = "How much has Amazon gone up in the last 10 years?"; currentAnswer1 = "100%" ; currentAnswer2 = "10000%"; currentAnswer3 = "1000%"; currentAnswer4 = "400%"; currentExplanation = "Yes, it's gone up a hundredfold. Buy and hold!"; break; } } private function clear():void { question.visible = false; answer1.visible = false; answer2.visible = false; answer3.visible = false; answer4.visible = false; explanation.visible = false; } } }

Thanks, Carl. Much appreciated.

Hi, I've got to do something like this: http://www.defabiodesign.com/clients/po ... onoma.html It looks to me like the trickiest part is coordinating the movement of the reflections. Does anyone have any thoughts on how to accomplish this using greensock? It looks like physics2D will help with the other tricky part, which is the gravity of the movement. Thanks!

Uh, yeah, fair enough. I've managed to get it working for now in what I hope is an acceptable way. Once this panicked deadline is done I'll try to post the code that was tricky. Of course by then I'll have done all the tutorials and will be better educated. Thanks for the onUpdate tip -- that will prove very handy. -- David

Well, I'm still struggling with this, now against a very immediate deadline. The following code WORKS, and does just what I want it to do. The problem is that it only works here in this test project, not in the real project. When I do a trace on the EnterFrame event here in the test project, it'supdating every half-pixel or so -- that's fine. But for some reason in the real project it only updates about every 50(!) pixels or so. I don't know why. I've begun the tutorials -- haven't gotten through them all yet. Is there some other, better way to do this? package { import com.greensock.TimelineLite; import com.greensock.TweenLite; import com.greensock.easing.*; import flash.events.Event; import flash.display.Shape; import flash.display.Sprite; [sWF(width="120", height="600")] public class Hide extends Sprite { private var overSprite:Sprite = new Sprite(); //the sprite, visible on the stage, which moves up private var maskSprite:Sprite = new Sprite(); //the sprite mask which is pinned to the bottom of the overSprite //such that it reveals the underSprite as overSprite moves upward. private var underSprite:Sprite = new Sprite(); //the sprite to be revealed. private var centerY:Number; private var centerX:Number; private var offStageX:Number = 200; private var wipeSpeed:Number = 1.5; private var timeline:TimelineLite = new TimelineLite(); public function Hide() { this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } private function addedToStageHandler(e:Event):void { drawSprites(); this.addEventListener(Event.ENTER_FRAME, enterFrameHandler); initTweens(); } private function enterFrameHandler(e:Event):void { //when bottom of overSprite goes above underSprite bottom, if(( overSprite.y + overSprite.height)< (maskSprite.y + maskSprite.height)) { //overSprite pins maskSprite to its bottom and pulls it up, to hide underSprite maskSprite.y = overSprite.y; trace("maskSprite.y = " + maskSprite.y); } } private function drawSprites():void { underSprite.graphics.lineStyle(); underSprite.graphics.beginFill(0xFF0000); //undersprite is red underSprite.graphics.drawRect(0,0,stage.stageWidth, 200); underSprite.graphics.endFill(); underSprite.y = 200; this.addChild(underSprite); overSprite.graphics.lineStyle(); overSprite.graphics.beginFill(0x000000); //overSprite is black overSprite.graphics.drawRect(0,0,100, 200); overSprite.graphics.endFill(); overSprite.y = 400; this.addChild(overSprite); maskSprite.graphics.lineStyle(); maskSprite.graphics.beginFill(0xFFFFFF); //white, but won't be visible since it's a mask. maskSprite.graphics.drawRect(0,0,stage.stageWidth, 200); maskSprite.graphics.endFill(); maskSprite.y = underSprite.y; this.addChild(maskSprite); underSprite.mask = maskSprite; } private function initTweens():void { //the bottom of the mask has to move up with the bottom of the overSprite. timeline.insert(TweenLite.to(overSprite,8, {y:-200})); //timeline.insert(TweenLite.to(maskSprite,8, {y: -200+overSprite.height})); } } }

Well, I'm still struggling with this, now against a very immediate deadline. The following code WORKS, and does just what I want it to do. The problem is that it only works here in this test project, not in the real project. When I do a trace on the EnterFrame event here in the test project, it'supdating every half-pixel or so -- that's fine. But for some reason in the real project it only updates about every 50(!) pixels or so. I don't know why. Is there some other, better way to do this? package { import com.greensock.TimelineLite; import com.greensock.TweenLite; import com.greensock.easing.*; import flash.events.Event; import flash.display.Shape; import flash.display.Sprite; [sWF(width="120", height="600")] public class Hide extends Sprite { private var overSprite:Sprite = new Sprite(); //the sprite, visible on the stage, which moves up private var maskSprite:Sprite = new Sprite(); //the sprite mask which is pinned to the bottom of the overSprite //such that it reveals the underSprite as overSprite moves upward. private var underSprite:Sprite = new Sprite(); //the sprite to be revealed. private var centerY:Number; private var centerX:Number; private var offStageX:Number = 200; private var wipeSpeed:Number = 1.5; private var timeline:TimelineLite = new TimelineLite(); public function Hide() { this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); } private function addedToStageHandler(e:Event):void { drawSprites(); this.addEventListener(Event.ENTER_FRAME, enterFrameHandler); initTweens(); } private function enterFrameHandler(e:Event):void { //when bottom of overSprite goes above underSprite bottom, if(( overSprite.y + overSprite.height)< (maskSprite.y + maskSprite.height)) { //overSprite pins maskSprite to its bottom and pulls it up, to hide underSprite maskSprite.y = overSprite.y; trace("maskSprite.y = " + maskSprite.y); } } private function drawSprites():void { underSprite.graphics.lineStyle(); underSprite.graphics.beginFill(0xFF0000); //undersprite is red underSprite.graphics.drawRect(0,0,stage.stageWidth, 200); underSprite.graphics.endFill(); underSprite.y = 200; this.addChild(underSprite); overSprite.graphics.lineStyle(); overSprite.graphics.beginFill(0x000000); //overSprite is black overSprite.graphics.drawRect(0,0,100, 200); overSprite.graphics.endFill(); overSprite.y = 400; this.addChild(overSprite); maskSprite.graphics.lineStyle(); maskSprite.graphics.beginFill(0xFFFFFF); //white, but won't be visible since it's a mask. maskSprite.graphics.drawRect(0,0,stage.stageWidth, 200); maskSprite.graphics.endFill(); maskSprite.y = underSprite.y; this.addChild(maskSprite); underSprite.mask = maskSprite; } private function initTweens():void { //the bottom of the mask has to move up with the bottom of the overSprite. timeline.insert(TweenLite.to(overSprite,8, {y:-200})); //timeline.insert(TweenLite.to(maskSprite,8, {y: -200+overSprite.height})); } } }

Bejesus what a marvelous tool you've created. As someone famous once said on Bad Lip Reading: Ding-dong lamma wanna jumpin' with an ice pick! Thanks.

Many thanks. So onUpdate is not, I gather, used as a substitute for onEnterFrame, i.e. if you wanted a repeated action (such as rotation) to be occuring during the tween.

Hi, Sorry, this must be very obvious, but I can't find it anywhere. If you're using a timeline, how do you do 2 simultaneous tweens? I want a sprite to tween up, and drag along with it a mask which tweens at the same time, such that when the bottom of the sprite passes over another 'background' sprite, the background sprite disappears with an upward wipe. So I need two simultaneous tweens: one for the sprite, and one for the mask which is basically 'glued' to the bottom of the sprite. Thanks!

Hi, I'm trying to rotate a Sprite around its center, quickly, kind of like what you see at http://www.popchips.com/holidaycard/ with the bag on the right (after the swf finishes loading). That is, I need it to go up, spin around its center point quickly (and then, instead of landing back down, it'll keep going up and shoot out the top of the stage). It's clear how to tween the y position, but not the rotation. I've got a timeline instance which is using append() to string together a series of tweens. I'm not sure how to get that quick rotation effect -- would I use onUpdate? And how about the registration point being the center of the sprite -- is TransformAroundPointPlugin necessary for that? I'd be glad to go club green if I can see a way to do this... Thanks!

Hi, The explosion itself is working fine, based on a clickhandler: var obj:Object; var finished : int = 0; for each(obj in arrWordObjects) { var angle:Number = Math.atan2(obj.bitmap.y-centerY, obj.bitmap.x - centerX); var dist:Number = -2000; //this just gets everything offscreen nicely var destX:Number = obj.bitmap.x + dist * Math.cos(angle); var destY:Number = obj.bitmap.y + dist * Math.sin(angle); TweenLite.to(obj.bitmap,2,{x:destX, y:destY}); if(++finished == arrWordObjects.length){ flyInRewrites(); return; } I can't use onComplete, because I'm calling TweenLite.to() in a loop. So that last conditional works, calling the next function only if the for-each loop has completed. I know it's being called (with a trace statement) but it doesn't seem to work What I'm doing is flying in new text, in place of the original. So, I've done the exact same thing to position textfield2's bitmaps outside of the visible stage to start with. Then, I call flyInRewrites: var obj:Object; for each(obj in arrRewrittenWordObjects) { //sample trace statements showing that the starting points are out of view, //and the destination points are where they should be: //obj.bitmap.x, obj.bitmap.y = 1895.5,813.1 obj.X, obj.Y = 2,2 //obj.bitmap.x, obj.bitmap.y = 1888.65,850.6 obj.X, obj.Y = 12,2 TweenLite.to(obj.bitmap,.5,{x:obj.X, y:obj.Y}); } But I see nothing -- nothing's flying in. Any idea why? Thanks! David

Thanks, guys. Since I want them all to end up in different places, it seems to me that what I have to do is this: I know the center point of the textfield (which is called explodeOrigin in your splitTextField example). And I know the x and y position of each word/bitmap. So I can draw a line from the center to that x,y point. I can then get the angle formed by that line. If I choose a point off the stage, but in line with that line, t hen that should be my destination point for each word (that is, a different destination point for each word, emanating out from the center.) I don't know what the AS3 trig is to define that point for each item, but does that sound like the correct approach? -- David