Silverlight Blend 动画设计与实例

Silverlight & Blend动画设计与实例

前言： (2)

偏移动画（TranslateTransform） (4)

旋转动画（RotateTransform） (7)

缩放动画（ScaleTransform） (11)

倾斜动画（SkewTransform） (16)

故事板(StoryBoards)和动画(Animations) (19)

动画技巧（Animation Techniques）之对象与路径转化、波感特效 (29)

模糊效果（BlurEffect）与阴影效果 (34)

拖放(Drag-Drop)操作与拖放行为 (38)

动画（Animation）与视图状态管理 (45)

坐标系统（Coordinate System）与向量（Vector）运动 (51)

沿路径动画 (54)

三角函数（Trigonometry）动画之自由旋转（Free-form rotation） (58)

三角函数（Trigonometry）动画之飘落的雪花（Falling Snow） (64)

前言：

Microsoft Expression Blend作为一款功能齐全的专业设计工具，可用来针对基于 Microsoft Windows 和基于 Microsoft Silverlight 1.0 的应用程序制作精美复杂的用户界面。Expression Blend 可让设计人员集中精力从事创作，而让开发人员集中精力从事编程工作。

Expression Blend 的工作原理

在 Expression Blend 中，您可以在美工板上绘制形状、路径和控件，然后修改其外观和行为，从而直观地设计应用程序。您可以导入图像、视频和声音。在基于 Windows 的应用程序中，还可以导入和更改三维对象。

您可以创建用于动态显示设计的可视元素或音频元素的 Storyboard，并可以选择在用户与应用程序进行交互时触发这些 Storyboard。在处理基于 Windows 的应用程序时，您可以重新设计已应用于基本控件的模板，使应用程序具有独特的外观和行为。

在处理应用程序时，您可以随时使用编程人员正在处理的代码隐藏文件或自定义控件文件来更新您的项目。

与 Expression Blend 结合使用的其他工具

您可以将 Microsoft Expression Design 2 生成的图形和可扩展应用程序标记语言 (XAML) 资源导入到 Expression Blend 2 项目中。您还可以导入在 Microsoft Expression Encoder 2 中创建的 Silverlight 1.0 媒体项目，以将新的功能或可视元素添加到项目中，或者修改可在Expression Encoder 2 中重用的媒体播放器模板。

您可以将 Silverlight 1.0 导入到 Microsoft Expression Web 2 项目中，以添加更多 Web 内容或发布站点。

Microsoft Visual Studio 2008 可以与 Expression Blend 2 完美地结合使用，以在您指定要侦听的事件时自动更新项目中的代码隐藏文件。从 Expression Blend 2 的“项目”面板中，可以打开各个代码隐藏文件或整个项目。还可以使用 Visual Studio 2008 的部署工具来部署您的应用程序。

Expression Blend 生成的内容

Expression Blend 将生成 Windows Presentation Foundation 应用程序，这意味着，所显示的设计方案是由 XAML 来表示的。正如 HTML 是Web 应用程序标记语言一样，XAML 是 Windows Presentation Foundation (WPF) 的标记语言。有关 XAML 和 WPF 的详细信息，请参阅 XAML 编辑和学习资源和社区资源。

Expression Blend 附带的功能

Expression Blend 2 包括以下功能：

全套矢量绘图工具，包括文本工具和三维 (3D) 工具；

易于使用且新颖的可视界面，带有可停靠的面板和面向对象的上下文菜单；

实时动画；

三维和媒体支持，可增强用户体验；

先进、灵活且可重用的自定义和外观选项，适用于各种常用控件；

强大的数据源和外部资源集成点；

实时的设计和标记视图；

从 Expression Design 2 导入作品的功能；

从 Expression Encoder 2 导入站点的功能；

可以与 Visual Studio 2008 交互使用，从而帮助设计人员和开发人员更紧密、更有效地进行团队协作。

目标应用程序类型

Expression Blend 2 已经过优化，可以生成以下类型的应用程序：生产类应用程序有助于提高广大客户的生产力及效率的应用程序以及行业应用程序，如 Microsoft Office。

消费类应用程序媒体播放器、安全工具和桌面小工具等应用程序。

游戏简单的娱乐性桌面或联机游戏。

信息查询终端在信息查询终端上运行的应用程序，用户可与其交互以获取信息、查看产品目录、在机场办理登机手续等。

IT 专业工具专门针对特定的公司或客户需要执行小型作业的工具（如错误跟踪工具）。

最佳实践

有些设计创意非常好，因为它们能够提高易用性。下面是一些借助Expression Blend 2 和 Microsoft .NET Framework 3.5 提高易用性的常用方法：

按照现实世界建模：可以使用自定义的可视效果和交互功能，使特定控件的外观和行为均与其现实世界的对应物类似。如果用户熟悉现实世界的对象并且现实世界的方法是完成该任务的最佳、最有效方法，这种技术就是最佳选择。例如，简单的工具（如计算器）按照现实世界的对应物进行建模就很有效。

展示而不是解释：可以使用动画和过渡来展示关系、原因和效果。此技术最适用于提供需要通过额外的文字来解释内容以免用户误解的信息。例如，幼儿书籍可以动态显示翻页，以展示控件的工作方式。

提高功能可见性：功能可见性是指对象直观表明其使用方式的特性（而不是使用标签来解释）。可以使用自定义控件的可视效果和动画功能，直观表明如何使用非标准的控件。

使用自然对应：自然对应是用户要完成的任务与完成任务的方法之间的一种清晰联系。在标准的常用控件不能提供自然对应时，可以使用自定义外观和交互功能来建立自然对应。

降低知识门槛：可以使用自定义交互功能，限制执行某项操作的方式并降低执行某项任务所需的知识门槛。

改进反馈：可以使用自定义控件的可视效果和动画功能来提供反馈，以显示用户的操作是否正确或者显示操作进度。例如，Windows Vista 的Internet Explorer 中的地址栏会在背景中显示加载页面的进度。

使对象更容易交互: 称为费茨法则的人类动作模型指出，单击目标所需的努力与目标的距离成正比，而与目标的大小成反比。例如，可以使用动画使得指针在靠近对象时变大，而在远离对象时变小。这样做，就更容易单击对象。此外，还可使对象变小，从而更有效地利用屏幕空间。

聚焦：可以使用丰富的布局和自定义可视效果，突出显示任务必需的屏幕元素，或者淡化次要元素。

Expression Blend 3 Plus SketchFlow：设计与构建桌面和Web程序的视觉化工具。现已有RC候选版可下载。

偏移动画（TranslateTransform）

用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼，除此之外，Silverlight还具备动画功能，它可以让应用程序“动起来”。实际上，英文中Animation这个单词的意思是给某物带来生命。在界面中添加动画效果，给人以印象深刻可视化提示，可以让用户的注意力集中到我们想让他们关注的地方。

动画主要是通过计时器来完成，在Silverlight中开发动画程序通常是使用微软主推的设计工具Microsoft Expression Blend，Silverlight 中提供了优秀的动画系统，我们可以通过Microsoft Expression Blend 快速的完成动画元素的设计制作，然后通过Visual Studio 作为编码环境进行后面的管理动画定时器和刷新用户界面的工作。当使用Microsoft Expression Blend 时，可以用拖拽的方式在时间线中进行动画的定义，这样可以很容易快速定义负责的动画,因为 Microsoft Expression Blend 将自动生成对应的XAML代码。

Silverlight中的偏移动画和Flash中的补间动画基本一样，其实很好理解，也就是一个动画元素（组件）从一个位置移动到另一个位置，这个过着中有三个关键点：动画起点、动画终点和动画时间。这三点可以理解为一个动画元素从始点坐标向终点坐标偏移的缓冲时间是多少。

当我们定义好了动画元素后，可以直接通过Blend中的对象和时间线面板来为动画元素添加动画容器时间线（Storyboard），如下图所示：

当动画容器时间线创建好后，只需要选中需要进行创建动画的元素，然后再属性面板下进行可视化属性设置就可以完成动画的创建，如下图示为创建元素darkMoon的偏移动画。

通过上面的一系列操作设置后切换到XAML视图，可以发现在XAML编码文件里Blend自动生成了如下代码片段，其作用就是为名为“darkMoon”的动画元素创建两个方向（X,Y）的偏移动画。

Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">

Value="280"/>

Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.Y)">

Value="-245"/>

< /Storyboard>

上图为动画执行过程截图，在某些情况下要实现一些动画效果是不能预先确定的，这就需要在程序编码中去动态的创建动画效果。使用Blend进行动画设计是非常简单的，尤其是对Adobe Flash熟悉的人员，其实在程序编码中使用程序创建动画也一样的简单，相比之下只是需要人为的去编写很多的程序代码，另外就是通过程序代码动态的创建动画效果需要开发人员对 Silverlight的动画框架非常熟悉，只有在熟练应用Silverlight动画框架所提供的动画接口的情况下才能够和使用 Blend设计动画一样随心应手实现各种不同的动画效果。

编写程序代码创建动画其实也是非常简单的，只要理清了思路和熟练应用Silverlight的动画框架提供的编程

接口就可以完成动画的开发。首先需要弄清楚动画容器时间线、动画动作、动画类型、动画效果等基本概念。就以本篇的示例来分析，通过程序动态的创建动画效果的代码如下：

///

private void CreateStoryboard()

{

//元素当前所在的坐标点

Point currentPoint = new Point (Canvas.GetLeft(darkMoon), Canvas.GetTop(darkMoon));

//目标点坐int 标

Point point = new Point(280, -245);

//创建动画容器时间线

Storyboard storyboard = new Storyboard();

DoubleAnimation doubleAnimation = new DoubleAnimation();

//创建X轴方向动画

doubleAnimation.From = currentPoint.X;

doubleAnimation.To = point.X;

doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1));

Storyboard.SetTarget (doubleAnimation, darkMoon);

Storyboard.SetTargetProperty (doubleAnimation,

new PropertyPath

("(UIElement.RenderTransform).(TransformGroup.Children)[3]. (TranslateTransform.X)"));

storyboard.Children.Add (doubleAnimation);

//创建Y轴方向动画

doubleAnimation = new DoubleAnimation();

doubleAnimation.SetValue (DoubleAnimation.FromProperty, currentPoint.Y);

doubleAnimation.SetValue(DoubleAnimation.ToProperty,

point.Y);

doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 1)));

Storyboard.SetTarget(doubleAnimation, darkMoon);

Storyboard.SetTargetProperty(doubleAnimation,

new PropertyPath("(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.Y)"));

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

}

旋转动画（RotateTransform）

Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画，这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果，其使用也是非常简单的。相信看过上一篇《偏移动画（TranslateTransform）》文章的朋友大多数

对Silverlight & Blend动画设计已经产生了莫大的兴趣，本篇将继续介绍Silverlight中的基础动画之旋转动画（RotateTransform）。

所谓旋转动画（RotateTransform）也就是一个元素以一个坐标点为旋转中心点旋转，在使用旋转动画（RotateTransform）的时候需要注意的有两点：旋转中心点（Center）和旋转角度(Angle)。同样当我们设计好动画元素后要为其创建动画效果，首先得添加动画容器时间线（Storyboard），直接在Blend设计界面既可完成该操作。如下图所示：

当动画容器时间线创建好后，只需要选中需要进行创建动画的元素，然后再属性面板下进行可视化属性设置就可以完成动画的创建，转到“转换”属性面板，然后选择“旋转”，可以看到如下图所示的属性设置面板。

如上图示，将动画旋转角度(Angle)设置为了360，这表示动画作用元素将以旋转中心坐标进行旋转360度。此时切换到XAML编码视图可以发现Blend自动生成了如下动画代码块：

Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[2].(RotateTransform.Angle)">

Value="360"/>

< /Storyboard>

执行这个旋转动画可以看到效果，名为“fan”的元素将在一秒钟内旋转360度。同样也可以通过编程的方式来动态的创建该旋转动画，详细如下代码块：

private void CreateStoryboard()

{

//创建动画容器时间线

Storyboard storyboard = new Storyboard();

//创建旋转动画

DoubleAnimation doubleAnimation = new DoubleAnimation();

doubleAnimation.To = 360;

doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1));

Storyboard.SetTarget(doubleAnimation, fan);

Storyboard.SetTargetProperty(doubleAnimation,

new PropertyPath("(UIElement.RenderTransform). (TransformGroup.Children)[2].(RotateTransform.Angle)"));

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

}

或许有人会问，旋转动画我该怎么去用，什么样的场景适合使用旋转动画？其实很多地方都可以使用旋转动画，比如游戏中的地图场景中的风车，实际上也就是一个旋转动画效果，旋转动画下面是一条线作为风车的柱子。我们直接在本文的示例项目中加入一条竖线，线的一端对应于旋转动画的中心，通过Blend 设计后动态生成的XAML编码如下：

Height="194.494" Width="1" UseLayoutRounding="False"

Canvas.Left="303" Canvas.Top="184"

Data="M408,256 L408,449.49417" StrokeThickness="6" Opacity="0.78"

StrokeStartLineCap="Round"

StrokeEndLineCap="Round">

< /Canvas>

注意上面设置ZIndex值是为了将线条呈现到旋转动画的后面去，这样给人一种旋转动画是在线条的一端不停的选择，看起就像是一个风车在旋转一样，实际上就是一种视觉欺骗，记得我一个做3D游戏开发的朋友给我说过，3D游戏里的大多数效果全都是视觉欺骗，嘎嘎 ~~~~~~~~~~,OK,现在运行动画的效果则如下截图：

这样的效果貌似不好看，我们可以为其他加入背景图片进行装饰，根据背景图片进行调整适当的位置、元素颜色、形状等，以更为真实的效果呈现在用户面前。具体的调整过程这里就不作过多的介绍，给个上了背景的截图演示下吧：

缩放动画（ScaleTransform）

在Silverlight的动画框架中，ScaleTransform类提供了在二维空间中的坐标内进行缩放操作，通过 ScaleTransform可以在水平或垂直方向的缩放和拉伸对象，以实现一个简单的缩放动画效果，故此我将其称为缩放动画（ScaleTransform）。使用ScaleTransform需要特别关注的有两点：中心点坐标和X、Y轴方向的缩放比例，比例值越小则对象元素就越小（既收缩），比例值越大则对象元素就越大（既呈现为放大效果）。

Blend对Silverlight里的动画设计支持非常强大，同偏移动画、旋转动画一样简单，要实现缩放动画也只需要对设计好的动画元素进行简单的设计就能完成动画效果的创建。

通过创建动画容器时间线后，如上图进行动画效果属性的设置，Blend便会生成相应的动画编码在XAML文件里，详见如下代码块：

Storyboard.TargetProperty="(UIElement.RenderTransform).

(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

Value="0.15"/>

Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

Value="0.15"/>

< /Storyboard>

任何一个元素对象，其缩放动画（ScaleTransform）的默认值为（1，1），既保持元素原样不变。如前面所说，比例值越小则对象元素就越小（既收缩），比例值越大则对象元素就越大（既呈现为放大效果）。如上示例就是将缩放比例值设置的0.15，其运行效果如下图所示：

如果上图动画效果使用程序编码去实现，同样的也是很简单的，主要就是利用动画根据时间去控制对象的ScaleTransform变换效果的ScaleX和ScaleY值，详细如下：

///

public void CreateStoryboard()

{

//创建动画容器时间线

Storyboard storyboard = new Storyboard();

//创建X轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒

DoubleAnimation doubleAnimation = new DoubleAnimation();

doubleAnimation.To = 0.15;

doubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 3));

Storyboard.SetTarget(doubleAnimation, truck);

Storyboard.SetTargetProperty(doubleAnimation,

new PropertyPath("(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));

storyboard.Children.Add(doubleAnimation);

//创建Y轴方向的缩放动画,设置对象缩放到0.15,置对象缩放缓存时间为3秒

doubleAnimation = new DoubleAnimation();

doubleAnimation.SetValue(DoubleAnimation.ToProperty, 0.15);

doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 3)));

Storyboard.SetTarget(doubleAnimation, truck);

