PapaDeBeau

Hi, I just recently took Carl's free class "GSAP Express" and am loving it so much that I became a lifetime member. It's amazing. Thank you for your hard work and great teaching style. I have one silly question. I call it silly because I know I am close and it must be one little thing "silly" I am missing. QUESTION: Why is my timeline in this forEach not playing? I see the code is running in the log but not the timeline. Also, why am I seeing this in the log? In my mind I see no mistake compared to Carl's example. What am I missing? After 10 years plus being a part of this community, not very active, I am finally REALLY diving in and taking classes. Loving it and this amazing forum and community. Why did I wait so long? Thanks for all you do.

QUESTION: Based on this topic. Hi, I love this idea. It's a "little" more advance than I would like. Is it possible to simplify and manually animate to an anchor? For example not use Arrays etc and do "Something Like": // ON CLICK gsap.to("#AnchorOne", {y:AnchorOne.position]); I understand this is not the exact code. Just using and example. I don't mind if it's more manual, as long as I understand it. Thanks so much.

QUESTION: Forgive me if I missed it, but I think the question was "how do you 'trigger' audio with scroll trigger at a certain point?" This is what I would like to know. I don't want to start a new question so I am hoping this gets some attention still. Thank you. I love GSAP.

Thank you. This works if the div is called .test. What if we want it to spin ANY div it clicks on. I didn't know how to put a PEN inline. Here is the exampled: https://codepen.io/PapaDeBeau/pen/Vwqvoez

Thank you, Jack, for your replay. Ok so I understand a little more, but how would I make it so whatever element I clicked on that would rotate? This is essentially what I am trying to do. So I just have one THIS button and the rotation is applied to every element I click. This must be possible right? Thanks

$(this).on("click", function(){ gsap.to($(this), .5, {rotation:360, transformOrigin:"50% 50%"}); }); JQuery sess the $(this) and recognizes the click and runs but in the function it does not see the $(this) and I get an error: Invalid property rotation set to 360 Missing plugin? gsap.registerPlugin(). I am loading GSAP by a script tag like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> The GSAP will work if it's outside of the click function but will not work in the click function. How do I get GSAP to see the object I clicked on? Thanks

Hi, Sorry for my simplicity in this question. I have been a paying member for YEARS now and I very rarely ask questions. Anyway thanks for your patience. Here is my goal. I want to load a list of hundreds of Names from a Database, maybe even over 1K or 2K. Then I load them into jQuery Array. I want to have like maybe 10 or 20 names float from the bottom to the top. In short this is like a Memorial Wall of people who have passed away. We want to honor their life with music etc... I have code working but when its coded very poorly. When I get many names it CHUGS and STUTTERS because it's creating huge amounts of DIVS and animating them all. This is bad I know. I would like to, maybe, animate only 10 to 20 and then once off screen I would UNLOAD OR HIDE the div to free up resources. I would also like to maybe add a candle the is animated by the name as well. This would also take up huge resources if it was many names loaded. What is the best way to loop though hundreds maybe even thousands of names and not have to load them in all in one go. Also, I would like the names to float up at various speeds as an option and would like them to be in random x positions as they go up. ANOTHER issue with my code is that sometimes the names are so long they go off the right side of the screen. They are not contained. I am guessing this is fairly simple, but gosh I just don't know how to do it. I Thank you in advance for helping me overcome this. I put my example on CodePen with reloaded STATES as the names, but eventually those NAMES will be real names loaded from a Database. var W = $(window).width(); var H = $(window).height(); for (i = 0; i < Names.length; i++) { $(".P").append('<div class="C" >' + Names[i] + "</div>"); var tl = gsap.timeline({ delay: 1 }); var Mary = $(".C").width(); gsap.fromTo( ".C", { y: H + 100, x: "random(0, " + W / 2 + ")", opacity: 0 }, { y: -333, opacity: 1, duration: 14, stagger: 0.8 } ); } I didn't put the NAMES vars in this code above but I did in the working example in CodePen. Thanks for your help. The code is here: https://codepen.io/PapaDeBeau/pen/LYBEjdb

Link is broken. I could use this. Thanks

And so is it updated then?

How do I get my mc to be active after I animate my blitmask? I am missing just one line of code somewhere i believe. My Content:MC I am bringing in works and has active buttons. They only stopped working when I added the Blitmask for faster scrolling. But how do I get it back after the update? Thanks package com { import flash.display.MovieClip; import flash.events.*; import flash.utils.getTimer; import flash.geom.Rectangle; import flash.display.Shape; // Greensock Annimation import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.plugins.TransformAroundCenterPlugin; TweenPlugin.activate([TransformAroundCenterPlugin]); TweenPlugin.activate([TransformAroundPointPlugin]); import com.greensock.plugins.CacheAsBitmapPlugin; TweenPlugin.activate([CacheAsBitmapPlugin]); TweenPlugin.activate([ThrowPropsPlugin]); public class scrollContent extends MovieClip { public var mc: MovieClip; public var bounds: Rectangle; public var MainStage: MovieClip; public var blitMask: BlitMask; public var t1: uint, t2: uint, y1: Number, y2: Number, yOverlap: Number, yOffset: Number; public function scrollContent(Content: MovieClip) { // constructor code addEventListener(Event.ADDED_TO_STAGE, init); mc = Content; } public function init(e: Event) { MainStage = this.parent as MovieClip; trace("scroll Stage: " + MainStage); bounds = new Rectangle(0, MainStage.MenuBar.height, Main_Activate._screenX, Main_Activate._screenY - MainStage.MenuBar.height); addChild(mc); blitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } public function mouseDownHandler(event: MouseEvent): void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } public function mouseMoveHandler(event: MouseEvent): void { var y: Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t: uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } public function mouseUpHandler(event: MouseEvent): void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var yVelocity: Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, { throwProps: { y: { velocity: yVelocity, max: bounds.top, min: bounds.top - yOverlap, resistance: 300 } }, onUpdate: blitMask.update, ease: Strong.easeOut }, 10, 0.3, 1); } } }

Hi, Not sure how many questions get asked about flash these days but I have one. I have having issues on scrolling using the code below. It works but but its slow. I am thinking a "blitmask" would work great here but I don't know where I would put it. Can you give me some tips? Thanks -Ed /// SCROLL BAR /////////////////////// public function throwIt(clipContent:MovieClip) { // old code //var bounds:Rectangle = new Rectangle(_screenX - clipContent.width,0,_screenX,_screenY); // custom var var bounds:Rectangle = new Rectangle(0,0,_screenX,_screenY); //var mc:Sprite = meow.getChildByName("content") as MovieClip; var mc:Sprite = clipContent as MovieClip; addChild(mc); //some variables for tracking the velocity of mc var t1:uint,t2:uint,y1:Number,y2:Number; mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; t1 = t2 = getTimer(); mc.startDrag(false, new Rectangle(bounds.x, -99999, 0, 99999999)); mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function enterFrameHandler(event:Event):void { //track velocity using the last 2 frames for more accuracy y2 = y1; t2 = t1; y1 = mc.y; t1 = getTimer(); } function mouseUpHandler(event:MouseEvent):void { mc.stopDrag(); mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; var yOverlap:Number = Math.max(0,mc.height - bounds.height); ThrowPropsPlugin.to(mc, {ease:Strong.easeOut, throwProps:{y:{velocity:yVelocity, max:bounds.top , min:bounds.top - yOverlap - (littleLogo.height + littleLogo.height/3) , resistance:777}}}, 33, 0.25, .3); } } ////////////////// /// end SCROLL/////////////

SOLVED: - I think So here is what I did. I made a new boolean: var flagsClickNow:Boolean = true; Then instead of using a MouseEvent.CLICK - I used a MouseEvent.MOUSE_DOWN Then I did an event listener using a MOUSE_MOVE event. If it is moving I made the boolean false so when the finger came off the button it would not triger the button. When on a mouse_up event I set the boolean back to true. So now when they click on a button while it's not moving it will go to the MC I intended. Does this make sense? Do you see any potential pitfalls? I still think you guys should do a tutorial based off of this logic Thanks Amigos!

Hi guys, Thanks for the great tips. Let me try to explain what exactly I need. First I will say I did something that "kind of" helped by making the button press on the bittMask a touch event, a "tap" or a "press" mobile event. That helped a little but its still a little sketchy and I want to ensure it's the best for the users. In short my "Flag Buttons" load two by two all the way down off the screen. Each flag when "pressed" is supposed to do an action. But I want the whole bittMask to be "flickable" like the iPhone screens that have more content below... like a scroll to see the new content. I am hoping you know what I mean. Anyway, the "flick" always works but sometimes when you start the flick from a button it "flicks" but when I let go it calls the function from the button and loads that screen. I hope this makes sense. Please let me know what works best with this. I have a testFlightApp account so I can send you a demo if you need. Please email me at ed.vizenor@gmail.com and I can add your iPhone to my testing account to show you. Thanks for all your support and this great product. P.S. I think that that one of you suggested is the issue but I look at the book to read on that page and it has so many HUGE code bits and even new people posting their code for help that its hard to find out what the answer is. Perhaps JACK or you guys could do a tutorial on this subject because my guess is 90 percent of users who use throwprops on devices will want to achieve this effect on smart phones. Or maybe you could upload another thowprop example with code on it

I am sure this might be a common issue but I have buttons in my mc that is being moved by throws prop with the iPhone effect. I am using eventListerners. How do I fix this issue? It is creating buttons dynamically in this function and adding dynamic event listners to each button and then finally putting them all in on MC and making it "flickable" with throwProps. Here is my code/// DECLARES flagMC var flagMC:MovieClip = new MovieClip(); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var blitMask:BlitMask; function displayFlags(evt:Event = null) { trace("DISPLAY FLAGS---------------"); if(!Lang) { trace("No Lang!"); return; } var p:uint = 0; for (var i:uint = 0; i < Lang.length; i++) { flag = new Loader(); flag.load(new URLRequest(File.applicationStorageDirectory.url + "Languages/" + Lang + "/roundFlag.png")); flag.name = Lang; flagButton = new roundFlag(); flagButton.btext.text = Lang; addChild(flagButton); flagButton.removeChildAt(1); flagButton.addChildAt(flag,1); flag.addEventListener(MouseEvent.CLICK, loadLang(Lang,flagMC)); var fh = flagButton.getBounds(flagButton); if (i % 2){ flagButton.x = flagButton.width + flagButton.width/20; flagButton.y = fh.y * i;} else {flagButton.x = 0; trace("I is " +i); flagButton.y = fh.y * i; } // flagButton.y = fh.y * i; trace(fh.height); trace("Flag Button Height " + flag.height); flagMC.addChild(flagButton); } //addChild(flagMC); flagsIn(); flagMC.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } //B1.addEventListener(MouseEvent.CLICK, getLang); //B2.addEventListener(MouseEvent.CLICK, displayFlags); import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; function mouseDownHandler(event:MouseEvent):void { trace("Mouse Down"); TweenLite.killTweensOf(flagMC); y1 = y2 = flagMC.y; yOffset = this.mouseY - flagMC.y; yOverlap = Math.max(0, flagMC.height - bounds.height); t1 = t2 = getTimer(); flagMC.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); flagMC.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if flagMC's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { flagMC.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { flagMC.y = (y + bounds.top - yOverlap) * 0.5; } else { flagMC.y = y; } //blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = flagMC.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { trace("Mouse Up"); flagMC.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); flagMC.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (flagMC.y - y2) / time; ThrowPropsPlugin.to(flagMC, {throwProps: { y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}, //onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); } that causes the issue:

oh wow. I just did research on blitMask. I would love to get this code working on this app. It's for a phone. I sent the fla. Can you take a look at it. I also included the code pasted but you need the files to see how it's not working. Now I want to Mast blitMask. It seems to be so fast! Thanks again.

OK I GOT IT TO WORK.. . But I am worried because I just deteted and added and got WAY LUCKY!!! I am afraid this may break later and I don't know why. I would like to understand what it could hurt that I removed 2 blitMask updates. This scares me that I got luck. also the addEventlistner would NOT work as a blitMask. I had to change it to the var mc. the small changes to make it work. I had to REMOVE 2 blitMask updates and add the mc after the dot in the blitMask section. blitMask = new BlitMask(mc.flagButton, bounds.x, bounds.y, bounds.width, bounds.height, false); THE FULL CODE BEOW import flash.filesystem.File; B1.btext.text = "Press me 1st"; B2.btext.text = "Press me 2nd"; var folderLanguages:File = File.applicationDirectory.resolvePath("Languages"); var availLang:Array = folderLanguages.getDirectoryListing(); var Lang:Array; var LangPath:Array; var flagButton:MovieClip; function getLang(evt:Event) { Lang = new Array(); LangPath = new Array(); for (var i:uint = 0; i < availLang.length; i++) { if(availLang[i].isDirectory) { //trace(availLang[i].name);// gets the name Lang.push(availLang[i].name); LangPath.push(availLang[i].nativePath); trace(availLang[i].nativePath);// gets the name } } evt.target.visible = false; } var Language:MovieClip; var LangButton:MovieClip; var flag:Loader; var fh:Object; /// DECLARES MC var mc:MovieClip = new MovieClip(); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var blitMask:BlitMask; function displayFlags(evt:Event = null) { if(!Lang) { return; } flagButton = new MovieClip(); for (var i:uint = 0; i < Lang.length; i++) { //Language = new MovieClip(); //Language.name = Lang[i]; LangButton = new button01(); LangButton.name = Lang[i]; LangButton.btext.text = Lang[i]; LangButton.y = LangButton.height * i; LangButton.btext.x = 125; addChild(LangButton); flag = new Loader(); flag.load(new URLRequest(LangPath[i]+"/flag.png")); flag.name = Lang[i]; flag.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedFlag); function loadedFlag(evt:Event) { var fh = flag.getBounds(flag); trace("FLAG HEIGHT = " + fh); trace("flag Name: "+ flag.name); trace(flag); var myFlagInfo:LoaderInfo = evt.currentTarget as LoaderInfo; var myFlag:Loader = myFlagInfo.loader; myFlag.y = (LangButton.height/2) - (flag.height/2); } LangButton.addChild(flag); flagButton.addChild(LangButton); } evt.target.visible = false; addChild(flagButton); addChild(mc); mc.addChild(flagButton); blitMask = new BlitMask(mc.flagButton, bounds.x, bounds.y, bounds.width, bounds.height, false); mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } B1.addEventListener(MouseEvent.CLICK, getLang); B2.addEventListener(MouseEvent.CLICK, displayFlags); import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; function mouseDownHandler(event:MouseEvent):void { trace("Mouse Down"); TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } //blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps: { y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}, //onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); }

Hummm ok Let's try this. Can you help me? This is all I am trying to do. I need to figure out a way to get MC's "like this" in the future into your awesome plugin and working. In this case I need to have the MC called "flagButton" controlled by greensock. I am including a link to the zipped folder you you can test it. http://www.massmediamail.com/testing/GreensockRocks.zip Here is my code alone: import flash.filesystem.File; B1.btext.text = "Press me 1st"; B2.btext.text = "Press me 2nd"; var folderLanguages:File = File.applicationDirectory.resolvePath("Languages"); var availLang:Array = folderLanguages.getDirectoryListing(); var Lang:Array; var LangPath:Array; var flagButton:MovieClip; function getLang(evt:Event) { Lang = new Array(); LangPath = new Array(); for (var i:uint = 0; i < availLang.length; i++) { if(availLang[i].isDirectory) { //trace(availLang[i].name);// gets the name Lang.push(availLang[i].name); LangPath.push(availLang[i].nativePath); trace(availLang[i].nativePath);// gets the name } } evt.target.visible = false; } var Language:MovieClip; var LangButton:MovieClip; var flag:Loader; var fh:Object; function displayFlags(evt:Event = null) { if(!Lang) { return; } flagButton = new MovieClip(); for (var i:uint = 0; i < Lang.length; i++) { //Language = new MovieClip(); //Language.name = Lang[i]; LangButton = new button01(); LangButton.name = Lang[i]; LangButton.btext.text = Lang[i]; LangButton.y = LangButton.height * i; LangButton.btext.x = 125; addChild(LangButton); flag = new Loader(); flag.load(new URLRequest(LangPath[i]+"/flag.png")); flag.name = Lang[i]; flag.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedFlag); function loadedFlag(evt:Event) { var fh = flag.getBounds(flag); trace("FLAG HEIGHT = " + fh); trace("flag Name: "+ flag.name); trace(flag); var myFlagInfo:LoaderInfo = evt.currentTarget as LoaderInfo; var myFlag:Loader = myFlagInfo.loader; myFlag.y = (LangButton.height/2) - (flag.height/2); } LangButton.addChild(flag); flagButton.addChild(LangButton); } evt.target.visible = false; addChild(flagButton); } B1.addEventListener(MouseEvent.CLICK, getLang); B2.addEventListener(MouseEvent.CLICK, displayFlags); I need to master this concept and I was trying to use your example and change things based off of what I thought might work. Thus it got really messy. Thanks for your help and the great plugin.

Thanks for the update. I got excited, sadly I am getting this error after adding that code right after the addchild TypeError: Error #1009: Cannot access a property or method of a null object reference. at com.greensock::BlitMask/update()[C:\User\yadaya\com\greensock\BlitMask.as:295] For Example: mc = new MovieClip; addChild(mc); blitMask.update(null,true); mc.addChild(flagButton); mc.alpha = .3; is not working... the alpha works when I don't add a my.addChildren(flagbutton);

I am really bummed its not easy to find an example of how to use throwProps with a movie clip. Is there an example or several to see or use? When where we can have a menu button like the iphone... or the MovieClip flicks as if it was text but its a movieclip Thanks

Ok I figured some of it. I got my mc to move via throwprops, HOWEVER, now my flags are gone. I am loading a dynamicly loaded mc and dynamically loaded flags. I know I am doing it right. This must be an error in greensock script perhaps? Its not showing children of children? import flash.filesystem.File; var folderLanguages:File = File.applicationDirectory.resolvePath("Languages"); var availLang:Array = folderLanguages.getDirectoryListing(); var Lang:Array; var LangPath:Array; var flagButton:MovieClip; function getLang(evt:Event) { Lang = new Array(); LangPath = new Array(); for (var i:uint = 0; i < availLang.length; i++) { if(availLang[i].isDirectory) { //trace(availLang[i].name);// gets the name Lang.push(availLang[i].name); LangPath.push(availLang[i].nativePath); trace(availLang[i].nativePath);// gets the name } } evt.target.visible = false; } var Language:MovieClip; var LangButton:MovieClip; var flag:Loader; var fh:Object; var mc:Sprite; var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); //setupTextField(mc, bounds); var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; function displayFlags(evt:Event = null) { if(!Lang) { return; } flagButton = new MovieClip(); addChild(flagButton); mc = new MovieClip(); addChild(mc); for (var i:uint = 0; i < Lang.length; i++) { //Language = new MovieClip(); //Language.name = Lang[i]; LangButton = new button01(); LangButton.name = Lang[i]; LangButton.btext.text = Lang[i]; LangButton.y = LangButton.height * i; LangButton.btext.x = 125; addChild(LangButton); flag = new Loader(); flag.load(new URLRequest(LangPath[i]+"/flag.png")); flag.name = Lang[i]; flag.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedFlag); function loadedFlag(evt:Event) { var fh = flag.getBounds(flag); trace("FLAG HEIGHT = " + fh); trace("flag Name: "+ flag.name); trace(flag); var myFlagInfo:LoaderInfo = evt.currentTarget as LoaderInfo; var myFlag:Loader = myFlagInfo.loader; myFlag.y = (LangButton.height/2) - (flag.height/2); } LangButton.addChild(flag); flagButton.addChild(LangButton); flagButton.alpha = .3; mc.addChild(flagButton); } evt.target.visible = false; bounds = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); //setupTextField(mc, bounds); blitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); //t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); } B1.addEventListener(MouseEvent.CLICK, getLang); B2.addEventListener(MouseEvent.CLICK, displayFlags);

thanks for the awesome tip. I was sooo sleepy when I posted this. I could not even think to hit enter. Anyway, that seemed to do it but for some reason throwprops is not picking it up. Its not moving. The alpha for flagButton works but its not being moved by throwProps. Not sure why. I have Maybe there is something blocking it? Humm I know the script is connected properly because I tested it with the movieClip B1 and it work. .

Following code gets this error: Parameter child must be non-null. Just trying to get several movieClips into one and laoding that one into throwprops.. What am I doing wrong? GETS ERROR: Parameter child must be non-null. import flash.filesystem.File; var folderLanguages:File = File.applicationDirectory.resolvePath("Languages"); var availLang:Array = folderLanguages.getDirectoryListing(); var Lang:Array; var LangPath:Array; var flagButton:MovieClip; function getLang(evt:Event) { Lang = new Array(); LangPath = new Array(); for (var i:uint = 0; i < availLang.length; i++) { if(availLang[i].isDirectory) { //trace(availLang[i].name);// gets the name Lang.push(availLang[i].name); LangPath.push(availLang[i].nativePath); trace(availLang[i].nativePath);// gets the name } } evt.target.visible = false; } var Language:MovieClip; var LangButton:MovieClip; var flag:Loader; var fh:Object; function displayFlags(evt:Event = null) { if(!Lang) { return; } var flagButton:MovieClip = new MovieClip(); addChild(flagButton); for (var i:uint = 0; i < Lang.length; i++) { //Language = new MovieClip(); //Language.name = Lang[i]; LangButton = new button01(); LangButton.name = Lang[i]; LangButton.btext.text = Lang[i]; LangButton.y = LangButton.height * i; LangButton.btext.x = 125; addChild(LangButton); flag = new Loader(); flag.load(new URLRequest(LangPath[i]+"/flag.png")); flag.name = Lang[i]; flag.contentLoaderInfo.addEventListener(Event.COMPLETE, loadedFlag); function loadedFlag(evt:Event) { var fh = flag.getBounds(flag); trace("FLAG HEIGHT = " + fh); trace("flag Name: "+ flag.name); trace(flag); var myFlagInfo:LoaderInfo = evt.currentTarget as LoaderInfo; var myFlag:Loader = myFlagInfo.loader; myFlag.y = (LangButton.height/2) - (flag.height/2); } LangButton.addChild(flag); flagButton.addChild(LangButton); } evt.target.visible = false; flagButton.alpha = .2; callFlagButton(); } B1.addEventListener(MouseEvent.CLICK, getLang); B2.addEventListener(MouseEvent.CLICK, displayFlags); function callFlagButton() { import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var mc:Sprite = flagButton; addChild(mc); //setupTextField(mc, bounds); var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); } }

I am getting strange spaces in my Android at the top, like ten pixels of white space when I use throwprops and I am getting the same white space on the iphone on the left, about 15 pixels. Here is my code below. What am I missing? I just noticed I have the imports in there twice but I don't think that should matter. This is my first time I actually got throwprops to work on an App. I am very excited to see what can be done. flagButton.width = stage.stageWidth - 50; flagButton.scaleY = flagButton.scaleX; flagButton.x = stage.stageWidth/2 - flagButton.width/2; import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.*; import flash.display.Sprite; import flash.events.MouseEvent; import flash.utils.getTimer; import flash.events.Event; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.easing.Strong; TweenPlugin.activate([ThrowPropsPlugin]); import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var mc:Sprite = flagButton; addChild(mc); //setupTextField(mc, bounds); var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); }

Here is an EXAMPLE of the video turning black when I animate it: http://www.massmediamail.com/fortheholychurch/?p=projects Let me know when you viewed this because I think I found a work around and when you did I am going to make the edits so it can work. Basically it has to do with the x and y properties for some reaon. I believe if I animate the Left and Top instead then the video will be able to be seen and clicked on. Right now, using firefox 18, on my computer it just shows a black box and I can't click on it. Agian I will make the edits and test it after you confirm it doesnt work.

GREAT! Actually the "Left" and "Top" properties worked on firefox 3. On the link you gave as an example for firefox 3 the red box did not even show up, but the green box did and animated. Also, interesting note, and I asked this question on this form regarding a "youtube" frame that goes black in firefox when you animate it.. but now that I changed the property from y to top it actually does animate in version 18+ and before it would animate but simply be a black video screen and not play. Any ideas why this might be? Thanks for the rocking awesome help. The support here is just amazing. I have yet to try the javascript detection for older versions but I will soon and keep you posted.