Skip to main content
L
Leakcim92
Known Participant
January 15, 2018
Answered

Bannière avec parallaxe

  • January 15, 2018
  • 1 reply
  • 932 views

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

This topic has been closed for replies.
Correct answer JoãoCésar17023019

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.

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
January 15, 2018

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

L
Leakcim92Author
Known Participant
January 15, 2018

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ésar17023019
    Community Expert
    JoãoCésar17023019Community ExpertCorrect answer
    Community Expert
    January 15, 2018

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices