5 Replies Latest reply on May 16, 2018 11:43 PM by Liphou

    [JS] CC2018 Boutton

    Liphou Level 2

      Hello everyone,


      Is it still possible to make rectangular buttons with non-rounded corners?


      Thank you

      /*****

       

      Bonjour à tous,

       

      Est-il encors possible de faire des boutons rectangulaire avec de coin non arrondi ?

       

      Merci

        • 2. Re: [JS] CC2018 Boutton
          Liphou Level 2

          Thank you Loïc, I saw Marc's article, I'm not a fan of the use of image for the buttons but ... it gives me an idea ... I'm coming back ...

          Philippe

           

           

          Merci Loïc, j'avais vu l'article de Marc, je ne suis pas un fan de l'utilisation d'image pour les bouttons mais ... cela me donne un idée ...je reviens ...

           

          Philippe

          • 3. Re: [JS] CC2018 Boutton
            Loic.Aigon Adobe Community Professional

            @Images are convenient but you could still try another ways.

            ScriptUI graphics or groups…

             

            Here is a really dirty and quick approach that needs to be refined:

             

            
            var u;
            var ui = new Window("dialog");
            var g = ui.add ( 'group' );
            var normal = g.add('group');
            var hover = g.add('group');
            var down = g.add('group');
            var normalColor = [0,161/255,155/255];
            var hoverColor = [53/255,97/255, 192/255];
            var downColor = [36/255,127/255, 123/255];
            g.orientation = 'stack';
            
            
            normal.margins = hover.margins = down.margins = [20,10,20,10];
            
            
            normal.add('statictext',u,'Normal');
            hover.add('statictext',u,'Hover');
            down.add('statictext',u,'Down');
            
            
            g.addEventListener ( "mouseover", function() {
            normal.visible = false;
            hover.visible = true;
            down.visible = false;
            });
            
            
            g.addEventListener ( "mouseup", function() {
            normal.visible = true;
            hover.visible = false;
            down.visible = false;
            });
            
            
            g.addEventListener ( "mousedown", function() {
            normal.visible = false;
            hover.visible = false;
            down.visible = true;
            });
            
            
            normal.graphics.backgroundColor = normal.graphics.newBrush(normal.graphics.BrushType.SOLID_COLOR,normalColor, 1);
            hover.graphics.backgroundColor = hover.graphics.newBrush(hover.graphics.BrushType.SOLID_COLOR,hoverColor, 1);
            down.graphics.backgroundColor = down.graphics.newBrush(down.graphics.BrushType.SOLID_COLOR,downColor, 1);
            
            hover.visible = down.visible = false;
            
            
            normal
            ui.show();
            
            • 4. Re: [JS] CC2018 Boutton
              Loic.Aigon Adobe Community Professional

              This one is cleaner :

               

              
              var u;
              var ui = new Window("dialog");
              var g = ui.add ( 'group' );
              var normal = g.add('group');
              var hover = g.add('group');
              var down = g.add('group');
              var normalColor = [0,161/255,155/255];
              var hoverColor = [53/255,97/255, 192/255];
              var downColor = [36/255,127/255, 123/255];
              g.orientation = 'stack';
              
              
              //normal.margins = hover.margins = down.margins = [20,10,20,10];
              var normalLabel = normal.add('statictext',u,'Normal');
              var hoverLabel = hover.add('statictext',u,'Hover');
              var downLabel = down.add('statictext',u,'Down');
              
              
              normal.minimumSize = 
              hover.minimumSize = 
              down.minimumSize = 
              normal.maximumSize = 
              hover.maximumSize = 
              down.maximumSize = [100, 20];
              
              
              g.addEventListener ( "mouseover", function() {
              
              
              hover.alignChildren = ["right","top"];
              normal.visible = false;
              hover.visible = true;
              down.visible = false;
              
              });
              
              
              g.addEventListener ( "mouseup", function() {
              normal.visible = false;
              hover.visible = true;
              down.visible = false;
              alert("You pressed the damn button");
              });
              
              
              g.addEventListener ( "mouseout", function() {
              normal.visible = true;
              hover.visible = false;
              down.visible = false;
              });
              
              
              g.addEventListener ( "mousedown", function() {
              normal.visible = false;
              hover.visible = false;
              down.visible = true;
              });
              
              
              normal.graphics.backgroundColor = ui.graphics.newBrush(normal.graphics.BrushType.SOLID_COLOR,normalColor, 1);
              hover.graphics.backgroundColor = ui.graphics.newBrush(hover.graphics.BrushType.SOLID_COLOR,hoverColor, 1);
              down.graphics.backgroundColor = ui.graphics.newBrush(down.graphics.BrushType.SOLID_COLOR,downColor, 1);
              normal.alignment = hover.alignment  = down.alignment  = ["fill","fill" ];
              normal.alignChildren = ["center","center"];
              hover.alignChildren = ["center","center"];
              down.alignChildren = ["center","center"];
              hover.visible = down.visible = false;
              
              
              ui.show();
              

               

               

              Capture d’écran 2018-05-16 à 13.27.46.png

               

              Capture d’écran 2018-05-16 à 13.27.48.png

               

              Capture d’écran 2018-05-16 à 13.28.09.png

               

              Capture d’écran 2018-05-16 à 13.28.31.png

              1 person found this helpful
              • 5. Re: [JS] CC2018 Boutton
                Liphou Level 2

                Hello and thank you

                it is a beautiful solution that I will very quickly test.

                Yours truly

                /****

                Bonjour et merci

                 

                c'est une belle solution que je vais très vite tester.

                 

                Bien à vous