本篇内容:认识元件,组件,散件属性
重点内容:元件,组件,散件
工 具:Adobe Animate 2022


一般来讲我们之前了解的那些工具就够我们做简单动画了,还有一些工具没讲不是没用,而是…没想好怎么用,比如3D旋转,平移之类的。我们的目的是做动画。所以认识完基础工具后就开似乎上手动画。后面遇到之前没说的工具,我们在介绍。

元件

元件(Symbol)是指可在动画中重复使用的图形、动画或其他媒体对象。它可以包含独立的时间轴和属性,并可以在动画中多次引用
在这里插入图片描述
元件有以下特点:
在这里插入图片描述

不同元件的作用

在这里插入图片描述

影片剪辑

影片剪辑元件(Movie Clip Symbol)具有自己独立的时间轴和属性。影片剪辑元件可以包含复杂的动画、图形和其他元素,并可以在舞台上多次使用。

影片剪辑元件的主要用途如下:

  1. 重用动画:通过创建影片剪辑元件,可以在动画中多次使用相同的动画效果,而无需每次都重新绘制或编写代码。
  2. 动画控制:影片剪辑元件具有独立的时间轴,可以在元件内部创建和编辑动画效果。这使得在主时间轴上进行整体控制时更加灵活可靠。
  3. 交互性:影片剪辑元件可以与代码交互,并具有自己的事件处理功能。可以为元件添加交互行为,例如按钮点击、鼠标悬停等。
  4. 属性控制:影片剪辑元件的属性可以在其实例上进行修改。可以对每个实例应用不同的动画、颜色和其他样式。
  5. 时间轴嵌套:可以将其他元件(如形状、按钮和其他影片剪辑)嵌套到影片剪辑元件中的子时间轴上。这使得创建复杂的层次结构和嵌套动画变得更加简便。

按钮

按钮元件(Button Symbol)用于创建交互式按钮。按钮元件可以包含不同状态的图形,如正常状态、悬停状态和按下状态,并具有交互功能

以下是按钮元件的主要用途:

  1. 创建用户界面:按钮元件可用于创建交互式用户界面,如菜单、导航栏、控制按钮等。通过按钮元件,可以为用户提供与动画内容进行交互的方式。
  2. 按钮状态切换:按钮元件具有不同状态,可以根据用户交互改变其外观。例如,当用户将鼠标悬停在按钮上时,按钮可以显示不同的颜色或效果。
  3. 添加交互功能:按钮元件可以与操作相关联,如响应点击事件、跳转到其他帧或页面、播放声音或视频等。通过添加交互功能,可以使按钮在用户点击时执行特定的操作。
  4. 自定义样式和外观:按钮元件允许自定义按钮的样式和外观,如颜色、字体、大小、形状等。这使得按钮可以与整体设计风格和主题相匹配。

图形

图形元件(Graphic Symbol)用于创建可重复使用的图形对象

以下是图形元件的主要用途:

  1. 重用图形:通过创建图形元件,可以在动画中多次使用相同的图形,无需每次都重新绘制或导入。
  2. 矢量编辑:图形元件可以包含矢量图形和形状,而且可以在元件内部进行编辑。可以添加、删除、修改图形和形状,以满足设计需求。
  3. 动画效果:图形元件具有独立的时间轴,可以在元件内部创建和编辑动画效果。这使得在主时间轴上进行整体控制时更加灵活可靠。
  4. 嵌套对象:可以将其他元件(如形状、按钮和其他图形元件)嵌套到图形元件中。这使得创建复杂的层次结构和嵌套动画变得更加简便。
  5. 独立属性:图形元件可以具有自己的属性,如缩放、旋转、颜色等。这意味着可以在每个实例上应用不同的属性,以实现更多的样式和效果。

元件特性

F8建立一个元件,在库中可以查看元件。
在这里插入图片描述
如果我复制一下元件改变颜色,所有同名元件都会改变
在这里插入图片描述

组件

组件(Component)用于交互式内容开发的特殊类型元件。它们可以创建可交互的按钮、滚动条、视频播放器等用户界面组件,并允许用户与内容进行互动。

组件的作用

在Adobe Animate中,组件(Component)是一种可重复使用的交互元素,可以用于创建丰富的用户界面和交互式体验。

以下是Animate组件的一些常见用途和示例:

  1. 文本输入框组件(TextInput):用于接收用户的文字输入。可以用于创建表单、搜索框等。 示例:一个登录页面,用户可以在文本输入框中输入用户名和密码。

  2. 按钮组件(Button):用于触发特定的操作,如提交表单、打开链接等。 示例:一个购物网站中的“加入购物车”按钮,点击按钮后将所选商品添加到购物车。

  3. 下拉菜单组件(ComboBox):提供多个选项供用户选择。 示例:一个设置页面,用户可以从下拉菜单中选择语言或主题。

  4. 滑块组件(Slider):用于通过滑动来调整数值或控制音频/视频播放进度。 示例:一个音量控制器,用户可以通过滑动滑块来调整音量大小。

  5. 复选框组件(CheckBox):用于多个选项的多选。 示例:一个电影订票页面,用户可以勾选多个座位来选择座位位置。

  6. 进度条组件(ProgressBar):用于显示任务进度或加载状态。 示例:一个文件上传页面,进度条可以显示文件上传的进度。

组件特性

2个不同的散件叠加会相减。变成组件各管各的重合没有反应方法就是打组CTRL+G(分别打组哈)两个一起打组就一起动了。
在这里插入图片描述
在这里插入图片描述

散件

散件(Decompose)是指将元件或组件分解为其原始形式(例如,将元件分解为其组成的形状和动画)。这使用户可以对元件的每个组成部分进行修改或编辑。

散件作用

在这里插入图片描述

散件特性

我们在An中绘制的基本图形都属于散件。

在这里插入图片描述
两个不同颜色的散件重合会相减
在这里插入图片描述
谁在上面重合的部分就会减掉上面的部分
在这里插入图片描述
同色相加,覆盖上面就会变成一个新图形
在这里插入图片描述
在这里插入图片描述
更多特性我们后面发掘。

元件是可重复使用的对象,组件是用于创建交互式内容的特殊类型元件,而散件是将元件或组件分解为其原始形式的过程。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