Jump to content
GreenSock

olleka

Members
  • Posts

    14
  • Joined

  • Last visited

Posts posted by olleka

  1. Hi

    Well it's a bit strange. Because if I do like this it works wit y transformation.

    var rad10 = new TweenMax.to('.knapp-tusen', 1, {y: '800'});
    
    var scene10 = new ScrollMagic.Scene({
    triggerElement: "#rad10", duration: 800, offset: 50, reverse: true})
    .setTween(rad10)
    
    controller.addScene([
    scene10
    ]);
    

    But if I do like this the button is jumping up and down like a crazy rabbit. Scroll down to Tunity Organizer section go on the left button Appar an scroll down a bit to see te jumping. Just curious what is causing this ...

    (With paddingTop it is ok.)

    $('.knapp-tusen').each(function(){
    var currentStrong = this;
    
    var tweenStrong = new TweenMax.to(currentStrong, 1, {y: "1000px"});
    var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
    .setTween(tweenStrong)
    controller.addScene([
      scene
    ]);    
    });
    

    Regards

    Olle

  2. Hi thank you for answering.

    I got i working. Using ".tillbaka10" or whatever I like as a classname for all the buttons. Misstake I made was thinking the trigger could not be the button itself.

     

    One thing though. I could not use {y: "800px"} or {top: "800px"} because of a terrible flickering and had to use {paddingTop: "800px"}

    Maybe a bug with the ScrollMagic plugin. I check with the author.

    $('.tillbaka10').each(function(){
    var currentStrong = this;
    
    var tweenStrong = new TimelineMax().to(currentStrong, 0.25, {paddingTop: "800px"});
    var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
    .setTween(tweenStrong)
    controller.addScene([
      scene
    ]);    
    });
    

    Regards

    Olle

  3. Hi.

    I have a website here. http://olle.dyndns-ip.com/tunity/

    I'm using ScrollMagic to controll the start and stop of the blue buttons in the side of some of the sections.
    It is working good.

    However I want to make the code more slim and effective.
    Like it is now if I add one more section I have to create one more tween and one more scene.

    So the code I have for the moment is.

     

    var rad1 = new TweenMax.to('.fordjupning1', 1, {y: '150'});
    var rad2 = new TweenMax.to('.tillbaka2', 1, {y: '450'});
    var rad3 = new TweenMax.to('.tillbaka3', 1, {y: '1050'});
    var rad4 = new TweenMax.to('.tillbaka4', 1, {y: '650'});
    var rad5 = new TweenMax.to('.tillbaka5', 1, {y: '450'});
    var rad6 = new TweenMax.to('.tillbaka6', 1, {y: '450'});
    var rad7 = new TweenMax.to('.tillbaka7', 1, {y: '450'});
    var rad8 = new TweenMax.to('.tillbaka8', 1, {y: '800'});
    var rad9 = new TweenMax.to('.tillbaka9', 1, {y: '800'});
    var rad10 = new TweenMax.to('.tillbaka10', 1, {y: '800'});
    
    
    var scene1 = new ScrollMagic.Scene({
    triggerElement: '#rad1',duration: 200, offset: -50, reverse: true
    })
    .setTween(rad1)
    .addIndicators()
    
    var scene2 = new ScrollMagic.Scene({
    triggerElement: "#rad2", duration: 400, offset: -50, reverse: true
    })
    .setTween(rad2)
    .addIndicators()
    
    var scene3 = new ScrollMagic.Scene({
    triggerElement: "#rad3", duration: 1000, offset: 50, reverse: true
    })
    .setTween(rad3)
    .addIndicators() // and so on
    
    controller.addScene([
    scene1,
    scene2,
    scene3,
    scene4,
    scene5,
    scene6,
    scene7,
    scene8,
    scene9,
    scene10
    ]);
    

    I have trie the code from this question (edited for my website)
    #215
    But it does not do it.

    $('.tillbaka10').each(function(){
    var currentStrong = this;
    
    var tweenStrong = new TimelineMax()
    .to(currentStrong, 1, {y: '800'});
    
    var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
    .setTween(tweenStrong)
    .addTo(controller);
    });
    

     

    So how can I make this in an efficient way? With classes as the trigger? Or how is it done?

    Regards
    Olle

  4. Hi.

    I found this script (se below) that I need for moving an object attached to a eliptical path.

    The scrip itself works ok. But what I love to do is to add some smooth tween when mouse is stopped.

     

    Or even better have a greensock soulotion for a carousel tweening :)

    Maybe with combination of beizer and dynamicProps?

     

    I did read about the circle2D class some. But This needs to be As2 because it targets flashplayer8 at minimum.

     

    I would offcourse consider a Club memberhip if ther is a way with As2 :)

     

    Regards

    Olle

     

    var rX:Number = 200;// radius1
    var rY:Number = 100;// radius2
    var ang:Number = 10; // angle to rotate ellipse
    // 
    var zeroSector:Object = sector(0, rX, rY, ang);
    
    function sector(degree:Number, radiusX:Number, radiusY:Number, angle:Number):Object {
       // coordinates of a point on ellipse
       var cx:Number = radiusX * Math.cos(degree * Math.PI / 180);
       var cy:Number = radiusY * Math.sin(degree * Math.PI / 180);
       // rotation of system of coordinates
       var xx:Number = cx * Math.cos(angle * Math.PI / 180) - cy * Math.sin(angle * Math.PI / 180);
       var yy:Number = cx * Math.sin(angle * Math.PI / 180) + cy * Math.cos(angle * Math.PI / 180);
       return {x:xx, y:yy};
    }
    
    function objPosition():Void { // detecting coordinates of a clip 
           var ratio:Number = rX / rY;
    
           var anAngle = Math.atan2(this._parent._xmouse, this._parent._ymouse) + ang * Math.PI / 180;
      var deg:Number = 90-(Math.atan2(Math.sin(anAngle), Math.cos(anAngle) * ratio)) * (180 / Math.PI);
    
           var _sector:Object = sector(deg, rX, rY, ang);
           this._x = _sector.x;
           this._y = _sector.y;
    }
    // draw ellipse
    this.createEmptyMovieClip("mc", 0);
    mc._x = Stage.width / 2;
    mc._y = Stage.height / 2;
    this.mc.lineStyle(0, 0xDDDDDD);
    this.mc.moveTo(zeroSector.x, zeroSector.y);
    for (d = 0; d <= 360; d += 5) {
       var _sector:Object = sector(d, rX, rY, ang);
       this.mc.lineTo(_sector.x, _sector.y);
    }
    // create draggalbe clip
    mc.createEmptyMovieClip("drag_mc", 0);
    mc.drag_mc.lineStyle(50, 0x007722, 100);
    mc.drag_mc.lineTo(0, 1);
    mc.drag_mc._x = zeroSector.x;
    mc.drag_mc._y = zeroSector.y;
    
    mc.drag_mc.onMouseMove = function():Void  {
       this.onMouseMove = objPosition;
       this.onRelease = this.onReleaseOutside = function ():Void {
           delete this.onRelease;
           delete this.onReleaseOutside;
           delete this.onMouseMove;
       };
    };
    

  5. Hi.

    Thanks for answering.

     

    Slight missundertanding because I explained it poor.

     

    The goal is to open a fullscreen window.

    I want to tween a photo in the fullscreen window.

     

    So I need to scale the photo proportional to keep it look wierd in a wide screen for instance.

    If i go just TweenLite.to(mc, 1, {_width:Stage.width, _height:Stage.height}); the image gets very wide in a wide screen.

    It would work for a backround or similar.

     

    But this image needs to have the same proportions in every screensize.

     

    So I guess it' the height of the picture that desides what percetage to scale the image.

     

    So what I ended up with now that works somewhat, but not perfect is that I put the mc to be tweened inside a container mc.

    container._width = Stage.width/2
    container._height = Stage.height
    container._xscale <= container._yscale ? (container._xscale = container._yscale) : (container._yscale = container._xscale); // keeps boy proportional 
    
    TweenLite.to(container.boy, 0.75, {_xscale:60, _yscale:60, delay:0.7, ease:Elastic.easeInOut});
    

     

    Maybe there is a smarter way i'm sure ;)

     

    Regards

    Olle

  6. Hi

    I have a movieclip that I want to tween fro 0 to 100 % of the screen size when the tween runs.

     

    I have set it up so that the mc scales with the screen.

     

    boy._width = Stage.width/2

    boy._height = Stage.height/2

    boy._xscale <= boy._yscale ? (boy._xscale = boy._yscale) : (boy._yscale = boy._xscale); // keeps boy proportional

     

    But now I want to add a tween from 0 to 100% wit a delay, dependent of screen size. How would I do that?

     

    I did read about AutoFit area but don't know how to or where I can find out more.

     

    My actionscript is rather limited ;)

     

    I use AS 2 in this project.

     

    Regards

    Olle

  7. Hi

    Thank you for the reply!

     

    What about UdateAfterEvent?

     

    If I make a simple Setinterval function like

    setInterval(moveText, 1);
    
    function moveText() {
    texten._x -= 2;
    updateAfterEvent();
    }

     

    The animation runs a little smoother. It stutters sometimes but it's better.

    http://www.olle.se.st/friendsofadam/test5.php

     

    It seems very cpu intensive though ... so I wonder if the banner will be accepted with SetInterval

    And how would I use that with TweenMax?

     

    Regards

    olle

  8. Hi

    I'm doing a banner with a long text scrolling to the left. The spec for the banner is max 18 fps. But that gives very choppy movement, totally unusable.

     

    So I did som tests starting at 24 and then 31, 62 and 96 fps.

    http://www.olle.se.st/friendsofadam/test.php

     

    So obviously the faster the smoother. But on my macine (mac G5) i'ts still a little jerky. But that may be the flashplayer only manage around 40 fps?

     

    The question I have is:

    Is it possible to have a smooth scrolling with the low frame rates like 18 fps? I mean really smooth.

    Or should I convince the client to go for some other transition instead?

     

    Regards

    Olle

  9. Hi.

    I'm just new to TweenLite.

     

    This is what I have so far.

    stop();

    import gs.*;

    import gs.easing.*;

     

    function doMyTween():Void {

    burkar._x = -912;

    TweenLite.to(burkar, 52, {_x:0, ease:Sine.easeInOut, onComplete:doMyTween});

    }

    doMyTween();

     

    But how do I disable the easing totally?

     

    If I leave out the ease:Sine.easeInOut I get a default easing

    I have alsso tryed ease:ease:NONE

     

    Regards

    Olle

×