• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Best way to show four different layers one at a time

Community Beginner ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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!

1.png2.png3.png4.png

Views

179

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

you're welcome..

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 30, 2023 Nov 30, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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....

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

understood.  

 

is everything working well now?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 01, 2023 Dec 01, 2023

Copy link to clipboard

Copied

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

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();

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

can you reproduce that in a new fla?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 04, 2023 Dec 04, 2023

Copy link to clipboard

Copied

LATEST

go to hear!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines