JavaFXComposerFXD

(Difference between revisions)
(Created page with '== JavaFX Composer FXD Tutorial == In this tutorial you will learn how to create an application using existing resources. I will start with an existing NetBeans TV logo in eps fo…')
Line 1: Line 1:
== JavaFX Composer FXD Tutorial ==
== JavaFX Composer FXD Tutorial ==
-
In this tutorial you will learn how to create an application using existing resources. I will start with an existing NetBeans TV logo in eps format. [http://wiki.netbeans.org/File:Javafx-composer-tutorial-fxd.eps Download here to get the eps version].
+
In this tutorial you will learn how to create an application using existing resources. I will start with an existing NetBeans TV logo in eps format. [http://wiki.netbeans.org/File:Javafx-composer-tutorial-fxd.eps Download the eps version here].
-
[[file: javafx-composer-tutorial-fxd.png]]
+
[[file:javafx-composer-tutorial-fxd.png]]
== JavaFX Production Suite ==
== JavaFX Production Suite ==
Line 20: Line 20:
* Select the lines one by one (in facts they are paths) and give them names JFX:One, JFX:Two, JFX:Three
* Select the lines one by one (in facts they are paths) and give them names JFX:One, JFX:Two, JFX:Three
* Select all (CTRL+A)
* Select all (CTRL+A)
-
* Object | Transform | Scale and scale the whole object to 20%. Otherwise the resource on the scene would be too large.
+
* Object | Transform | Scale and scale the whole object to 20%. Otherwise the resource on the scene would be too large
-
[[file: javafx-composer-tutorial-fxd-ai.png]]
+
[[file:javafx-composer-tutorial-fxd-ai.png]]
Now, use File | Save for JavaFX (only with JavaFX Production Suite installed). A dialog will show up. Click on the preview button to see the result. Save it as nbtv.fxz to your NetBeans JavaFX Composer project.
Now, use File | Save for JavaFX (only with JavaFX Production Suite installed). A dialog will show up. Click on the preview button to see the result. Save it as nbtv.fxz to your NetBeans JavaFX Composer project.
-
 
+
[[file:javafx-composer-tutorial-fxd-export.png]]
-
[[file: javafx-composer-tutorial-fxd-export.png]]
+
The logo has been exported in the FXZ format and we will be able to manipulate all elements we have assigned names to.
The logo has been exported in the FXZ format and we will be able to manipulate all elements we have assigned names to.
== Create the JavaFX application ==
== Create the JavaFX application ==

Revision as of 15:41, 22 April 2010

JavaFX Composer FXD Tutorial

In this tutorial you will learn how to create an application using existing resources. I will start with an existing NetBeans TV logo in eps format. Download the eps version here.

file:javafx-composer-tutorial-fxd.png

JavaFX Production Suite

I will use only the logo so I have to tweak the image a little bit in Adobe Illustrator. From Illustrator I can export the assets directly in a format (fxd/fxz) which is recognized by JavaFX. You'll need JavaFX Production Suite.[Download version 1.3 from the official JavaFX site].

I'll remove everything except the circle and three lines next to the circle. Next step is to create proper groups and assign them names. I'm going to manipulate all four components so I'm going to assign them names Circle, One, Two, Three.

Exact list of steps:

  • Click on the circle. Since the whole logo is on group, the circle and three lines next to it gets selected
  • Select | Inverse |
  • Click on the circle to select
  • Right click | Ungroup
  • Select only the group
  • Right click | Group
  • Double click the Circle group in the Layers view. It will display Options dialog where you can assign the component a name.
  • Give it name 'JFX:Circle'
  • Select the lines one by one (in facts they are paths) and give them names JFX:One, JFX:Two, JFX:Three
  • Select all (CTRL+A)
  • Object | Transform | Scale and scale the whole object to 20%. Otherwise the resource on the scene would be too large

file:javafx-composer-tutorial-fxd-ai.png

Now, use File | Save for JavaFX (only with JavaFX Production Suite installed). A dialog will show up. Click on the preview button to see the result. Save it as nbtv.fxz to your NetBeans JavaFX Composer project.

file:javafx-composer-tutorial-fxd-export.png

The logo has been exported in the FXZ format and we will be able to manipulate all elements we have assigned names to.

== Create the JavaFX application ==

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo