文档章节

使用Adobe Flash CS6 新功能——帧序列图生成器

童年伊梦
 童年伊梦
发布于 2012/09/25 12:22
字数 1311
阅读 615
收藏 0

翻译:lucy_100

     Adobe Flash CS6专业版,介绍了一个新工具,叫做帧序列图生成器。这个特色工具可以方便地将在舞台上或库中的任意元件或导入的图像生成一个序列图。这个序列图由CPU渲染,游戏中需要添加循环动画时使用这个工具生成的序列图,图形显示会变得非常有效率。

     本文会演示如何使用针序列图生成器将一个循环动画转换成序列图,进行高效率的渲染。

Flash是创建交互设计最好的工具之一,可以将动画和交互完美地结合在一起。去年,如果我们要公告一件事什么事,不可否认要通过web技术手段。关于HTML5的消息满天飞,关于Flash的消息却没有多少。我甚至听到有人说HTML5将取代Flash。作为一个动画师,使用Flash超过十年,对Flash非常满意,但是这些问题会让我产生疑问担心Flash的未来?完全不是。没有一个技术能永远火下去,但是Flash现在还存在,至少在比较长的一段时间内不会过时,很明显Adobe也在朝着这个目标努力着。

创建一个动画

在生成序列图之前,需要先创建一个用于生成序列图的动画。我选择的是之前为Starling 框架设计的一个角色,将它做成动画。


这只鸟是为Starling框架构思的角色,使用的工具是Adobe Photoshop,上传到了Adobe Creative Cloud,现在使用Adobe Flash CS6重画。使用Flash的钢笔工具,将每一部分拆分成独立的元件(见下图)。

下面制作翅膀的飞翔动画。双击翅膀元件并且使用逐帧的方式绘制动画,每一个关键帧都包含不同的动作。这是一只右翅膀。

在放置鸟身体的层下,创建新层,复制右翅膀动画元件粘贴到这个新层里。使用水平翻转并摆放对位置,这是鸟的左翅膀。为左翅膀做一个简单的透视效果,选择这个元件,为这个元件设置颜色效果(color effect),让左翅膀颜色稍暗一些,突出身体部分。


然后调节鸟飞翔的动画。要注意两个翅膀上下摆动的同步。

生成序列图

到这里,需要的动画已经完成了,可以使用Flash生成序列图了。首先将鸟飞翔的元件拖拽到场景中,右击出现快捷菜单,选择菜单中的”Generate Sprite Sheet…”项。

还有一个方法是,在库中右击鸟飞翔动画元件,快捷菜单中也有”Generate Sprite Sheet…”项。



选择”Generate Sprite Sheet…”项后会打开它的设置参数面板。

设置“image dimensions”图像尺寸,设置适合这个动画的尺寸。

生成序列图的设置

Image format:图像格式的下拉菜单有PNG 8 bit, PNG 24 bit, PNG 32 bit 和 JPEG 格式可供选择。如果你需要进行最大的优化,那么可以选择带透明通道的PNG 8 bit,这个格式对文件的大小压缩相当大。

Background color:背景颜色:这个选项可以自定义背景颜色。提供了很多示例颜色,可以直接拿来用,或者点击右上角的调色板图标,自己配制需要的颜色。

我将背景颜色设置为黑色,面板中的预览已经更新了设置的背景颜色。

Algorithm计算方法:这里提供了两个可供选项。

Basic:默认设置,最大程度还原动画。图像是按行统一安排计算渲染。

MaxRects:最大压缩。这个设置是将所有的帧最大化地压缩。

在游戏中动态地使用序列图

准备将序列图合并到游戏中,选择Data format数据格式。数据格式为针序列图的每一帧都记录了X值,y值,宽,高和其他信息,这些信息都是可调节的属性参数。开发者使用这些参数可以在使用的任意场合调节改变它们,会产生不同的动画。更强大的是,如果现有的这些参数不能满足你的需要,可以使用JSFL创建一个自己的数据格式,配备更多的你需要的参数。

点击动画预览窗口上方的Preview预览按钮,可以进行效果预览。

下一步做些什么

如果你想了解更多,可以去访问

Adobe的Flash动画学习组

,那里有更多的使用Flash CS6制作和输出各种动画类型的教程。

安装Starling框架,如果你没有文件包,请在这里

下载

。更多的关于Starling框架的信息和特点、如何将sprite sheet应用到游戏中,可以去看看Thibault Imbert的Adobe开发者相关文章

Introducing the Starling 2D framework

(Starling 2D框架介绍).

资讯作者:Chris Georgenes
来源页面:http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html

© 著作权归作者所有

童年伊梦
粉丝 1
博文 29
码字总数 21736
作品 0
浦东
私信 提问
业界 | Petuum提出对偶运动生成对抗网络:可合成逼真的视频未来帧和流

对于自动驾驶系统而言,准确预测驾驶场景的未来情况对于驾驶安全而言至关重要。卡内基梅隆大学和 Petuum 的一项研究试图通过对偶对抗学习机制来解决这一问题,他们提出的对偶运动生成对抗网络...

机器之心
2018/02/07
0
0
(转) Twisted :第十七部分 构造"回调"的另一种方法

简介 这部分我们将回到"回调"这个主题.我们将介绍另外一种写回调函数的方法,即在Twisted中使用 generators. 我们将演示如何使用这种方法并且与使用"纯" 进行对比. 最后, 我们将使用这种技术重...

水果糖
2016/01/27
19
0
只要3分钟,Python生成器原理详解

翻译:你逗比 segmentfault.com/a/1190000011330511 这篇文章是对 500 Lines or Less 一书中高效爬虫一章的部分翻译,原文:How Python Generators Work。建议结合《流畅的 Python》食用。 ...

马哥教育
2017/10/26
0
0
教程 | 用生成对抗网络给雪人上色,探索人工智能时代的美学

  选自Medium   作者:Leon Fedden   机器之心编译   参与:Panda      科学与艺术从来都不是两个互斥的主题。在「神经美学」的指引下,开发者兼艺术家   Leon Fedden 近日在 ...

机器之心
2017/12/30
0
0
万字长文带你成为Python老司机

万字长文带你成为Python老司机 前言: 本文主要总结项目开发中和面试中的Python高级知识点,是进阶Python高级工程师必备要点。 主要内容: No.1 一切皆对象 众所周知,Java中强调“一切皆对象...

棋帅小七
2018/08/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

001-docker的基础概念

安装 yum install docker;systemctl status docker 我们启动docker的时候,docker会帮我们创建一个docker 0的网桥 docker 基础命令 查看当前镜像 docker images 搜索镜像 docker search 执行...

侠客行之石头
47分钟前
5
0
OSChina 周六乱弹 —— 不要在领导修风扇的时候打开电扇

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Whats Up》 主唱妹子 Lina Perry 的嗓音实在太有力了,收放自如的自信才能唱出这么优秀的歌吧!#今日歌曲推荐# 《Whats Up》-...

小小编辑
今天
26
2
SpringBoot集成Elasticsearch并进行增删改查操作

一、创建工程 使用IntelliJ创建SpringBoot工程 SpringBoot版本为2.0.4 ElasticSearch为5.6.10 删掉蓝框中的文件(如上) 最后我们的目录结构(如下) 下面pom文件主要修改的是把spring boot从Int...

一字见心
今天
5
0
聊聊rocketmq的TransientStorePool

序 本文主要研究一下rocketmq的TransientStorePool TransientStorePool rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/TransientStorePool.java publi......

go4it
昨天
6
0
笔记

场外借贷, 质押 ,托管, 永续合约. 场外借贷,n签合同. 新功能 证券交易组负责中信证券机构及个人投资交易相关系统,服务机构及个人投资客户, 涉及到两融、期权、 期货、做市等境内境外创新业...

MtrS
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部