HOME / Docs & Support / NetBeans IDE 6.9 / Java EE Documentation

Using JavaFX Graphic Resources in JavaFX Composer

Written by Martin Ryzl, adapted and maintained by Irina Filippova

This tutorial shows how you can use rich graphic assets created using graphics editing software (Adobe Illustrator and Adobe Photoshop) and the JavaFX Production Suite plugin, in JavaFX Composer.

Contents

Content on this page applies to NetBeans IDE 6.9

Overview
Converting the Graphics to JavaFX Format
Using FXZ Resources in a JavaFX Application
Adding States and Animation
See Also

To complete this tutorial, you need the following software and resources.

Software or Resource	Version Required
NetBeans IDE	version 6.9.x, JavaFX download option
Java Development Kit (JDK)	JDK 6 Update 13 or later
Adobe Illustrator	CS3 or CS4 (CS5 is known to work but not supported)
JavaFX Production Suite	1.3.1
Image file (.eps)	An original image in the EPS format

Overview

When you are creatig a JavaFX application, you might need to use rich graphics to make the application more visually attractive. Designers can create visual assets using their usual graphics editing software and then convert them to JavaFX format (FXD/FXZ) using JavaFX Production Suite. JavaFX Production Suite is a set of plugins for Adobe Illustrator and Adobe Photoshop. For more information about working with JavaFX Production Suite, see Getting Started With JavaFX Production Suite. In JavaFX Composer, you can easily add the coverted graphics to your JavaFX application. This tutorial shows how you can animate an image in a JavaFX application. For your reference, you can download the complete project used in this tutorial.

Watch the Creating an Animated NetBeans Logo Application in JavaFX Composer screencast to see how to use JavaFX Production Suite in Adobe Illustrator to prepare graphic files for JavaFX applications.

JavaFX Production Suite has been tested on CS3 and CS4 versions of Adobe software. The latest CS5 version is also known to work, but manual installation of the plugin in needed. See the JavaFX 1.3.1 Release Documentatio n for more information on the required software versions and installation procedure.

Converting the Graphics to JavaFX Format

We will use an old NetBeans TV logo to work with it in Adobe Illustrator. In our tutorial, we worked with Adobe Illustrator CS5.

Download the EPS file and save it on your local disk. Ensure that JavaFX Production Suite is installed.

Before converting the image to the JavaFX format, we are going to edit it as follows in Adobe Illustrator:

Remove all the letters and leave only the circle and three beams coming out of the circle.
Ungroup the elements and assign them separate names: Circle, One, Two, and Three.

Manipulating the graphics in Adobe Illustrator:

Open the logo-original.eps file in Adobe Illustrator.
To remove the letters at the bottom, select the group with the circle and beams and choose Select > Inverse to select all the remaining items.
Press the Backspace key on the keyboard to delete the letters.
Click the circle and the entire group gets selected. Right-click and choose Ungroup from the pop-up menu.
Now, select only the group with the circle. Right-click inside and select Group.
In the Layers view, double-click the Circle group. In the Options window, type the name for this group: "JFX: Circle".
Select the first beam and name it "JFX: One".
Name the rest of the beams as "JFX: Two" and "JFX: Three."
Select all (Select > All, Ctr-A) and choose Object > Transform from the main menu. Scale the image to 20%, otherwise it will be too large for our application.
Save the image in JavaFX format. Choose File > Save for JavaFX.
This option is available only if you have the JavaFX Production Suite installed.
In the JavaFX Export window, click Preview to see the result. Save the file as circle.fxz.
The logo has been exported in the FXZ format and you will be able to manipulate all the elements whose names start with "JFX: ".

Adding JavaFX Graphics to a JavaFX Project

In the NetBeans IDE, create an FxdSample project using the JavaFX Desktop Business Application type.
Copy the circle.fxz file to the the project's directory, in the scr folder.
Drag the FXZ file from the Palette to the scene.
Project JavaFX resources are available in the JavaFX Graphics Files section of the Palette.
In the Customize JavaFX Graphics dialog box, select the elements that you want to use in the design and click OK.
The selected items will be added to the scene.

You can open this customizer window later. For this, double-click the graphics file in the Navigator window or click the Customize button in the Properties window.

Adding States and Animation

In this step, we are going to add animation to the application.

At first, create two states: Init and Rotate. To add states, click the Add State icon in the States window.
Set the first, Init state, as the start state.
Configure the application to switch to the Rotate state whenever the mouse enters the circle and to switch back to Init whenever the mouse leaves the circle.
1. In the master state on the scene, select the Circle graphical element.
2. In the Properties window, expand Event properties and click the pen icon next to the On Mouse Entered property. Select Generate: Go to state name. This will generate the command handler and will switch you to the Source editor.
3. In the Source editor, press tab to jump to the second field (state name) and type Rotate as a name of state to switch to.
4. Do the same for the On Mouse Exited property and use Init as a name of state to switch to.
Customize the Init state. In this state, we want only the circle to be visible, so you need to remove the three beams from the visible area.
1. Select the Init state in the States window. Click on the first beam and drag it outside the visible area while holding the CTRL key.
2. Repeat this for the two remaining beams (hold the CTRL key on your keyboard).
Customize the Rotate state. In this state, we want the circle to be rotated.
1. Select the Rotate state in the States window.
2. On the scene, select the circle, expand its Transform properties in the Properties window, and set the Rotate property to 1080.
Lastly, we add animation to the application. We will do this at once, by configuring the default animation properties for the Rotate state (rather than setting animation properties individually for each element).
1. Click the Edit State icon for the Rotate state in the States window.
2. In the Edit State dialog box, set the Default interpolator to Ease Out and enter 800ms as the default duration.