flash - DHTML および SWF10/11 ランタイムで OpenLaszlo 5.0 のアニメーション GIF を使用する

Question

Flash Player は、アニメーション GIF ファイルをネイティブでサポートしていません。DHTML ランタイムでは、アニメーション GIF を他の画像リソースと同様に使用できます。しかし、SWF10 または SWF11 ランタイムでビューのリソースとして画像を使用するにはどうすればよいでしょうか。

Answer 1

幸いなことに、アニメーション GIF の再生と生成をサポートする既存のオープン ソース ActionScript ライブラリが多数あります。as3gifプロジェクトを使用します。最初に、as3gif の ActionScript ソース コードを SWC ライブラリにコンパイルする必要があります。これは、OpenLaszlo で使用できます。as3gif のバージョン 0.6 を含む ZIP ファイルをダウンロードします。$LPS_HOME フォルダーに ZIP ファイルを展開します。サブフォルダー「GIFPlayer 0.6」が必要です。

$LPS_HOME/GIFPlayer 0.6/

そのフォルダーに移動し、Flex SDK の compc コマンドを使用して、ActionScript クラスを SWC ファイルにコンパイルします。OpenLaszlo 4.9 または 5.0 (2012 年 9 月現在) の場合、compc コマンドは $LPS_HOME/WEB-INF/bin/compc にあります。OpenLaszlo の flex4.6 ブランチを使用する場合、compc コマンドへのパスは、SWF10 ランタイムの場合は WEB-INF/flexsdk/4.5.1/bin/compc、または WEB-INF/flexsdk/4.6.0/bin/ のいずれかです。 SWF11 ランタイムの compc。

$LPS_HOME/WEB-INF/bin/compc -optimize=true -static-link-runtime-shared-libraries=true -source-path+=. -output=bin/as3gif_0.6.swc -include-classes org.bytearray.gif.decoder.GIFDecoder org.bytearray.gif.encoder.GIFEncoder org.bytearray.gif.encoder.LZWEncoder org.bytearray.gif.encoder.NeuQuant org.bytearray.gif.errors.FileTypeError org.bytearray.gif.events.FileTypeEvent org.bytearray.gif.events.FrameEvent org.bytearray.gif.events.GIFPlayerEvent org.bytearray.gif.events.TimeoutEvent org.bytearray.gif .frames.GIFFrame org.bytearray.gif.player.GIFPlayer

コンパイル後、生成された SWC ファイルはサブフォルダーの bin にあります。

bin/as3gif_0.6.swc

SWC ファイルを $LPS_HOME/WEB-INF/flexlib フォルダーにコピーします。アニメーション GIF を表示するために使用するクラスは、org.bytearray.gif.player.GIFPlayer クラスです。

両方のランタイムで GIF をサポートする OpenLaszlo クラスの例を次に示します。

<canvas>
<!-- Copyright (c) Raju Bitter / MIT license http://www.opensource.org/licenses/mit-license.php -->

  <class name="gifview" extends="view" width="200" height="200">
    <passthrough when="$as3">
      import flash.events.IOErrorEvent;
      import flash.net.URLRequest;
      import org.bytearray.gif.player.GIFPlayer;
      import org.bytearray.gif.events.GIFPlayerEvent;
    </passthrough>
    <attribute name="gifsrc" type="string" value="" />
    <attribute name="__gifplayer" type="object" value="null" />
    <handler name="oninit">
      if (this.gifsrc != '') {
         this.ongifsrc.sendEvent();
      }
    </handler>
    <handler name="ongifsrc">
      if ($dhtml) {
        this.setSource(this.gifsrc);
      } else {
    if (this.__player == null) {
          this.__player = new GIFPlayer();
          this.__player.addEventListener(GIFPlayerEvent.COMPLETE, onGIFLoadComplete);
          this.__player.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
        }
        this.__player.load(new URLRequest(this.gifsrc));
        this.getDisplayObject().addChild(this.__player);
      }
    </handler>
    <method name="onGIFLoadComplete" args="evt"><![CDATA[
      Debug.info("GIF loaded successfully!");
      Debug.info("Total frames: " + this.__player.totalFrames);
      for (var i=1; i <= this.__player.totalFrames; i++) {
        Debug.info("Delay for frame #" + i + ": " + this.__player.getDelay(i));
      }
    ]]></method>
    <method name="onIOError" args="evt">
      Debug.error("Error loading GIF!");
      Debug.inspect(evt);
    </method>
    <!-- Custom unload method -->
    <method name="unload">
       if ($dhtml) {
         super.unload();
       } else {
         this.getDisplayObject().removeChildAt(0);
         // Dispose image resources
     this.__player.dispose();
         this.setAttribute('__player', null);
       }
    </method>
    <method name="stopGIFAnim">
      if ($as3) {
        this.__player.stop();
        Debug.info("Stopped animation at frame " + this.__player.currentFrame);
      } else {
         Debug.warn("Not supported in this runtime");
      }
    </method>
    <method name="startGIFAnim">
      if ($as3) {
        this.__player.play();
      } else {
         Debug.warn("Not supported in this runtime");
      }
    </method>
  </class>

  <gifview x="100" y="10" id="gv" gifsrc="animated.gif" />

  <button text="Start anim" onclick="gv.startGIFAnim()" />
  <button y="50" text="Stop anim" onclick="gv.stopGIFAnim()" />
  <button y="100" text="Unload GIF" onclick="gv.unload()" />
  <button y="150" text="Load again" onclick="gv.setAttribute('gifsrc', 'animated.gif')" />

</canvas>

ActionScript クラスは、アニメーションの開始と停止をサポートし、GIF の各フレームの遅延にアクセスできます。