Storyboard.SetTargetProperty(doubleAnimation,

new PropertyPath("(UIElement.RenderTransform). (TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

}

如上示例，如果将移动的对象换成一个“车”，执行动画的时候就感觉是一辆车在马路上行驶了。缩放动画（ScaleTransform）在平时的开发中非常适用，不如界面上有一个组件，默认为缩放一半显示，当用户的鼠标指向它的时候将对象放大到正常比例（x,y=>1,1）显示，鼠标离开的时候将对象恢复到默认大小（x,y=>0.5,0.5），此时就可以使用缩放动画（ScaleTransform）去实现。

ScaleY="0.5"/>

< /Ellipse>

ellipse.MouseEnter += (mes, mee) =>

{

Storyboard storyboard = new Storyboard();

DoubleAnimation doubleAnimation = new DoubleAnimation ();

doubleAnimation.To = 1;

doubleAnimation.Duration = new Duration

(TimeSpan.FromMilliseconds(300));

Storyboard.SetTarget(doubleAnimation, ellipse);

Storyboard.SetTargetProperty(doubleAnimation,

new

PropertyPath("(UIElement.RenderTransform).

(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));

storyboard.Children.Add(doubleAnimation);

doubleAnimation = new DoubleAnimation();

doubleAnimation.To = 1;

doubleAnimation.Duration = new Duration (TimeSpan.FromMilliseconds(300));

Storyboard.SetTarget(doubleAnimation, ellipse);

Storyboard.SetTargetProperty(doubleAnimation,

new

PropertyPath("(UIElement.RenderTransform).

(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

};

ellipse.MouseLeave += (mls, mle) =>

{

Storyboard storyboard = new Storyboard();

DoubleAnimation doubleAnimation = new DoubleAnimation ();

doubleAnimation.To = 0.5;

doubleAnimation.Duration = new Duration (TimeSpan.FromMilliseconds(300));

Storyboard.SetTarget(doubleAnimation, ellipse);

Storyboard.SetTargetProperty(doubleAnimation,

new

PropertyPath("(UIElement.RenderTransform).

(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));

storyboard.Children.Add(doubleAnimation);

doubleAnimation = new DoubleAnimation();

doubleAnimation.To = 0.5;

doubleAnimation.Duration = new Duration (TimeSpan.FromMilliseconds(300));

Storyboard.SetTarget(doubleAnimation, ellipse);

Storyboard.SetTargetProperty(doubleAnimation,

new

PropertyPath("(UIElement.RenderTransform).

(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

};

PS:上面代码块仅是为了掩饰缩放动画（ScaleTransform）的使用，如果真要实现圆形对象的鼠标指向放大，移开恢复原状的效果只需要直接设置其宽度（Width）和高度（Height）属性就可以了。

倾斜动画（SkewTransform）

Silverlight中的倾斜变化动画（SkewTransform）能够实现对象元素的水平、垂直方向的倾斜变化动画效果。我们现实生活中的倾斜变化效果是非常常见的，比如翻书的纸张效果，关门开门的时候门缝图形倾斜变换。在Silverlight中实现一个倾斜变化的动画效果是非常简单的，如果利用Blend这种强大的设计工具来实现那更是锦上添花。

倾斜效果的动画应用效果其实非常好看，使用倾斜变换需要注意的有两点：倾斜方向和倾斜中心点。可以以某点为倾斜中心点进行X或Y坐标方向进行倾斜，如下以默认中心店进行的各种不同程度倾斜的简单示例：

AngleY="0">

AngleY="-5">

AngleY="15">

< /Grid>

如果使用Blend来设计倾斜效果的变换动画就非常简单了，只需要在属性面板里设置相关的实现就可以完成整个倾斜变换动画的设计，如下绘制了一扇门并

为其设置开门的效果，开门的时候门缝间的呈现效果就是以倾斜变换的效果实现的：

查看XAML文件可以发现，Blend生成了如下代码，用于实现开门的效果，需要注意的是这里应用到了倾斜中心点，们是朝一个方向（X）开关，其呈现的倾斜效果就是Y坐标方向的倾斜变换。如上图所示，设置了Y坐标方向倾斜-17，既形成门向水平下方向倾斜效果。

Storyboard.TargetName="door"

Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">

Value="1,0.5"/>

Value="1,0.5"/>

Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGrou p.Children) [1].(SkewTransform.AngleY)">

Value="-17"/>

< /Storyboard>

故事板(StoryBoards)和动画(Animations)

正如你所看到的，Blend是一个非常强大的节约时间的设计工具，在Blend下能够设计出很多满意的动画作品，或许他具体是怎么实现的，通过什么方式实现的我们还是一无所知。本篇将续前面几篇基础动画之上，详细介绍Silverlight 里提供故事板（StoryBorards）的属性和各种不同类型的动画（Animations）的详细知识点，揭晓在Blend下设计动画的内幕故事。

一、故事板（StoryBoard）属性

Silvelight中的故事板（StoryBoard）提供了管理时间线的功能接口，可以用来控制一个或多个Silverlight动画进程，故我也称其为动画时间线容器。如下XAML代码块演示了通过 StoryBoard来管理了名为GreenBall的元素在X坐标方向上的偏移变换动画。

Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">

Value="540"/>

< /Storyboard>

StoryBoard提供了六个常用的动画属性选项，它们分别是：

AutoReverse,BeginTime,Duration,FillBehavior,RepeatBehavior,SpeedRatio 。通过这六个属性可以用来控制动画的基本行为动作，比如想要实现动画的缓

冲时间，就需要用到 Duration属性；设置动画的开始时间则用 BeginTime；如果动画执行完后根据执行路线反向执行到原始状态则需要使用AutoReverse;如果需要设置动画的运行速度则使用 SpeedRatio就可以完成。以下代码块演示了AutoReverse属性的使用，动画运行完后将按着原来的运行路线进行反向运行。更多详细可参考这篇博文介绍：《动画基础快速入门Animation》或者MSDN。

Storyboard.TargetProperty="(UIElement.RenderTransform). (TransformGroup.Children)[3].(TranslateTransform.X)">

Value="540"/>

< /Storyboard>

Storyboard的属性是可以组合应用的，如上代码块给动画设置了AutoReverse

属性，使其在动画执行完后通过原来的运行路径进行回滚动画，可以给该动画时间线容器添加一个 BeginTime属性，使其在程序加载后5秒钟才开始执行动画，这样就使用到了两个属性，如下代码块：

BeginTime="00:00:05">

......

< /Storyboard>

二、动画类型（Types of animation）

Silverlight中的动画主要分From/To/By和关键帧动画两种类型。

From/To/By动画也称为线性插值动画（Linear Interpolation），是Silverlight 类型中最简单的一种动画，只需要设置开始（From）、结束（To）和动画值（By）就可以完成动画的创建，Silverlight 3中提供了三种基础的From/To/By动画类型：DoubleAnimation、 ColorAnimation和PointAnimation.

关键帧动画比From/To/By动画更加强大，无需指定动画的开始、结束以及动画缓冲时间等相关参数，只需要关注关键帧和如何去控制动画就行了。Silverlight 3中提供了四种基本的关键帧动画：缓和(Easing)、线性(Linear)、样条(Spline)和离散(discreet)。

DoubleAnimation的使用是非常简单的，只需要搞清楚From/To/By三要素就基本掌握了该类型动画的使用，下面是一个简单的通过DoubleAnimation实现的圆形移动的示例。

Flash动画制作实例——以地球的自转为例

Flash动画制作实例——以地球的自转为例 1教学诊断、课件选型 （1）教学诊断：学科特点，地球自转在初中地理教学中占有非常重要的地位，既是教学的重点，也是教学的难点所在。学生特点，对于刚进入初中的初中生来说，一下子要他们接受地球自转这一节抽象难懂的内容，对学生们来说是非常吃力的，所以急需一种简单易懂的教学方式来传授这节课的内容。 （2）Flash课件选题与选型 针对地球的自转是一节涉及地球的运动和变化的内容，所以选择动画的形式呈现给学生是再好不过了。 2教学目标确定及教学设计 教学目标：让学生们通过观察从南极与北极的上空观察到的地球自转方向来帮助学生学习和了解本节内容。 教学总体设计：本例是根据全日制普通初级中学教科书（人教版·地理）七年级上册“地球运行基本方式——自转和公转”一节中的内容制作的课件。因为本节课的内容涉及地球的自转运动和变化，内容抽象需要极强的空间想象能力，所以本课件将通过动画分别演示从南极与北极的上空观察到的地球自转方向来让学生学习南极上空看地球自转的方向是顺时针旋转的，而从南极上空看的时候是逆时针旋转的教学内容。 3 素材准备 构成本课件的基本元素包括课件封面、“北极动画”电影片段符号、“南极动画”电影片段符号组成。制作课件时，首先要创建相应的符号，再将符号拖入场景。 4 课件制作 下面将通过一个实例操作来演示整个Flash地理课件制作过程。 课件制作过程 4.1设置文件属性

在课件制作前，先设置好文件的属性。Flash文件属性主要包括动画的尺寸、背景颜色、动画播放速度等参数。 4.2文件保存 在课件制作的过程中，每隔一段时间，要单击“保存”按钮，保存对文件的修改，以免由于停电或死机等原因造成不必要的损失。 4.3制作课件封面 本课件运行界面由图形及文字构成。Flash中绘制的图形的边框线，称为线条或边框。线条的基本属性包括颜色、粗细、线型等。边框所包围的区域称填充区域，填充区域的颜色称为填充色。文字的输入是通过“文字”工具完成的，文字的属性包括字体、字号、文字颜色等。如图7，图8所示 图7 设置图形填充色图8 设置“信息”面板 4.4创建“北极”图形符号 符号是指一个可重复使用的图像、动画、按钮。可分为图形符号、按钮符号、电影片段符号三种。 色向外渐变成淡蓝的填充色。 ⑶按上述方法，第二个的半径设置为130，第三个和第四个为80、70，并使三个圆的中心点与符号编辑窗口中心店对齐，并将其中的两个圆改为虚线，如图10所示效果。单击“时间轴”面板layer1图层第1针将该帧所有图形选中，并按Ctrl+G键，将选中的图形组合起来，并将其锁定。

Flash动画制作用什么软件 Flash动画如何制作

Flash动画制作用什么软件，Flash动画如何制作 很多人不知道从哪找一款合适的flash动画制作，特别是一些新手跟业余爱好者，他们更是不知所措。有关flash 动画制作软件，本人首先推荐万彩动画大师。相对于传统的Flash,万彩动画大师（https://www.sodocs.net/doc/651258141.html,）功能更加强大，操作也没那么复杂。它支持XP, Vista, Win7, Win8, Win10系统。简单易操作的界面可以让flash 动画设计者更轻松的完成制作。支持视频输出，最重要的是这款多功能的动画可以免费使用。 这款软件有很多特色之处，下面我将大致地概括一下： 1. 海量精美动画模板——内置大量简洁大方的动画模板，涵盖多个主题内容，轻松下载并替换模板内容便可快速制作出酷炫的动画宣传视频。

2. 海量精致高清场景、图片视频背景、动画角色（Flash、PNG 和GIF）和矢量图片素材库——场景涵盖医疗、健康、户外、室内等多个主题，图片视频背景简洁大气，动静态动画角色栩栩如生，矢量图片生动丰富，能整体提高动画视频的质感与美感。 3. 万彩动画大师可以添加很多元素物体，包括图形、图片、文本、SVG、气泡、音乐、视频、SWF、特殊符号，以及Flash、PNG、GIF角色等。我们制作微课可以直接在此添加文字而不用另外准备ppt教学课件，这样就省了一道工序；精美丰富的动画角色、SVG和图片也可随意添加，从而让微课演示更生活有趣，不至于乏味。 4. 别出心裁的镜头特效——缩放、旋转、移动的镜头特效让动画视频镜头感十足，流畅的镜头切换特效让视觉效果非常出彩。 5. 酷炫的动画特效——简单自定义文本和场景元素的进场、强调和退场动画特效，包括时下流行的手绘动画特效，让场景元素随心所动，让动画视频妙趣横生。 6. 自定义背景音乐，支持配音与字幕制作——可添加背景音乐增强视频画面氛围，还可给场景内容添加合适的配音与字幕，增强视频信息传递的有效性和观众的视觉体验。 7. 万彩动画大师的文件输出让人放心，播放起来很流畅。我们可将微课输出到云，然后分享到微信；也可直接输出成视频，包括576P、720P HD、1080P HD等多种大小，以及mp4、wmv、avi、flv、mov、mkv等多种格式。

Flash动画实例

Flash动画实例:柳枝,小鱼,涟漪与水波动画 本flash教程就是关于动画的制作,主要由柳枝的制作方法、小鱼制作方法、涟漪的制作方法、水波的制作方法几个部分组成,希望对您有所帮助！ 有一些朋友虽然有点绘画功底,但苦于没有扫描仪、手绘板等等专业工具,总不能得心应手。其实只要您有一只不错的鼠标,利用好Flash中自带的绘画工具,再加上细心与耐心,即使没有受过专业绘画训练,您也一样可以制作出很漂亮的动漫画效果。下面我们一起来瞧瞧Flash鼠绘春之恋的制作效果与绘制过程吧！ 新建550*400文档。 一、柳枝的制作 1、新建元件,图形,名称柳枝1。 用笔刷工具,颜色:A9A945,画一条柳枝,(也可以用直线等其她工具来画)。 再用笔刷工具画出叶子,放射状填充,左色标,009900,右色标99CC33。 图1 2、新建元件,影片剪辑,名称:柳枝动1。

从库中把柳枝1拖进来,点变形工具,把注册点移到柳枝的根部。第14与34帧插入关键帧,创建动画补间。 图2 在第14帧,把柳枝旋转一定的角度。 图3 3、按照上面的方法,再画2、3个不同的柳枝,然后制成柳枝动的元件,每个元件帧长短不一,旋转角度大小不一(但不要变化太大),这样柳枝飘动瞧起来自然些。 二、小鱼制作

1、新建元件,影片剪辑,名称:鱼1。 选择椭圆工具与矩形工具,笔触色任意,填充色禁止,把对象绘制点下去,在属性栏里,设置为极细,场景放大到800倍。 画一个椭圆与长方形。 图4 Webjx、Com 用黑箭头工具配合ALT键调整成鱼形。 Webjx、Com 图5 网页教学网 画眼,嘴,鳍等。 图6 全选中,ctrl+B打散,填充颜色, 鱼身,鱼尾,线性:左8C8C8C,中C8C8C8,右848484 鱼鳍,线性,左BBBBBB,右999999 眼,纯色,黑色,

计算机动画制作软件Flash

第四章计算机动画制作软件Flash MX 本章主要学习的内容： 熟悉计算机动画制作软件Flash MX、Flash MX基本操作，等等。 需要掌握的内容： Flash软件动画制作的操作方法 第一节 Flash MX的基本操作 在F1ash MX软件中，灵活掌握各种绘图工具，是直接绘制简单明了的图形，并把这些简单的经过加工组合，最后成为一幅完整的Flash作品的保证。下面就对Flsah MX进行介绍。 Flash MX的工作主界面如图1所示。主界面中的“舞台”就是以后设计、描述并最终完成整个F1ash 作品的主要活动场所，下文中将多次提到它，即是指完成Flash作品的这个“舞台”环境。 图1 Flash MX的界面 在主界面中，执行“窗口→工具”菜单命令，即显示绘图工具箱，如图2所示。在工具箱中单击选中的工具图标使其反白，即可设置该工具为当前选择工具。利用工具箱中的工具为Flash作品添加各种

各样的文字、图形、填充颜色以及对这些史字和图形进行修改和编辑。 一、绘图工具说明: (1)箭头工具利用箭头工具可以选择整个图形或只选择部分图形进行复制、移动、变形等操作。单击可选中整个对象。也可以用箭头工具拖出一个矩形区域，将区域中的对象全部选中。利用箭头工具，还可以对图形对象进行编辑，将箭头工具放置在图形对象的线型上，箭头工具变为形状。按住鼠标向任意一个方向拖动，即可改变当前图形的形状，如上图3所示。 (2)部分选取工具利用部分选取工具选择对象后，对象边框以路径方式显示，编辑路径上的节点可以更改对象的形状。 对于由内部填充的图形，编辑节点位置后，其内部的填充也会自动随之发生变化，如图4所示。 (3)线条工具和铅笔工具线条工具和铅笔工具都是绘制线条的工具：使用线条工具能绘制不同角度的直线，如果按住【Shift】键并拖动鼠标可绘制角度为45°倍数的线条；使用铅笔工具可绘制自由手画式的线条，并在工具箱下部的选项区选择绘图模式，如果按住【Shift】键并拖动鼠标可绘制水平或竖直的直线。 (4)套索工具使用套索工具，可以通过勾画不规则的区域来选择对象，通过设置选项，可用多边形模式或魔术棒模式来选择对象，如图5所示。

Flash8.0-动画制作实例教材

FLASH动画制作实例教材 一、熟悉Flash界面 二、动画的原理 看下面几幅画面: 图2-2 图2-3 图2-4 图2-5 图2-2中飞机位于图片的最左边， 图2-3中飞机位于图片的中间， 图2-4中飞机位于图片的最右边。当我们将这三幅画面依次按照一定速度播放的时候，给我们的视觉效果就是看上去感觉飞机在从左向右飞行，如图2-5所示。 动画就是由一系列近似的画面按照一定的顺序和速度进行播放而产生，它是欺骗人视觉效果的一种把戏。 三、帧/关键帧/空白关键帧 由动画的原理我们知道，动画就是画面的连续播放所产生的，电影是每秒播放24幅画面，电视则每秒播放25幅画面，Flash默认每秒播放12幅画面（可以修改）。每一幅画面我们都称它为一个帧， 记住： 一个帧就是一幅画面（暂不管这个画面是真实的还是虚幻的）！

如图2-6所示上面的每个小格子就是一个帧，每个格子都分别代表着一幅画面，播放时按照帧的先后顺序由左向右 进行。你也许会问：“上面帧怎么还不一样啊？”对了，正是因为它们不一样才有了帧、关键帧、空白关键帧（也 叫白色关键帧）这些名词。 空白关键帧 我们先看第一个小格子，它里面有一个白色的小圆圈，它就是空白关键帧，里面什么内容都没有，一片空白。用鼠标单击一下该空白关键帧，结果我们在下面的场景里看到的是一片空白区域如图2-7所示： 关键帧 第二个小格子里面是个实心的小黑点，它就是关键帧，里面有实际存在的内容，用鼠标单击该关键帧（或用鼠标按住帧上面红色滑块向后拖动到该帧），我们看到了一个黑色的圆，如图2-8所示： 看来，关键帧和空白关键帧的区别就在于关键帧有实际的内容而空白关键帧没有。空白关键帧+内容（比如画个圆）=关

(完整word)(整理)KingSCADA初级教程第五章动画连接与脚本程序.

第五章动画连接与脚本程序 本章内容 基本动画连接 系统脚本 自定义脚本 概述 为了使设计的画面与现场设备情况同步动起来，就要进行动画连接。动画连接主要实现监视与控制功能。 所谓动画连接就是建立画面的图素与数据库变量的对应关系，使得变量数值的改变会反应到图形对象的外观的变化，这就是监视；将用户的动作与系统的行为联系起来，以便改变某些监控变量的值或执行一段动作，这就是控制。 第一节基本动画连接 前面一章我们在讲精灵图和图形模型的制作时已经用到了动画连接了，不同的图素动画连接也不一样。下面我们就有选择的介绍几种动画连接，在这里没有介绍到的动画连接请大家课后参考操作手册自己练习使用。 水泵以及阀门的状态指示： 本培训工程中有三个水泵，我们以水泵1为例，在水泵上制作一个指示灯来动态显示水泵的启停状态。 我们在水泵上面画一个圆作为指示灯的图素，设置画刷属性，属性设置完成后我们设置动画连接，选择右侧连接，点击，如图5-1所示，选择“属性－画刷” 图5-1 动画连接

弹出如图5-2所示动画连接画面，选择变量类型为离散类型变量。 图5-2 动画连接设置 点击选择变量\\local\valve_gate1。然后进行配置，条件为“true”时，选择颜色为绿色，为“false”时，选择颜色为红色。如图5-3所示。配置完成后点击“确定”完成水泵状态的颜色指示设置。 同样的方式我们可以设置其他的水泵以及阀门的状态指示。注意关联的变量不要错了。 图5-3 动画连接设置

液位的报警指示： 我们做一个原料罐与催化剂罐的液位的报警指示灯。我们利用闪烁与隐含的动画连接来实现。 首先画一个圆作为报警灯的图素，然后选择右侧的连接，点击，选择“闪烁—画刷闪烁”，弹出动画连接配置画面，点击选择变量，如图5-4，选择变量\\local\valve_gate1，然后点击变量域，选择变量的报警域Alarm，选择完成后点击OK，这样动画连接关联的变量为\\local\valve_gate1.Alarm，然后配置闪烁的速度，闪烁时画刷的颜色改变，配置完成后动画连接如图5-5所示： 图5-4 选择变量域 图5-5 画刷闪烁动画连接

Flash动画制作之三 ——奥运五环的制作

课题：Flash动画制作之三——奥运五环的制作 教学目标：1：熟悉FLASH制作中的关键性概念：元件； 2：完成奥运五环的制作以及文字的制作； 3：巩固FLASH制作中的重要动画形式：运动渐变动画。 教学重点：奥运五环的制作； 教学难点：理解元件的概念； 教学方法：讲授法，演示法，实践法 教学过程： 一、操作步骤1： 1：打开Flash 软件 “开始”菜单―――“程序”―――Flash MX 2004 2：元件的新建 在菜单栏中插入——新建元件，选择图形元件，并命名为wh1，这里要制作奥运五环中的一个环，其他的四个通过复制粘贴完成 方法：选择椭圆工具，并设置其线条颜色和填充颜色 注意：线条颜色根据五环的颜色设置，填充颜色设置为“无” 另外还可以设置线条粗细 3：元件的复制 第一个五环完成后，用选择工具将其选中，然后再次通过插入——新建元件，命名为wh2，将复制的wh1粘贴其中，并根据奥运五环颜色改变它的线条颜色 4：用同样的方法完成其他三个圆环 5：元件的新建（制作文字），命名为wz

选择文字工具，设置其大小，字体，颜色等后在元件中输入“心系奥运放飞梦想” 技巧：阴影文字的制作 选中该文字，按住CTRL的同时，拖动鼠标，将该文字复制，并将复制的文字换一颜色，利用方向键将文字微调，实现阴影效果。 至此，元件制作完毕。 二、操作步骤2：讲解元件的功能 三、操作步骤3： 回到场景中 1：五环的运动 （1）在图层1第一帧处，将五环wh1,wh2,wh3,wh4,wh5依次拖入场景中，并根据奥运五环的造型构件好，此时，五个环是五个独立的个体，将五环全部选中，通过修改——组合，将其组合成一个统一的整体。 （2）在图层1的30帧处，插入一关键帧，并将五环移动至某一位置（不同于第一帧）（3）构建动画，选中图层1第一帧，设置动画中间为“形状” （4）实现奥运五环从高处落下运动。 2：文字的运动 （1）新建图层2，在图层2第一帧处，将制作好的元件wz拖入 （2）在图层2的30帧处，插入一关键帧 （3）在图层2第一帧处，将文字通过任意变形工具进行缩放，旋转 （4）构建动画，选中图层1第一帧，设置动画中间为“形状” （5）实现文字旋转出现在场景中。 四、操作步骤4 通过菜单栏中“控制”——“播放”，观看效果

指南-第四章-动画连接

156 第四章动画连接 动画连接是指画面中图形对象与变量或表达式的对应关系。建立了动画连接后，在界面运行系统中，图形对象将根据变量或表达式的数据变化，改变其颜色、大小等外观。 假设变量LEVEL的值代表某一容器液位的高度，并且创建了一个填充矩形表示容器液位。现在我们可以建立如下动画连接：当LEVEL的值大于80时矩形填充颜色变为红色，当LEVEL的值小于80时矩形填充颜色变为绿色。这样通过观察图形的颜色我们就可以判断容器中液位的状况。示意图如下： 4.1 动画连接概述 如果您想掌握制作动画连接的方法，首先要了解下面的内容： 1、创建和选择连接对象，如线、填充图形、文本、按钮等。（有关创建图形对象的详细信息请参考前面章节的内容）。双击对象或者用鼠标右键单击对象，弹出右键菜单后选择其中的“对象动画”，或者选中图形对象后直接按下“Alt + Enter”键。 2、弹出“动作菜单”对话框：

第四章动画连接157 在对话框中可以看到，动画连接有五类内容：鼠标相关动作、颜色相关动作、尺寸旋转移动、数值输入显示、杂项。 根据要连接的动画选择相应的按钮，进入动画连接的详细定义对话框。例如，若要定义垂直拖动动作的动画连接，则单击“与鼠标相关动作”类中“拖动”组的“垂直”按钮，弹出“垂直拖动”对话框： 在对话框中为连接定义输入详细资料，然后单击“确认”按钮，回到“动作菜单”对话框。一旦您输入了所有需要的信息，单击对话框底端的“返回”按钮返回。 注意：当创建动画连接时，在连接生效之前，所使用的变量必须被创建。如果直接使用了尚未创建的变量，当“确定”按钮按下时，系统将提示进行定义，并可自动进入变量定义的对话框。 4.2鼠标相关动作 该类动作分为拖动和触敏动作两类。图形对象一旦建立了与鼠标相关的动作的动画连接，在系统运行时当对象被鼠标选中或拖拽时，动作即被触发。 4.2.1 拖动 拖动连接使对象的位置与变量数值相连接。变量数值的改变使图形对象的位置发生变化，反之，用鼠标拖动图形对象又会使变量的数值改变。 拖动包括水平与垂直两个方向。例如在下图中，三角形游标的位置可以代表阀门的开度，通过拖动游标就可以形象地改变阀门的开度。 水平拖动 要建立水平拖动，可按如下步骤进行： 1、首先要确定拖动对象在水平方向上移动的距离（用像素数表示）。画一条参考水平线，水平线的两个端点对应拖动目标移动的左右边界，记下线段的长度。（线在选中状态下，其长度显示在工具箱的状态区中，如下图示例）。

PS动画制作实例

PS动画制作实例： 听音乐的女孩 效果图片需要动的部分有音符、光碟、人物的手。这些都是同步的。制作动画之前需要把这这些动画场景设置出来，然后再同步设置动画。 1、打开图片，制作所需要的素材。 2、手部素材： 1)ps里打开，用“套索工具”和“仿制图章”等工具，去掉原图中的音符。然后，打开动 画面板(时间轴)，单击箭头所指小三角>文档设置>设定时间及帧数。这里设为2秒， 每秒25帧。 2)用“快速选择工具”选中人物手部。ctrl+J，得到图层2。用“矩形选框工具”在图中选 一个合适对象用作覆盖与原图对应的区域。如图1所示： 图1 3)ctrl+J，得到图层3；“移动工具”下，将图层3置于原图手部位置，调整至合适，然 后参考图示，移动参考点至红色箭头所指处，逆时针旋转9度左右，使手看起来有 种抬起的感觉。如图2所示：

图2 4)接下来给图层2添加蒙版，设前景色为黑色，用“画笔工具”涂去手部多余部分。完 成后，合并图层2和3，并命名为“变换的左手”。如图3所示 图3 3、唱片素材制作 1）再次用“快速选择工具”，选择唱片，注意唱机的针头——属性模式为“添加到选区”，全部选中对象后，按住ALT键选择针头，可减去针头选区。如图4所示。ctrl+J，得到复制对象图层后，将它命名为“唱片”。

图4 2）然后单击红框处，添加图层样式>渐变叠加——打开“渐变拾色器”，渐变效果和混合模式参考图示，其它默认。如图5所示 图5 4、音符素材制作 1）新建图层，选择“自定义工具”，参考图6中红框所示，依次绘制出各种音符。绘制时，距离可拉大，可边绘制边改变方向，使其看起来大小和方向呈不规则状。

flash小动画制作步骤

一．背景绘制：将事先找好的元件拖入到库中，重命名为 “马路”，之后改变舞台颜色为蓝色，并将马路元件突入 舞台，图层命名为”路”，，之后新建图形元件“云”，新 建云1元件，将云拖入天空元件中，进行排列，和任意变 形。 如图所示：随后制作天空的影片剪辑元件“云1”，创建图中所表示的传统补间，随后将图 片剪辑拖入背景图层 中，命名为“天空”。 并且背景效果如下图 所示：

二．画出人物：制作动画，所需要的基 本的任务造型和影片剪辑：新建元件， 将所要画人物的耳朵，左脚，右脚等 制作成元件，之后使用“红脸”元件， 制作脸红的影片剪辑，将红脸拖入剪 辑元件中，在5帧处，设置透明度为 10%，10帧处设置透明度为100%， 15帧处设置透明度为10%。之后制作 “兔子”的影片剪辑，将元件拖入影片剪辑元件中，调整各 个部分的位置，添加如图所示的关键帧，和传统补间。并且 将做好的脸红影片剪辑，拖入到其中，至此，兔子的影片剪 辑，制作完成，择兔子行走的影片剪辑完成,之后，重复以上动作，制作元件“女兔子”和其行走的影片剪辑，如图所示：

二．具体动画制作： 男：新建元件，画出图形，命名为“眼睛2”、“眼睛3”， “眼睛4““眼睛5”等的图形在兔子元件中，选中如图所示的帧，并复制粘贴在新建影片剪辑“兔子身体”中，新建“兔子2”、“兔子3”和“兔子4”等影片剪辑，将兔子 身体，以及眼睛拖入，制作新的兔子造型元件。 女：女兔子也是重复相同的方法，新建图形元件，影片剪辑，绘制成不同帧所用的简单动画任务造型，并如图所示，拖入“汗”的图形元件，插入关键帧，创建传统补间。制作出流汗的效果。按照男兔子的制作方法制作元件，影片剪辑，

Flash动画制作实例教程

Flash Flash Flash CS3 Flash
1.1
1.1.1
Flash
Flash
Flash
Adobe Flash
Flash
Internet
Flash
Dreamweaver
Fireworks
1.1.2 Flash
Flash 1 2 3 4 (.swf)

5 6 Flash .avi .gif .html .mov .smil 7 8 Action FS Command Dreamweaver Authorware Director FrontPage Flash .exe
gif
Flash
.fla Flash
1.1.3 Flash
Flash Flash 1-1
Flash
1-1
Flash
2

1-1
1.2
1.2.1 Flash CS3
Flash CS3
Flash CS3 Flash CS3 / 1-3 1-2 Flash
Flash CS3 Flash
3

1-2
Flash
1-3
Flash
5 Flash CS3
4

Flash 1-4
1-4
12
/ Flash
1.2.2 Flash
Flash Flash 1 / 1-5 Flash
1-5
Flash
2 / 1-6
5

Flash动画制作重难点讲解

第一是：F l a s h动画制作课程说明 第二是：课程各章教学内容和教学要求 下面我先向大家介绍第一个问题：Flash动画制作课程说明。在课程说明里，我们从以下几个方面进行讲解： ?课程的性质 ?课程特点与任务 ?与相关课程的衔接、配合、分工 ?课程的教学基本要求 ?课程使用的教学媒体 第一先来看课程的性质 ?《Flash动画制作》课程4学分，学时为72学时。其中授课36学 时，实训36学时。 ?《Flash动画制作》课程是中央电大计算机网络技术专业（专科） 网页设计方向的一门统设必修课。 第二我们来看课程特点与任务 “Flash动画制作”是一门实践性较强的课程，在介绍基本理论、基础知识、基本技能和方法的基础上，通过该课程特别要培养学生的创造性、实际动手能力和计算机应用能力。 “Flash动画制作”是一门新兴的课程，涉及计算机应用、图形图像、多媒体等多方面的知识，利于培养学生的综合能力，活跃学生的思维，激发他们的创造力和想象力。 第三是本课程与相关课程的衔接、配合、分工 先修课程：Photoshop图形图像处理等。 后续课程：Dreamweaver网页设计和开发等。 在这三门课程学完之后，会有一个综合实训：综合“Photoshop图像处理”、“Dreamweaver 网页设计”和“Flash动画制作” 三门课的知识，来设计、制作网站。 第四是课程的教学基本要求 1.要求学生学习基本的美术和动画制作原理； 2.了解Flash各种工具的使用方法； 3.有基本的卡通画绘制能力； 4.会使用Flash来控制各种媒体，如图形图像、音频和视频； 5.能够创作不同形式的动画作品； 6.能够使用Flash进行基本的交互式编程。 当然，这是一门重在实践的科目，因此需要学生多上机、多进行实际操作，把老师所教授的各种实例动画、程序熟练制作和调试出来，并且能够在此基础上有所创造、有更进一步的发挥。

第五章 动画素材

第五章动画素材 一、单项选择题 1.下列属于三维动画制作软件的是（） A. GIF Animator B. Flash C. Dreamweaver D.Maya 2.在动画制作中，一般帧速率选择为————巾贞/秒。（） A.30 B.60 C.120 D.90 3.动画中播放的每一幅画面称为（） A.关键贞 B.贞 C.幕 D.动画 4.计算机生成动画开创于20世纪————年代。 A.60 B.70 c.80 D.90 5.目前最流行的二维动画形式是（） A.GIF动画 B.MOV动画 C. Flash动画 D.FLC动画 6.PAL彩色电视制式的贞速率为————巾贞/秒。（） A.60 B.30 C.25 D.15 7.当巾贞速率达到————时，才会有运动感，形成动画效果。（） A.25 B.15 C.12 D.10 8.下列文件格式，属于动画文件的是（） A.GIF B.JPEG Ｃ.PNG D.MPEG 9.HDTV的巾贞速率可达每秒————巾贞。 A.90 B.60 C.30 D.25 10.以下选项属于计算机动画优点的是（） A.能制作出更生动的动画效果。 B.提高了动画质量.生产效率 C.更易于对动画检查.维护 D.以上都对 11.下列软件，属于二维动画制作软件的是（） A. Maya B.3D MAX C.GIF Animator D.Premiere 12.————动画的出现，是计算机动画的真实突破。（） A.三维动画 B.二维动画 C.计算机辅助动画 D.Flash动画 13.按照动画的图象序列逐巾贞快速显示而实现动画效果的称为（） A.实时动画 B.逐巾贞动画 C.造型动画 D.算法动画 14.传统动画制作过程的第一步，也是制作动画的依据的是（） A.角色设计 B.关键巾贞设计 C.剧本创作 D.绘制中间巾贞 15.以下选项中，不属于动画文件格式的是（） A.SWF B.FLC C.MMM D.FLA 二、填空题 16.动画是基于————创作的运动图形。 17.根据动画的生成方式可将计算机动画分为————和逐巾贞动画两种。 18.动画播放的速度一般用“巾贞速率”来描述，它是————。 19.计算机三维动画属于————。 20.目前二维动画创作软件主要有————和————软件两种。 21.目前Flash动画已成为————动画的标准，是最流行的二维动画形式。 22.组成动画的基本单位是————。

五年级信息技术《动画制作工具flash》教案

五年级信息技术《动画制作工具flash》 教案 第二 动画制作工具flash 一、教学目标 、了解界面中各部分的作用，及常用菜单所在的位置，重点掌握工具的应用。 2、理解时间轴的概念及作用，运用工具箱中的圆形工具绘制一个小球，并在时间轴上进行相应的设置，使之运动。 二、教学内容 、工作界面的介绍 2、绘图工具的使用 3、学习制作运动动画 三、 教学时 2时 四、 教学过程 第一时 一、欣赏导入： 播放上一节自己下载的喜欢的动画。（选两个较好的全

体观看） 师：你们想制作这样的动画吗？我们从这节开始学习动画制作工具FLASH。 二学生看书自学下面内容： （一）Flash X的工作界面如下图 Flashx工作界面主要分为标题栏、常用工具栏、时间轴、工具栏、主工作区、浮动面板、属性面板及动作面板等。 （二）部分绘图工具的使用 箭头工具：用于选定工作区中的点阵图或矢量图，并可对点阵图进行一定的编辑； 副选工具：可对所绘路径进行精确调节； 直线工具：用于绘制直线； 索套工具：创建任何形态的选区； 钢笔工具：可以精确绘制直线或曲线路径； 文本工具：用于创建文本或文本域； 椭圆工具：绘制椭圆或圆； 矩形工具：绘制矩形或正方形； 铅笔工具：可以绘制任意线条或图形； 刷子工具：用于着色的一种工具，可以创造任意特殊效果； 墨水瓶工具：用于填充线条或图形边框的颜色； 油漆桶工具：改变物体的填充色；

吸管工具：用于拾取颜色； 橡皮擦工具：用于移动窗口中显示的视图。 …… 三、学习使用工具进入绘画。 四、本小结 本主要讲述了Flash的基本界面特征，强调工具的作用及其使用方法，为以后进一步深入学习Flash动画制作打下了一定的基础。 六、外作业 上机操作，使用工具箱中的工具绘出相应的图形。 第二时 一、找学生到前面绘画出立体球 二、学生自学下面知识点： Flash中的时间轴主要由图层、帧组成。 A帧（frae）：传统意义上的动画是由一张张单独的胶片组成，将这些静止画面连续播放，利用人眼的视觉暂留，就产生连续运动的动画效果，而Flash的帧就如同电影胶片，按时间轴窗格中每一帧画面的顺序播放就产生了动画效果。 B图层（laer）：动画中的每一帧都是由多个图层中的图片重叠组成的，不同图层的画面元素，可以分别施加动画效果。图层可以用透明的玻璃纸来比喻，当上面图层和下面图层的内容相重叠时，上面图层上的内容将遮挡住下面图层上

五年级信息技术《动画制作工具flash》教案

五年级信息技术《动画制作工具flash》教案

五年级信息技术《动画制作工具flash》 教案 第二 动画制作工具flash 一、教学目标 、了解界面中各部分的作用，及常用菜单所在的位置，重点掌握工具的应用。 2、理解时间轴的概念及作用，运用工具箱中的圆形工具绘制一个小球，并在时间轴上进行相应的设置，使之运动。 二、教学内容 、工作界面的介绍 2、绘图工具的使用 3、学习制作运动动画 三、 教学时 2时 四、 教学过程 第一时 一、欣赏导入： 播放上一节自己下载的喜欢的动画。（选两个较好的全

体观看） 师：你们想制作这样的动画吗？我们从这节开始学习动画制作工具FLASH。 二学生看书自学下面内容： （一）Flash X的工作界面如下图 Flashx工作界面主要分为标题栏、常用工具栏、时间轴、工具栏、主工作区、浮动面板、属性面板及动作面板等。 （二）部分绘图工具的使用 箭头工具：用于选定工作区中的点阵图或矢量图，并可对点阵图进行一定的编辑； 副选工具：可对所绘路径进行精确调节； 直线工具：用于绘制直线； 索套工具：创建任何形态的选区； 钢笔工具：可以精确绘制直线或曲线路径； 文本工具：用于创建文本或文本域； 椭圆工具：绘制椭圆或圆； 矩形工具：绘制矩形或正方形； 铅笔工具：可以绘制任意线条或图形； 刷子工具：用于着色的一种工具，可以创造任意特殊效果； 墨水瓶工具：用于填充线条或图形边框的颜色； 油漆桶工具：改变物体的填充色；

吸管工具：用于拾取颜色； 橡皮擦工具：用于移动窗口中显示的视图。 …… 三、学习使用工具进入绘画。 四、本小结 本主要讲述了Flash的基本界面特征，强调工具的作用及其使用方法，为以后进一步深入学习Flash动画制作打下了一定的基础。 六、外作业 上机操作，使用工具箱中的工具绘出相应的图形。 第二时 一、找学生到前面绘画出立体球 二、学生自学下面知识点： Flash中的时间轴主要由图层、帧组成。 A帧（frae）：传统意义上的动画是由一张张单独的胶片组成，将这些静止画面连续播放，利用人眼的视觉暂留，就产生连续运动的动画效果，而Flash的帧就如同电影胶片，按时间轴窗格中每一帧画面的顺序播放就产生了动画效果。 B图层（laer）：动画中的每一帧都是由多个图层中的图片重叠组成的，不同图层的画面元素，可以分别施加动画效果。图层可以用透明的玻璃纸来比喻，当上面图层和下面图层的内容相重叠时，上面图层上的内容将遮挡住下面图层上

flash 动画制作实例

Flash动画实例操作步骤： 一、绘图工具的应用例 1.电子贺卡制作步骤 2.长方体的绘制 3.金属质感小球的绘制： 1)新建文件并设置舞台的属性为500*300； 2)打开填充面板，选择放射式渐进色，并设置从左到右四个RGB调节钮RGB 值为：R：255 G：255 B：255 R：255 G：255 B：255 R：0 G：0 B：0 R：203 G：203 B：203 并保存此颜色选择圆形绘图工具，按住SHIFT键在舞台上绘制一个正圆，删除边框线； 3)在调色板的填充色中选2）中的颜色填充 4)移动渐变色的中心点和改变渐变色的形状 5)新建一层 6)用2到4同样的方法在新层上画小球，其位置与第一层重叠，可以第一层锁定。 其设定的渐变色为R：255 G：255 B：255 alpha：0% R：255 G：255 B：255 alpha：63% 二、动画 1.帧并帧动画 1)写字动画（p363的1到8步写“休”字的写字动画） 2.形变动画： 1)本例制作一段物体由一种形状平滑过渡到另一种形状的动画效果（如直线延长 动画）。下面以三角形变圆为例： 1.新建一个文件，在工具箱中选择直线工具，在场景中绘制作一个三角形。 2.单击工具箱中的油漆桶工具，然后单击填充色按钮，选择一种填充色。这 里，我们选择一种渐变填充色来填充三角形。 3.用鼠标分别选中三角形的3条边线，将它们删除，由此得到位于第1帧的 图形。 4.单击第一层的第20帧，然后按F7键，在此插入一个空白关键帧。在工 具箱中选择椭圆工具，单击框线颜色按钮，再单击按钮，将框线设为无色。 单击填充色按钮，选择一种渐变填充色，然后绘制一个带渐变填充色的圆 形。 5.单击选取第1帧，然后单击快速启动工具栏上的实例面板按钮，打开实例 面板。单击帧标签，选择形变下拉列表中的形状变化选项。 2)添加形状提示点的形变动画： 1.P368页的1到8步（大写“T”变大写“H”） 2.折叠动画（可以依据这个动画作翻书动画） a)新建文件并设置背景色为R：132 G：140 B：206 宽：500 高：350。 b)导入背景图片，锁定本层 c)添加一层，绘制矩形名为ABCD，并填充为白色，透明度为30%,外 框线为1.5的白色线条，画折痕线EF。 d)选择图形EFCD按下CTRL+G键进行组合。选择图形ABEF按下 Ctrl+X键，剪切它，新建一层,按Ctrl+Shift+V原地粘贴（注意：EF

