Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

heyitsjayy last won the day on October 17 2012

heyitsjayy had the most liked content!

heyitsjayy

Members
  • Posts

    40
  • Joined

  • Last visited

  • Days Won

    3

Posts posted by heyitsjayy

  1. Hi there!

     

    Just wondering if anyone knows, is it possible to stop and interrupt a TimelineLite sequence on a click of a button, or MovieClip?

     

    The first thought was to just make a function to do something like this:

     

    function stopScroll(event:MouseEvent):void{
    //should be able to stop the timeline where it is currently
    tl.stop();
    tltwo.stop();
    }

     

    And here's the Timeline code below:

     

    This should work-- but the thing is the TimelineLite kinda NEEDS to be in an init() function that gets activated on the start. So it doesn't seem to be working. It's looking for the Timeline variables ("Access of undefined properties") since the variables are in the init() instead of the function :

    init();
    function init():void{
    if(number == 4){
     position = new Array (55, 181, 307, 435)
    var tl:TimelineLite = new TimelineLite();
    tl.insert(TweenMax.to(slider, 1, {y:position[1], delay:.4}));
    tl.insert(TweenMax.to(slider, 1, {y:position[2], delay:6}));
    tl.insert(TweenMax.to(slider, 1, {y:position[3], delay:8}));
    tl.insert(TweenMax.to(slider, 1, {y:position[0], delay:10}));
    tl.insert(TweenMax.to(slider, 1, {y:position[1], delay:12}));
    
    var tltwo:TimelineLite = new TimelineLite();
    tltwo.insert(TweenMax.to(scrollbar, 1, {y:position[1], delay:4}));
    tltwo.insert(TweenMax.to(scrollbar, 1, {y:position[2], delay:6}));
    tltwo.insert(TweenMax.to(scrollbar, 1, {y:position[3], delay:8}));
    tltwo.insert(TweenMax.to(scrollbar, .5, {y:position[0], delay:10}));
    tltwo.insert(TweenMax.to(scrollbar, 1, {y:position[1], delay:12}));
    }
    

     

     

    Does anyone have any ideas on how to solve a situation like this, where the timelines are in a different function altogether? How does the mouse Click function able to stop the Timelines in another function altogether, is basically the main question!

  2. Thanks guys for the answers. Yeah I realize it's a bit hard to describe in words, when not knowing the answer to what needs to be accomplished :)

     

    Here I'll try and provide a clearer explanation and a .Fla demo here.

    What was trying to be done was have this scroller slideshow "look" like it rotates in a cycle, so theere will be 4 total items.

     

    There will be 6 total slides, The 4 main items are pushed forward one slide / down the slider & each Movieclip being placed on top of each of the other MCs' positions.

     

    This is to "clear" the first & last slide (1& 6) to make room for two MovieClip items 1 and 4 to be placed on the first and last slide... so again it'll fake looking like its a "cycle"/repeat of items. Hopefully making sense?

     

    Reason for needing negative placement.. is the last MoveClip6, Needs to go back a slide to the negative, on top of MovieClip1. And all items are relative to Movieclip1 since this one will be the first loaded in.

     

    Knowing this code is wrong, but supplying it for a demo purpose anyway:

    TweenMax.to(slider.mc6, 0, {y:String(-slider.mc1.y)});
    
    TweenMax.to(slider.mc1, 0, {y:slider.mc1.y *2});
    TweenMax.to(slider.mc2, 0, {y:slider.mc1.y *3});
    TweenMax.to(slider.mc3, 0, {y:slider.mc1.y *4});
    TweenMax.to(slider.mc4, 0, {y:slider.mc1.y *5});
    
    TweenMax.to(slider.mc1, 0, {y:slider.mc6.y});

     

    Also here is a link to show a little better. This wasn't totally working by the way (movieclips just werent appearing, or not in right places), which is why i'm hoping someone can help!

    Really looking for advice here...Maybe this would be better off using a different method altogether, and not using Greensock tweens at all?

    Possibly using 'addChild' would suffice. .. ALA, like in carl's fireside chat on addChild & nested MC's: http://www.snorkl.tv...-with-addchild/ Ahhh fireside chat, sounds so comforting.

  3. So we all know that it's possible to Tween to a negative position, like so:

    TweenMax.to(MovieClip, 1, {x:-500})

     

    Though what about sitations when you're tweening something to an X or Y position, that is not a number, like so:

     

    TweenMax.to(slider.firstMC, 0, {y:slider.secondMC.x}); (where X is a positive value)

     

    Is there a way thats possible to tween that to the negative of that position, for example like:

    TweenMax.to(slider.firstMC, 0, {y:-slider.secondMC.x});

    TweenMax.to(slider.firstMC, 0, {y:"-slider.secondMC.x"});

    or TweenMax.to(slider.firstMC, 0, {y:-"slider.secondMC.x"});

     

     

    None of these worked, by the way, for reasons that are understandable.. which is reason for the festive post here :)

    So just wondering if it's possible to tween to a negative, or a reverse/opposite of that number, x position that is already positive, in some way?

  4. Hello all,

    Please take a look at this, I was wondering basically what it would do since it uses ".x" at the end, and haven't seen used in greensock before:

     

    TweenMax.to(slideShow.start, 0, {y:slideShow.second.x});

     

    Does this line of Greensock code tween the 'start' MovieClip, to Y, whatever measurement the x point of the 'second' Movieclip equals?

    So its basically shifting it down/or up on the Y axis a bit -whatever X equals. (if they are both the same size MovieClips it would esentially just shift it the same length?)

     

    OR, does this just shift it the same length Y.. but keeps it aligned with the same value of X. (say x is at 0, then it would shift 'start' MC to the Y of 'second' MC, and maintain the 0 value of X.

    Believing this is the right one, though wondering if someone can throw in their 2 cents!

  5. Hopefully this can help explain it better.

    This is in a 160x600 stage size. The top of the black box is 0, or the top of the flash stage.

    The prodScroll goes off the stage quite a bit (greyed area). Its 1377 total though starts at -57. The slider button itself starts at a position not at 0.. It starts at y:170. and is 100px tall. So that leaves the 380 scroll distance in the Rect area, since the total area height between the black is 480.

     

    Am assuming that tutorial takes the registration point (like where it has navigation_mc.selection_mc.x ) I've switched that out with scolller.y - so this would just look for the reg point of that movieclip and not look for the actual width/height of it to scroll through, from what I can see?

     

    Could anyone lend any more ideas for how to achieve this? It looks like by starting the prodScroller at an x position other than zero (to 55), it throws off the Timeline height/size since when you scroll down it scrolls the prodSlider very far off the stage to the top.

     

    Biggest question is, how can you define the start x position for the top of the Slider as well (needs to start at -57), when it can't be at the beginning, x:0?

    slider.jpg

  6. Thank you! This sort of works.. it is a bit hard to describe.

    The -55 was there since it needed to start in the middle of the gallery, in a sense. at -55 down from the top point.

     

    Adding a larger number (like -1377) made it jump down pretty far down the productSlider. That's the part that was a bit fuzzy.

    I'd imagine just from the TweenLite.to(productSlider, 3, { y:productArray.y,

    adding a number there would make it tween to that position.

     

    Still a bit confused on how this could work. I went ahead and changes to that code you suggested (thank you again - by the way). But it now will scroll way past the end of the scroller's end point.

     

    Edit: I'll try and descibe a bit better later on - and include a basic .Fla demo file to go with it! Cheers!

  7. By using TimelineMax, I'm attempting to scroll through a series of grouped MovieClips (grouped into one larger movieClip) in a slideshow of images, if you will.

     

    This grouped MovieClip (called productSlider) is going to be scrolled through by a separate scrollbar, similar to how this 'slider microsite' is controlled by the scrollbar at the top (not using the play, pause, rewind methods):

    http://active.tutspl...-timeline-lite/

     

    I've set this up a bit differently, and got the larger 'productSlider' to slide when the scrollbar is dragged up and down (using ondrag, etc).

     

    The grouped MovieClip an into a problem though.. Basically it needs to scroll the ENTIRE height/length of the MovieClip (1377px) up and down. Though right now it only moves a portion of the entire MovieClip. Is there a way to insert a height (total Y coordinate), rather than a TimeLineLite based on time? (if that even makes sense)

     

    Is there any ideas on how to get it to read the length (in pixels). Not sure if this is being set up right, so am open to suggestions & help! Thank you in advance for reading!

     

    Here is some code being used (mainly converted from the example in the link above):

     

    function secondAnimation():void
    {
    trace("second Animation");
    
    var productArray:Array = new Array(productSlider.product1,productSlider.introproduct2, productSlider.product3,
    productSlider.product4, productSlider.product5, productSlider.product6);
    
    productArray.y = "-57";
    //this positions th grouped MC off the top of the stage slightly since its longer and it should be slightly centered on start
    secondtl.insert(TweenLite.to(productSlider, 3, { y:productArray.y, ease:Linear.easeNone}));
    secondtl.pause();
    }
    
    ///update productSlider
    function updateNavigationSlides(e:MouseEvent):void {
    //goes to that part in time,
    // the calculation is a simple proportion fraction between the y position of the selection and the current timeline duration
    secondtl.gotoAndStop(scrollbar.y*secondtl.totalDuration/480);
    }
    
    function drag(event:MouseEvent):void
    {
    //adds a listener to mouse movement so every time the mouse moves it updates the navigation slides
    stage.addEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides);
    //starts drag of the slider
    //updates navigation 1 time
    updateNavigationSlides(null);
    scrollbar.startDrag(false,new Rectangle(147, 55, 0, 380));
    }
    
    function drop(event:MouseEvent = null):void
    {
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateNavigationSlides);
    scrollbar.stopDrag();
    }
    

  8. Yeah, late to the thread, I know. But sometimes these come up in searches in Google for people wanting to now how to make something like an image gallery.

     

    So, here is a full image scroller tutorial using AS3, not using Greensock though, and instead using straight XML file instead of LoaderMax to load. Working with it a bit, It can likely be converted to Greensock.

    http://active.tutsplus.com/tutorials/effects/create-a-responsive-xml-image-scroller-in-actionscript-3-0/

     

    It may give you many of the basics of creating an image gallery from scratch, and is very in-depth with the details and source files. Cheers!

  9. Thanks guys,

    Think it might be fine with the original animation. Just tried some different settings. It's a pretty good representation of a propeller effect, either way!

     

    The complete radial blur effect is probably difficult or even impossible to achieve at 24 fps. It is indeed a limitation.. Also a full-on radial blur would use a lot of CPU i'd imagine..

     

    Thanks for the suggestions Konstatinos, and thanks for link & help Carl!

  10. Hi all!

    Currently i'm creating a propeller blade(s) for a flying craft! (aka plane).

    Having to use TweenLite due to file size limits, so any TweenMax goodness is out.

     

    Trying to aim for a complete, creamy smooth, radial blur effect when these blades rotate & bluring together. So the effect i've been able to achieve is more of good, smooth rotation (thanks to tweelite onComplete code below).

     

    Yet still a separation / space between the blades happens. Actually this effect looks better IN MOTION than in the screenshot below (imaging the empty spaces are actually filled MOSTLY with rapdidly spinning blades a 360degree in .05 sec.

     

    Normally this might "fly" (get it ;) though needing to try and get the fuller, circular "radial blur" effect for a proj. Whenever bumping the 'blurX;' up, it just makes the blur "blob" bigger, and not in a circular blur.

     

    (Note: already currently at file sizeKB limit - actually a bit over- so am looking for a suggestion that doesn't involve a motionblurPlugin, or additional things that will add much if possible!)

     

    function propellerSix():void {
    TweenLite.to(plane.propeller6, .05, {rotation:"360", blurFilter:{blurX:20, blurY:20}, onComplete:propellerSix});
    } propellerSix();
    

     

    That's code used to achieve the effect in pic (on left) so far. Effect aiming for is on the right.

     

    blurradial.jpg

     

     

    Anyone have any ideas on things to try to achieve this? Other settings to adjust in the TweenLite code above? Thank yas in advance!

  11. Thanks!, and yes agreed. Normally don't use different keyframes, though this was using a template & didn't create that :)

     

    Anyway the "intro_mc.visible = false, & frame2_assets = true" part, helped out with one part of it.

     

    I wonder if there's another special greensock method out there that will unload a timelineLite, even before it finishes completely. The reason being that sometimes the timeline won't always complete before a user jumps to another frame. And when going back to that frame the timelineLite is set to start automatically. Is there something similar like 'onComplete' that says instead something like 'if run once and didn't complete (or even if it did), don't play it ever again no matter what!!" haha. Open to suggestions on that. Thinking onInit() and onstart() could be used in some way to count if it started once.

     

    Was thinking a combination of the above code like this could work. Will give it a shot.

    var timelinelitehasPlayed:Boolean;

    if (! timelinelitehasPlayed) {

    trace("timelinelite started once");

    timelinelitehasPlayed = true;

    myTimelinelite.clear();

    } else {

    secondAnimation();

    trace("second fucntion which includes some greensock anim plays");

    }

     

     

    Update:

    This thread of some of your code gave me some good ideas :ugeek:

    http://forums.greens...start-problems/

     

     

    Actually, I figured this out a different way, by just including the 2nd animation/MC graphics & code on that separate frame. Kinda thought about it too much & made it way too difficult than it needed. Though I learned a lot more about greensock, and some new methods in the process. 8-) Thanks again for your help.

  12. Hello guys!

     

    Wondering if anyone might be able to share some insight on this, if anyone's done something similar.

     

    On one frame there is a timelinelite animation that plays automatically. I was thinking to put this in a function called firstAnimation() for one purpose.

    Reason being is that when on this frame, the flash stage is rolledover it goes to another, separate frame with no greensock.

     

    Now when it advances to that different frame, there is a stage RollOff function which returns it to that previous frame with the greensock timeline lite animation. Instead of playing this original animation though, I was looking for a way to play a new greensock animation, secondAnimation(), if you will.

     

    Either that, or does anyone know how to just have a timelinelite play once ONLY. Then be ignored the rest of the time.. even if this frame is exited, then returned to. Basically clear that first animation after running, and having new MCs/greensock animation appear in its place the rest of the time,

  13. Yes, that HallowTween bit was cheesy I know. Though I was looking for some inspiration to make an interesting animation on a rainy night, so some Halloween art provided it. Check it out.

     

    Noticeably, this animation uses some of Carl's OOP tutorial goodness.

     

    However it's just a quick fun little animation I came up with using a mix and match myriad of various effects that have been scattered in using Greensock tweening.

     

    Enjoy... and Happy HallowTween!!

    • Like 1
  14. Thanks Carl, you're always quick!

     

    This does work essentially for making the tween complete. So it works & thanks for that. I should've mentioned though, that these buttons are set to disappear(alpha:0), after being clicked 3 times, basically so you can't progress / tween any further when you've hit then end of the slides.

     

    So what's happening is that the tweens complete fine now (thanks!) but if the button is clicked quickly more than once before tweens are done, it'll vanish partway through (which is not supposed to happen).

     

    Guessing that removeEventListener is the only way to really accomplish this.. Though tried this approach earlier inside the MouseEvent function with the tween.to. And made a separate 'onComplete' function to re-addEventListener back on, which obviously didn't wok :)

  15. Wondering if anyone knows a good, simpler way of doing such a thing (perhaps using TweenLite onComplete)? Basically, I have some tween.to code which slides a panel from left to right (x position) based on arrow buttons/MovieClips which are clicked.

    Inside specific (MouseEvent.CLICK) functions, the tween code gets run, and moves a slider/stage object back and forth: TweenLite.to(slide, 1, {x:"500"});

     

    Thing is, when you click the arrow buttons in rapid succession one after another the 'x' position is thrown off. (It must be 500px apart each button click -based on width per slide). When the button is clicked quickly before the 1 second tween is done, it starts another tween up, and repositions where 'x' starts sliding at when the button gets clicked again.

     

    So is there a way to either use onComplete to do this, or a way such as removing an event Listener for the click until the first tween is completely done? Then adding it back on after it's done? Did I just answer my own question? If so, still not sure how to code this, so wondering if someone may be willing to help with code ideas!

  16. So I like to share new, interesting things once I come across them.

     

    Related to the 'the using Greensock JS in Edge' idea, I also see Chris G. wrote up this step-by-step process on how to use the built in loading features of Edge Animate (YepNope.js) to simplify/quicken the process of loading Greensock or other Javascrpt libraries for using in Edge (instead of writing out the <script> lines into the external HTML file, having to open the HTML file, etc.).

     

    He explains it a lot better with images, so take a look here for the tutorial.

  17. Bringing this topic back up again.. keepin' it alive!

     

    Thought I'd add that Carl's massive tutorial series on Greensock TimeLineLite for Flash was not in vain at all, since TimeLineLite is also now in JS, and used practically the same! (all thats really different is selectors used in Javascript).

     

    Went through the last ones recently, on Methods and Properties, and some of the material in there directly relates to the tween animation effects like were used in the HTC example ad. Actually, the HTC ad, as well as the 'Bunnies' example, uses TimeLineLite. So check them out.

     

    So basically the point is, if anyone's looking for tutorials to look through for some basics (for tweening text, etc. in a similar manner), you can first start with those to understand how it's also being used in the TimeLineLite JavaScript version for Greensock JS ads Carl made, and how he animated text / images / other elements in a similar way.

     

    EDIT:

    Oh, and also this will help you's all out, here's a sort of intro/tutorial on staggerTo for text, with SlowMoEase (on Flash, but also for JS version - and there's a brief intro vid on the JS). This is the basic approach that is used to tween the text in 'bunnies' example.

     

    There were already some tuts out! (you just need to think a bit to apply it to JavaScript) 8-) Carl, thanks again!

    • Like 2
×