Application Techniques



Creating Animations

How to use images to create animations on a form.

About this technique

Details

Category

Java Client Techniques> Keystrokes and drawing

Description

You'll learn about:

You can run this technique code from:

NOTE   First make sure that database is running on your localhost SilverStream Server

The example creates animations from .gif image files stored in the Examples3_Java database.

Setting up images and user-input controls    Top of page

The following array is declared in the General/Imports section of the code:

  final static String CAT_GIFS [] = { 
     "CatRight1.gif", "CatRight2.gif", "CatStop.gif",  
     "CatYawn.gif","CatScratch1.gif", "CatScratch2.gif", 
     "CatSleep1.gif","CatSleep2.gif","CatAwake.gif"}; 

Here is the code for the formActivate event:

  protected void formActivate() 
     { 
        sldrRunningSpeed.setBackground(   m_formColorBackground ); 
        sldrLengthOfYawn.setBackground(   m_formColorBackground ); 
   
        // First, load the cat images into an array, and default  
        // to the first. 
       for (int i = 0; i < m_imgCats.length; i++)    
         { 
           m_imgCats [i] = getImage (agGeneral.getDatabaseURL() + 
          "SilverStream/Objectstore/Images/" + CAT_GIFS[i]); 
         } 
       m_imgCurrentCat = m_imgCats [0]; 
               
       // Now create the white pallet for the running cat 
       m_iPalletX = 0; 
       m_iPalletY = lblTitle.getLocation().y +  
           lblTitle.getSize().height + 20; 
       m_iPalletWidth = this.getSize().width; 
        m_iPalletHeight = rectSettings.getLocation().y - m_iPalletY;  
       m_rectPallet = new AgcRectangle(); 
       m_rectPallet.setTransparent(false); 
       m_rectPallet.setBackground(Color.white); 
         
       // Set the beginning position for the cat image 
       m_iCatPosX = m_iPalletX; 
       m_iCatPosY = m_iPalletY + m_iPalletHeight/2; 
      
       // Set the scratch and snore count 
       spinScratches.setValue(m_iScratchCount/2); 
       spinZzzs.setValue(m_iZzzsCount/2); 
         
       // Set the default running speed 
       m_dblRunningSpeed = sldrRunningSpeed.getValue(); 
       m_dblRunningSpeed = 1 - m_dblRunningSpeed/100; 
         
       // Start the timer. 
       tmrAnimation.setInterval(m_dblRunningSpeed); 
       tmrAnimation.startTimer();       
     } 

Notes about the code

Implementing animation with the switch statement   Top of page

The following code defines the seven phases of the animation by using a switch statement. Each case handles its phase differently due to the varying number of images required for each phase and the type of values that the user inputs. For example, the running-on and running-off phases require two images whereby the time to wait between repainting is specified by the user. The scratching phase also requires two images, but the number of iterations (and not the repaint wait time) is specified by the user.

Each case in the switch statement sets currentimg to the image that has to be painted. It also computes the location to paint it. Using the tmrAnimation.setInterval() method, the code specifies how long to pause the application after the image has been painted before continuing.

  private void handle_tmrAnimation_timeIntervalExpired(EventObject event) 
    { 
      switch (m_iPhase)  
      { 
        case 0:  // run across left half of screen 
          // run left to right until mid screen, changing images 
          // based on value in run interval slider 
          tmrAnimation.stopTimer(); 
          tmrAnimation.setInterval (m_dblRunningSpeed); 
          tmrAnimation.startTimer(); 
          if (m_iCatPosX < (m_iPalletWidth / 2)) 
          { 
            if (m_imgCurrentCat == m_imgCats [0]) 
              m_imgCurrentCat = m_imgCats [1]; 
            else  
              m_imgCurrentCat = m_imgCats [0]; 
            m_iCatPosX = m_iCatPosX + 10; 
          } 
          if (m_iCatPosX >= (m_iPalletWidth /2 - 20)) 
          { 
            // if the next one is past mid-screen, stop for 1 second 
            m_iPhase = 1; 
          } 
          break; 
        case 1: // stop 
          // stop, then set up to yawn for 1 second 
          tmrAnimation.stopTimer(); 
          tmrAnimation.setInterval(m_dblYawnLength); 
          tmrAnimation.startTimer(); 
          m_imgCurrentCat = m_imgCats [2]; 
          m_iPhase = 2; 
          break; 
        case 2: // yawn 
          // yawn, then set up to scratch  
          m_imgCurrentCat = m_imgCats [3]; 
          m_iPhase = 3; 
          m_iSubphase =0; 
          break; 
        case 3: // scratch 
          // scratch four times, every .25 seconds 
          tmrAnimation.stopTimer(); 
          tmrAnimation.setInterval (.25); 
          tmrAnimation.startTimer(); 
          if (m_iSubphase%2 == 0) 
            m_imgCurrentCat = m_imgCats [4]; 
          else  
            m_imgCurrentCat = m_imgCats [5];   
          m_iSubphase++; 
          if (m_iSubphase >= m_iScratchCount) // done scratcing 
          { 
            m_iPhase = 4; 
            m_iSubphase = 0; 
          } 
          break; 
        case 4: // sleep 
          tmrAnimation.stopTimer(); 
          tmrAnimation.setInterval (.35); 
          tmrAnimation.startTimer(); 
          if (m_iSubphase%2 == 0) 
            m_imgCurrentCat = m_imgCats [6]; 
          else  
            m_imgCurrentCat = m_imgCats [7];     
          m_iSubphase++; 
          if (m_iSubphase >= m_iZzzsCount) // done sleeping 
          { 
            m_iPhase = 5; 
            m_iSubphase = 0; 
          } 
          break; 
        case 5: // awake started for a second 
          tmrAnimation.stopTimer(); 
          tmrAnimation.setInterval (1); 
          tmrAnimation.startTimer(); 
          m_imgCurrentCat = m_imgCats [8]; 
          m_iPhase = 6; 
          break; 
        case 6: // run off 
          // run left to right off screen, changing images based on 
         // run interval slider 
          tmrAnimation.stopTimer(); 
          tmrAnimation.setInterval (m_dblRunningSpeed); 
          tmrAnimation.startTimer(); 
          if (m_imgCurrentCat == m_imgCats [0]) 
            m_imgCurrentCat = m_imgCats [1]; 
          else m_imgCurrentCat = m_imgCats [0]; 
          m_iCatPosX = m_iCatPosX + 10; 
          if (m_iCatPosX >= (m_iPalletWidth + 20)) 
          { 
              m_iPhase = 0; 
              m_iCatPosX = 0; 
          } 
          break; 
        default: 
      }   
      repaint(); 
    } 

Notes about the code






Copyright © 2000, SilverStream Software, Inc. All rights reserved.