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.
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
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
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
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.
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
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.
* 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
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.
- 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)
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
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
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
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
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
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
Copy link to clipboard
Copied
Sorry it should read - 10 frames (not -10 keyframes)
Sorry for the mishap,
William-Michael
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
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
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
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!
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:
Thank you so much for assisting me in my many questions!
William - Michael
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
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
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
Copy link to clipboard
Copied
Hi Joao,
Thank you again for your truly outstanding help - it is greatly appreciated!.
Kind regards, Wiliam-Michael
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.
Regards,
JC
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
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