Text in an Animated Box!


DevX Home    Today's Headlines   Articles Archive   Tip Bank   Forums   

Results 1 to 5 of 5

Thread: Text in an Animated Box!

  1. #1
    Join Date
    Jan 2006
    Posts
    15

    Angry Text in an Animated Box!

    Hi, I'm trying to create a program that zooms a green box (from small to large) around a string of text. It starts in the center, then spreads to create a rectangle. It's a pretty simple applet, but since drawRect creates a 1-pixel border, I wanted it thicker. So instead, I used arrays to draw multiple boxes around the text to make the appearance thicker (by pixels). But this applet does not work, it creates one green box that is slightly off-center, and then creates a green dot starting from the middle, then traveling to the left corner of the applet. If someone can read this code, I'll be thankful. It will take a genius to sort my code disorganization (sorry, haste.)

    import java.applet.*;
    import java.awt.*;
    import java.awt.event.*;
    import java.net.*;

    public class MySitepre extends Applet implements Runnable, MouseListener, MouseMotionListener
    {
    private Rectangle rect = null;

    private Color foreground;
    private Color background;

    private Color selection_color;

    private Font font;

    private int[] current_pos_x; // current position of one of the boxes
    private int[] current_pos_y; // current position of one of the boxes

    private int[] current_width; // current width of one
    private int[] current_height; // current width of one

    // destined position at the end of animation (of one box)
    private int[] final_pos_x;
    private int[] final_pos_y;

    // destined width/height at end of animation (of one)
    private int[] final_width;
    private int[] final_height;

    // start position of one box
    private int[] start_pos_x;
    private int[] start_pos_y;

    /* these string variables are irrelevant to my problem, so ignore anything about strings/fonts, etc. */

    private int stringX;
    private int stringY;

    private int stringHeight;
    private int stringTop;

    private int pause;

    /* values for the arrays, totalNum is the amount of boxes (in this applet, 4) currentNum is for the FOR loops, currentNum2 (is better explained later) */
    private int currentNum;
    private int currentNum2;
    private int totalNum;

    private boolean hover;
    private boolean clicked;
    private boolean animated;

    // if the current box is animated or not
    private boolean[] expanding_width;
    private boolean[] expanding_height;

    private boolean running;
    private boolean stopped;

    private Thread looper;

    private String string;

    private Image image;

    URL url;

    public void init()
    {
    addMouseListener(this);
    addMouseMotionListener(this);

    foreground = new Color(205, 205, 205);
    background = Color.black;

    selection_color = Color.green;

    // basically everything I explained above, just giving values

    totalNum = 4;
    currentNum = 0;
    currentNum2 = totalNum;

    current_pos_x = new int[totalNum];
    current_pos_y = new int[totalNum];

    current_width = new int[totalNum];
    current_height = new int[totalNum];

    final_pos_x = new int[totalNum];
    final_pos_y = new int[totalNum];

    final_width = new int[totalNum];
    final_height = new int[totalNum];

    start_pos_x = new int[totalNum];
    start_pos_y = new int[totalNum];

    expanding_width = new boolean[totalNum];
    expanding_height = new boolean[totalNum];

    pause = 5;

    stopped = true;

    hover = false;
    hover_2 = false;
    clicked = false;
    animated = false;

    for(currentNum = 0; currentNum < totalNum; currentNum++)
    {
    current_width[currentNum] = 0;
    current_height[currentNum] = 0;

    expanding_width[currentNum] = false;
    expanding_height[currentNum] = false;
    }

    string = "Text in an animated box!";

    font = new Font ("TimesRoman", Font.PLAIN, 24);
    }

    public void start()
    {
    if(!running)
    {
    running = true;
    looper = new Thread(this);
    looper.start();
    }
    }

    public void stop()
    {
    running = false;
    }

    public void run()
    {
    try
    {
    while(running)
    {
    for(currentNum = 0; currentNum < totalNum; currentNum++)
    {
    if(expanding_width[currentNum])
    current_width[currentNum] = current_width[currentNum] + 2;
    if(expanding_height[currentNum])
    current_height[currentNum] = current_height[currentNum] + 2;

    repaint();

    looper.sleep(pause);
    }
    }
    }

    catch(InterruptedException e)
    {
    running = false;
    }
    }

    public void update(Graphics g)
    {
    if(running)
    {
    if(rect == null)
    {
    rect = getBounds();

    for(currentNum = 0; currentNum < totalNum; currentNum++)
    {
    final_width[currentNum] = rect.width - (rect.width / 10) - currentNum * 2;
    final_height[currentNum] = rect.height - (rect.height / 2) - currentNum * 2;

    start_pos_x[currentNum] = (rect.width / 2) - currentNum2;
    start_pos_y[currentNum] = (rect.height / 2) - currentNum2;

    currentNum2--;
    }

    image = createImage(rect.width, rect.height);
    }

    paint(image.getGraphics());
    g.drawImage(image, 0, 0, null);

    for(currentNum = 0; currentNum < totalNum; currentNum++)
    {

    if(hover)
    {
    if(current_width[currentNum] < final_width[currentNum])
    {
    expanding_width[currentNum] = true;

    current_pos_x[currentNum] = current_pos_x[currentNum] - 1;
    }

    if(current_height[currentNum] < final_height[currentNum])
    {
    expanding_height[currentNum] = true;

    current_pos_y[currentNum] = current_pos_y[currentNum] - 1;
    }

    if(current_width[currentNum] >= final_width[currentNum])
    expanding_width[currentNum] = false;
    if(current_height[currentNum] >= final_height[currentNum])
    expanding_height[currentNum] = false;
    }

    else
    {
    current_pos_x[currentNum] = start_pos_x[currentNum];
    current_pos_y[currentNum] = start_pos_y[currentNum];

    current_width[currentNum] = 0;
    current_height[currentNum] = 0;
    }
    }
    }
    }

    public void paint(Graphics g)
    {
    if (rect == null)
    return;

    g.setColor(background);
    g.fillRect(0, 0, rect.width, rect.height);

    FontMetrics fm = g.getFontMetrics(font);

    stringX = (rect.width - fm.stringWidth(string)) / 2;

    stringY = rect.height;
    stringY -= fm.getAscent() + fm.getDescent();
    stringY /= 2;
    stringY += fm.getAscent();

    g.setColor(foreground);
    g.setFont(font);
    g.drawString(string, stringX, stringY);

    if(hover)
    {
    for(currentNum = 0; currentNum < totalNum; currentNum++)
    {
    g.setColor(selection_color);
    g.drawRect(current_pos_x[currentNum], current_pos_y[currentNum], current_width[currentNum], current_height[currentNum]);
    }
    }
    }

    public void mousePressed(MouseEvent event) {}
    public void mouseDragged(MouseEvent event) {}
    public void mouseReleased(MouseEvent event) {}
    public void mouseMoved(MouseEvent event) {}
    public void mouseClicked(MouseEvent event)
    {
    if(hover)
    {
    try { url = new URL("http://www.google.com");}
    catch (MalformedURLException e) { System.out.println("Bad URL");}

    getAppletContext().showDocument(url);

    hover = false;
    }

    }
    public void mouseEntered(MouseEvent event)
    {
    hover = true;
    repaint();
    }

    public void mouseExited(MouseEvent event)
    {
    hover = false;

    for(currentNum = 0; currentNum < totalNum; currentNum++)
    {
    current_pos_x[currentNum] = start_pos_x[currentNum];
    current_pos_y[currentNum] = start_pos_y[currentNum];
    }

    repaint();
    }

    }

    In more detail:

    The boxes must start out in the coordinates: first box is the very outer box in start position, to the last box, which is the very inner. This sequence must be kept even at the end of its expanding of the width/height. Please try this out, for it is a big help.

    With best regards,
    Ben

    P.S. Don't waste too much time on this if you're getting nowhere. Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    New Jersey
    Posts
    290
    Instead of doing arrays, why not just draw two rectangles, one for the outline, and one the same as the background color, then draw the text over it. So it appears that you're drawing a border, when you're really just drawing a green rectangle, with some of it covered by a black rectangle.
    Last edited by destin; 01-04-2006 at 09:22 PM.

  3. #3
    Join Date
    Dec 2005
    Location
    New Jersey
    Posts
    290
    Here's a simple applet to demonstrate what I'm talking about:

    Code:
    import java.applet.*;
    import java.awt.*;
    
    public class BorderDemo extends Applet {
        /** color of the background */
        private Color backColor;
    
        /** color of the border */
        private Color borderColor;
    	
        /** the width of the border */
        private int borderWidth;
    	
        /**
         * how far away from the edge of the screen
         * that the border will be
         */
        private int borderDist;
    	
        public void init() {
            borderWidth = 10;
            borderDist = 15;
    		
            backColor = Color.black;
            borderColor = Color.green;
        }
    	
        public void paint(Graphics g) {
            /* 
             * instead of this.getWidth() and this.getHeight(), 
             * you can just do getWidth() or getHeight() i just
             * like to use this because im weird like that
             */
    		
            g.setColor(backColor);
            g.fillRect(0, 0, this.getWidth(), this.getHeight());
    
            g.setColor(borderColor);
            g.fillRect(borderDist, 
                       borderDist, 
                       this.getWidth() - (2 * borderDist),
                       this.getHeight() - (2 * borderDist));
    		
            g.setColor(backColor);
            g.fillRect(borderDist + borderWidth, 
                       borderDist + borderWidth, 
                       this.getWidth() - (2 * (borderDist + borderWidth)), 
                       this.getHeight() - (2 * (borderDist + borderWidth)));
        }
    }
    

  4. #4
    Join Date
    Jan 2006
    Posts
    15

    thanks

    wow, thanks. you saved me a lot of trouble!

    Thanks again,
    ben

  5. #5
    Join Date
    Dec 2005
    Location
    New Jersey
    Posts
    290
    Here's basically the same thing with some animation. (i was bored )

    Code:
    import java.applet.*;
    import java.awt.*;
    import java.awt.event.*;
    
    public class BorderAnimationDemo extends Applet implements Runnable, MouseListener {
    	Thread t;
    	
    	/** color of the background */
    	private Color backColor;
    
    	/** color of the border */
    	private Color borderColor;
    	
    	/** the width of the border */
    	private int borderWidth;
    	
    	/**
    	 * how far away from the edge of the screen
    	 * that the border will be
    	 */
    	private int borderDist;
    	
    	public void init() {
    		setSize(500, 500);
    		
    		t = new Thread(this);
    		t.start();
    		
    		addMouseListener(this);
    		
    		borderWidth = 30;
    		borderDist = this.getWidth() / 2;
    		
    		backColor = Color.black;
    		borderColor = Color.green;
    	}
    	
    	public void paint(Graphics g) {
    		/* 
    		 * instead of this.getWidth() and this.getHeight(), 
    		 * you can just do getWidth() or getHeight() i just
    		 * like to use this because im weird like that
    		 */
    		
    		g.setColor(backColor);
    		g.fillRect(0, 0, this.getWidth(), this.getHeight());
    
    		g.setColor(borderColor);
    		g.fillRect(borderDist, 
    				   borderDist, 
    				   this.getWidth() - (2 * borderDist),
    				   this.getHeight() - (2 * borderDist));
    		
    		g.setColor(backColor);
    		g.fillRect(borderDist + borderWidth, 
    				   borderDist + borderWidth, 
    				   this.getWidth() - (2 * (borderDist + borderWidth)), 
    				   this.getHeight() - (2 * (borderDist + borderWidth)));
    	}
    	
    	public void run() {
    		try {
    			while (true) {
    				t.sleep(10);
    				
    				if (borderDist > 0) {
    					borderDist--;
    				}
    				repaint();
    			}
    		} catch (InterruptedException e) {
    			System.err.println("Error: " + e);
    		}
    	}
    	
    	public void mouseEntered(MouseEvent me) {}
    	
    	public void mouseExited(MouseEvent me) {}
    	
    	public void mousePressed(MouseEvent me) {
    		borderDist = this.getWidth() / 2;
    		repaint();
    	}
    	
    	public void mouseClicked(MouseEvent me) {}
    	
    	public void mouseReleased(MouseEvent me) {}
    }
    If you click the mouse, it will start over.

Similar Threads

  1. Replies: 4
    Last Post: 11-28-2005, 03:14 PM
  2. Script for scrolling
    By Mark in forum Web
    Replies: 3
    Last Post: 08-30-2001, 12:45 PM
  3. Double Text 1.0
    By George Gilbert in forum vb.announcements
    Replies: 0
    Last Post: 08-19-2001, 12:34 PM
  4. Hiding the text in Rich Text Box
    By Javaid Ahmad in forum VB Classic
    Replies: 2
    Last Post: 04-18-2000, 06:44 AM
  5. Hiding the text in Rich Text Box
    By Javaid Ahmad in forum VB Classic
    Replies: 0
    Last Post: 04-13-2000, 12:46 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center
 
 
FAQ
Latest Articles
Java
.NET
XML
Database
Enterprise
Questions? Contact us.
C++
Web Development
Wireless
Latest Tips
Open Source


   Development Centers

   -- Android Development Center
   -- Cloud Development Project Center
   -- HTML5 Development Center
   -- Windows Mobile Development Center