This discussion is archived
12 Replies Latest reply: Oct 15, 2012 7:14 AM by biochemistry43 RSS

transition effects buttons

biochemistry43 Newbie
Currently Being Moderated
hi all ...

I'd rather be able to add some effects to my buttons in hover state and down state. But not a static effect but a motion effect, for example a transition from shadows, gradients or similar

In Flash using ActionScript can do but do not know if it is possible in Java FX.

It would be great if I could do it with CSS as I am working with Scene Builder but if this is not possible What options do I have?

Sorry if English is bad, I do it through google translator.

Thanks in advance
  • 1. Re: transition effects buttons
    jsmith Guru
    Currently Being Moderated
    It would be great if I could do it with CSS
    You won't be able to do this with css currently as css has no animation support.
    What options do I have?
    Write some Java code. Add listeners to your button's hover and armed properties, and run Transitions when they change.

    It isn't exactly what you want because the transitions aren't being applied exactly to the button, but perhaps the code sample here may help you: http://stackoverflow.com/questions/12710468/using-javafx-2-2-mnemonic.
  • 2. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    Many Thanks for the guidance.

    A question ... JavaFX CSS is based on CSS3?

    Yesterday just saw with CSS3 animation effects ... so my question.


    This link has some examples of animated buttons made ​​using CSS3.

    http://tympanus.net/Tutorials/AnimatedButtons/index2.html #

    Edited by: biochemistry43 on 12-oct-2012 6:26
  • 3. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    Now I realize that JavaFX CSS CSS 2.1 is based on ... Sorry.

    Well the effect I wanted to achieve is that my flash button while the pointer is hovering over it.

    Thanks for the help-
  • 4. Re: transition effects buttons
    David Grieve Pro
    Currently Being Moderated
    Animation support has been a request for a long, long time (http://javafx-jira.kenai.com/browse/RT-9031 - vote for it!).
  • 5. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    The link to vote seems to be wrong ... Send it to me again
  • 6. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    well ... I have reviewed the example ensemble and has given me some ideas.

    I think I'll have to handle an event by onMouseEntered true?

    Someone could guide me a bit how it could achieve the effect I intend ... I would like the outline of the button has a radiance effect, perhaps with gradients or something if ...

    Thanks in advance for your help.
  • 7. Re: transition effects buttons
    shakir.gusaroff Expert
    Currently Being Moderated
    Hi. Here are some examples:
    //Animation with an opacity Property
    final Button btn = new Button();
      btn.setText("Submit");
    
      btn.setOnMouseEntered(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
    
                    new Timeline(
                            new KeyFrame(Duration.seconds(0), new KeyValue(btn.opacityProperty(), .1)),
                            new KeyFrame(Duration.seconds(1), new KeyValue(btn.opacityProperty(), 1))).play();
    
    
                }
            });
       
    //Animation with an effect property:
    
      final Button btn = new Button();
            btn.setText("Submit");
    
    
    
            final InnerShadow is = new InnerShadow();
            is.setOffsetX(2.0f);
            is.setOffsetY(2.0f);
            is.setColor(Color.BLACK);
    
            final DropShadow ds = new DropShadow();
            ds.setOffsetY(2.0);
            ds.setOffsetX(2.0);
            ds.setColor(Color.RED);
    
            btn.setOnMouseEntered(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
    
                    new Timeline(
                            new KeyFrame(Duration.seconds(0), new KeyValue(btn.effectProperty(), ds)),
                            new KeyFrame(Duration.seconds(.2), new KeyValue(btn.effectProperty(), is))).play();
    
    
                }
            });
    
            btn.setOnMouseExited(new EventHandler<MouseEvent>() {
                @Override
                public void handle(MouseEvent event) {
    
                    btn.setEffect(null);
                }
            });
  • 8. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    friend friend friend ...

    thank you very much, it's great.

    Just going to try it but I will not have problems.

    Is there a problem if I do it in FXML button using Scene Builder?
  • 9. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    I tried to adapt the code you gave me using FXML controller but I failed to do the button I want.

    This is the code ...

    signa package;


    import java.net.URL;
    java.util.ResourceBundle import;
    javafx.animation.KeyFrame import;
    javafx.animation.KeyValue import;
    javafx.animation.Timeline import;
    javafx.event.EventHandler import;
    javafx.fxml.FXML import;
    javafx.fxml.Initializable import;
    javafx.scene.control.Button import;
    javafx.scene.effect.DropShadow import;
    javafx.scene.effect.InnerShadow import;
    javafx.scene.input.MouseEvent import;
    javafx.scene.paint.Color import;
    javafx.util.Duration import;


    public class implements Estructura_GeneralController Initializable {

         @ FXML private Button button1;
       
         @ Override
         public void initialize (URL url, ResourceBundle rb) {
            InnerShadow end InnerShadow is = new ();
             is.setOffsetX (2.0f);
             is.setOffsetY (2.0f);
             is.setColor (Color.BLACK);
     
             DropShadow end DropShadow ds = new ();
             ds.setOffsetY (2.0);
             ds.setOffsetX (2.0);
             ds.setColor (Color.red);
     
             button1.setOnMouseEntered (<MouseEvent> new EventHandler () {
                 @ Override
                 public void handle (MouseEvent event) {
     
                     new Timeline (
                             new KeyFrame (Duration.seconds (0), new KeyValue (button1.effectProperty (), ds)),
                             new KeyFrame (Duration.seconds (2), new KeyValue (button1.effectProperty (), is)).) play ();
     
     
                 }
             });
            
            
         }
    }

    I am very inexperienced ... I do not know if I'm doing well.
  • 10. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    One more thing ... I tested the code without FXML also ... if worked but the effect is terminated.

    Know how to make the effect last as long as the mouse is hovering over the button?
  • 11. Re: transition effects buttons
    jsmith Guru
    Currently Being Moderated
    The Ensemble sample app seems to feature the buttons you seek (though it does not use fxml either and the code is more complex than Shakir's).

    http://www.oracle.com/technetwork/java/javafx/samples/index.html
    // from ensemble.pages.SamplePage
        public Node createTile() {
            Button tile = new Button(getName().trim(),getIcon());
            tile.setMinSize(140,145);
            tile.setPrefSize(140,145);
            tile.setMaxSize(140,145);
            tile.setContentDisplay(ContentDisplay.TOP);
            tile.getStyleClass().clear();
            tile.getStyleClass().add("sample-tile");
            tile.setOnAction(new EventHandler() {
                public void handle(Event event) {
                    Ensemble2.getEnsemble2().goToPage(SamplePage.this);
                }
            });
            return tile;
        }
    
        private Node getIcon() {
            URL url = sampleClass.getResource(sampleClass.getSimpleName()+".png");
            if (url != null) {
                ImageView imageView = new ImageView(new Image(url.toString()));
                return imageView;
            } else {
                ImageView imageView = new ImageView(new Image(Ensemble2.class.getResource("images/icon-overlay.png").toString()));
                imageView.setMouseTransparent(true);
                Rectangle overlayHighlight = new Rectangle(-8,-8,130,130);
                overlayHighlight.setFill(new LinearGradient(0,0.5,0,1,true, CycleMethod.NO_CYCLE, new Stop[]{ new Stop(0,Color.BLACK), new Stop(1,Color.web("#444444"))}));
                overlayHighlight.setOpacity(0.8);
                overlayHighlight.setMouseTransparent(true);
                overlayHighlight.setBlendMode(BlendMode.ADD);
                Rectangle background = new Rectangle(-8,-8,130,130);
                background.setFill(Color.web("#b9c0c5"));
                Group group = new Group(background);
                Rectangle clipRect = new Rectangle(114,114);
                clipRect.setArcWidth(38);
                clipRect.setArcHeight(38);
                group.setClip(clipRect);
                Node content = createIconContent();
                if (content != null) {
                    content.setTranslateX((int)((114-content.getBoundsInParent().getWidth())/2)-(int)content.getBoundsInParent().getMinX());
                    content.setTranslateY((int)((114-content.getBoundsInParent().getHeight())/2)-(int)content.getBoundsInParent().getMinY());
                    group.getChildren().add(content);
                }
                group.getChildren().addAll(overlayHighlight,imageView);
                // Wrap in extra group as clip dosn't effect layout without it
                return new Group(group);
            }
        }
    // from ensemble.samples.animation.transitions.FadeTransitionSample
    // see other classes in ensemble.samples.animation.transitions for different transition samples.
        public Node createIconContent() {
            Rectangle r1 = new Rectangle (20, 20, 30, 30);
            r1.setArcHeight(4);
            r1.setArcWidth(4);
            r1.setFill(Color.web("#349b00"));
            Rectangle r2 = new Rectangle (35, 35, 30, 30);
            r2.setArcHeight(4);
            r2.setArcWidth(4);
            r2.setFill(Color.web("#349b00"));
            r2.setOpacity(0.75);
            Rectangle r3 = new Rectangle (50, 50, 30, 30);
            r3.setArcHeight(4);
            r3.setArcWidth(4);
            r3.setFill(Color.web("#349b00"));
            r3.setOpacity(0.5);
            Rectangle r4 = new Rectangle (64, 64, 30, 30);
            r4.setArcHeight(4);
            r4.setArcWidth(4);
            r4.setFill(Color.web("#349b00"));
            r4.setOpacity(0.25);
            final javafx.scene.Group g = new javafx.scene.Group(r1,r2,r3,r4);
            final FadeTransition ft = new FadeTransition(Duration.seconds(1),g);
            ft.setFromValue(1);
            ft.setToValue(0.1);
            ft.setAutoReverse(true);
            ft.setCycleCount(Timeline.INDEFINITE);
            Rectangle mouseRect = new Rectangle (0, 0, 114,114);
            mouseRect.setFill(Color.TRANSPARENT);
            mouseRect.setOnMouseEntered(new EventHandler<javafx.scene.input.MouseEvent>() {
                @Override public void handle(javafx.scene.input.MouseEvent e) { ft.play(); }
            });
            mouseRect.setOnMouseExited(new EventHandler<javafx.scene.input.MouseEvent>() {
                @Override public void handle(javafx.scene.input.MouseEvent e) { 
                    ft.pause(); 
                }
            });
            return new javafx.scene.Group(g,mouseRect);
        }
  • 12. Re: transition effects buttons
    biochemistry43 Newbie
    Currently Being Moderated
    I know I said that I need is something like the example ensemble but rather what I need is what I wrote shakir.gusaroff.

    Now, the code shakir kindly provided me, it does not effect infinitely.

    I would make the effect remain or recur as long as the button is in hover position.

    Greetings and thank you very much

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points