flash动画制作教程(很实用)

幻灯片1 第6章动画制作软件 Flash MX ●初识Flash ●动画制作基础 ●简单动画制作 ●高级动画制作 ●作品的输出 幻灯片2 一、初识Flash ●用户界面 ●菜单栏 ●标准工具栏 ●控制工具栏 ●绘图工具栏 ●浮动面板 ●时间轴面板 ●属性面板 ●工作区 （图见下页） （图见下页） 幻灯片3 时间轴面板 幻灯片4 属性面板 如文字工具的属性面板。

幻灯片5 一、初识Flash ● 2. 绘图工具 ●箭头工具、精选工具和套索工具 ●直线工具和铅笔工具 ●钢笔工具 ●椭圆工具和矩形工具 ●笔刷工具 ●自由形变工具 ●渐变工具 ●墨水瓶工具和颜料桶工具 ●吸管工具 ●橡皮擦工具 ●视图移动工具 缩放工具 幻灯片6 一、初识Flash ●⑴箭头工具（Arrow Tool）、精选工具（Subselect Tool）和套索工具（Lasso Tool）。 ●他们的主要功能都是选择 ●箭头工具选取和移动对象、修正对象轮廓、旋转或缩放对象。 ●精选工具对曲线、圆形、矩形等图形对象的外形进行编辑调整。若 图形对象是组件，必须先解散。 套索工具使用圈选方式来选取对象，它可以圈出不规则形状。

幻灯片7 一、初识Flash ●箭头工具用来选择或移动对象 ●选择对象方法： ①单击对象的内部区域（或轮廓线），选中该对象的内部区域（或轮廓线）； ●②双击对象的内部区域（或轮廓线），选中该对象的内部区域和轮廓线（或轮廓 线）； ③拖放鼠标圈出一个矩形，该矩形中的区域被选中。 ●选项栏： ①自动对齐（Snap to Objects）绘制、移动、旋转或调整的对象将自动对齐； ●②平滑处理（Smooth）对直线和形状进行平滑处理； ③平直处理（Straighten）对直线和形状进行平直处理。 幻灯片8 一、初识Flash ●精选工具使用该工具选中对象后，对象将显示出一条带有节点（空心小方块）的蓝色 线条。 ●套索工具选择不规则区域，或选择位图中不同颜色的区域（必须事先用Modify/Break Apart命令将其打碎）。 ●包括： ●魔术棒（Magic Wand）可根据颜色选择对象的不规则区域； 多边形（Polygon Mode）可选择多边形区域； 幻灯片9 一、初识Flash ●⑵直线工具（Line Tool）和铅笔工具（Pencil Tool）。 ●用于在工作区中绘制线条。 ●直线工具只能画直线。 按住Shift键，拖放鼠标可以绘制垂直、水平直线或45 铅笔工具画直线或曲线。 所画线条包括：Straighten（平直）、Smooth（平滑）、Ink（墨水）三种模式。

FLASH动画制作课程教学大纲

FLASH动画制作》课程教学大纲《Flash animation 英文名称：91924087 课程代码：学时） 0学分/总学时：2/36（其中课堂： 32学时；课内实验：学时；课外实践：4 》等先修课程：《计算机基础》、《Photoshop 适用对象：展示设计专业、绘画专业一、课程性质与目的是展示设计专业与绘画专业网页设计与制作类课程的专业选修课程《Flash动画制作》平面动画相关的技术和方法，将主要学之一，它以Flash 8为操作对象，介绍了制作Flash对操作技能和习矢量绘图、基本动画和基本编程等动画技术。它的特点是涉及知识面广泛，要特别勤于实际操作和实践性的要求较高，因此要求学生在全面掌握各个知识点的基础上，不断积累经验。使学生了本课程的目的是培养具有一定实践经验的网页设计人员。通过本课程的教学，的设计环境、制作流程，能独立绘制简单、复杂图形，学会导入图形、音频、视频解Flash 等文件，制作逐帧动画、补间动画，制作引导层动画、遮罩层动画，并了解简单编程等。二、教学内容及要求学时）Flash8熟悉的设计环境（ 2第一章 【基本内容】熟悉1.Flash8的设计环境 2.Flash8动画制作流程【基本要求】 Flash8的设计环境及流程1.熟悉制作逐帧动画的方法Flash82.了解【重点及难点】的一般制作流程重点：Flash 难点：Flash的操作界面【教学活动与教学方式】第1讲 Flash 8动画制作基础 1.1 熟悉Flash 8的设计环境 1.1.1 知识点讲解 范例解析——Flash 8用户界面介绍 1.1.2 用户基本操作课堂练习—— 1.1.3 Flash 8 Flash 8 1.2 动画制作流程 1.2.1 知识点讲解 1 1.2.2 范例解析——制作“过光文字”课堂练习——制作“数字倒计时” 1.2.3 课后作业 1.3 3学时）第二章绘制素材（【基本内容】绘制简单图形1. 绘制复杂图形2. 【重点及难点】重点：常用绘图工具和图层练习难点：图层的运用【教学活动与教学方式】第2讲绘制素材 2.1 绘制简单图形 2.1.1 知识点讲解 2.1.2 范例解析（一）——常用绘图工具练习 2.1.3 范例解析（二）——绘制“简易建筑物” 2.1.4 课堂练习——绘制“简易场景” 2.2 绘制复杂图形 2.2.1 知识点讲解 2.2.2 范例解析（一）——图层操作练习 2.2.3 范例解析（二）——绘制“仿真苹果” 2.2.4 课堂练习——绘制“精美爱心”课后作业2.3 3学时）第三章导入素材（【基本内容】导入图形文件1. 导入音频文件2. 3.导入视频4.打开外部库【重点及难点】重点：图形、音频、视频文件的导入难点：图形、音频、视频文件的导入【教学活动与教学方式】讲导入素材 3第 3.1 导入图形文件2 3.1.1 知识点讲解 3.1.2 范例解析——制作“中秋快乐”

