使用 Flex Builder 开发 Flash 应用程序

作者:Carl Fink

我想念编程。多年来,我为大型公司开发软件,最初使用 Lotus Notes,然后使用 Macromedia Flash。在过去的三年里,我从事一份完全非编程的工作,开发网站、撰写白皮书以及做其他非技术性的事情。我喜欢写作,但我怀念编程。我想重新开始开发,并且作为 Linux Journal 的撰稿人,我希望尽可能使用自由软件。问题是,我的背景不仅限于专有软件,而且还高度专业化。我从未用 C 或 Java 或 Perl 或任何其他流行的通用语言编程过。我当然可以学习一种,但我宁愿不从头开始学习一个全新的系统,在我的职业生涯的这个阶段。

一种前进的方法是在 Flex 中创建 Flash 应用程序。Flash 最初是作为动画播放器创建的。它的脚本语言 ActionScript 最初是用于编写对象动画脚本的一种方式,但它已经发展成为一个功能齐全的面向对象的编程环境,用于通用应用程序。它是 ECMAScript 4 草案的实现,这意味着它与最新的 JavaScript 引擎兼容。然而,许多传统训练有素的开发人员发现 Flash 以动画为导向的时间轴开发系统令人困惑和陌生。解决方案是开发 Flex,它允许程序员使用更标准的工具和更熟悉的隐喻来创建 Flash 应用程序,即在表单上绘制控件并为它们分配行为。

在 Adobe 收购 Macromedia 后,它在 Mozilla 公共许可证下发布了 Flex SDK,因此现在可以使用完全免费的软件开发 Flash 应用程序。它还发布了基于 Eclipse 的 Flex Builder 开发环境的 Linux alpha 版本。Flex Builder 在专有许可证下发布。

Flex 应用程序也可以使用 MXML 定义,MXML 是一种 XML 方言,用于布局用户界面和程序的其他方面,例如数据绑定。行为仍然使用 ActionScript 定义。

Flash 应用程序通常在浏览器中运行。它们提供了 AJAX 或 Silverlight 应用程序的许多优点,包括一个有状态的客户端,可以更新特定项目而无需重新加载整个页面,并且 Flash Player 以与 Java applet 因安全原因受到限制的方式大致相同的方式对应用程序进行沙箱处理。

另一项创新 AIR(Adobe Integrated Runtime)使应用程序可以离线运行。AIR 让 ActionScript 开发人员可以创建真正的独立程序,而无需 Web 浏览器。但是,它们仍然受到 Flash “沙箱”的限制,这限制了可以在本地系统上进行的更改。AIR 应用程序还可以包含 HTML 和 JavaScript。

也许最著名的两个 AIR 应用程序是 Pandora Internet 广播播放器和 TweetDeck,它们简化了 Twitter 体验。两者都可以在 Linux 上运行。

在本文中,我演示了如何在 Linux 系统上使用 Adobe Flex Builder 创建一个简单的 Flash 应用程序。在后续文章中,我将转向使用 Project Sprouts 的完全开源开发。

安装适用于 Linux 的 Flex Builder 3 Alpha

Flex 是一个基于 Eclipse 的环境。为了使用它,您必须安装某些先决条件软件:Eclipse 3.3.x、Sun JRE 1.5 或更高版本以及 Mozilla Firefox 3.0。

请注意,系统要求专门指的是 Eclipse 3.3。如果您使用更高的版本,安装将成功,但 Eclipse 将无法打开代码编辑器。我从 eclipse.org(参见资源)在我的 $HOME 目录中安装了 3.3.2 版本。您可以在同一台计算机上并排安装 3.3 和 3.5,只要您启动 3.3 版本即可使用 Flex。只需解压下载文件并将其放置在文件系统中的任何位置。我将其放在 $HOME/eclipse 中。

我能够将 Flex Builder 与 Mozilla Firefox 3.5 版本一起使用,而不是要求的 3.0 版本,没有出现问题。一个 Firefox 提示:我使用 NoScript 插件。起初,我以为 Flex Builder 中的上下文相关帮助不起作用,但事实证明我必须允许来自 127.0.0.1:51296 的脚本。

另请注意,您必须安装 Sun JRE。GCJ 将不适用于 Flex。

为了使调试工作正常进行,您必须下载并安装 Flash Player 的调试版本(参见资源)。有趣的是,当您尝试在 Ubuntu 9.10 (Karmic Koala) 上运行 Adobe 的安装程序时,它会抱怨您没有高于 2.3 的 libc6。事实上,Karmic 附带了 2.10 版本(读作“2 点 10”),它在版本术语中高于 2.3,但在正常编号中不是。我编辑了脚本,通过注释掉这些行来删除版本检查

