flash - 在 DHTML 和 SWF10/11 运行时的 OpenLaszlo 5.0 中使用动画 GIF

Question

Flash Player 不提供对动画 GIF 文件的本机支持。在 DHTML 运行时中，您可以像使用任何其他图像资源一样使用动画 GIF。但是如何将图像用作 SWF10 或 SWF11 运行时中的视图资源呢？

Answer 1

幸运的是，有许多现有的开源 ActionScript 库支持播放和生成动画 GIF。我们将使用as3gif项目。我们首先必须将 as3gif 的 ActionScript 源代码编译成一个 SWC 库，然后才能与 OpenLaszlo 一起使用。下载0.6 版 as3gif 的 ZIP 文件。解压缩 $LPS_HOME 文件夹中的 ZIP 文件。您应该有一个子文件夹“GIFPlayer 0.6”。

$LPS_HOME/GIFPlayer 0.6/

进入该文件夹，并使用 Flex SDK compc 命令将 ActionScript 类编译为 SWC 文件。对于 OpenLaszlo 4.9 或 5.0（截至 2012 年 9 月），可在 $LPS_HOME/WEB-INF/bin/compc 中找到 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

编译完成后会在子文件夹bin中找到生成的SWC文件：

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 的每一帧的延迟。