【原】向html5进军(3)——用flash和wallaby 制作html5动画 第二章

鉴于最近有些抓取机器和抄袭者,把标题的【原】字都复制,我不得不声明:本文为 yukon12345原创,转载请注明出处http://blog.csdn.net/yukon12345

第二章:创建HTML5的基础动画

在我们的第一个动画里,将创建一个简单的滚动文本marquis。它和老版本HTML的marguis标签类似,是一个很好的入门例子。

你需要下载adobe wallaby程序来输出动画。下载地址为http://labs.adobe.com/downloads/wallaby.html

 

创建一个新工程

 首先你必须在flash里创建一个新工程文件。选择 文件(file)->新建 (new)来打开一个文档窗口如图2-1

2-1

选择ActionScript 3.0并确定。Flash就会打开一个新工程。在舞台上你就可以设计动画和文字了。

创建文字

点击工具栏的T图标。如图2-2

 

2-2

当你选中T工具后,点击舞台上的任意位子就可以输入一段文字来创建marquis。

如图2-3

2-3

现在在舞台上有一些文字你可以用来制作动画了。

点击黑箭头切换到选择工具,选中文字并按F8或者使用“修改 modify”->转化为元件 convert to symbol 来创建一个原件。创建完了之后你会发现现在你的库里新增了一个元件。如图2-4.

2-4

查看时间轴(timeline)有一个小黑点的关键帧表明在舞台上有一个物件了。如图2-5

2-5

把文字物件移除舞台可见范围,比如舞台右边。如图2-6

2-6

现在我们来制作一个从有到左文字移动的动画。时间轴上用鼠标点击选择后面几帧,比如20帧,右击,选择插入关键帧(insertkeyframe)。这是你就创建了一个新关键帧。它和第一个关键帧一样的内容。如图2-7

2-7

紧接着,点击选择新建的关键帧后,把舞台上的文字拖到舞台左边。如图2-8如果想确保Y轴不改变,可以按住shift键来拖动。

2-8

现在你已经创建了必要的关键帧以及动画开始于终止的位置。现在我们来创建补间动画(tween)。在两个关键帧的之间任何一个帧右击,并选择创建一个传统补间(classic tween)。如图2-9

2-9

这样我们一个简单动画就可以发布并观看了。菜单栏选择控制(control)->测试影片(test movie)->测试(test) 或者直接使用快捷键“ctrl+enter”就可以播放动画了。

如图2-10

2-10

你将看到文字一直从左到右滚动。动画并不会停止而是循环播放。这是因为默认下flash影片是一直重复播放的。

关闭动画播放,选择文件(file) -> 保存(save)输入个名字(比如marqui.fla),把你的项目文件存在你的硬盘上 。请记住你保存在了哪里,因为等下我们将使用wallaby。

 

用wallaby导出HTML5动画

打开wallaby(如果没装air环境,程序将自动提示你安装),你只需几步就可导出动画。点击browse浏览选择你之前保存的fla文件。如图2-11

2-11

选好了fla文件后点击convert转换按钮,系统提示输入HTML文件名。随意输入比如marquis.html,点击save保存。当提示conversion successful转换完毕就可以用chrome或者safari浏览器打开查看效果了。

由于生成的文件不止一个,(如图2-12)因此请确认它们都在同一个文件夹下

 

2-12

在第三章我们将学习一些更加复杂的动画。




阅读更多
个人分类: 一天一翻译 HTML5
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