Blast from a weird past… Oranges!


Introduction

To celebrate the JavaFX contest JFXStudio created a micro challenge or a mini contest. The challenge was to create something that is related to the word “Orange”.  I really wanted to play around with JavaFX and the Production Suite and currently didn’t have access to the latest Adobe Photoshop and Illustrator products which have the Save-As FXZ extension so I turned to open source. I used Inkscape to create an orange tree and saved it as plain SVG file.  I then used the Production Suite to convert svg file to a FXZ. This is nice because I can simply use the shapes as nodes in JavaFX.

orangetree

webstartbutton

My orange entry is reminiscent of a kid show that I grew up with called “H.R. Pufnstuf”. I know its very dated, and I’m not proud of it. So, back to the fun. Please click on approximately nine oranges and a magic button will appear. (Pressing it is safe). enjoy! If button doesn’t work cut and paste text to browser.

Update!

The surprise was a Youtube video of an episode of the “H.R. Pufnstuf” TV show. The poster of the video was in violation of copy right. Exerpt from Youtube: “This video is no longer available due to a copyright claim by DashGo/Audiobee”.

So, the demo still works just the scary and disturbing Witchy Poo video won’t be shown. My intent was to create an JavaFX RSS feed reader that would launch the browser if needed and Web page to be display.

Problem

How to do the “Designer / Developer workflow in JavaFX”?

Solution

  1. Use SVG designer tool (Illustrator, Photoshop, Inkscape)
  2. Use Production Suite to convert SVG files to FXZ files.
  3. Use NetBeans 6.5.1 to view and manipulate FXZs.
  4. Create a JavaFX project and use nodes from FXZ content.

Code:

Obtaining Graphical Assets

// obtain group from fxd id='orangeTree'
var fxdContent = FXDLoader.loadContent("{__DIR__}orangetree2plain.fxz");
var orangeTree = fxdContent.getGroup("orangeTree");

var allOranges:Node[] = [];
// get each individual oranges. id=orange1, id=orange2, etc.
for (i in [1..10]) insert fxdContent.getNode(“orange{i}”) into allOranges ;

Code: Displaying Group and other Nodes


Stage {
title: "Oranges! Oranges!"
width: 500
height: 500
scene: Scene {
content: [Text {
font : Font {
size : 16
}
x: 10, y: 30
content: "Oranges Smoranges"
},
orangeTree, youTubeLocation, witchyPoo
]
}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s