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

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

boxBlur = new BoxBlur();
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.

public void animateParticle(Node particle,Shape path){    
	PathTransition transition = new PathTransition();
	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.

 

public void update(double percent){
	if(percent  > 1){
		dispose();
		return;
	}

	message.setText(loadingMessage + Math.round(percent*100)+" %"); 
	Timeline anim = new Timeline();
	anim.getKeyFrames().addAll(
			new KeyFrame(Duration.millis(600),
			new KeyValue(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.

 
Test.jnlp

<?xml version="1.0" encoding="utf-8"?>
<jnlp spec="1.0" xmlns:jfx="http://javafx.com" href="test.jnlp">
  <information>
    <title>test</title>
    <vendor>http://ngopal.com.np</vendor>
    <description>Sample JavaFX 2.0 application.</description>
    <offline-allowed/>
  </information>
  <resources>
    <jfx:javafx-runtime version="2.0+" 
	href="http://javadl.sun.com/webapps/download/GetFile/javafx-latest/windows-i586/javafx2.jnlp"/>
  </resources>
  <resources>
    <j2se version="1.6+" href="http://java.sun.com/products/autodl/j2se"/>	
    <jar href="test.jar" size="118910036" download="eager" />
  </resources>
  <applet-desc  width="800" height="600" main-class="com.javafx.main.NoJavaFXFallback"  name="test" >
    <param name="requiredFXVersion" value="2.0+"/>
  </applet-desc>
  <jfx:javafx-desc  width="800" height="600" main-class="test.Test"  name="test" />
  <update check="always"/>
</jnlp>

 

Now you just need to add new jar file element in <resources> where we will define our preloader jar

 <resources>
    <j2se version="1.6+" href="http://java.sun.com/products/autodl/j2se"/>
    <jar href="lib/FancyPreloader-Preloader.jar" size="29335" download="progress" />	
    <jar href="test.jar" size="118910036" download="eager" />
 </resources>

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.

<jfx:javafx-desc  width="800" height="600" main-class="test.Test"  name="test" preloader-class="fancypreloader.preloader.FancyPreloader_Preloader"/>

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” .

By these steps you are able to now attach your preloader to any of your javafx project.
Live Demo : Fancy Preloader
Source Code : Fancy Preloader Source.7z

Only this much for today. Have a 🙂 good day and enjoy on coding.