第四章 PPT图文设计技巧

第4章 图文——有血有肉才有神 没有血肉的PPT干瘪苍白，血肉过剩的PPT臃肿不堪 图文用得好坏，决定了PPT的肤色和身段 要给人健康、美丽、清爽的感觉，本章需要细细研读一、文字的编辑和处理技巧 文字是PPT最基本也是最重要的元素之一，也是决定一套PPT精美度的关键之一。本章对文字处理技巧的讲述基于一个前提——精简。 精简有两个衡量标准： 一是作用，文字只有提示、注释和装饰的作用，凡是不属于这几类的就要考虑精简； 二是效果，大部分的文字是观众用来瞟的，而不用来读的，要坚持“瞟”的原则，凡是瞟一眼还不明白的，就需要精简； 【1.用哪种文本框】 默认文本框 ⑴．在母版视图里可以统一编辑，方便修改；文字如果过多，字号会自动调整；在大纲里就能清晰看到每页幻灯片文字内容。 ⑵．如果做纯文本的PPT非常合适，制作效率很高；但如果要进行图表、图片、动画设计就会很麻烦：文本缺乏个性，文字的字体、大小、效果过于单一。 ⑶．如果更换模板或复制到别的PPT里，所有的文本都会换成新模板里的默认效果，需要重新设计； 自定义文本框 ⑴．文字便于设计，通过复制、粘贴、移动、复制格式等操作可以制作各种各样的效果，便于和图表、图片、动画等配合使用。 ⑵．如果需要快速制作纯文本幻灯片，其效率自然比不上默认文本框。 注：可把设计精美的自定义文本设置为默认文本，再次插入时都是这个效果，不用重新编辑了。 ⑶．如果更换模板或复制到别的PPT里，所有的文本效果都保持不变，便于修改。 要想制作精美的PPT，我们推荐使用自定义文本框，毕竟在一张白纸上才能画出最美的图案。至于选择哪种方式，大家可根据自己的习惯而定。 【2.字体的使用】 字体看似成千上万种，实质上只有两类：衬线字体（Serif）和无衬线字体（Sans Serif）。这是西文字体的分类，实际上适用于汉字。 衬线字体：实际上是一种艺术化字体，在文字的笔画开始、结束的地方有额外的装饰，

