Highlighted

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

New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

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.
   

Views

101

Likes

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

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

New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

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.
   

Views

102

Likes

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
Oct 16, 2020 0
New Here ,
Oct 16, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 16, 2020 0
Adobe Community Professional ,
Oct 17, 2020

Copy link to clipboard

Copied

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

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Oct 17, 2020 1
New Here ,
Oct 19, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 19, 2020 1
New Here ,
Oct 19, 2020

Copy link to clipboard

Copied

! Wow ! 
I just discovered that you (Joao) even made a sample file - complete with AS3!

My compliments  - it is so well programmed - with an eye for the essence of the navigation in question. 
What a difference to my 'pre-sinflood-programming' !
Joao, you are really lightyears ahead of me!

 

Yes  - there are - (many) questions ...
1. I am not yet familiar with "e.target" but I think the "event target" in the given code may express:
        if the "target" that you clicked with your mouse ("mouse click" being the 'imported' e = event) is named "home" then do ....
But there is no labels layer which allocates the symbol "home" / "abour" to a set (of) keyframe(s).
So surely - I must missing something - because the literal ("home") cannot be the button's name in the library either:
The "HomeButton" is not named "home" and both arrow buttons are named "ArrowButton" - unless the triangular graphic is automatically associated with prev or next  - how could the system 'know' which button the user pressed?
Surely, I must be missing a connection.

 

  1. And what is the "aboutContainer"?
    I first thought this may be like a constant = unchanging image (rather than a symbol which is variable, which may change from one frame to the next during the movie)  - that is to say an image that is only stored outside - without a frame in the Timeline 
    It may make sense to allow for "timeless" = constant = "unchanging objects" ...
    But then I read that Container means packaging objects which are treated all in the same way.
    But what does this "aboutContainer" - "package" consist of - were is it "assembled"/defined?

Sorry, for asking so many questions.
But Adobe Animate - it is so volumnious !!!


Thank you again for your assistance. 

It is very much appreciated.

 

Kind regards,   
William-Michael

 

 

Likes

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
Reply
Loading...
Oct 19, 2020 1
Adobe Community Professional ,
Oct 19, 2020

Copy link to clipboard

Copied

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.

image.png

 

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

image.png

 

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Oct 19, 2020 1
New Here ,
Oct 19, 2020

Copy link to clipboard

Copied

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.

 

  1. 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?)

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

 

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

Likes

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
Reply
Loading...
Oct 19, 2020 0
New Here ,
Oct 20, 2020

Copy link to clipboard

Copied

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

 

 


 
 

Likes

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
Reply
Loading...
Oct 20, 2020 0
New Here ,
Oct 20, 2020

Copy link to clipboard

Copied

Hi Joao,

I think that I have now found a solution that may work well:

I simply use at each keyframe (10, 20, ...160) your "smart routine" - like a switchboard - to control the flow of navigation for whatever button is a part of the keyframe (= all the buttons that are on all frames plus those that are only at the given keyframe).
It should work just fine but I have yet to test it.
Thank you again for all your help.

Kind regards,      William-Michael

Likes

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
Reply
Loading...
Oct 20, 2020 0
New Here ,
Oct 20, 2020

Copy link to clipboard

Copied

Hi Joao,
Your "use instance names only" seems to work - I think I only need 1 instance name for each repetiuous button (e.g. "prev" for all the "Previous" buttons)
But may I trouble you for one small extra (to make it look neat)?
To use your function in 16 different keyframes I would need to name it differently each time I use it.
Is there a chance to extract the keyframe no (10, 20, .... 160) from the system and append to the functionname?
Like                       kf:String = String(currentFrame);                                              ) I made these instructions up - would you 
                              function stageClickHandler+kf(e:MouseEvent):void                ) know how to code this properly?
                              ...
                              stage.addEventListener(MouseEvent.CLICK, stageClickHandler+kf);
If this were possible then I just could always copy the same set of base instructions 

Thank you again for your great help.

 

Kind regards,    William-Michael 

Likes

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
Reply
Loading...
Oct 20, 2020 0
New Here ,
Oct 20, 2020

Copy link to clipboard

Copied

Wow! 
Joao - I just found that your routine works for all keyframes !
So - no need to copy the function - no need to append any frame no onto the function name
I still may have a few questions later when I add some animations - but the naigation seems to be "under control".
Thank you again very, very much for your great assistance!

Kind regards,  William-Michael

 

 

 

Likes

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
Reply
Loading...
Oct 20, 2020 0
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

Hi Joao, 
One more question - if possible - please ...

Using your routine for the "previous" button will always go one keyframe back (- 10 keyframes)
This would work for most of the navigation. But sometimes the "previous" button may not be the -10 keyframe:
E.g.The user starts the movie with keyframe 10. He then clicks on the button "Introduction"  which opens keyframe 30.

Now to go back to the "previous keyframe" (keyframe 10 with which he started) would not be
currentkeyframe - 10  because this would open keyframe (30-10=) 20 rather than 10.

So, to make the jump back to "whatever" previous frame using your control routine I did the following:
1. In the first keyframe - just in front of your routine - I defined  the global variable "ps" and set it to 1
And then used the variable to tell the system where to go to:

var ps:int = 1;
import flash.events.MouseEv...

...
... else if (e.target.name === "prev_btn")
gotoAndStop(ps);
...

2. Then I allocated at each of the 16 keyframes its corresponding keyframe no:
E.g. at keyframe 30 the Actions would be   
ps = 30;
stop();

The idea being when I leave one keyframe to another frame then (in this other frame) the variable "ps" should guide the user back to the "previous" keyframe.

But when I test run the application and press the previous button nothing happens - there is no naviagtion to keyframe 30 as I expected. Where is my mistake? Is there a solution?

 

Kind regards,   William-Michael

Likes

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
Reply
Loading...
Oct 22, 2020 0
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

Sorry it should read - 10 frames (not -10 keyframes)
Sorry for the mishap,

William-Michael

Likes

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
Reply
Loading...
Oct 22, 2020 0
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

PS

I have a faint idea that instead of just programming e.g. at keyframe 30 
ps = 30;
I should code something similar to "onleavingKeyframe:  ps=30;
But I would not know if there is such an event ...
I would be very grateful for any assistance. 

 

KInd regards,   William-Michael

Likes

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
Reply
Loading...
Oct 22, 2020 0
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

Ahhh - now I go it:
I must use a second field - so:

in keyfrme 1:

var ps:int = 1;
var ps2:it = 1;

import flash.events.MouseEv...

...
... else if (e.target.name === "prev_btn")
gotoAndStop(ps);

 

And then in each keyframe the code should have two instructions - e.g. for key frame 30 the "Actions" would be
ps =ps2;
ps = 30;
stop();

I think this should work.  Sorry if my solution came a little late.
William-Michael 

 

 

Likes

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
Reply
Loading...
Oct 22, 2020 0
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

Correction - my second solution does not work, either - it always branches back to the first keyframe...
So, Joao or anyone else who knows how to branch to the previously used keyframe  - I would need your help!
Thank you !

 

William-Michael

 

  

Likes

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
Reply
Loading...
Oct 22, 2020 0
Adobe Community Professional ,
Oct 22, 2020

Copy link to clipboard

Copied

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!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Oct 22, 2020 0
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

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

Likes

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
Reply
Loading...
Oct 22, 2020 1
Adobe Community Professional ,
Oct 22, 2020

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Oct 22, 2020 1
New Here ,
Oct 22, 2020

Copy link to clipboard

Copied

Wow! What a routine! Than you, Joao. Maybe Adobe should consider in their new Flas software a standard functon for a back button.One question where does this code fit in - in frame one 1 ?In front of the control routine ? 
Thank you again for yorr great help.

KInd regards,   William-MIchael
. at is 

Likes

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
Reply
Loading...
Oct 22, 2020 1
Adobe Community Professional ,
Oct 22, 2020

Copy link to clipboard

Copied

Hi.

 

It would be 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 === "home")
		gotoAndStop(1);
	else if (e.target.name === "about")
		aboutContainer.play();
	else if (e.target.name === "prev")
	{
		count = clamp(--count, 0, labelsList.length - 1);
		gotoAndStop(labelsList[count]);
	}		
	else if (e.target.name === "next")
	{
		count = clamp(++count, 0, labelsList.length - 1);
		gotoAndStop(labelsList[count]);
	}
}

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

 

Source / sample / files / code:

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

(I've added a v2)

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
Oct 22, 2020 1
New Here ,
9 hours ago

Copy link to clipboard

Copied

Hi Joao,

  1. Great work Joao!
    – I never thought I would ever solve this "Back-Button-Enigma"!
    One small problem: your new method   may prhaps need a small adjustment:
    When I press Previous it alway takes the keyframe whih is one lower than the one it should take:
    E.g. I am in Keyframe 8 (named "slide8") I then hop back to Keyframe 3 (named "slide30")
    When I now - in Keyframe 30 press the Previous button it jumps back to Keyframe 70 (named "slide70")
    not Keyframe 80
    It could as well be that it is my setup is to blame:
    I named Keyframe 1 (to 9) "slide0", Keyframe 10 (to19) "slide1", Keyframe 20 (to 29) "slide2"  etc up to Keyframe 160 named "slide16";
    Not sure if this may affect the processing of  your new routine.
    Be that as it may ... If I am guessing right - the easiset way to solve this would be to add 1 to the no. that grabs the array element (keyframe name) a way to make it work, kindly let me know 

  2. One question - just out of curiosity - how do you process the "list of keyframe labels" to pick the right one?
    Is it    labelling the Keyframes - Listing them in an array - ??

  1. RE. “Stage  switch on ...
    With the Animate Window Menu you can open almost everything - properties, library, timeline, Actions etc.
    But not the Stage.
    One time I "lost" the Stage that is, if I recall it correctly, it was minimized so much that it was not visibly any more.
    I searched and clicked, I browsed the internet – until some 45 minutes later I found it again.
    This experience made me suggest to Adobe – should they consider to build a new improved Animate – to have – instead of the Window Menu - a top bar with (the often used tools and in a second row,) an array of tick-boxes which when you move the cursor towards the tick box highlights the name of the panel to be opened (ticked) or closed (unticked).
    This gadget would be handy because one of the clunky features in Adobe Animate are the many different panels which – on a laptop computer – make working very awkward: It would be nice to quickly switch on and off the panel one needs
    I know that there is no such tick-box hence my question if there is a trick to make a “lost” Stage “reappear”.


Thank you again for your truly outstanding help - it is greatly appreciated!.

 

Kind regards,      Wiliam-Michael

Likes

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
Reply
Loading...
9 hours ago 0
Adobe Community Professional ,
7 hours ago

Copy link to clipboard

Copied

Hi!

 

1 - I'm not sure if I understand. But if it is what I think, please keep in mind that these code is for navigating between labels no matter what their names are. What matters is their order in the timeline. I should have made that clearer. Sorry.

 

But if what you really want is to navigate the labels by alphabetical or numerical order, you can use the sort method from the Vector class in the labelsList like this:

labelsList = getLabels().sort(function(a:*, b:*):Number
{
	if (a < b)
		return -1;
	
	if (a > b)
		return 1;
	
	return 0;
});

 

2 - I wrote the getLabels function to iterate through the currentLabels property of the main timeline (which inherits from the MovieClip class), grab the name of every label and push it to a vector.

 

3- Use the button and menus in the pictures below to center, fit or adjust the stage / view in any way desired.
image.pngimage.png

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

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
Reply
Loading...
7 hours ago 1
New Here ,
7 hours ago

Copy link to clipboard

Copied

Thank you, Joao.
Your information may come handy at a later time.

But in the moment I just want to access the "previous" key frame - e.g. in the sample given in my previous mail - when I jump from keyframe 80 to 30 - I want to return to 80 (not 70 as it does now)
So, my presetn question is, how do I add some code to access the key frame that follows the keyframe that your routine extracted? Like
Keyframe (new) = extracted key frame plus 1 (if you used ending of the keyframe name slide 0, slide 1 etc) 
or Frame (new) = extracted frame + 10 
Would you know how to code that ?

Kind regards,  Bill

Likes

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
Reply
Loading...
7 hours ago 0
New Here ,
7 hours ago

Copy link to clipboard

Copied

One further question, Joao

Window / Code Snippets / Actions / Navigation contains the prevFrame() function I tried in vain (for ca. 45 minutes) to find some information about this function. Is there not some manual about all the AS3 instructions?
Would you know what this ( prevFrame() ) fucntion does? Would it work for our purposes?

Thank you for your assistance.  

Kind regards,    William-Michael

Likes

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
Reply
Loading...
7 hours ago 0
New Here ,
5 hours ago

Copy link to clipboard

Copied

Hi Joao,

1) I do not want to overburden you too much with my many questions - please tell me if I aks too much.
2) Just one thought - related to what you said - which may produce a solution for the problem at hand:
We know that the resulting  keyframe is - in the alphabetical sequence of keyframes one keyframe too low
As the keyframes are alphabetically sorted already (slide0 to slide16) we could just
 - extract the numerical ending of the keyframe that the control routine determined
 - add 1 to it
 - and append it onto the word "slide.." 
But how would we code that?

 

Kind regards,   William-Michael

Likes

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
Reply
Loading...
5 hours ago 0