杰瑞科技汇

flash 2004 教程

Flash 2004 是一个非常经典和重要的版本,它标志着 Flash 从一个简单的动画工具向一个功能强大的富互联网应用程序开发平台的转变,它引入了 ActionScript 2.0,这是一个面向对象的编程语言,极大地扩展了 Flash 的能力。

flash 2004 教程-图1
(图片来源网络,侵删)

这份教程将从 基础入门核心功能,再到 进阶开发,帮助你系统地掌握 Flash 2004。


第一部分:基础入门

认识 Flash 2004 的工作界面

打开 Flash 2004,你会看到几个核心区域,熟悉它们是第一步:

  • 舞台:你进行创作和显示最终内容的区域,就像电影的银幕。
  • 时间轴:这是 Flash 的核心,它用于组织和控制动画内容随时间的变化,时间轴由图层和帧组成。
    • :动画中的一个静态画面。
    • 关键帧:定义了动画变化(如位置、颜色、形状)的帧,Flash 会自动计算两个关键帧之间的过渡。
    • 图层:像透明的醋酸纸一样,可以将不同的内容(如背景、角色、文字)分开管理,互不干扰。
  • 工具栏:包含了所有用于绘制和编辑图形的工具,如选择工具、画笔、钢笔、矩形、椭圆、文本工具等。
  • 属性检查器:这是最智能的面板,当你选中舞台上的任何元素(图形、实例、文本、工具)时,这个面板会显示其属性,并允许你直接修改,选中一个矩形,可以在这里修改它的宽、高、颜色、边框等。
  • 浮动面板:如“混色器”、“库”等,它们可以被拖动、停靠和组合。

小任务:尝试使用不同的工具在舞台上画一个简单的图形,然后通过属性检查器改变它的颜色和大小。


创建你的第一个动画:补间动画

补间动画是 Flash 最基础、最核心的动画技术,分为两种:

flash 2004 教程-图2
(图片来源网络,侵删)

A. 形状补间

用于让一个形状(比如圆形)逐渐变成另一个形状(比如方形)。

步骤:

  1. 在时间轴的第 1 帧,用椭圆工具画一个圆形。
  2. 在第 20 帧,按 F6 插入一个关键帧,你会发现第 20 帧也出现了一个圆形。
  3. 选中第 20 帧的圆形,用选择工具将其修改成一个方形。
  4. 回到第 1 帧,在属性检查器中,将“补间”选项设置为“形状”。
  5. 按下 Ctrl + Enter (或 Cmd + Enter on Mac) 测试影片,你会看到圆形平滑地变成了方形。

B. 动画补间

用于让一个实例(元件的副本)、文字的位置、大小、旋转、颜色等属性发生变化。

步骤:

flash 2004 教程-图3
(图片来源网络,侵删)
  1. 用矩形工具画一个矩形,然后按 F8 将其转换为“图形”元件(非常重要!)。
  2. 在时间轴的第 1 帧,把这个元件实例放在舞台的左边。
  3. 在第 20 帧,按 F6 插入一个关键帧。
  4. 选中第 20 帧的实例,把它拖到舞台的右边。
  5. 回到第 1 帧,在属性检查器中,将“补间”选项设置为“动画”。
  6. 按下 Ctrl + Enter 测试影片,你会看到矩形从左边平滑地移动到了右边。

核心区别

  • 形状补间:作用于“打散”的矢量图形(按 Ctrl + B 打散)。
  • 动画补间:作用于“元件”或“组”。

第二部分:核心概念

元件

元件是 Flash 开发的基石,一旦创建,它就成为库中的一个可重用资源。

  • 三种元件类型
    1. 图形:最简单的元件,主要用于静态图像和受时间轴控制的简单动画(比如你上面做的动画补间)。
    2. 按钮:用于创建交互,它有四种状态:
      • 弹起:鼠标未接触时的状态。
      • 指针经过:鼠标悬停在按钮上时的状态。
      • 按下:鼠标点击按钮时的状态。
      • 点击:定义按钮的响应区域(可以看不见)。
    3. 影片剪辑:这是最强大的元件,它拥有自己独立于主时间轴的时间轴,你可以把它看作是一个“小电影”,可以无限循环、播放其他动画,并且可以通过 ActionScript 控制它。

如何创建元件: 选中舞台上的对象,按 F8,选择类型,命名,点击“确定”。

ActionScript 2.0 基础

Flash 2004 的强大之处在于 ActionScript,我们从最简单的开始。

A. 给按钮添加动作

目标:点击按钮,让一个球移动。

步骤:

  1. 创建一个球(图形元件)和一个按钮(按钮元件),并将它们放在舞台上。

  2. 选中球,在属性检查器中给它一个实例名称myBall

  3. 选中按钮,打开“动作”面板(快捷键 F9)。

  4. 在动作面板中,输入以下代码:

    on (release) {
        // 当鼠标在按钮上释放时,执行下面的代码
        myBall._x = myBall._x + 50; // 将球的 x 坐标向右移动 50 像素
    }
    • on (release) 是一个事件处理函数,表示“当鼠标释放时”。
    • myBall 是你给球设置的实例名称。
    • _x 是对象的 x 坐轴属性。
    • + 50 是一个简单的数学运算。
  5. 测试影片,点击按钮,球就会移动。

B. 控制影片剪辑

目标:点击按钮,播放/停止一个动画。

