Skip to main content
eugener2418576
eugener2418576
Inspiring
September 5, 2018
Answered

Keep button state

  • September 5, 2018
  • 1 reply
  • 6132 views

I have 3 buttons. Once they are all clicked, they go through to the next stage.

I want to know how I can set it up so that when each button is clicked, their 'state' holds to show that it is completed.

Any help greatly appreciated.

[thread approved | repaired ussnorway]

This topic has been closed for replies.
Correct answer JoãoCésar17023019

Hi.

Adding to the example of the previous thread, one simple approach is to just remove all listeners from the selected buttons. Like this:

this.check = function(e) 
{ 
    if (!e.target.selected) 
    {
          e.currentTarget.count++; 
          e.target.selected = true;
          e.target.removeAllEventListeners(); // NEW
    }
    if (e.currentTarget.count == e.currentTarget.children.length) 
          this.gotoAndStop(1); 
}; 
this.stop(); 
this.container.count = 0; 
this.container.on("click", this.check, this);

Then the appearance of the toggled state end up being the one you set as the down state.

I hope this helps.

Regards,

JC

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community ExpertCorrect answer
Community Expert
September 5, 2018

Hi.

Adding to the example of the previous thread, one simple approach is to just remove all listeners from the selected buttons. Like this:

this.check = function(e) 
{ 
    if (!e.target.selected) 
    {
          e.currentTarget.count++; 
          e.target.selected = true;
          e.target.removeAllEventListeners(); // NEW
    }
    if (e.currentTarget.count == e.currentTarget.children.length) 
          this.gotoAndStop(1); 
}; 
this.stop(); 
this.container.count = 0; 
this.container.on("click", this.check, this);

Then the appearance of the toggled state end up being the one you set as the down state.

I hope this helps.

Regards,

JC

eugener2418576
eugener2418576Author
Inspiring
September 6, 2018

ah, that would have been a great/easy way to do it.

I ended up changing my buttons to movie clips and then using e.currentTarget.gotoAndPlay('downstate') which seems to work.

I did a lot of debugging/fixing using console.log.

May I ask where you are getting the knowledge of using things like e.target.selected and e.target.removeAllEventListeners()?

Is there some sort of cheatsheet or a website that I don't know about? Last time I checked that doesn't really look like js to me.

Cheers

    JoãoCésar17023019
    Community Expert
    JoãoCésar17023019Community Expert
    Community Expert
    September 6, 2018

    Excellent!

    Yeah. I really wanted to suggest using Movie Clips instead of the default Button for this situation because Movie Clips are way easier to handle and way more dynamic.

    But I'm glad you already figured it out.

    To learn the way things work in HTML5 documents, it's important to learn CreateJS and the way CreateJS is integrated with Animate CC.

    - To learn CreateJS, just head over to the offical website:

    CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

    - This page in particular is a must: EaselJS Tutorial: Mouse Interaction .

    - Also checkout the demos: https://createjs.com/demos/easeljs/spritesheet

    - Examples of using exportRoot, this, on, addEventListener, bind, custom reference to the current timeline: Button within Movieclip

    You'll find the removeAllEventListeners method there. The selected property is a custom property I added dynamically.

    To better understand the integration between ANCC and CreateJS, these are my recommendations:

    - Use console.log(obj) and inspect the methods and properties the object has;

    - Code Snippets panel;

    - Examine the exported HTML and JS files;

    - Animate CC templates (File > New > Templates or File > New from Template... (2019 version)).

    - Camera API: Camera in Animate CC

    - Advanced layers API: Create timeline layers with Animate CC

    And there's no official cheatsheet. What I can do is to tell you some useful things:

    SPECIAL PROPERTIES

    exportRoot // a reference to the main timeline created by Animate CC

    lib // reference to the Library

    lib.properties // contains useful document properties like framerate

    nominalBounds // a property created by Animate CC to display objects containing initial transform properties like width and height

    movieclip.timeline.duration // total frames of a timeline

    movieclip.timeline.position or movieclip.currentFrame // current frame of a movie clip

    VAR DECLARATION

    var score = 0; // declares a variable to that frame only

    this.score = 0; // creates a property for that object and it's available for the entire timeline

    score = 0; // declares a global variable

    ADD OBJECTS DYNAMICALLY AT RUNTIME

    this.addChild(new lib.LibraryLinkageName());

    stage.addChild(new lib.LibraryLinkageName());

    exportRoot.addChild(new lib.LibraryLinkageName());

    PLACE REGULAR ANIMATE CC OBJECTS (LIKE MOVIE CLIPS AND BUTTONS) OVER COMPONENTS (LIKE VIDEO)

    canvas.style.zIndex = "1"; // a value bigger than 0

    HOW TO MAKE SURE THE CHILDREN PROPS AND METHODS ARE READY AND HOW TO ACCESS THEM:

    var that = this;
    that.start = function()
    {
         // if using advanced layers
         that.container = that.container.children[0].children;
         // if not using advanced layers
         //that.container = that.container.children;
    }
    stage.on("drawstart", that.start, this, true);
    // OR setTimeout(that.start, 0);

    PERFORMANCE TIPS:

    - Try testing your file with and without exporting the document as texture (Publish Settings > JavaScript/HTML > Image Settings > Export document as texture);

    - Consider turning off the advanced layers mode (Ctrl/Cmd + J) if you don't need advanced features like camera or parenting because this mode has some impact on performance;

    - Avoid complex containers with lots of children;

    - Avoid complex shapes;

    - Make sure you're not using color effects/filters;

    - Use cache whenever possible;

    - Avoid using large bitmaps. This is specially true for mobile devices;

    - Try low resolution values for exported bitmaps (Publish Settings > JavaScript/HTML > Image Settings > Resolution);

    - Try to balance wisely when an asset should be made of a vector shape or of a bitmap;

    - Avoid using too many static text fields because they are exported as raw vector shapes;

    - Avoid adding too many listeners;

    - Add mouse events to a container and use the event.target property instead of adding a separate mouse event to dozens or hundreds of children;

    - If possible set a container.tickChildren to false so the tick will not be propagated to children of a container;

    - If using a tick event it may be a good idea to change the Ticker.timingMode and see which one works best for your case;

    - Avoid using motion tweens because they are exported as frame by frame animation;

    - Avoid having a huge main timeline with lots of tweens;

    - Avoing very large shape tween spans.

    Oh man, I wish I could remember every single detail right now...

    But I hope it can get you started.

    Regards,

    JC

    UPDATED: 08/07/2019

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices