Make your own free website on Tripod.com

画像の連続表示

  1. 目的
    GIFアニメーションのように、JPG画像を連続表示します。表示間隔を設定することも出来ます。

  2. 手法
    1. 画像
      Imageクラスを利用します。
       Image Images[]=new Image[4];
      で4枚の画像を作成します。画像を読み込むのはgetimageメソッドです。gifファイルも読み込むことができます。
       Images[0] = getImage(getCodeBase(), "shoubu1.jpg");
      画像の表示は
       g.drawImage(Images[0], 10, 10, this);
      で行います。

    2. メディアトラッカー
       getImage()は画像の読み込み完了を確認しません。大きなファイルを読む場合、画像の読み込みを確認する必要があります。これを行うのが、MediaTrackerクラスです。まず、
       MediaTracker mt=new MediaTracker(this);
      で、クラスオブジェクトmtを作成します。画像を読み込むとき
       mt.addImage(Images[1],1);
      で、1番目のファイルを待機リストに加えます。読み込み確認は mt.checkID(index,true) で行います。読み込み完了の場合trueが返ります。

    3. GUI部品:リスト
      リストで各画像の遅延時間を設定します。
      List list1 = new List();
      で、リストクラスのオブジェクトを生成し、
      list1.setBounds(new Rectangle(151, 34, 75, 78));//リスト
       list1.addActionListener(new java.awt.event.ActionListener() {
       public void actionPerformed(ActionEvent e) {
       list1_actionPerformed(e);
       }  });
      で、サイズとイベント処理メソッドを定義します。リストへの要素の追加は
      list1.add("200");
       list1.add("200");
       list1.add("200");
       list1.add("200");
      で行います。

      リストイベント処理で4枚の画像の表示時間間隔を編集します。リストボックスの項目をダブルクリックしたイベントで、
       selected=list1.getSelectedItem();
       selIndex=list1.getSelectedIndex();
       textField1.setText(selected);

      により、その項目の文字と番号を取得し、textFieldに設定します。
      数値を変更し変更ボタンを押すと、
        list1.replaceItem(st,selIndex);
       Delay[selIndex]=Integer.parseInt(st);
      により、リストの項目を置き換え、遅延時間の配列を変更します。

    4. スレッド
       スレッドは同じプログラム内部で独立に実行されるプロセスです。一般のプロセスと比較し、メモリ等の保護機能が不要なためシステムから見ると軽いプロセスとなり、切り替えも早くなります。アップレット内部でスレッドを組み込む場合、extendは利用できないため、Runnableインターフェースを利用します。
       public class jpegAnim extends Applet implements Runnable{  }
      スレッドは、通常 start() メソッドで起動します。これは、ページが表示される時呼び出されるメソッドです。
           public void start()
      
          {
      
              thread1 = new Thread(this);
      
              thread1.start();
      
          }
      スレッドの本体は、次の run() メソッドで、アプレットとは独立して実行されます。ここでは、画像を表示後、sleep()で指定された時間:Delay[index] だけ休止します。休止から覚めると、indexを更新し、animateFlagがtrueの間、繰り返します。
          public void run()//スレッド実行部
      
          {
      
              while(animateFlag){
      
                  repaint();
      
                  try {
      
                      Thread.sleep(Delay[index]);//遅延時間休止
      
                  }
      
                  catch(InterruptedException e) { }
      
                  index++;
      
                  if(index > 3) index = 0;
      
              }
      
          }
      スレッドにしないで、sleep() を実行すると、アップレットは休止状態にはいるため、GUI部品の実行(マウス選択など)ができなくなってしまいます。スレッドは、stop()メソッドで終了させます。stop()メソッドはページの表示が終了すると、呼び出されるメソッドです。
          public void stop()
      
          {
      
              animateFlag = false;
      
          }

  3. プロジェクト
    1. レイアウト
      左上に画像を表示します。右にListBox、左下に変更用ボタン、右下に遅延時間設定用textFieldを配置します。

    2. 主要変数
      Imageクラスに画像を作成します。
       mage Images[]=new Image[4];
      各画像の表示間隔を設定します。
       int Delay[]=new int[4];

    3. 初期化:init()
       部品の配置や画像の読み込みを開始します。

    4. 描画: paint()
      indexで指定されるImageを表示します。indexの値は、スレッドのrun()で変更されます。
          public void paint (Graphics g)
      
          {
      
            if(mt.checkID(index,true)){
      
              g.drawImage(Images[index], 20, 20, this);
      
              System.out.println("paint:"+index);
      
            }
      
          }

    5. リストイベント処理 list1_actionPerformed(ActionEvent e)
      list1のイベント処理をします。選択されたリスト項目(getSelectedItem()と番号(getSelectedIndex())を読みとり、編集可能なtextField1にコピーします。

      void list1_actionPerformed(ActionEvent e) {
      selected=list1.getSelectedItem();
      selIndex=list1.getSelectedIndex();
      textField1.setText(selected);
      }
    6. ボタンイベント処理
      ボタンが押された場合の処理をします。getText()で読み込み、replaceItem()でリスト要素を変更します。
        void button1_actionPerformed(ActionEvent e) {//時間変更
      
          String st=textField1.getText();
      
          list1.replaceItem(st,selIndex);
      
          Delay[selIndex]=Integer.parseInt(st);
      
        }

  4. 実行
    同じディレクトリにshoubu1.jpg、shoubu2.jpg、shoubu4.jpgの4枚の画像が必要です。実行すると、リストの時間間隔で連続表示します。遅延時間を変更するには、時間をダブルクリックして選択し、編集後変更ボタンを押します。





  5. ダウンロード
    このプロジェクトをダウンロードできます。
    次の行をクリックして、jpeganim.exeファイルを適当なフォルダに保存します。
    ダウンロード開始(JBuilder)
    このファイルは自己解凍型の圧縮ファイルです。このファイルを実行すると指定したフォルダに必要なファイルが生成されます。
     JDKを利用する場合のソースファイルは、ここにあります。画像ファイルは、上記のダウンロードを行うと、classファルダの中にあります。

  6. 課題
    GUI部品を2種以上と、画像をネタにアプレットを作成してください。提出期限11月11日