Known Participant

Question

How do I create one (Home / About / Contact / Help etc) button for 16 button instances

Forum|Forum|5 years ago
October 17, 2020
4 replies
1930 views

I am new to Adobe Animate and need to create a presentation in AS6. My problem:
There are 16 images. On frames from 1 to 160 -- Keyframes which change the image are 10, 20, 30 etc till 160

At each keyframe a new image is displayed with navigation buttons on top (like Home, Next, Previous, About etc)
The button instances are called - e.g. for the "Home" Button: home1_btn, home2_btn, ... home16_btn,
For the "Next" button: home1_btn, home2_btn, ... home16_btn and so on.

The big question - do I have to write the same mouse click events - 16 times - that is create an AS3 for each button instance?
The logic would demand that one would write one code for the base button out of which 16 button instances are created.
And that when one uses an instance of this base button then automatically - if the user ticks "yes" - the code associated to this base button would be executed:
Just as the 4 different states (Up/Over/Click/Hit) of a base button are taken over by all the button instances - why is there not a tick box that allows to create a generic base code for all the button instances ?

E.g. if we take the sample home1_btn to home16_btn the effect of the mouse click on tis button is always gotoAndStop("home");
But AS 3 does not seem to allow to write a code for the base button - only a code for the indivdual button instances..

Yet, I am sure there must a way to write only one code for all the 16 button instances (they only differ by the appended no.!)
There are many situations discussed on the net - but none refers to this "same AS3 instructions for multple button instances".
Would be very grateful if solutions to this problem would be discussed.

Thank you for your assistance and understanding.

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

Hi again, William!

I'm kinda lost now. Haha

May I ask you to sum up all of your questions in a short summary it that's not a problem?

Thank you!

W

Wiliam-MichaelAuthor

Known Participant

Hi Joao,

Thank you for stepping into my thinking back and forth! Yes, I understand you - on re-reading my many posts - they are confusing!
Well my present question is this:
When pressing the “previous” button - how can I branch back to whatever previous keyframe (i.e. the previous keyframe may not always be the currentFrame – 10) ?

This is the most pressing problem.
Naturally the other questions would be good to know as well:

When you need to enter the same AS3 code in multiple keyframes (like e.g. the stop(); in keyframe 10, 20, ...160):
Is there a way to select the multiple keyframes and type the instruction (or set of instructions) only once?
Is there a way easily switch Stage on and off?

Thank you so much for assisting me in my many questions!

William - Michael

JoãoCésar17023019

Community Expert

Hi.

No problem!

1 - Unfortunately there's no way to reference keyframes at runtime. Keyframes only exist in the authortime. What you can do is to create labels and navigate using them. Like this:

AS3 code:

import flash.events.MouseEvent;

var count:int = 0;
var labelsList:Vector.<String>;

function getLabels(target:MovieClip = null):Vector.<String>
{
	var vector:Vector.<String> = new Vector.<String>();
	
	if (!target)
		target = root as MovieClip;
	
	for (var i:uint = 0, total:uint = target.currentLabels.length; i < total; i++)
		vector.push(target.currentLabels[i].name);
	
	return vector;
}

function clamp(value:Number, min:Number, max:Number):Number
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
	
	return value;
}

function stageClickHandler(e:MouseEvent):void
{	
	if (e.target.name === "prev")
		gotoAndStop(labelsList[clamp(--count, 0, labelsList.length - 1)]);
	else if (e.target.name === "next")
		gotoAndStop(labelsList[clamp(++count, 0, labelsList.length - 1)]);
}

stop();
labelsList = getLabels();
stage.addEventListener(MouseEvent.CLICK, stageClickHandler);

Source / sample / files / code:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/as3/navigate_from_label_to_label

2 - There's no way to select multiple frames and apply actions to them all at once as far as I can tell.

3 - What do you mean by switching Stage on and off?

I hope these help.

Regards,

JC

JoãoCésar17023019

Community Expert

You're welcome, William!

I will give some quick answers, but I will delve into any questions you may still have.