#GLIBCSTATUS=`check_glibc`
#case $GLIBCSTATUS in
#  invalid-glibc)
#    exit_glibc
#    ;;
#esac

通过这些编辑,安装顺利完成,没有进一步的问题。

您可以从 Adobe 的网站下载 Flex alpha 版本(参见资源),您需要先创建一个免费帐户。下载后,执行chmod u+x在文件上,并运行下载的文件进行安装。Flex Builder 使用 Windows 样式的图形向导安装程序。我安装到 /home/carlf/AdobeFlexBuilderLinux 中,这意味着我不需要成为超级用户即可完成安装。

要使用 Flex Builder,只需启动 Eclipse 即可。作为老派人士,我通过输入以下内容来完成此操作./eclipse/eclipse &在 GNOME 终端中(图 1)。

Developing Flash Applications with Flex Builder

图 1. Flex Builder

首次在安装 Flex Builder 后运行 Eclipse 时,您必须创建一个新的工作区。只需单击文件→切换工作区→其他并创建一个新文件夹。

适用于 Linux 的 Flex Builder 作为 alpha 版本,缺少 Windows 和 Mac 版本中的几个功能

  • 设计视图

  • 状态视图

  • 重构

  • 数据向导

  • Cold Fusion 数据服务向导

  • Web 服务内省

  • 性能分析器

根据您计划的项目类型,这些功能可能是至关重要的,也可能是不重要的。

因为这是我第一次使用 Eclipse,所以在关闭欢迎屏幕之前,我花时间查看了 Eclipse 教程。要从默认的 Java 开发环境切换到 Flex,请单击窗口→打开透视图→其他,然后选择 Flex 开发。现在,通过单击文件→新建→Flex 项目来创建一个 Flex 项目。我选择创建一个基于浏览器的 SWF 文件,并将其命名为“FirstProject”。

对于第一个简单的应用程序,我决定创建一个简单的 Internet 测验,向用户提出一些问题,然后提供一个“网络漫画智商”分数(我是网络漫画的忠实粉丝)。这让我避免了在我的第一个项目中担心服务器数据库访问。对于这个项目,我需要使用 MXML 来绘制一个简单的表单,其中包含一个问题(文本字段)和四个可能的答案(单选按钮),以及一个“下一步”按钮。当用户单击“下一步”时,下一个问题将显示在文本字段中。在最后一个问题之后,将显示分数。

因为适用于 Linux 的 Flex Builder 缺少 GUI 绘制器(缺少设计视图),所以我通过在编辑器中键入 MXML 代码来创建组件。首先,我编写第一个问题的文本。

清单 1. 测验程序

<mx:Application 
                layout="absolute">
  <mx:TextArea width="75%" height="75%">
    <mx:text>
      Question 1: Which strip is this grouchy but
                  good-hearted fighter the star of?
    </mx:text>
  </mx:TextArea>
</mx:Application>

运行时,程序看起来像图 2。

Developing Flash Applications with Flex Builder

图 2. 在 Firefox 中看到的测验程序首次运行

如您所见,文本非常小。您可以使用 htmltext 而不是 text 来设置文本大小。我还通过添加填充来纠正文本太靠近影片边框的问题,我为控件分配了一个 ID(名称),以便我可以在脚本中引用它,并且我使其不可编辑,然后我们得到清单 2。

清单 2. 具有字体和布局修复的测验程序

<?xml version="1.0" encoding="utf-8"?>
<!--Example for LJ article. -->
<mx:Application 
                layout="absolute">
  <mx:TextArea width="75%" height="75%"
               paddingTop="10" paddingBottom="10"
               paddingLeft="10" paddingRight="10"
               id="Question" editable="false">
    <mx:htmlText>
    <![CDATA[
      <font size="+3" face="Arial">
        <b>
          Question 1: Which strip is this grouchy but
                      good-hearted fighter the star of?
        </b>
      </font>
    ]]>
    </mx:htmlText>
  </mx:TextArea>
</mx:Application>

我仍然需要添加答案选项作为单选按钮和一个“下一步”按钮。在清单 3 中,我添加了我们的第一段 ActionScript 代码,一个函数,用于评估是否选择了正确答案,并通过对话框提供即时反馈。项目文件中除 MXML 之外的任何内容最好都放在 CDATA 标记内,这可以防止 Flex 将其解析为 XML。这适用于 ActionScript 和 HTML。ActionScript 也可以存储在外部文件中,并在运行时或编译期间加载。

清单 3. 带有第一个 ActionScript 代码的测验程序

