Bannière avec parallaxe

[Leakcim92]

Bonjour,

Je me permets de vous contacter car j'ai réalisé une bannière avec Animate CC.

A la fin de cette-dernière je souhaite animer une image en fonction de la position de la souris.

• Lorsque la souris se trouve entre 0 et 150 pixels de la bannière, je souhaite que l'image se décale de 5 pixels vers la droite.
• Lorsque la souris se trouve entre 150 et 300 pixels de la bannière, je souhaite que l'image se décale de 5 pixels vers la gauche.

Voici le code saisi dans la fenêtre actions :

this.addEventListener('tick',moteurRendu.bind(this));
function moteurRendu(){
if(stage.mouseX>0 && stage.mouseX<150 && this.parallaxe_mc.x<0){
this.parallaxe_mc.x+=1; // x : horizontal, +=1 : ajouter 1 pixel par tick
}
if(stage.mouseX>150 && stage.mouseX<300 && this.parallaxe_mc.x>-10){
this.parallaxe_mc.x+=-1; // x : horizontal, +=-1 : enlever 1 pixel par tick
}
}

Sauriez-vous me dire pourquoi l'image se décale vers la gauche uniquement ?

Je vous joins les fichiers sources afin que vous puissiez consulter l'ensemble.

https://we.tl/WYQtm5SRpc

Merci de votre aide

[JoãoCésar]

It's because your Movie Clip starts with a x of 150 and not -5.5 like is shown in the Properties panel. Which means that the registration point is in the middle of the Movie Clip for some reason. So what you have to do is to offset a half of the Movie Clip's width like this:

this.addEventListener('tick', moteurRendu.bind(this));
function moteurRendu()
{
    if (stage.mouseX > 0 && stage.mouseX < 150 && this.parallaxe_mc.x - this.parallaxe_mc.nominalBounds.width * 0.5 < 0)
    {
        this.parallaxe_mc.x += 1; // x : horizontal, +=1 : ajouter 1 pixel par tick
    }
    if (stage.mouseX > 150 && stage.mouseX < 300 && this.parallaxe_mc.x + this.parallaxe_mc.nominalBounds.width * 0.5 > -10)
    {
        this.parallaxe_mc.x += -1; // x : horizontal, +=1 : ajouter 1 pixel par tick
    }
}

Regards,

JC

[Leakcim92]

Thank you for your reply.

I have the banner made in the classroom.

The result is correct (the picture is 5 pixels apart depending on the position of the mouse).

When I try to do the exercise again, it does not work.

Yet, I say exactly the same things...

The banner made in the classroom: WeTransfer

The banner that I redone: WeTransfer

Why do you think the result is not the same when the javascript code is the same?

Desired result

Result that I get

[JoãoCésar · Accepted solution]

Thank you. I figured out.

You can keep your original code.

The problem here is the Transformation Point. In AS3, the Transformation Point had no effect but it seems it do has effect in HTML5 (Canvas) documents.

When you click the Movie Clip, notice that there is a small white dot at the middle. Move it to the top left corner of your Movie Clip by dragging it with the Free Transform Tool (Q) or, better yet, double click it to reset its position to the registration point.

Done.

Now your Movie Clip will have a position of -5.5 in runtime.

[Leakcim92]

Many thanks! It works.

You remove a thorn from my foot.

It is very kind of you to have taken the time to help me.

Very nice day.

[JoãoCésar]

You're welcome!