[Start and stop Video from button?]

Ok, I understand. Thank you!

 

Regards

Olle

[Start and stop Video from button?]

Hi.

Maybe a simple question. But how do I start and stop a HTML5 video from a button in an HTML5 ad?

 

I have looket in the forum but found nothing so simple

 

Regards

Olle

[Multiple Tweens in one scene]

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

[Multiple Tweens in one scene]

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

[Multiple Tweens in one scene]

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

[Circular movement along path?]

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;
   };
};

[Scale proportional to screen size?]

Yes! That works like a charm

 

Regards

Olle

[Scale proportional to screen size?]

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

[Scale proportional to screen size?]

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

[Frame rate an smooth tweening.]

Ok, thank you. I'll try to stay away from long scrolling content in banner ads in the future.

Or try to convince the client to accept another soulution.

 

Regards

Olle

[Frame rate an smooth tweening.]

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

[Frame rate an smooth tweening.]

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

[Newbee question. Disable easing [SOLVED]]

Ok, thanks!

 

regards

olé

[Newbee question. Disable easing [SOLVED]]

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