步骤:

  1. 创建一个影片剪辑,里面有一段简单的动画(比如一个旋转的齿轮)。

  2. 将这个影片剪辑拖到主舞台,并给它一个实例名称,gearMC

  3. 创建两个按钮:“播放”和“停止”。

  4. 选中“播放”按钮,在动作面板中输入:

    on (release) {
        gearMC.play(); // 调用 gearMC 的 play() 方法,让它开始播放
    }
  5. 选中“停止”按钮,在动作面板中输入:

    on (release) {
        gearMC.stop(); // 调用 gearMC 的 stop() 方法,让它停止在当前帧
    }
  6. 测试影片,你会发现按钮可以控制影片剪辑的播放和停止。


第三部分:进阶开发

声音与视频

  • 添加声音
    1. 将你的 .wav.mp3 文件导入到库中(文件 -> 导入 -> 导入到库)。
    2. 新建一个图层,命名为“声音”。
    3. 在你希望声音开始播放的帧上,按 F7 插入一个空白关键帧
    4. 从库中直接将声音文件拖到舞台上,该帧上会出现声波。
    5. 选中该帧,在属性检查器中可以设置声音的同步方式(如“事件”、“开始”、“数据流”等)。
  • 添加视频: Flash 2004 支持导入和播放视频,最常见的方式是使用 Sorenson Spark 编码器(通常随 Flash 一起提供)将视频编码为 .flv 格式,然后在 Flash 中导入并创建一个视频播放器组件。

使用组件

组件是预构建的、可重用的交互式控件,Flash 2004 内置了一些非常实用的组件,可以大大简化开发。

  • 如何使用:打开“组件”面板(窗口 -> 开发面板 -> 组件),直接将组件拖到舞台上即可。
  • 常用组件
    • Button:比自己制作的按钮更规范。
    • CheckBox:复选框。
    • RadioButton:单选按钮。
    • ScrollPane:用于加载和显示外部内容,如文本或图片。
    • TextInput / TextArea:文本输入框和文本区域。

示例:制作一个简单的登录界面

  1. 从组件面板拖出一个 TextInput 到舞台,给它实例名 userNameTI

  2. 再拖出一个 TextInput,设置其“显示为密码”属性为 true,实例名 passwordTI

  3. 拖出一个 Button,实例名 loginBtn

  4. 选中 loginBtn,在动作面板中输入:

    on (release) {
        var uName = userNameTI.text; // 获取用户名输入框的文本
        var pWord = passwordTI.text; // 获取密码输入框的文本
        trace("用户名: " + uName);
        trace("密码: " + pWord);
        // 这里可以添加判断逻辑,if (uName == "admin" && pWord == "123") { ... }
    }
  5. 测试影片,在输入框中输入内容,点击按钮,然后在“输出”面板(窗口 -> 其他面板 -> 输出)中查看结果。


第四部分:发布与优化

发布设置

完成作品后,需要将其发布为可在网页上播放的格式。

  1. 点击 文件 -> 发布设置
  2. 在“格式”选项卡中,勾选你需要的格式,通常是 Flash (.swf)HTML (.html)
  3. 点击 Flash 选项卡:
    • 版本:可以选择播放器版本,为了兼容性,可以选择一个较早的版本,如 Flash Player 7。
    • 动作脚本版本:选择 ActionScript 2.0。
    • 加载顺序:控制影片加载时图层的顺序。
    • 保护:可以防止别人导入你的 .fla 源文件。
  4. 点击 HTML 选项卡:
    • 模板:选择一种在网页中显示 Flash 的方式。
    • 尺寸:可以设置为“匹配影片”或指定像素。
  5. 点击“发布”按钮,Flash 会在你的 .fla 文件同目录下生成 .swf 和 .html 文件。

优化技巧

  • 多用元件,少用图形:重复使用元件可以大大减小文件体积。
  • 尽量使用矢量图形:矢量图比位图(.jpg, .png)通常更小,且无限放大不失真。
  • 谨慎使用位图:如果必须使用,请压缩,并注意尺寸。
  • 优化动画:避免在同一个图层上做复杂的形状补间,尽量将动画放在影片剪辑中。
  • 使用预加载器:对于较大的文件,创建一个简单的预加载器场景,可以在影片完全下载前显示一个加载进度条,提升用户体验。

学习资源推荐

由于 Flash 2004 已经非常古老,现代的在线资源很少,你需要寻找一些经典的老教程:

  1. YouTube:搜索关键词如 "Flash MX 2004 tutorial", "ActionScript 2.0 tutorial for beginners",有很多老外上传的经典系列教程,虽然有些是英文,但画面演示非常直观。
  2. 互联网档案馆:这是一个宝藏网站,搜索 "Flash MX 2004",可以找到很多当年的官方教程、电子书和社区论坛的存档。
  3. 国内的老论坛/博客:如蓝色理想、闪吧等网站,虽然现在已不活跃,但它们的旧帖存档中仍有大量高质量的 Flash 2004 教程,你可以使用百度搜索 site:blueidea.com "Flash MX 2004" 这样的语法来查找。
  4. PDF 电子书:在网络上搜索 "Macromedia Flash MX 2004 Bible" 或类似的书籍,通常能找到扫描版的 PDF,这是系统学习的绝佳材料。

重要提示

  • Flash 已被淘汰:Adobe 已经停止了对 Flash Player 的支持,并且各大浏览器也已默认禁用 Flash 插件,Flash 2004 是一个学习计算机图形学、动画原理和基础编程思想的绝佳工具,但不要用它来制作需要公开发布的现代网页内容
  • 现代替代品:如果你想学习现代的网页动画和交互,请转向 HTML5 + CSS3 + JavaScript (特别是 Canvas API 和 Web Animations API),或者学习 Adobe Animate(Flash 的现代继任者,主要输出 HTML5 Canvas 内容)。

希望这份详细的教程能帮助你顺利入门 Flash 2004!享受创作的乐趣吧!

分享:
扫描分享到社交APP
上一篇
下一篇