Best way to show four different layers one at a time

[raven+crow]

Hey all. New to the community and Animate and wondering if I can get some help on a concept I'm having trouble teasing out.

Basically, I'm trying to create an informational graphic that allows users to click on one of four buttons and show different corresponding information in the main circle —images attached of the four graphics with filler content. In actuality, the real graphic will show different intertnal text in the big circle whebn each of those four top buttons are clicked.

I had originally created motion tweens for each layer going from 0 to 100 on the Alpha and back to 0, with two stop actions, then made the four top  buttons trigger each tween accrodingly. But that breaks after two layers, I realize now.

I'm hoping there's a better way to animmate and make the big circle info change with the top buttons being clicked?

And thanks in advance, all!

[kglad]

i don't know what your post title means, but all layers always show unless you take steps to hide them.

as for your screenshot, it looks pretty simple to just use keyframes to show different displays, or if the only differences are the text, use a dynamic textfield and code to show the different content.

[raven+crow]

Yeah, I'm probably not explaining much (any) of this well. And correct, only the text and the darker buttons would be changing. So you're saying that I would have the buttons trigger an animation that just goes to a new keyframe where the text would be different and the button would be darker, correct? Again, v new to Animate, so apologies if I'm asking super-basic questions.

[kglad]

you could do that.  it's simple in concept, easy to execute and debug for all the visible elements.

for the actual buttons that control which frame is viewed, use transparent buttons in one initial keyframe so you only have code in that initial keyframe.

[raven+crow]

Yeah, that's how I'd done the buttons initially. For the keyframes, would I just make the text appear with Alpha percentages at the keyframes or do something else?

[kglad]

at the keyframes that appear after a button click, place exactly what you want to appear.  there's no bleeding from one keyframe to another.

[raven+crow]

Great—I'll give it a go. Thanks @kglad!

[kglad]

you're welcome..

when you're ready to code, if you need help, repost.  and keep us updated.

[raven+crow]

follow-up on the buttons—when I made them transparent, they we're registering to click, so I ended up giving them 1% on Alpha. Is there a better way to do that so they're not seen at all?

[kglad]

a slightly better way is to create a button and only add a shape with fill to the hit frame, not the up, over, and down frames.  but, to me, 1% alpha isn't noticeable.

[raven+crow]

Hm, yeah, still having issues—I've coded the four buttons (I thought) to go to each of the keyframes:

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.StableButton.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and continues playback from that frame.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndPlay(2);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.ReluctantButton.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and continues playback from that frame.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndPlay(3);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.OverwhelmedButton.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and continues playback from that frame.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndPlay(4);
});

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.FirefightingButton.on('click', function(){
/*
Moves the playhead to the specified frame number in the timeline and continues playback from that frame.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndPlay(5);
});

But the buttons aren't working as they should or going to the right places. Not sure what I'm doing wrong here....

[kglad]

canvas frame numbers start with zero.  ie, your first frame is number zero. your nth frame is frame number n-1

[raven+crow]

Oh, I was going off the Current Frame reader in the Timeline

[kglad]

understood.  

is everything working well now?

[raven+crow]

almost? it's not making any sense to me, but since re-ordering, one frame isn't triggering correcting but the other three are. it's totally not following logic for me

[kglad]

you can use frame labels, too.  that might make it easier for you.to code.

otherwise, copy and paste a screenshot of your main timeline and siw your updated code.

[raven+crow]

great—I think I've got it working now. thanks so much for all the help

[kglad]

you're welcome.

[raven+crow]

Back on this, is there any reason that this code for a button:
var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.RelButton.on('click', function(){
/*
Moves the playhead to the specified frame label in the timeline and continues playback from that frame.
Can be used on the main timeline or on movie clip timelines.
*/
_this.gotoAndPlay('1Rel');
});

would go to the frame AFTER the specificed label frame instead of the one in the code? May be relevant—we've got and actions layer set for each frame with this stop code:

var _this = this;
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.stop();

[kglad]

can you reproduce that in a new fla?

[raven+crow]

You know, I think I was again overcomplicating things with a stop action for every frame and actions to 'go to and play' for my buttons. Reverted to one stop action in the first frame and 'go to and stop' and things are now working as intended. Thank you aghain though!

[kglad]

go to hear!