- The target property from a click event, for example, refers to the instance that is actually clicked by the user. The currentTarget property refers to the instance that you actually added the listener to. For example: you add a click event listener to a Movie Clip instance containing three Button instances. When you click on one of the buttons, the target property will refer to the clicked button, but the currentTarget property will refer to the Movie Clip instance.

- The names you asked (e.g.: "home", "about", aboutContainer) are instance names. Instance names are diffeerent from symbol names.

* Instance names are accessed through the the Properties panel when an instance is selected on stage.

* Symbol names refer to the items in the Library. They are not used to target instances properties and methods.

Regarding the usage of custom classes, it will be kind hard to exaplain with plain text. I'll suggest you to search for video tutorials on YouTube typing something like "as3 custom classes".

I also recommend the amazing series of tutorials from Tuts+ called AS3 101 if you want to go deeper in AS3:
https://code.tutsplus.com/series/as3-101--active-7395

If these references are not enough, please let me know and I will gladly record a video explaining these topics for you.

Regards,

JC

W

Wiliam-MichaelAuthor

Known Participant

Hi Joao,

Thank your willingness to assist me.
I am still “exploring” what you are trying to explain to me … and how to make it work in my presentation.

Am I correct to assume that buttons that remain the same (and have the same AS3 throughout the movie) – when they remain instances only (rather than becoming symbols) then they stay “constant” – and I can use them with the same instance name on each frame
without incurring a duplicate instance name error message ( or do I have to define them only in keyframe 1 and they remain unchanged buttons in a sep layer in the timeline?)
(Is this possible ? – I thought I have to allocate a separate button instance name each time I display a new keyframe on stage?)
How do you select your buttons on stage?

- When I select any of your 3 buttons on stage all the stage is bordered by a red square and Window/Properties reveals “Movie Clip” / “buttons” (with info “instance of Buttons” below)
So I still wonder where to find or how to select the buttons with instance names “prev”, “next”, “home” that you refer to in your code and in the printouts of the Properties section in your past email – IOW, I cannot select any of your buttons individually - it seems there is not any individual object selection possible at all.
(is this perhaps the “Container” – that you define “the lot” as a “container” ?
But this still would not explain how you defined the button instances with indiv instance names)

Finally – a question about the best design for my presentation:

So far each frame of my stage is one unified whole page with
- the unchanging buttons in a row on the top
and below
- an image or text (sometimes with an “interactive” button = that navigates dep on the user’s choice)

So, my “stage construction”, is a set of 160 frames with 16 changing keyframes…
I have as well a label layer which allocates names to the 16 keyframes -e.g.
frame 10-19:   “slide1”
frame 20-29:   “slide2”
…
frame 150-159: “slide16”
frame 160:   “end”

Is this as well your design?

Or is it using the very same constant page content - apart from the number ?
That is should I perhaps create a separate 2 part- stage which only would have a placeholder frame – with a constant and variable part:
-- Upper part:    a row with button instances which do not change
– Lower part:   varying images and user-controlled interactive buttons
                               which vary in accordance with the keyframes 10, 20, 30 … 160

But this would mean to define and process the variable parts as a set / array of 16 (…For i =1 to 16) which may become a little tricky due to the addition of the user-interactive buttons…

Sorry, there are so many questions.
My objective: To use your nice navigation code.
But to make it fit for my “Flash slide show like” presentation – I still need to discover a few secrets.

Thank you again for your willingness to assist me.

Kind regards, William-Michael

W

Wiliam-MichaelAuthor

Known Participant

Some more question, Joao... (please tell me if this gets too much)
1. When you need to enter the same AS3 code in multiple keyframes (like e.g. the stop(); in keyframe 10, 20, ...160):
Is there a way to select the multiple keyframes and type the instruction (or set of instructions) only once?
It is not just saving the sequence of 16 times
- click on keyframe
- click on Window/Actions
- paste instructions
...which may sound easy but when you have to do this 16 times and only a small laptop screen (and not too much RAM) then dealing with open Timeline - open Action screen (which I can never minimize in size) - open Stage then it is very easy clicking on and changing an item on the stage and having to CTRl+Z redo it.

2. The "Window" Menu allows you to open many items but not the Stage.
One time when I lost the "Stage" it took me 45 minutes to find it again:
Is there a way easily swithch Stage on and off?
(Adobe designers may consider a Status Board (like e.g. Microsoft Word) which allows the user to quickly tick on / off the panels that should stay open or closed)

3. My tries to make my production more like yours let to another "unsolved" - despite hourlong searches on the net:
When you made on object or button a symbol and you want to undo this - you would expect this status (being a symbol) to be a property of the object that you can tick on or off. But there is none. And despite searching the many videos on the net - I did not find a way how to revert my buttons back to just being "instances" without being symbols ( not knowing your simplified code, I had made many of them to symbols)

4. The buttons we need are actually rectangular push buttons on top of the image that changes every tenth keyframe>
These buttons should change colour when moving the mose over and clicking it. So I had made a base button a symbol that changes colour in accordance with the mouse actions.
If I now drag these buttons on stage do they automatically become symbols, too.
Or would they - if I give them an instance name - stay instances that change the colour in acc with the mouse movements.
You see - I would like to use your nice AS3 code (Click on currentTarget mechanism) - so I would need "instances only"

Sorry for being so ignorant and asking so much ... but for our project time is of essence and to study all the Animate methods - it would be too much...

Thank you (... for any help that you can afford to give me)

Kind regards. William Michael

JoãoCésar17023019

Community Expert

Hi.

One easy approach is to add a click event listener to stage and then check for the current target name. Like this:

import flash.events.MouseEvent;

function stageClickHandler(e:MouseEvent):void
{	
	if (e.target.name === "home")
		gotoAndStop(1);
	else if (e.target.name === "about")
		aboutContainer.play();
	else if (e.target.name === "prev")
		gotoAndStop(currentFrame - 10);
	else if (e.target.name === "next")
		play();
}

stop();
stage.addEventListener(MouseEvent.CLICK, stageClickHandler);

Source / sample / files / code:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/as3/navigation

Another way is exporting a symbol for ActionScript in the Library and assigning a custom class for it. In this way you can apply the intended behavior for your buttons no matter where they are and without repeating code.

Please let us know if you need further assistance.

Regards,

JC

W

Wiliam-MichaelAuthor

Known Participant

Thank you so much, Joao!
I still have to test what you told me but that you answered so fast - this deserves a great "Thank you!"
One question to what you tell me:
"Another way is exporting a symbol for ActionScript in the Library and assigning a custom class for it.
In this way you can apply the intended behavior for your buttons no matter where they are and without repeating code."

How do you do that?

I am very new to AS3. I know that items to manipulate on or to click on (like buttons) - they all have to be a symbol and allocated to a keyframe or series of keyframes. What I had done so far is I "pasted in place" the buttons referring to "a predefined location" (Home/About etc) to the keyframes (10, 20, 30, ...160) and given each their own instance names (home1_btn, hoe2_btn .... home16_btn).
Althoough I do not understand what you mean my intuition tells me that your method may be similar to what I originally had in mind:
That is - it seems to follow the logic:
1. Define a button as a base button (a simple tick box may be much easier than "defining a class") - allocate some AS3 to it
2. Any instance using this base button is allocated the base button's AS3 code (unless this "behaviour is ticked off again")
But what is a custom class " - and what is to be done to "assign a class"?
What are the instructions to make a butto a "special class"? Where do I put this "assignment code (AS3 to Frame 1?)
Do you assign the "custom classs" to the base button (it could not be to one of the 16 button instances I think?) Could I kindly ask you to show me the instructions to make the home_btn a custom class?
Would then all the instances of the "custom class button" have the code associated with it?
Thank you for you assistance and understanding.

KInd regards, William Michael

W

Wiliam-MichaelAuthor

Known Participant

Correction to line 5 of the post above:
Instead of: For the "Next" button: home1_btn, home2_btn, ... home16_btn and so on.
it should be: For the "Next" button: next1_btn, next2_btn, ... next16_btn and so on.
Sorry for the mishap!
William Michael

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded