stevenp

Wow!! That was it. Now I'm pausing, tracing song position, and makin' hay. Thank you so much Carl!! Steve

rhernando, thanks for reading and answering. I'm trying to figure out how to "make it work" with the timeline outside of the function, like in the codepen example: var tl = new TimelineLite({onUpdate:updateSlider}); tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) // autoAlpha handles both css properties visibility and opacity. .from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") //add tween 0.25 seconds before previous tween ends .from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") // add feature label at start position of this tween .from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") // add tween 0.25 seconds after the feature label .staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); $("#play").click(function() { // function here ... }

Thank you much, Carl. I will dig into this today.

Greetings, Thank you for reading, and for any insight anyone can offer. It is appreciated. I adapted the code from this demo on codepen: http://codepen.io/GreenSock/pen/bpezc ... in order that I may understand how things work. For some reason unknown to me, I must run the timeline from a button (unlike the code in the codepen deal). This works: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:false}) ); }); $("#pause").click(function() { //alert("Pause Button"); tl4.pause(); //tl4.play(0); }); } This does not: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); //tl4.restart(); tl4.play(); }); } Nor does this: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); tl4.insert( TweenLite.to(logo4, 5, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); $("#play").click(function() { tl4.play(); }); } It only works if the timeline is put in the function of the button ... but in codepen: var tl = new TimelineLite({onUpdate:updateSlider}); tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) .from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") .from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") .from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") .staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); $("#play").click(function() { // function } Obviously, I am missing something. Thanks for any guidance offered. Steve

Where are my manners? Thank you in advance.

Thank you Carl. Yes, that seemed to be what I should be calling. I tried putting that everywhere to no avail: function functionPauseButton(e:MouseEvent):void{ trace("pause button"); sound.pauseSound(); } ... which yields: If this is a scope issue, my understanding is that I cannot declare global variables in AS3, so ... how do I cross this river? I was able to load a single mp3 and play, pause, resume, and stop using SoundChannel (and no greensock classes), but Id really like to get my head around LoaderMax through MP3Loader if possible. How do I access soundPause (or soundTime and volume) globally? Thanks and happy weekend, Steve

Where are my manners? Thank you in advance.

Nub of the gist: How can I access (and set) play position of an MP3 and duration of an MP3? I figure that ought to get me pointed to the right time zone from here. I found a thread where Jack helped someone with his code to load video, start playing when X were loaded, and loop around again: http://forums.greensock.com/topic/3072-video-loader-playlist/?hl=playlist I modified that to work with MP3s, but I wanted to have button functionality. The first file plays, and I was able to get "next" functionality to work (using the existing code) for all five files. For the life of me, I have no clue how to pause a loaded sound. I have literally tried everything I could think of, to no avail. I literally had twenty tabs open looking at documentation and forum questions/answers. I have built mp3 players (from tutorials) where I set intervals every X milliseconds to check for position, and then stopping the sound and starting at _that_ position. I can get my head around that. I clearly cannot get my head around MP3Loader and how it handles sound properties. So, here goes. This is the code I have: import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.loading.*; import com.greensock.loading.display.*; import com.greensock.events.*; var queue:LoaderMax; var preloadCount:uint = 0; var curSoundIndex:int = -1; var mp3Array:Array = ["song01.mp3", "song02.mp3", "song03.mp3", "song04.mp3", "song05.mp3" ]; initPreload(); function initPreload():void { queue = new LoaderMax({name:"mainQueue", onChildComplete:childCompleteHandler, maxConnections:1}); for (var i:int = 0; i < mp3Array.length; i++) { queue.append(new MP3Loader(mp3Array[i], {name:"mp3"+i, autoPlay:false})); } queue.load(); } // make sure one song is loaded before playing back function childCompleteHandler(event:LoaderEvent):void { preloadCount++; if (preloadCount == 1) { playAudioFile(0); } } function playAudioFile(index:uint):void { if (curSoundIndex != -1) { var old:MP3Loader = LoaderMax.getLoader(mp3Array[curSoundIndex]) as MP3Loader; old.removeEventListener(MP3Loader.SOUND_COMPLETE, soundCompleteHandler); TweenLite.to(old, 1, {volume:0, onComplete:old.pauseSound}); } curSoundIndex = index; var sound:MP3Loader = LoaderMax.getLoader(mp3Array[index]) as MP3Loader; sound.addEventListener(MP3Loader.SOUND_COMPLETE, soundCompleteHandler); sound.gotoSoundTime(0, true); TweenLite.to(sound, 1, {volume:1}); } function soundCompleteHandler(event:LoaderEvent):void { var nextIndex:int = curSoundIndex + 1; trace(nextIndex); if (nextIndex >= mp3Array.length) { nextIndex = 0; } playAudioFile(nextIndex); } // button logic btn_play.addEventListener(MouseEvent.CLICK, functionPlayButton); btn_pause.addEventListener(MouseEvent.CLICK, functionPauseButton); btn_next.addEventListener(MouseEvent.CLICK, functionNextSongButton); btn_resume.addEventListener(MouseEvent.CLICK, functionResumeSongButton); btn_stop.addEventListener(MouseEvent.CLICK, functionStopButton); function functionPlayButton(e:MouseEvent):void{ trace("play button"); } function functionNextSongButton(e:MouseEvent):void{ trace("next button"); var nextIndex:int = curSoundIndex + 1; if (nextIndex >= mp3Array.length) { nextIndex = 0; } playAudioFile(nextIndex); } function functionPauseButton(e:MouseEvent):void{ trace("pause button"); } function functionResumeSongButton(e:MouseEvent):void{ trace("resume button"); } function functionStopButton(e:MouseEvent):void{ trace("stop button"); } I get the array, the index of the array, and how to cycle through the (in this instance) five MP3s. I haven't been able to plumb the depths of this package.

Thank you much, Carl. That truth is self evident.

In the quest to serve non-flash enabled clients (and not yet having the moral fortitude to consider a solution using GSAP for JS), I believe I have learned that one cannot export an animated GIF of greensock-powered works. My questions: 1) Is this true? 2) If yes, what workarounds are suggested? 3) Even if #2 doesn't point to GSAP JS, will I be able to universally address multi-layered animations using GSAP JS? I hope this doesn't cross the bounds of posting in the wrong place, and thank you in advance, Steve

Thanks Carl! That was dizzyingly simple and perhaps obvious, but obviously in my blind spot. Thanks a bunch. Steve

Let me preface with a heartfelt "Thank you!", for both this excellent package Jack, but also the way you and Carl support people here. Two different arenas, and two exemplars of fantastic "stuff". I've been going back and looking at some of my AS2 projects to see about updating them, but first migrating them to greensock before moving them to AS3 projects. With that in mind, I've been trying to figure out a way to both move a clip and fade it in, starting at the same time but ending at a different time. Specifically, I wanted to make the fade in finish after the clip had stopped moving. Sorry if it is obvious, and thank you in advance. Steve

Yeah, that works just fine when one calls jquery in the header: <script type="text/javascript" src="/js/jquery-1.10.2.js"></script> Ouch. I didn't know that jquery was not js. I don't know what I don't know. That is embarrassing.

[solved due to user error.] Greetings, As a JS newbie, I don't know what I don't know. Apologies in advance for my lack of knowledge. I want to use two different JS animations on a page. Either of them work fine by themselves, but will not work together. I notice in the demos (from where I copied the JS syntax), a comment: That sounds like my problem, but I don't know what to do. Here is my script: <script> window.onload = function(){ var logo = document.getElementById("logo"); TweenLite.from(logo, 1.2, {opacity:0, scale:0, ease:Strong.easeIn}); } </script> <script> window.onload = function(){ var tagline = document.getElementById("tagline"); TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn}); } </script> In the above, only the second script "works". When the second is removed, the first works. Can anyone show me where I can learn what I am not doing correctly? I have not found a practical explanation on multiple items. I tried: <script> $(window).load(function(){ var logo = document.getElementById("logo"); TweenLite.from(document.getElementById("logo"), 1.2, {opacity:0, scale:0, ease:Strong.easeIn}); }); </script> <script> window.onload = function(){ var tagline = document.getElementById("tagline"); TweenLite.from(tagline, 1.2, {opacity:0, scale:0, ease:Strong.easeIn}); } </script> Again, the second works fine, but the first does nothing. the image loads and does not move as expected. Thank you in advance, Steve

That is helpful Jack ... thank you. It doesn't seem to happen when it's just the clips by themselves ... it's REALLY strange. I'll look into blendMode.

Jack, Carl: Greetings. I'm using one of my coworkers machines and CS4 (thus Actionscript 3). I have three clips that run fine, but as they approach the top, their tins all seem to change toward gray. This does not happen in the preview, but once the SWF is published, that is how it appears in some flash players. They were exported to require flash player 10, but all players I've checked the SWF with are v 10. import com.greensock.*; import com.greensock.easing.*; // set bubble instance positions /* mc_trans_01 mc_trans_02 mc_trans_04 X 350 X 170 X 695 Y 875 Y 875 Y 875 W 244 W 160 W 160 H 188 H 262 H 154 */ var myTimeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:false, repeatDelay:2}); myTimeline.insertMultiple([ TweenLite.to(mc_trans_02, 5, {y:-262, ease:Linear.easeNone}), TweenLite.to(mc_trans_04, 7, {y:-154, ease:Linear.easeNone}), TweenLite.to(mc_trans_01, 11, {y:-244, ease:Linear.easeNone}) ], 0, TweenAlign.START, 5);

Thank you very much Carl. Very much appreciated. :cool: <edit> I definitely need to get a better handle on what "new" does.

(Actionscript 2) When using "insertMultiple", staggering appears defeated by using either "TweenLite.to" or "TweenLite.from." Is this true? Or am I missing the syntax? This staggers the clips: myTimeline5.insertMultiple([new TweenLite(mc_css, 2, {_x:550, _y:225}), new TweenLite(mc_javascript, 2, {_x:550, _y:225}), new TweenLite(mc_html, 2, {_x:550, _y:225}), new TweenLite(mc_flash, 2, {_x:550, _y:225}), new TweenLite(mc_php, 2, {_x:550, _y:225})], 6, TweenAlign.START, 2); This does not: var myTimeline6:TimelineLite = new TimelineLite(); myTimeline6.insertMultiple([new TweenLite.to(mc_css, 2, {_x:100, _y:100}), new TweenLite.to(mc_javascript, 2, {_x:100, _y:100}), new TweenLite.to(mc_html, 2, {_x:100, _y:100}), new TweenLite.to(mc_flash, 2, {_x:100, _y:100}), new TweenLite.to(mc_php, 2, {_x:100, _y:100})], 6, TweenAlign.START, 2); Thanks in advance.

You are welcome. There is a great application in the demo_swfs folder for easing (amongst other items). I was literally browsing it when I read your post.

Here is how I remove easing (a direct line from my working project): tl.insert( TweenLite.to(mc_02, as_val*15.91, {scale:100, ease:Linear.easeNone}), "label_02"); So ... "ease:Linear.easeNone" should do it for you too.

No apology necessary. Thank you for the info. Steven

In this thread: http://forums.greens...rs-in-tweenmax/ ... I found reference in this thread to the "CirclePath2D motionPath" plugin. I'm using AS2, and have the docs and source for AS2. I see the docs file, but in the com folder there is no motionPath folder. $ find . -iname "*circle*" ./greensock/tweening_platform_v11/greensock-as2/docs/com/greensock/motionPaths/CirclePath2D.html ./greensock/tweening_platform_v11/greensock-as2/docs/com/greensock/plugins/CirclePath2DPlugin.html $ find ~/flash -iname "motionPaths" ./greensock/tweening_platform_v11/greensock-as2/docs/com/greensock/motionPaths I used the code in the example section fo the docs (com folder in the saved FLA's folder): **Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 6: The class 'CirclePath2D' could not be loaded. var circle:CirclePath2D = new CirclePath2D(150, 150, 100); TweenLite.to(mc, 2, {circlePath2D:{path:circle, startAngle:90, endAngle:270, direction:Direction.CLOCKWISE, extraRevolutions:2}}); Total ActionScript Errors: 1 Reported Errors: 1 In the plugin explorer, CirclePath2D is not listed. Is this plugin not available for AS2? Thanks in advance of your answer, and thank you for this wonderful set of tools, Steve P

That is an exciting concept (labels) to me, Carl. I was aware of them, but hadn't connected the concept with what I want to do. Whoops ... that's certainly lack of conception on my part. Thank you so much for reading and teaching me how to fish. Your solution worked, of course, and I am very appreciative of your help. Steven

Thank you so much for your help Carl. Very much appreciated. I adapted your very helpful response: tl.appendMultiple([ TweenLite.to(mc_01, 1, {_xscale:100, _yscale:100}), TweenLite.to(mc_dot_01, 3, {_xscale:35, _yscale:35}) ]); tl.appendMultiple([ TweenLite.to(mc_02, 1, {_xscale:100, _yscale:100}), TweenLite.to(mc_dot_02, 3, {_xscale:35, _yscale:35}) ]); tl.appendMultiple([ TweenLite.to(mc_03, 1, {_xscale:100, _yscale:100}), TweenLite.to(mc_dot_03, 3, {_xscale:35, _yscale:35}) ]); tl.appendMultiple([ TweenLite.to(mc_04, 1, {_xscale:100, _yscale:100}), TweenLite.to(mc_dot_04, 3, {_xscale:35, _yscale:35}) ]); My problem is the dot (mc_dot_XX) clips have a duration of 3, and the next line (mc_XX) doesn't start drawing until the previous dot completes it's tween. I want the next line to start drawing at the same time the dot starts it's tween. I can't upload an SWF to show my hand-rolled existing target, so I converted to animated GIF and attached. This is the behavior I am trying to reproduce with timeline ... unfortunately ... I can't attach another image (quota) of what actually happens with the above actionscript .

Thanks for listening. I've got a number of lines drawing on a map, as a course. Each leg of the course is a line that is a movie clip. I draw the lines thus: import com.greensock.*; import com.greensock.core.*; import com.greensock.easing.*; var as_val:Number = 0.01; // adjusting this value controls overall speed /////// Initialize clips to 0 ////////// // preset the routes mc_01._xscale = mc_01._yscale = 0; mc_02._xscale = mc_02._yscale = 0; mc_03._xscale = mc_03._yscale = 0; //preset the dots mc_dot_01._xscale = mc_dot_01._yscale = 0; mc_dot_02._xscale = mc_dot_02._yscale = 0; mc_dot_03._xscale = mc_dot_03._yscale = 0; // the routes // the number multiplying the as_val is the length of the hypotenuse - consistent travel timeline.append(TweenLite.to(mc_01, 21.3*as_val, {_xscale:100, _yscale:100, ease:Linear.easeNone})); timeline.append(TweenLite.to(mc_02, 15.9*as_val, {_xscale:100, _yscale:100, ease:Linear.easeNone})); timeline.append(TweenLite.to(mc_03, 69.4*as_val, {_xscale:100, _yscale:100, ease:Linear.easeNone})); At the end of the tween that scales mc_01, the route will have completed leg 1. I now want to start leg 2, which happens fine, but I also want mc_dot_02 to scale from 0 to the size it will end at starting at the same time.I h ave a hard coded vision of what it looks like using masks and hand-made tweens on the timeline attached. It looks like a bad version of "Missile Command". Darn it ... it's too large to upload. Okay ... I uploaded a screenshot of the work in progress. The line hasn't gotten to it's final destination, and the dot hasn't yet appeared. When the line gets to it's next destination, it will then start toward another destination but the point the new leg starts I want the dot to scale up from 0 ...