can one button do two things in animate CC?

[martoons]

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

[kglad]

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.

[ClayUUID]

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]

oops.

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

[martoons]

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

[ClayUUID · Accepted solution]

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

}

[martoons]

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