Skip to main content
M
martoons
Inspiring
January 17, 2018
Answered

can one button do two things in animate CC?

  • January 17, 2018
  • 2 replies
  • 1622 views

i'm a designer & 2D animator and i stopped coding somewhere before AS3 so my coding chops are minimal.

I know I'm late to the dance, but i'm just now starting to learn about animate cc & html5.

i thought i'd take an old .fla file and try and convert it to Animate CC and then to html5.

i'm starting with a simple image slider.

I found code online to allow me to make a simple slide show but now I'd like to add some functionality to the 'next button'

i'm trying to add 'AnimateHorizontally' to an element that's on screen when the button is clicked.

i found this code:

this.moveObject.addEventListener("tick", fl_AnimateHorizontally.bind(this));

function fl_AnimateHorizontally()

{

this.moveObject.x+=100;

}

which moves the 'moveObject' 100 pixels to the right.

but it does it when the playback head enters the frame. how do i get it to move when the button is clicked instead.

and can multiple elements be added so one click starts a number of elements moving at once.

be gentle, if this is too code heavy I may have to give up.

thanks,

martoons

This topic has been closed for replies.
Correct answer ClayUUID

There's no way what you just pasted works, because everything after /* Move horizontally is commented out. If it wasn't commented out, you'd be adding a new event listener inside your event handler, which very likely is not a good idea. Defining a function inside a function also tends to be a bad idea unless you really know what you're doing.

You should be using the Format Code button in the upper-right of the Actions window. It will automatically format any code in the window, visually revealing how the functions are nested. For example the above code properly formatted would look like this:

this.button_1.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2() {

    // Start your custom code

    // Move Horizontally

    this.mark.x += 100;

    //go to next frame and play

    this.button_1.btnLabel.text = "Play";

    this.button_1.btnLabel.mouseEnabled = false;

    this.button_1.addEventListener("click", playClicked.bind(this));

    function playClicked() {

        this.play();

        isPlaying = true;

    }

    // End your custom code

}

2 replies

M
martoonsAuthor
Inspiring
January 17, 2018

this.button_1.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2()

{

// Start your custom code

/* Move Horizontally

this.mark.x+=100;

//go to next frame and play

this.button_1.btnLabel.text = "Play";

this.button_1.btnLabel.mouseEnabled = false;

this.button_1.addEventListener("click", playClicked.bind(this));

function playClicked() {

this.play();

isPlaying = true;

}

// End your custom code

}

i'm sure it's not elegant, but it seems to work.

if i understand this (and there's a good chance I don't),

first a mouseclick event is entered then i can just add other code snippets between the {} symbols. it will  then perform all the code between the {} symbols.

thanks again.

martoons

C
ClayUUIDCorrect answer
Legend
January 17, 2018

There's no way what you just pasted works, because everything after /* Move horizontally is commented out. If it wasn't commented out, you'd be adding a new event listener inside your event handler, which very likely is not a good idea. Defining a function inside a function also tends to be a bad idea unless you really know what you're doing.

You should be using the Format Code button in the upper-right of the Actions window. It will automatically format any code in the window, visually revealing how the functions are nested. For example the above code properly formatted would look like this:

this.button_1.addEventListener("click", fl_MouseClickHandler_2.bind(this));

function fl_MouseClickHandler_2() {

    // Start your custom code

    // Move Horizontally

    this.mark.x += 100;

    //go to next frame and play

    this.button_1.btnLabel.text = "Play";

    this.button_1.btnLabel.mouseEnabled = false;

    this.button_1.addEventListener("click", playClicked.bind(this));

    function playClicked() {

        this.play();

        isPlaying = true;

    }

    // End your custom code

}

M
martoonsAuthor
Inspiring
January 18, 2018

Oops. you're right.

I got rid of the dangling comment and it seems to work but i see that the code is clumsy.

I have been using Flash as an animation tool since it was FutureSplash and animating with code is still very new to me. I learned just enough AS2 to be dangerous.

I will keep trying to understand it as best as I can and once again thank you for your help.

M

kglad
Community Expert
kgladCommunity Expert
Community Expert
January 17, 2018

yes, one button can do many things (with one, or more, clicks).

there's nothing in the code you showed that would move this.moveObject when the frame is entered.

C
ClayUUID
Legend
January 17, 2018

kglad  wrote

there's nothing in the code you showed that would move this.moveObject when the frame is entered.

There is. He's listening for the "tick" event.

Mar, there are code examples built in to Animate to do almost exactly what you want. Go to Window -> Code Snippets. Under "Event Handlers", the "Mouse Click Event" entry will create a mouse click handler for the currently select movieclip.

An event handler is just a JavaScript function, so of course it can do two things. Or three things. Or a thousand things.

Or you can add multiple event handlers to the same object, which will call all of them when the event fires.

kglad
Community Expert
kgladCommunity Expert
Community Expert
January 17, 2018

oops.

@op, use "click", not "tick".

Hello World!

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