JavaFX 1.1 Production Suite

The following tutorial uses one of the samples included with JavaFX, called the 15 Puzzle, to show you how to export JavaFX Graphics from Adobe Photoshop CS3 or Adobe Illustrator CS3, and also how to view the graphics using JavaFX Graphics Viewer, another tool included with Production Suite. In JavaFX Graphics Viewer, you can preview how the graphic will look when deployed to either desktop or mobile applications.

Tutorial: Export and View Your First JavaFX Graphic

When you export a graphic from Adobe Illustrator or Adobe Photoshop to JavaFX, a file with an FXZ extension is created. FXZ is a compressed file using zip compression and file format. It always contains an FXD file, which is a text description of the graphic. In addition, it might contain embedded assets, such as image files or TrueType fonts. The FXZ file is used as a source file by JavaFX developers.

Designers can view FXZ files using JavaFX Graphics Viewer, included with Production Suite. Developers can use the NetBeans IDE 6.5 for JavaFX 1.1 to view the graphic, the source description, and archive information about the file.

In this tutorial, you will export a file from Adobe Photoshop or Adobe Illustrator to an FXZ-format file and then view the result.

Launch Adobe Illustrator or Adobe Photoshop CS3

Open Adobe Illustrator or Adobe Photoshop CS3.

Open the 15-Puzzle Sample Graphic

1. Open one of the 15-puzzle sample graphics.
   
   
   • If you are using Adobe Photoshop CS3, open fifteen.psd, shown in Figure 2.
     
     This file is also located in the art/ps directory after you unzip the sample, located in the/Samples/puzzle15 folder of the Production Suite installation.
     
     
   • If you are using Adobe Illustrator, open fifteen.ai, shown in Figure 3.
     
     This file is also located in the art/ai directory after you unzip the sample, located in the/Samples/puzzle15 folder of the Production Suite installation.
   
   
2. Make a note of the names of the graphic objects in the graphic, particularly those with a jfx: prefix. 
   
   The names of the graphic objects that are prefixed with jfx: are the ones that will be manipulated as objects in the JavaFX application. Note that these graphics objects have the same names in both the Adobe Illustrator and Adobe Photoshop artwork. Even though the graphics look very different, as long as their names are the same, they can be used interchangeably in the application.
   
   

   Figure 2: The 15 Puzzle in Adobe Photoshop

   Figure 3: The 15 Puzzle in Adobe Illustrator

3. Select one of the following two procedures, depending on whether you are using Adobe Photoshop or Adobe Illustrator.

Export from Adobe Photoshop CS3 to JavaFX File Format

1. Choose File > Automate > Save for JavaFX.
   
   The Export Options screen opens. This might take some time, depending on the size of the graphic.
   
   

   Figure 4: Adobe Photoshop JavaFX Export Options Dialog Box

2. To display a preview of the JavaFX graphic, select Show Preview. You can also choose any of the following options. 
   
   

   Option	Result
   Select Fit on Screen	Size the JavaFX preview so the entire graphic displays in the window. Does not affect how the graphic is saved.
   Select a percentage of magnification	Enlarges or shrinks the preview. Does not affect how the graphic is saved. Note: The Fit on Screen checkbox must be cleared to enable magnification.
   Select Desktop or Mobile preview	Preview the graphic as it will appear in a desktop or mobile application. Does not affect how the graphic is saved.
   Select whether or not to export effects	Preview the graphic as it will appear depending on whether or not effects will be saved.

   You can also preview the file size and the number of JavaFX nodes that the graphic will contain when saved. These statistics become especially important when deploying to mobile applications.
   
   
3. Click Save, choose a location for the JavaFX graphic, and click Save again.

Export from Adobe Illustrator CS3 to JavaFX File Format

1. Choose File > Save for JavaFX.
   
   The Export Options screen opens. This might take some time, depending on the size of the graphic.
   
   
2. To display a preview of the FXZ graphic, select Show Preview. You can also choose either of the following options. 
   
   

   Option	Result
   Select Fit on Screen	Size the FXZ preview so the entire graphic displays in the window. Does not affect how the graphic is saved.
   Select a percentage of magnification	Enlarges or shrinks the preview. Does not affect how the graphic is saved. Note: The Fit on Screen checkbox must be cleared to enable magnification.
   Select Desktop or Mobile preview	Preview the graphic as it will appear in a desktop or mobile application. Does not affect how the graphic is saved.
   Select an option for how effects will be saved	Preview the graphic as it will appear depending on the choice of how effects will be saved. For more information on the choices, see the Production Suite online help.

   You can also preview the file size and the number of JavaFX nodes that the graphic will contain when saved. These statistics become especially important when deploying to mobile applications.
   
   
3. Click Save, choose a location for the JavaFX graphic, and click Save again.

If you accept the default file name, the JavaFX graphic is saved as fifteen.fxz.

Open the File in JavaFX Graphics Viewer

Figure 5 shows how a JavaFX graphic can be displayed in JavaFX Graphics Viewer.

Figure 5: JavaFX Graphic for 15 Puzzle Displayed in JavaFX Graphics Viewer

Open the JavaFX graphic that you created in JavaFX Graphics Viewer in any of the following ways:

• Double-click fifteen.fxz. 
  
  
• Right-click fifteen.fxz (or Control-click on Mac), then select Open With > Viewer.
  
  
• Navigate to the JavaFX Production Suite installation directory and do one of the following: 
  
  
  • On Windows: Double-click the Viewer folder, then double-click Viewer.exe.
  • On Mac: Double-click Viewer.
  
  Click File > Open and navigate to fifteen.fxz.
  
  
• (Windows only) From the Start menu, click All Programs > JavaFX Production Suite > JavaFX Graphics Viewer, then click File > Open and na