Highlighted

Triggering an action after clicking two buttons

New Here ,
May 01, 2019

Copy link to clipboard

Copied

Hi there!

I'm an extreme beginner to Adobe Animate. I'm creating a website for an assignment using HTML5 and am looking for some help.

I'm making a zodiac "compatibility" page where I want the user to click the buttons for two different zodiac signs in order to bring up a screen with the information on the compatibility between the two signs. How would I go about doing this? I only know the basic "Click to go to Frame and Stop" for one button, not two. Is there a way I could limit the clicks to only two, and have the buttons "deactivate" if the user tries to select more than two buttons?

Additionally -- I could probably figure this one out myself with some trial and error, but hey, while I'm here -- how might I make the hover effect on a button remain visible after the button is clicked? Is this the "Down" field, or is that only while the button is being actively clicked?

Thanks so much in advance!

Views

112

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

Triggering an action after clicking two buttons

New Here ,
May 01, 2019

Copy link to clipboard

Copied

Hi there!

I'm an extreme beginner to Adobe Animate. I'm creating a website for an assignment using HTML5 and am looking for some help.

I'm making a zodiac "compatibility" page where I want the user to click the buttons for two different zodiac signs in order to bring up a screen with the information on the compatibility between the two signs. How would I go about doing this? I only know the basic "Click to go to Frame and Stop" for one button, not two. Is there a way I could limit the clicks to only two, and have the buttons "deactivate" if the user tries to select more than two buttons?

Additionally -- I could probably figure this one out myself with some trial and error, but hey, while I'm here -- how might I make the hover effect on a button remain visible after the button is clicked? Is this the "Down" field, or is that only while the button is being actively clicked?

Thanks so much in advance!

Views

113

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
May 01, 2019 0
Adobe Community Professional ,
May 01, 2019

Copy link to clipboard

Copied

You need to use variables and check them.

Let's say when you click button 1 you assign

var answer1 = 1;

on your button 2

var answer2 = 2;

and so on...

then you can check your answers with a conditional like:

if (answer1 == 1 && answer2 == 2){

// something happens

} else{

something else happens

}

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...
May 01, 2019 0
New Here ,
May 01, 2019

Copy link to clipboard

Copied

Thanks! So where exactly would I put each of these statements?

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...
May 01, 2019 0
Adobe Community Professional ,
May 01, 2019

Copy link to clipboard

Copied

I suppose you have a movie clip or a button for each one of your choices.

Put the variable in the click event of each one.

Then I guess you can either trigger the answer with a check button or another type of event.

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...
May 01, 2019 1
Adobe Community Professional ,
May 02, 2019

Copy link to clipboard

Copied

I will try to make a sample for you alter today. Stay tuned.

In the mean time to deactivate a button use

this.buttonInstanceName.mouseEnabled = false;

When you want to reactive use

this.buttonInstanceName.mouseEnabled = true;

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...
May 02, 2019 1
Advocate ,
May 02, 2019

Copy link to clipboard

Copied

Hi autumnh

Given the fact that you are an extreme beginner, I assume that you have one frame where a user can select the desired zodiac sign combination (let's label this frame as combi_selector and then you will have 144 (12 x 12 signs - a lot of) frames with each containing a screen for all possible combinations. Further each of those combi frames contains a button to go back to the combi_selector frame. All this frames need to be keyframes.

In the combi_selector frame you have 12 buttons each one instance-named with the particular sign name (Aquarius, Pisces, Aries and so forth).  (let's come to your second issue of the hover effect on a button remain visible in a second part), All of those 144 combi-frames you label strictly in aphabetical fashion like AquariusPisces and not like PiscesAquarius. Otherwise you would need 288 combi-frames for all possible combinations. Okay, now comes a little bit of Javascript in a "code" layer of frame combi_selector.

var here = this;

here.selectedCombination = [];

var signBtns = ["Aquarius", "Aries", "Cancer", "Capricorn", "Gemini", "Leo", "Libra", "Pisces", "Sagittarius", "Scorpio", "Taurus", "Virgo"];

here.clickHandler = function (e) {

    var etn = e.target.name;

    var idx0, idx1, combilabel;

    if (signBtns.indexOf(etn) != -1) {

        if (here.selectedCombination.length < 2) {

            here.selectedCombination.push(etn);

            if (here.selectedCombination.length == 2) {

                idx0 = signBtns.indexOf(here.selectedCombination[0]);

                idx1 = signBtns.indexOf(here.selectedCombination[1]);

                if (idx0 < idx1) {

                    combilabel = signBtns[idx0] + signBtns[idx1];

                } else if (idx0 > idx1) {

                    combilabel = signBtns[idx1] + signBtns[idx0];

                } else if (idx0 == idx1) {

                    combilabel = signBtns[idx0] + signBtns[idx0];

                }

                here.gotoAndStop(combilabel);

            }

        }

    }

};

here.on("click", here.clickHandler, here, false);

Right. Some explanation for the beginner in you.

In line 03 we create an empty Array called selectedCombination. We will fill it with the instance-names of the sign buttons clicked and will test when two items have been selected. An array is a list of items and we can add something with push(), we can ask how many items are contained with length() and we can ask for the index position of a particular item with indexOf().

In line 05 we have another Array with all sign button instance names in alphabetical order. I.e. signBtns.indexOf("Cancer") would respond with 2, because Arrays are zero-based, means they start counting with 0. We need this Array mainly to determine the alphabetically based label name of the combi frame to go to.

In line 07 we have our eventHandler for clicks.

In line 29 we initiate our eventListener for clicks.

In line 08 we assign the clicked sign button instance name to the variable etn.

In line 09 we initiate some more variables needed in further course in this function.

In line 10 we ask if the clicked instance belongs to the group of signBtns. This is for excluding any other interactive element if you have more than the signBtns on stage meant for further interactivity. Generally Array.indexOf(item) != -1 means that the item is found in an Array, otherwise it would be == -1. The operator != means is not or unequals.

In line 11 we ask if the length of our selectedCombination Array is still smaller than 2, means either zero or one item is selected.

In line 12 we add the newly selected signBtn instance name with push().

In line 13 we ask again if now 2 items are present in the selectedCombination Array for further processing.

In the lines 14 - 22 we find out which one of the two items in the selectedCombination Array has a lower index number (position) in the signBtns Array which determines the alphabetical running order for finding our combi frame label of the given combination. Note that an identical selection like "CancerCancer" is possible as well.

Well then in line 23 we send the playhead to that evaluated combination frame.

I made an example for this which you can download here: Adobe Creative Cloud . This is not with the 144 combination frames, but it shows you the particular combilabel in an dynamic textfield.

Now, finally, when you place on each combi frame a button to go back to the combi_selector frame and you name them always let's say goBackSelect then the code above need an addition in the lines 26 - 28:

var here = this;

here.selectedCombination = [];

var signBtns = ["Aquarius", "Aries", "Cancer", "Capricorn", "Gemini", "Leo", "Libra", "Pisces", "Sagittarius", "Scorpio", "Taurus", "Virgo"];

here.clickHandler = function (e) {

    var etn = e.target.name;

    var idx0, idx1, combilabel;

    if (signBtns.indexOf(etn) != -1) {

        if (here.selectedCombination.length < 2) {

            here.selectedCombination.push(etn);

            if (here.selectedCombination.length == 2) {

                idx0 = signBtns.indexOf(here.selectedCombination[0]);

                idx1 = signBtns.indexOf(here.selectedCombination[1]);

                if (idx0 < idx1) {

                    combilabel = signBtns[idx0] + signBtns[idx1];

                } else if (idx0 > idx1) {

                    combilabel = signBtns[idx1] + signBtns[idx0];

                } else if (idx0 == idx1) {

                    combilabel = signBtns[idx0] + signBtns[idx0];

                }

                here.gotoAndStop(combilabel);

            }

        }

        if (etn == "goBackSelect") {

            here.gotoAndStop("combi_selector");

        }

    }

};

here.on("click", here.clickHandler, here, false);

So, this was quite a voluminous reply especially for somebody so far not familiar with javascript for Animate CC.

Klaus

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...
May 02, 2019 2
Adobe Community Professional ,
May 08, 2019

Copy link to clipboard

Copied

For the result text from Klaus I would add the space between the 2:

if (idx0 < idx1) {

     combilabel = signBtns[idx0] + " " + signBtns[idx1];

} else if (idx0 > idx1) {

     combilabel = signBtns[idx1] +  " " +signBtns[idx0];

} else if (idx0 == idx1) {

     combilabel = signBtns[idx0] +  " " +signBtns[idx0];

}

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...
May 08, 2019 0
Adobe Community Professional ,
May 08, 2019

Copy link to clipboard

Copied

Sorry I was sick. Here is my sample as promised.

click 2 buttons.zip - Box

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...
May 08, 2019 0