dada78

Hi guys, I would like to simply tween the .banner background from a radial gradient to a linear gradient currently commented out in the codepen. I was hoping to accomplish that with the CSSPlugin. Not sure if I am not using it correctly, but it doesn't seem to be animating...I also imported the colorProps plug-in but am not sure how to implement it exactly. Thanks!

Nevermind, found it: http://codepen.io/GreenSock/pen/Fqmsa

Hi Carl, do you also have a codepen of the banner example you showcased at the presentation? Thanks!

Diaco and Carl, thanks so much, that's exacyly what I needed and it can't any more straight forward. I do have a dumb question: I am new to codepen and I don't see the reference link to the Greensock library anywhere on that codepen you referenced. I would assume it needs to be included, no? What am I missing here? Thanks!

Hi Carl, we really enjoyed your presentation the other day! I found the above referenced codepen and it's exactly what I need for a banner I am working on, only that I am not quite sure how to initiate the animation of the flip to happen automatically on load or how I would be able to control it using the timeline method to initiate it at a certain time. I just don't need it on hover. Thanks in advance!

Hi, I am getting a bit confused after looking at all the different restart of a tween examples... All I would like to do is store one tween (myTween) in a variable and later restart that tween. Here is my code: import com.greensock.TweenMax; import com.greensock.TimelineLite; import com.greensock.easing.*; var tl = new TimelineLite(); var myTween:TweenMax = new TweenMax(card, .5, {x:148, y:168, scaleX:1, scaleY:1, blurFilter:{blurX:0, blurY:0, remove:true}}); //runs the card unblur function .2 seconds into the previous tween tl.add([cardReg], "-=0.1") tl.to(txt1, 1, {alpha:1}, "+=1") .to(card, .4, {alpha:0, scaleX:3, scaleY:3}, "+=1") .restart(myTween); stop(); Please advise. Thanks!

Great, thanks Carl!

Hi guys, I am new to AS3 and am trying to figure out how I can determine which asset should be loading on top or below the current asset. I would prefer to just have 2 physical mcs on the stage that I could load the assets into and layer them based on my preference. Currently I have the following code and all I would like to do is make the container the assets are being loaded into a real movieclip on the timeline rather than a dynamically created one. How would I change the code in order to accomplish this? Goal: To have img2.jpg loaded below img0.png Thanks! import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.*; //create a LoaderMax named "mainQueue" and set up onProgress, onComplete and onError listeners var queue:LoaderMax = new LoaderMax({name:"mainQueue",onProgress:progressHandler,onComplete:completeHandler,onError:errorHandler}); //append several loaders queue.append( new ImageLoader("imgs/img1.jpg", {name:"photo1", estimatedBytes:22000, container:this, alpha:1, x:0, y:109}) ); queue.append( new ImageLoader("imgs/img0.png", {name:"img0", estimatedBytes:36000, container:this, alpha:1, x:55, y:114}) ); queue.append( new ImageLoader("imgs/img2.jpg", {name:"photo2", estimatedBytes:22000, container:this, alpha:0, x:500, y:109})); //start loading queue.load(); function progressHandler(event:LoaderEvent):void { trace("progress: " + event.target.progress); } function completeHandler(event:LoaderEvent):void{ var image2:ContentDisplay = LoaderMax.getContent("photo2"); TweenLite.to(image2, .5, {alpha:1, x:0, delay:3}); trace(event.target + " is complete!"); }

In order to add a color Tween to the tab area I did this: Inside the onMouseOver function I added the following: This will animate the background tab color: TweenMax.to(mousedOver.tab.bgrColor, .5, {colorTransform:{tint:0x2ea0dd, tintAmount:1}}); and then in an if else statement to reset: if(mc.props.ind != mousedOver.props.ind ){ TweenMax.to(mc.tab.bgrColor, .5, {colorTransform:{tint:0x2ea0dd, tintAmount:0}}); }

I figured it out: I just created a container called panelHolder and added the 3 panel movieclips in there, then referenced them accordingly in the code like for example: panelHolder.panel1.props = {ty:266, by:516, ind:1}; panelHolder.panel1.addEventListener(MouseEvent.ROLL_OVER, onMouseOver); for(var i:int=0; i<panelHolder.numChildren; i++) var mc:MovieClip = MovieClip(panelHolder.getChildAt(i));

Ok, I was following that tutorial and had everything working until it all broke: Every time I add another movieclip manually to the stage like a background for example or text mc it throws errors such as this one and the accordion stops working: ERROR: TypeError: Error #1010: A term is undefined and has no properties. at Accordion_Test_fla::MainTimeline/onMouseOver()[Accordion_Test_fla.MainTimeline::frame1:57] wich is pointing to this line: if(mc.props.ind <= mousedOver.props.ind){ ---------------------------------------------------------------------------------------------------------------- Here is the code portion: import com.greensock.*; import com.greensock.easing.*; //Start top position(ty) and bottom position (by) of expanded panel -- I thought using ty and by would not work but it did animate as it's supposed to until it broke panel1.props = {ty:266, by:516, ind:1}; panel2.props = {ty:400, by:650, ind:2}; panel3.props = {ty:534, by:784, ind:3}; panel1.addEventListener(MouseEvent.ROLL_OVER, onMouseOver); panel2.addEventListener(MouseEvent.ROLL_OVER, onMouseOver); panel3.addEventListener(MouseEvent.ROLL_OVER, onMouseOver); function onMouseOver(e:MouseEvent):void { //Determine the panel which was moused over var mousedOver:MovieClip = MovieClip(e.target); //Loop through all of the panels and animate them to the correct position. for(var i:int=0; i<numChildren; i++) { //Inside the loop I created a new variable named "mc" var mc:MovieClip = MovieClip(getChildAt(i)); //check whether the index of the current clip is less than or equal to the index of the clip that was clicked/mouseover on. if(mc.props.ind <= mousedOver.props.ind){ //if it is we need to animate to the top TweenLite.to(mc, .5, {y:mc.props.ty}); } //if not animate to the bottom else { TweenLite.to(mc, .5, {y:mc.props.by}); } } } stop(); Any idea how I could make this work? Thanks in advance!

Thanks Carl, this is exactly the tutorial I settled on (mainly the response from Mike) which works great, however it is defining the most left and most right x position as so for example: panel1.props = {lx:0, rx:570, ind:1}; I however need to adjust this for a vertical version, what would the properties be for top y and bottom y? panel1.props = {ty:0, by:570, ind:1}; doesn't seem to do anything... --------------------------------------------------------------------------------------- Nevermind it did work! Just needed to edit the Tweenlite properties to0 : TweenLite.to(mc, .5, {y:mc.props.ty}); and TweenLite.to(mc, .5, {y:mc.props.by}

Hi, I have been searching for a good example of creating a simple accordion menu, but everything I have come across seems over engineered. 1_I really like the simplicity of this menu: http://codepen.io/ewe1991/pen/agfqA but can't figure out how I could convert the jQuery code to AS3? Does anyone have any ideas? 2_ Could this be accomplished using the blitMask plugin? For example: Set up: 3 mcs that each contain a tab panel portion and a content portion. Have the blitMask to be 1/3 th size of each mc and then when the user hovers over, have the height of the blitMask itself animate top down to reveal the content. --> So based on which mcs is targeted, I would set up a function that would animate the height of the mask and position of the mcs. For example, if user rolls over mc1, blitMask1 would expand down and whatever previously hovered over mc was open would collapse - the blitMask of that mc contracting in height, while the other one is expanding. I have been losing hair over this... Thanks guys!

Awesome, thanks Rodrigo!

Hi, is there an example available to create the same menu only in AS3? Thanks for any tips!

Hi, I have been struggeling figuring out a simple slideshow using next and previous buttons. Currently I have a slideShow container with 4 movieclips arrranged next to one another. Essentially what I would like is have the slideshow cycle through the 4 slides in the slideshow container and have a next and previous button executable at anytime, but I have no idea on how to accomplish this. This is what I have at the moment: import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite(slideShow, 0.5, {x:"0"}) ); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-280"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); timeline.append( new TweenLite(slideShow, 0.5, {delay:2, x:"-260"})); Any help is highly appreciated! Thanks, Dada

Hi, I am working on this slot machine effect based on this tutorial: http://www.snorkl.tv/2011/10/use-blitmasks-wrap-feature-for-easy-bitmap-scrolling-and-looping/ and it works great: var blitMask:BlitMask = new BlitMask(strip1, strip1.x, strip1.y, 94, 105, true, true, 0, true); TweenMax.to(strip1, 2, {y:960}); //blur to 40 and then back to 0. TweenMax.to(strip1, 0.8, {blurFilter:{blurY:20}, repeat:1, yoyo:true}); My issue is that I can't figure out how to have a ease:Bounce.easeOut applied. I tried: TweenMax.to(strip1, 2, {y:960, ease:Bounce.easeOut}); but this looks too rough...All I would like to achieve is a slight bounce effect, when the number is locking into the slot. How would I be able to achieve this? Thanks, C

Hi, I would like to create a simple count-up from let's say 0 to 1000. I would also like to control about the time it takes to count up to that number and have a vertical blur effect applied, kind of like in an odometer. Is that possible in AS2? Thanks for any help, Dada

Sweet! That works like a charm! Thanks a million! Best, Dada

Hi, thanks for your suggestions, however I am new to Tweenlite and am not sure exactly how to go about doing the reset of the tween. So what i would like to do is have one function with a simple Tweenlite animation like so: function expand(){ TweenLite.to(expand_content, 1, {height:198}); TweenLite.to(player, 1.5, {opacity:1, delay:1}); } and then another function which gets fired when a button is clicked. This should reset the animation to the beginning, so when the user clicks again and the expand(); function gets called again, the animation should play again. function reset() { } I would like to keep js file size down, so only imported the following js: <script src="CSSPlugin.min.js"></script> <script src="EasePack.min.js"></script> <script src="TweenLite.min.js"></script> Is there anything else I would need to accomplish that? Thanks! Dada

Hi, I love to be able to use the Javascript version of Tweenlite, however, I can't figure out how to reset a tween? I have a function set up that should reset the tween when called. Any suggestions are highly appreciated. Thanks! Dada

Hi, no all I meant was what I would like to accomplish is to create a continuous loop animation as if you would have animated a mc on from 1 at x:0 to frame 9 to x:100 for instance and have a "gotoAndPlay(1);" action on the last frame. I don't want to reverse an animation, I simply would like to have the animation start at the beginning after it has finished the first tween and to this forever. Thanks, C

Hi, I really would love to know how to create a simple loop reflecting an mc tweening on the timeline to _x:100 after 0.5seconds and then go back to play frame 1 in a continuos loop. Thank you! C

Hi guys, I am not a programmer, but would like to know if someone can point me into the right direction of how I can create a simple scroll with TweenLite that only uses up and down arrows onPress, similar to this: http://www.spoono.com/flash/tutorials/tutorial.php?id=6, only that it should be scrolling an mc. Thanks in advance! Dada