<?xml version="1.0" encoding="utf-8"?>
<!--Example for LJ article. -->
<mx:Application 
                layout="vertical"
                backgroundColor="#FFFFFF">
  <mx:TextArea id="Question"
               width="100%" height="15%"
               paddingTop="10" paddingBottom="10"
               paddingLeft="10" paddingRight="10"
               editable="false"
               backgroundColor="#FFFFFF" borderColor="#FFFFFF">
    <mx:htmlText>
    <![CDATA[
      <font size="+4" face="Arial">
        <b>
          Question 1: Which strip is this grouchy but
                      good-hearted fighter the star of?
        </b>
      </font>
    ]]>
    </mx:htmlText>
  </mx:TextArea>
  <mx:VBox paddingLeft="150"
           backgroundColor="#FFFFFF" width="100%">
    <mx:RadioButton id="a1" groupName="Answers"
                    label="Belkar Bitterleaf"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a2" groupName="Answers"
                    label="Gilgamesh Wulfenbach"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a3" groupName="Answers"
                    label="Roy Greenhilt"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a4" groupName="Answers"
                    label="Frank Mangle"
                    width="400" paddingRight="20" />
    <mx:Button id="nextButton"
               label="Next" click="parseanswers();" />
  </mx:VBox>
  <mx:Script>
  <![CDATA[
  public function parseanswers(): void
  {
      import mx.controls.Alert;
      if (a3.selected) {
          Alert.show('Yes, the answer is ' + a3.label,
                     'Right!', mx.controls.Alert.OK);
      }
      else {
          Alert.show('Sorry, no.', 'Wrong', mx.controls.Alert.OK);
      }
  }
  ]]>
  </mx:Script>
</mx:Application>

现在运行该程序会产生一个问题,单击“下一步”会产生一个简单的消息框(图 3)。

Developing Flash Applications with Flex Builder

图 3. 带有答案检查的测验程序

对于大多数操作系统来说,对话框和其他控件看起来并不“标准”,开发人员会希望自定义它们。Flex 和 Flash 支持各种“皮肤”技术,可以轻松更改控件的外观,但这些超出了本文的范围。

显然,这个版本的测验仅用于测试目的。它只有一个问题,并且没有用于制表结果的规定。现在,是时候创建更多问题了。因为我故意不连接到服务器端数据库以进行本文的讨论,所以我只是在程序的代码中直接声明了一个数据数组。

ActionScript(像它的父级 ECMAScript 一样)的一个特性是它不直接支持多维数组。解决方法是声明一个数组的数组,如清单 4 所示。

清单 4. 带有更多问题的测验程序

<?xml version="1.0" encoding="utf-8"?>
<!--Example for LJ article. -->
<mx:Application 
                layout="vertical"
                backgroundColor="#FFFFFF">
  <mx:TextArea id="Question"
               width="100%" height="15%"
               paddingTop="10" paddingBottom="10"
               paddingLeft="10" paddingRight="10"
               editable="false" backgroundColor="#FFFFFF"
               borderColor="#FFFFFF"
               creationComplete="initApp();">
    <mx:htmlText>
    <![CDATA[
      <font size="+4" face="Arial">
        <b>
          Question 1: Which strip is this grouchy but
                      good-hearted fighter the star of?
        </b>
      </font>
    ]]>
    </mx:htmlText>
  </mx:TextArea>
  <mx:VBox paddingLeft="150"
           backgroundColor="#FFFFFF" width="100%">
    <mx:RadioButtonGroup id="Answers" />

    <mx:RadioButton id="a1" groupName="Answers" value="1"
                    label="Belkar Bitterleaf"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a2" groupName="Answers" value="2"
                    label="Gilgamesh Wulfenbach"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a3" groupName="Answers" value="3"
                    label="Roy Greenhilt"
                    width="400" paddingRight="20" />
    <mx:RadioButton id="a4" groupName="Answers" value="4"
                    label="Frank Mangle"
                    width="400" paddingRight="20" />
    <mx:Button id="nextButton"
               label="Next" click="parseanswers();" />
  </mx:VBox>
  <mx:Script>
  <![CDATA[
  import mx.controls.Alert;
  // Define here to make variables global.
  var currentQuestion:int = 0;
  var totalRight:int = 0;
  // Initialize the array of questions.
  //   - First sub-array is question text
  //   - Second through fifth are possible answers
  //   - Sixth is the correct answer for that question.
  var questions:Array = new Array(
      new Array("This grouchy but ... Order of the Stick.",
                "In Kevin and Kell, why ... secretaries?",
                "Which of these strips is NOT a stick-figure comic?"),
      new Array("Belkar Bitterleaf",
                "High metabolism means lots of work done.",
                "Questionable Content"),
      new Array("Gilgamesh Wulfenback",
                "Hollow bones mean no carpal tunnel",
                "No Time for Life"),
      new Array("Roy Greenhilt",
                "Excellent language skills of parrots",
                "xkcd"),
      new Array("Frank Mangle",
                "Flight lets them double as messengers",
                "Cyanide and Happiness"),
      new Array(3,2,1));

  private function initApp(): void
  // Initializes the first question, removing the default text
  // that's there when the controls are created
  {
      // testing
      Question.text=questions[0][currentQuestion];
      a1.label=questions[1][currentQuestion];
      a2.label=questions[2][currentQuestion];
      a3.label=questions[3][currentQuestion];
      a4.label=questions[4][currentQuestion];
  }
  public function parseanswers():void
  // Function runs whenever the user clicks the Next button.
  // Updates the score and puts up the new question, except on
  // the final question, where it displays the user's final tally.
  {
      if (Answers.selectedValue == questions[5][currentQuestion]) {
          totalRight++
      }
      // OK, Next was pressed so it's time to update the
      // screen. Test whether this was the last question,
      if (currentQuestion >= 2) {
          // That was the last question, time to report
          // results. For simplicity I will use
          // the Alert function here
          Alert.show('You got '+ totalRight
                     + ' questions right out of '
                     + 3, 'Score', mx.controls.Alert.OK);
          // Since the quiz is over, I disable all the
          // controls on the screen. In a polished
          // version, I will handle the end of quiz by switching
          // to a different Flash file showing the score only.
          Question.enabled=false;
          Answers.enabled=false;
          nextButton.enabled=false;
      }
      else {
          // OK, that wasn't the last question, so update
          // the question, all four answers and
          // increment currentQuestion
          currentQuestion++;
          Question.text=questions[0][currentQuestion];
          a1.label=questions[1][currentQuestion];
          a2.label=questions[2][currentQuestion];
          a3.label=questions[3][currentQuestion];
          a4.label=questions[4][currentQuestion];
          Answers.selection = null;
      }
  }
  ]]>
  </mx:Script>