第五章基本动画制作

第五章基本动画制作 第一节逐帧动画 逐帧动画是动画中最基本的类型，它与传统的动画制作方法类似，制作原理是在连续的关键帧中分解动画，也就是每一帧中的内容不同，然后连续播放形成动画。 在制作逐帧动画的过程中，需要动手制作每一个关键帧中的内容，因此工作量极大，动画文件也较大，并且要求读者有比较强的逻辑思维和一定的绘图功底。但它的优势也很明显，因为它相似与电影播放模式，很适合于表演很细腻的动画，例如3D 效果、面部表情、走路和转身等。 1．逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画在时间帧上表现为连续出现的关键帧，如图5-1所示。 图 5-1 逐帧动画 2．创建逐帧动画的几种方法 （1）利用外部导入方式创建逐帧动画 外部导入方式是逐帧动画最为常用的方法。将在其他应用程序中创建的动画文件或者图形图像序列导入到Flash 软件中。具体导入方法为： ●执行菜单中的“文件/导入/导入到舞台”命令，在弹出的“导入”对话框中选择一个文 件，单击“打开”按钮. ●在弹出的如图5-2 所示的提示对话框中单击“是”按钮，即可将序列中的全部图片导 入到舞台。此时，每一张图片会自动生成一个关键帧，并存放在“库”面板中。 图5-2 用jpg、png、gif等格式的静态图片连续导入Flash中，就会建立一段逐帧动画。 （2）在Flash 中制作逐帧动画 除了前面使用外部导入的方式创建逐帧动画外，还可以在Flash 软件中制作每一个关键帧中的内容，从而创建逐帧动画。图5-3为利用逐帧绘制方法制作出的人物走路的画面分解图。