Monday, 31 August 2015

Designing the Animations- Java 7(Part 2)

Welcome back guys, I will now make you entered into the coding now. We will move the ball now on the Frame.

So, first of all open the eclipse Luna and create new project in it with any name you prefer to give.
I will assuming that you know all these basic stuff of opening and creating project in Eclipse and creating a new class. I will now directly skipping to code:

Step 1.
The stuffs you will need in the code::
    public static JFrame fr;
    public static JLabel ball1;
    public static Timer balltimer;
    public static Container c;
    public static ImageIcon i;


Frame is necessary to residing or a base for your ball and container will contains all your components, in our case it will contain our ball. Timer is used for continuously moving ball, our actual code logic resides here.

So let's start the further initialization.

Step 3.
public Animate_Ball() {
       
        fr=new JFrame();
        ball1=new JLabel();
        c=fr.getContentPane();
        i=new ImageIcon("ball.png");

        .
        .
 This is the constructor in which we will initialize all stuffs. Frame is initialized and ball object is initialized here and note that I have used Label for that purpose. Container is initialized with the Frame's contents. Now the primary thing is the ImageIcon which includes path of your image file or you can put it in your eclipse project files where your code resides or outside src folder.

Image stored here


This is the way you can create a simple animation through small code. Now next is the main code:

Step 3.
        c.setLayout(null);
        fr.setBounds(0, 0, 800, 500);
        ball1.setBounds(0, 9, 179, 168);
        ball1.setIcon(i);
        c.setBackground(Color.black);
        c.add(ball1);
        fr.setVisible(true);

I have just set layout as null because I want to move my label freely anywhere on the frame. Then set bounds according to the image size, my image size is 179*168. Then set the icon to the label that you have initialized earlier in Step 2. Then I want my background black hence I have changed the background of container but not the frame because frame contains the container and container contains components.
Lastly add the components to container and set visible the frame.

Step 4.
balltimer=new Timer(6, new ActionListener() {            //ball animator
           
            @Override
            public void actionPerformed(ActionEvent arg0) {
       
                if(ball1.getX()<fr.getWidth()){
                    ball1.setLocation(ball1.getX()+5,ball1.getY());
                }
                else{
                    ball1.setLocation(0,9);
                }
                   
            }
        });


Now you have to give your logic here that will execute continuously after the 6 sec interval as I mentioned, you can add more time. Initialize the timer as shown above and make use of CTRL+ SPACEBAR while typing to ease your typing. Then you need to call your timer by using balltimer.start();. Either call it from the constructor but below the initialization of the timer otherwise you will get exceptions or you can call it from main().

If you understood the concept then just create complete code from it then and only then you will get it clearly. Otherwise I will upload the code anyway in next tutorial.

Happy Designing with Java.

Sunday, 30 August 2015

Designing the Animations- Java 7(Part 1)


I am back again with the thing that will make you feel joyful and exciting. I was already gave you a basic knowledge about the designing in Photoshop. Today I will demonstrate you all about the animation in java with the help of obviously Adobe Photoshop.

Here are the things you will need while going through out the tutorial:
  1. Adobe Photoshop
  1. Java 7
  1. Eclipse Luna

Step 1.
First thing you need to do is that just create a ball in Adobe Photoshop. Don't worry,  I will help you out with this as usual.

Just select the shape tool but it doesn't appear as you move your mouse upon it. It's depends upon your previous selection in project. It may be named Line tool, Polygon tool, etc. You need to select Ellipse tool.  I already explained about Toolbox tools and selection. 

 
Initial Stage

Now draw it on the workspace like I have done. Get a reference of the image given above.

You will have a kind of scenario as shown above. It may differ as you are doing it in your own way. I am assuming that you have done with it and colored your ball. But still there's something you that don't make you feel it as a ball so here is the trick for giving it an illusion of 3d ball.

Step 2.
Remember guys everything you see in the real life is completely a part of illusion but that doesn't mean that everything you see in real world is falsified. It's just contains some illusions. So here is our illusion in virtual world, first of all make sure you have colored ball with something dark as I have done. 

Create ball


As I have selected blue color because it seems really shining color. Now the next thing you need to do is that select brush tool. But it will not allow you to color it directly so first Rasterize by right clicking on the Layer(Shape 1 if you didn't named it) and select Rasterize option. Now you have the rights to color it through any color.

Step 3.

Just now select Brush tool to make the ball shine. Change the foreground color to white and just click once on the area where you want the shine on ball like I have done. Note: Select entire ball by CTRL+ Left Click on the Shape 1 layer on layer Bar, it will select entire ball at once and then put the brush tool containing white and size may vary based on your scenario.
Final touch on ball
 Here is the sample ball I have created in png format:
In the Next tutorial I will describe the further steps.

Happy Designing.

Monday, 3 August 2015

Programming the Designs(GUI) Part-3

Here is the code snippet that I have described in previous tutorial:
import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import java.awt.Image;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPasswordField;
import javax.swing.JTextField;

import java.awt.Rectangle;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;

public class FirstGUI {
//declaration
    public static JFrame fr;
    public static JLabel back,login,loginl,text1,text2,rapid;
    public static JTextField user;
    public static JPasswordField pass;
    public static Font f;
    public static Container c;
    public static Image backI,eleI;
    public static ImageIcon backi,elei;
   
    public FirstGUI() throws Exception {

      
        fr=new JFrame();//Frame initialization
      
        //font for headings
        f=new Font("Arial Rounded MT Bold", Font.BOLD, 32);
        //container pane for adding controls
        c=fr.getContentPane();
        //setting layout null so we can add controls anywhere by setting bounds
        c.setLayout(null);
      
        //initialization of controls
        back=new JLabel();
        user=new JTextField("User name");
        pass=new JPasswordField("Password");
        login=new JLabel();
        loginl=new JLabel("Login",JLabel.CENTER);
        text1=new JLabel();
        text2=new JLabel();
        rapid = new JLabel();
      
      
      
        //setting bounds of the frame to the Dimension d initialized in class definition
        fr.setBounds(0,0, 500, 500);
        back.setBounds(0,0,fr.getWidth(),fr.getHeight());
        user.setBounds(172,  138, 180, 61);
        pass.setBounds(172,  210, 180, 65);
        loginl.setBounds(155, 286, 197, 65);
        login.setBounds(loginl.getBounds());
        rapid.setBounds(0, 38, 484, 71);
        //background image bounds
        text1.setBounds(user.getBounds());
        text2.setBounds(pass.getBounds());
      
        //making textField background transparent
        user.setOpaque(false);
        pass.setOpaque(false);
      
        //making textfield borders off
        user.setBorder(null);
        pass.setBorder(null);
      
      
      
        //background image
        backI = ImageIO.read(new File("/MyFirst/src/images/back1.jpg"));  
        backI = backI.getScaledInstance(fr.getWidth(), fr.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        back.setIcon(backi);
      
        //login click
        eleI = ImageIO.read(new File("/MyFirst/src/images/login.png"));  
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
      
        backI = ImageIO.read(new File("/MyFirst/src/images/textbox.png"));  
        backI = backI.getScaledInstance(user.getWidth(), user.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        text1.setIcon(backi);
        text2.setIcon(backi);
      
        backI = ImageIO.read(new File("/MyFirst/src/images/RapidAbcd.png"));  
        backI = backI.getScaledInstance(rapid.getWidth(), rapid.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        rapid.setIcon(backi);
      
        user.setFont(new Font("Arial", Font.BOLD, 15));
        user.setForeground(Color.gray);
        pass.setFont(new Font("Arial", Font.BOLD, 15));
        pass.setForeground(Color.gray);
        loginl.setFont(new Font("Arial", Font.BOLD, 20));
        loginl.setForeground(Color.white);
      
        c.add(rapid);
        c.add(user);
        c.add(pass);
        c.add(text1);
        c.add(text2);
        c.add(loginl);
        c.add(login);
        c.add(back);
      
      
      
        fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        fr.setVisible(true);
      
login.addMouseListener(new MouseListener() {
   
    @Override
    public void mouseReleased(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
      
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
          
        }  
    }
   
    @Override
    public void mousePressed(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MYFirst/src/images/loginclick.png"));
      
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
          
        }          
    }
   
    @Override
    public void mouseExited(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MYFirst/src/images/login.png"));
      
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
          
        }          
    }
   
    @Override
    public void mouseEntered(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
      
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
          
        }          
    }
   
    @Override
    public void mouseClicked(MouseEvent arg0) {
        // TODO Auto-generated method stub
      
    }
});

user.addMouseListener(new MouseListener() {
   
    @Override
    public void mouseReleased(MouseEvent e) {
        user.setText("");
      
    }
   
    @Override
    public void mousePressed(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
   
    @Override
    public void mouseExited(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
   
    @Override
    public void mouseEntered(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
   
    @Override
    public void mouseClicked(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
});

pass.addMouseListener(new MouseListener() {
   
    @Override
    public void mouseReleased(MouseEvent e) {
        pass.setText("");
      
    }
   
    @Override
    public void mousePressed(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
   
    @Override
    public void mouseExited(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
   
    @Override
    public void mouseEntered(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
   
    @Override
    public void mouseClicked(MouseEvent e) {
        // TODO Auto-generated method stub
      
    }
});
    }

    public static void main(String[] args) throws Exception {
        FirstGUI g=new FirstGUI();

    }
}
 

Here are the images that you will require place it in the image folder and store it in the src folder of your eclipse Java project Folder:





If you have found any difficulties, feel free to comment me. I will definitely try to answer those questions. In the further tutorials I will demonstrate more complex designs so that you can design your own GUI Application.

Happy Programming with Designing

Programming the Designs(GUI) Part-2

Hello Designers,
Today I am going to explain you about GUI designing using Java Programming practically. So, hoping that you have already installed all required software if not, then you need to install it fast to go withe flow. Here I will give you the links for software that I didn't provided earlier because I want you to search it online on your own.
1. Eclipse IDE 32-bit
2. JDK 1.7 for 32 and 64 bit
3. Adobe Photoshop CS3/7.0

Now you are ready for doing it, so we will design this form:


Step1: Create a New Java Project
This is the only basic login page that we will design today:
Follow to create a Java Project
In the above image you see I have created a Java Project because before writing any Java code you need to create a Java Project.
To create a Java Project you need to select-Menu>File>New>Java Project. Then you will see a Dialog box "New Java Project", just write the name of project and choose your java environment as I selected as "JavaSE 1.7", This will come by Default otherwise select it from the list.(Considering you have installed JDK1.7).

Now just click Finish and done.

Step2: Create your Class: 
Package Explorer
Next, you will see your project in Package explorer(You can enable all windows by going Menu>Window>Show View). Now right click on the Project on Package Explorer and select New and then select class to create a Java class. Here is the view of mine:
Create a java class
After that you will see a Dialog box"New java Class", provide a name to class and check all boxes below as shown in the above figure and click finish and done.

Step3: Start programming
Now you will face a new class named "FirstGUI.java" with some predefined codes as shown below:
The FirstGUI.java class
Here is the declarations you need to include in class:
public class FirstGUI{
//declaration
    public static JFrame fr;
    public static JLabel back,login,loginl,text1,text2,rapid;
    public static JTextField user;
    public static JPasswordField pass;
    public static Font f;
    public static Container c;
    public static Image backI,eleI;
    public static ImageIcon backi,elei;

.
.
.
}

First you need to create a Frame in Swing so I used JFrame class. Then, for background I used a JLabel  instead of Button I used login and loginl JLabel for designing it well. And for textfields background I used again JLabel text1 and text2. rapid JLabel is for Heading I have given on top.

I have used JTextField for user name entry and JPasswordField for password entry. To set Font other than default one I used Font.
 To store all this components on the Frame I have used Container class that hold up all the components.

Here is the code snippet for the initialization of components inside constructor:
.
.

public FirstGUI() throws Exception {
fr=new JFrame();//Frame initialization
        

//font for headings
        f=new Font("Arial Rounded MT Bold", Font.BOLD, 32);
      

  //container pane for adding controls
        c=fr.getContentPane();
        c.setLayout(null);
       
        //initialization of controls
        back=new JLabel();
        user=new JTextField("User name");
        pass=new JPasswordField("Password");
        login=new JLabel();
        loginl=new JLabel("Login",JLabel.CENTER);// centered text
        text1=new JLabel();
        text2=new JLabel();
        rapid = new JLabel();

.
.
.


In the above code, I have initialized all components with new keyword. We need to attach our container to Frame and it can be done with the help of getContentPane();. We have to make our layout null otherwise the components are stored on one another filling whole Frame.

Now after Initialization we need to set the size and location of components on Frame by using setBounds() functions.

.
.
.
//setting bounds of the frame and other components
        fr.setBounds(0,0, 500, 500);
        back.setBounds(0,0,fr.getWidth(),fr.getHeight());
        user.setBounds(172,  138, 180, 61);
        pass.setBounds(172,  210, 180, 65);
        loginl.setBounds(155, 286, 197, 65);
        login.setBounds(loginl.getBounds());
        rapid.setBounds(0, 38, 484, 71);
        //background image bounds
        text1.setBounds(user.getBounds());
        text2.setBounds(pass.getBounds());

.
.
.
 The above code will provide us with the size and location of components and now we need to set image to labels that are declared for that purpose e.g back for background image:
.
.
.
//background image
        backI = ImageIO.read(new File("/MyFirst/src/images/back1.jpg"));  
        backI = backI.getScaledInstance(fr.getWidth(), fr.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        back.setIcon(backi);
      
        //login click
        eleI = ImageIO.read(new File("/MyFirst/src/images/login.png"));  
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
      
        backI = ImageIO.read(new File("/MyFirst/src/images/textbox.png"));  
        backI = backI.getScaledInstance(user.getWidth(), user.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        text1.setIcon(backi);
        text2.setIcon(backi);
      
        backI = ImageIO.read(new File("/MyFirst/src/images/RapidAbcd.png"));  
        backI = backI.getScaledInstance(rapid.getWidth(), rapid.getHeight(),Image.SCALE_REPLICATE);
        backi = new ImageIcon(backI);
        rapid.setIcon(backi);
      
        user.setFont(new Font("Arial", Font.BOLD, 15));
        user.setForeground(Color.gray);
        pass.setFont(new Font("Arial", Font.BOLD, 15));
        pass.setForeground(Color.gray);
        loginl.setFont(new Font("Arial", Font.BOLD, 20));
        loginl.setForeground(Color.white);
        

//add all components
        c.add(rapid);
        c.add(user);
        c.add(pass);
        c.add(text1);
        c.add(text2);
        c.add(loginl);
        c.add(login);
        c.add(back);   
      
        fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        fr.setVisible(true);

.
.
.
}
ImageIO.read() function will provide us with the facilty of loading image from the computer but this function requires a object of File which I used directly in the function otherwise I can use in this way too:
File path=new File("/MyFirst/src/images/back1.jpg");
ImageIO.read(path); 


getScaledInstance() function give us facility og scaling the image as per the size of Label on which we need to assign image as icon.
And we need to use finally ImageIcon object to set icon to JLabel.

Similarly, assign image to all labels required. Finally add all components to Container by using add() function.

And then make frame closable by using default Close Operation and make visible the frame by using setVisible() to true.

Now we need to add events to lables and textFields as shown below snippets:
.
.
.
login.addMouseListener(new MouseListener() {
   
    @Override
    public void mouseReleased(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
       
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
           
        }   
    }
   
    @Override
    public void mousePressed(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MYFirst/src/images/loginclick.png"));
       
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
           
        }           
    }
   
    @Override
    public void mouseExited(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MYFirst/src/images/login.png"));
       
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
           
        }           
    }
   
    @Override
    public void mouseEntered(MouseEvent arg0) {
        try {
            eleI = ImageIO.read(new File("/MyFirst/src/images/loginhover.png"));
       
        eleI = eleI.getScaledInstance(login.getWidth(), login.getHeight(),Image.SCALE_REPLICATE);
        elei = new ImageIcon(eleI);
        login.setIcon(elei);
        } catch (IOException e) {
            // TODO Auto-generated catch block
           
        }           
    }
   
    @Override
    public void mouseClicked(MouseEvent arg0) {
        // TODO Auto-generated method stub
       
    }
});

.
.
.

Don't worry about the code because you do not need to write it just use ctrl+space after (dot.) to addMouseListener and again inside () enter new, again enter addMouseListener and it will generate auto codes. and type the codes.

These codes are actually help for creating some effects on the JLabel Login. After every events I just changed the image and that's it.

The Entire file is on the next tutorial, must read!
If you have found any difficulty, please comment me here!
Happy Programming with Designing!
 

Saturday, 1 August 2015

Programming the Designs(GUI) Part-1

First of all, Thank You to read my blog regularly, I don't expect anything from you but just want to help you so that you can have your skills to be used for better purpose that leads to your bright future.

So, without being taking more time I will start with the main concern. In this new segment you will have Java programming, Python Programming with some design tools. I will mainly focus on Java GUI designing using Swing.

Let's start with it-
I have divided whole things into part so that I can add some more things if required further.

What is GUI programming?
This is not the actual word that you will find on the Google and may differ some meaning elsewhere. GUI programming is the term used for designing Graphical User Interface through programming and here I will suggest Java programming.

The reason for choosing Java is that it is a Platform Independent Language, that means it can be port to any machine and code will run in same manner as it was run previous machine/platform.

How to implement?
In Java GUI programming, we require some tools that you should download immediately to start with my tutorials. You will need:
1. jdk1.7 and above
2. Eclipse Indigo or Eclipse Luna(For ease of coding)
3. Adobe Photoshop(For designing images)  
4. If Possible Install Google's Picasa picture manager tool
 These are the basic requirements that will be important for all tutorials, extra things needed will be mentioned specially in the each tutorials.

If you already have some idea about Java Swing then its well and good otherwise just follow the instructions in the tutorials thoroughly. 

What is use of it?
You are definitely thinking of its usage. This will help you to develop your own hyper Interactive application GUI with your own created components.

You can also able to develop the Games with the help of further tutorials because I have created some games too and I will definitely help on that if you have something about in your mind.

So, I will end this Part-1 here and starting with the Implementations from the next tutorials.

Happy Designing!