</mx:Application>

我使我的问题数组和索引变量成为全局变量。我知道这不受欢迎,但这很方便。全局变量必须在所有函数之外定义,所以我在这里在代码的开头,在任何函数定义之前立即定义了它们。

在应用程序定义中,我添加了 MXMLcreationComplete="initApp();",它表示在表单初始化后运行函数 initApp。initApp 将问题和答案的默认文本替换为数组第一列的内容。

对于本文,应用程序已完成(清单 4 显示了完整的最终代码)。

Flex 是商业软件,完全不自由(就言论自由而言)。零售价为 249 美元。我使用了试用版,它是免费的(就啤酒而言)。它被标记为 alpha 版本,但它运行得非常好。它确实从未崩溃过。上面列出的缺失功能对我影响不大,但我不是可能依赖于这些功能的经验丰富的 Eclipse 或 Flex 用户。

Adobe 尚未宣布任何发布适用于 Linux 的 Flex Builder 4 的计划。但是,它刚刚将 Flex 3 alpha 版本的免费许可证延长了一年多。我很感兴趣地在 Google Code 上找到了一个 Flex Builder 项目 fb4linux(参见资源)。一位程序员正试图单枪匹马地将 Windows 版本转换为在 Linux 上运行。我安装了它,它似乎运行得非常好。不幸的是,“更多信息”链接指向唯一开发人员 eshangrao 的个人网站,该网站是用中文写的。因为我不懂中文,所以我无法对此说更多。

在我下一篇关于基于 Linux 的 Flash/Flex 开发的讨论文章中,我将评估 Sprouts,一个以 Ruby 为中心的开发环境。与 Flex Builder 不同,Sprouts 在开源许可证(MIT 许可证)下发布。Sprouts 是一个仅限命令行的编译器和调试器,围绕 Rake 构建语言构建。我将概述 Sprouts 的使用、如何将 Flex Builder 项目移植到 Sprouts 环境中,我还将完成我的网络漫画测验的工作,从服务器端数据库读取问题并改进屏幕的外观。

资源

Adobe AIR: www.adobe.com/products/air

Eclipse 平台下载(Flex Builder 3 alpha 使用 3.3.2): archive.eclipse.org/eclipse/downloads/index.php

Flash Player 10 的调试版本: download.macromedia.com/pub/flashplayer/updaters/10/flash_player_10_linux_dev.tar.gz

适用于 Linux 的 Flex Builder 3 Alpha(还包括安装说明): labs.adobe.com/technologies/flex/flexbuilder_linux

适用于 Linux 的 Flex Builder 4: code.google.com/p/fb4linux

Project Sprouts: projectsprouts.org

Flex 示例(非常有帮助): blog.flexexamples.com

Carl Fink 曾担任程序员、作家、培训师、教师和其他几个职位,不是您所说的专家。您可以在 nitpicking.com 阅读他的博客。

加载 Disqus 评论