A perfect java blog

Fancy Preloader Part 2

13 August,2012Narayan G. Maharjan

Firstly welcome back to this blog if you are the reader of my previous post Fancy Preloader Part 1. I’m sorry for my late blog post because of some busy days. Anyway today I’m going to present you guys how to do animation for the Fancy Preloader. Firstly let’s look over parts of the Preloader Animation .

Fancy Preloader Animation

1. SVG Path
In the animation I’ve used the SVG Path for animating the small particles of circle according to that SVG path. To know about SVG you can refer here. I’ve drawn the SVG from open source GIMP software which actually generates the path. The path can be added in SVGPath object of JavaFX. I’ve build 5 SVG Path with different color for this animation where I’ve used one animating effect i.e Box Blur and opacity changes on each of them.

Box Blur

1

2

3

4

boxBlur=newBoxBlur();

boxBlur.setWidth(10);

boxBlur.setHeight(3);

boxBlur.setIterations(1);//this values is being changed according to the Timeline Duration

2. Circle Particle
Here I’ve only used five particle which animates under the SVGPath which we have defined. To animate accordingly I’ve made one function for this.

1

2

3

4

5

6

7

8

9

publicvoidanimateParticle(Node particle,Shape path){

PathTransition transition=newPathTransition();

transition.setPath(path);

transition.setNode(particle);

transition.setDuration(Duration.seconds(getRandom()));

transition.setCycleCount(-1);

animations.add(transition);

transition.play();

}

Here the path is the SVGPath and particle is the Circle and getRandom() function gives the Random Double value.

3. Neon Mask

For the neon light loading I’ve used the neon lights visible according to the percentage of the loading proportional to the scene width. According to the above picture it seems like there is neon line being animated but I’ve used the Circle and Rectangle with mask(clip) as given below.

Masking for Neon Light

For making the neon lights animation according to the percentage of loading. I’ve used one function which will be triggered from handleProgressNotification of Preloader Class . This helps the animation occur at every update of the bytes downloaded.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

publicvoidupdate(doublepercent){

if(percent&gt;1){

dispose();

return;

}

message.setText(loadingMessage+Math.round(percent*100)+" %");

Timeline anim=newTimeline();

anim.getKeyFrames().addAll(

newKeyFrame(Duration.millis(600),

newKeyValue(progress.widthProperty(),scene.getWidth()*percent))

);

anim.play();

}

Here dispose() function stops all the animation, message variable updates the Loading message and the progress variable helps to widen the rectangular mask. The width of the rectangular mask is set according to the percentage.And one more thing is the animation of the Circle from left-right will be running always during initialization of preloader life cycle. And finally I’ve added glow effect to that circle to look more glow effect.

4. Explode Animation

For the explode animation, I’ve made seperate class ‘Explode’ (extends from Group class) which will explode when the explode() function is invoked. The explode Animation is always invoked when the Neon Light Circle(animating always from left to right) LAYOUT-X position reaches at the end of the mask width(rectangular field of Neon Mask).

So these are the stuffs of the main animation of Preloader Now all you need to do is deploy your codes to real production. If you are using Netbeans then the deployment part is quiet easier. You just need to go to Preloader Project Properties > Run > Select Browser/Webstart and Make sure you have checked the “Use Preloader” option. Everything is set just click on “Clean and Build Main Project” button or alternative you can press “Shift”+F11 . After the deployment process you will see some files in /dist folder of your main project. Also there will be /lib folder which contains your Preloader jar.

Attach same Preloader on any JavaFX project

If you want this same Preloader to use in other of your project then it’s very easy. You don’t need to again compile and run. You just need the same Preloader jar file and change couples of lines in jnlp file.
Let’s suppose you have one javafx Project named “Test” and we are going to use same Fancy Preloader jar(FancyPreloader-Preloader.jar) ; All you need to do is copy that preloader jar inside /lib folder of the folder where the Test project’s jar and jnlp exists. Now let’s see the test.jnlp which is simple javafx application.

The above changes will define new jar file existence in the /lib folder where the jnlp lives. Also now one more attribute we need to add to the <jfx:javafx-desc> element for defining the preloader for the the test project. You can change the href as per your requirement.

Now here we can see new attribute “preloader-class” which actually defines the preloader to our project “test”. The class which we assign at preloader-class attribute must be extended from the Preloader class. Currently our preloader class is inside the FancyPreloader-Preloader.jar file under the package “fancypreloader.preloader” .

@fx fan,
We can run the standalone application from the JNLP. Many people nowdays use JNLP for distributing their apps to their desktop.It has very good advantages like live jar update facility and it’s customizable too. So i think to add preloader to your standalone JavaFX application it would be quiet easy by configuring couple of line in jnlp XML as mentioned above.

If you are using browser jnlp preloader then you will have to remove the java cache from Java Setting located at system setting. For testing only preloader you can test it via netbeans as well which I do mostly. Or make some long working thread before starting application which can be pretty worthy.