画像の連続表示

  1. 目的

    1. 目的

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

    2. 画像圧縮

       Jpeg画像は、画像の圧縮形式の一つです。画像を小さなブロックに分解し、ブロック単位に周波数解析を行い、細かい(変化の激しい)成分を落として再合成します。急激な変化が弱まるため、人工的の鋭いエッジは弱くなりますが、自然な(緩やかな)画像は圧縮をしても大きな変化はありません。圧縮すると、元ファイルの2〜3割のサイズになり、効率的な圧縮ができます。
       GIFファイルは、同じ画素の並びを圧縮する方式です。同一の画素が並ぶグラフィックな画像には効果的ですが、自然な画像はあまり圧縮できません。

  2. 手法


    1. 画像:Image

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

    2. メディアトラッカー:MediaTracker

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

    3. リスト:List

      リストは一覧を表示し、ダブルクリックすると選択が可能な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);
       }
      });
      リストへの要素の追加は以下のようにします。ここでは、4枚の画像の表示時間(m秒単位)を設定します。
      list1.add("200");
       list1.add("200");
       list1.add("200");
       list1.add("200");
      で行います。
      リストイベント処理で4枚の画像の表示時間間隔を編集します。リストボックスの項目をダブルクリックすると、イベントが発生します。このイベント処理(list1_actionPerformed(e);)で、
       selected=list1.getSelectedItem();
       selIndex=list1.getSelectedIndex();
       textField1.setText(selected);
      により、その項目の文字と番号を取得し、textField1 に設定します。
      数値を変更し変更ボタンを押すと、ボタン処理で、下記のように、リスト要素の値を変更します。
        list1.replaceItem(st,selIndex);
       Delay[selIndex]=Integer.parseInt(st);

    4. スレッド:Thread

       スレッドは同じプログラム内部で独立に実行されるプロセスです。一般のプロセスと比較し、メモリ等の保護機能が不要なためシステムから見ると軽いプロセスとなり、切り替えも早くなります。アップレット内部でスレッドを組み込む場合、extendは利用できないため(Javaでは extend 出来るクラスは1つのみ)、次のように、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);
        }

    7. 実行

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




  4. ダウンロード・アンケート

    1. ダウンロード

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

    2. アンケート

      1.Jpegファイルは理解できましたか? 1できた 2だいたい  3まだ
      2:リスト処理はりかいできましたか? 1できた 2だいたい  3まだ
      3:Jpeg画像の読み込み・表示は理解できましたか? 1できた 2だいたい  3まだ
      4:mediaTrackerは理解できましたか? 1できた 2だいたい  3まだ