Adobe源码泄漏？3行代码搞定，Flash动画无缝导入Android/iOS/cocos2dx（二）
上一篇 &简要介绍了FlashToAnimation的功能，也就是将flash动画无缝导入到Android/iOS及cocos2dx中运行, 这一篇介绍这个库的使用方法。
首先确保系统中安装了flash，并且flash版本应该在cs3或者以上。
然后把&根目录/tools/flashScript&目录内的所有文件和文件夹copy到如下目录：
Mac：~/Library/Application Support/Adobe/[Flash CS+版本号]/[en_US或者zh_CN]/Configuration/Commands Windows：C:\Users[用户名]\AppData\Local\Adobe[Flash CS+版本号][en_US或者zh_CN]\Configuration\Commands
在文件管理器（或Finder）目录中看起来是这样的：
--Commands
-- 1.根据png创建元件.jsfl
-- 2.修改fla中元素的名字.jsfl
-- 3.导出动画数据.jsfl
--json2.jsfl
-- ....其他文件
这时候打开flash，点击菜单栏中的 Commands（中文的话应该是命令），在下拉菜单中就能看到我们加入的脚本啦。
到此为止准备工作就绪。
美术人员制作flash动画的步骤
下面步骤看起来很长，其实内容很简单，都是大家各自平时使用的经验，在这里写这么多是为了让小白用户不出错而已。
美术人员使用步骤：
新建一个as3.0的Flash Document。
保存文档，请务必保存文档，否则脚本不生效，并按照如下规则命名：
fla的命名应该以 &.& 分为3部分：
测试.test.fla
第一部分：中文，对本文件的中文描述。（不重要，可以随意取。）
第二部分：英文，表示本文件的英文标识符。（重要，在代码中会使用到这个关键字。）
第三部分：后缀，默认即可不用管。（使用.fla即可。）
其中第一部分中文可忽略。
在新建的Flash文件窗口右侧的Library栏中，点击右键，新建一个文件夹名为&pics&(注意，名字不能错，后面有类似的要求也要遵守)。
把制作flash的图片（png格式）拖入pics文件夹中。[!!!注意，所有的png图片必须带后缀.png否则会出错！]
点击commands中的脚本&1.根据png创建元件&。结果如图：
如果是cocos2dx中使用，为了避免Sprite Frame Cache重名，或者想要为图片生成跟本动画相关的独一无二的前缀，可以点击commands中的脚本&2.修改fla中元素的名字&。结果如下：
iOS可能也有此问题。因为直接拖入xcode中的文件一般选择&create groups&，这个只是逻辑文件夹，如果其他文件夹内存在同名文件则会冲突。所以最好每次制作动画，添加png图片的时候，都执行一次脚本&2.修改fla中元素的名字&。
新建一个Movie clip（影片剪辑），取一个合适的名字。然后拖入anims文件夹中
双击该Movie clip，进入编辑模式，此时就可以使用eles文件夹中的Movie clip，制作动画了。制作动画的具体细节要求，见下面的要求。
制作完成后，保存，美术人员的工作就完成了。
美术人员制作flash动画完整要求
下面涉及名字的地方可以使用 英文字母，数字和下划线，不要用中文。 先制作动画所需要的图片，png/jpg格式的，所有的动画元素需要全部使用图片，不可以使用矢量图和文字等等。 图片命名尽量简单，以减少程序处理的数据量。 建立fla时，使用Action Script 3。 在库中建立3个文件夹，名字为：pics（图片），anims（动画的动作，比如idle, move等），eles（图片对应的元件）。对应的资源请在不同的文件夹中建立。 每张图片（pics）都需要生成一个元件（eles），不要把多张图片放在一个元件中。所以元件的数量应该同图片的数量是相同的。 所有的元件请使用 &影片剪辑&(movie clip), 不要使用 &按钮& 和 &图片&。 把制作好的png图片（只用png，不要用jpg或其它格式图片）导入到flash中，并拖进pics文件夹下面。 依次生成png图片对应的元件（影片剪辑），把图片拖到元件中。使图片居中。元件名字应该同图片的名字完全相同。这一步可以使用脚本（&1.根据png创建元件&）代替这个操作。 建立新的元件，还是使用&影片剪辑&(movie clip)，然后拖进anims文件夹中。这就是需要制作的动作了。 这时候，就可以使用eles(不要使用pics中的图片)中的元件在时间轴中制作动作了。 制作动作，帧的普通操作(关键帧关键帧之间的传统补间，只能使用传统补间)都可以使用，但是对关键帧的处理只支持以下几种：移动，缩放，旋转，倾斜，颜色叠加，透明度的变化 这5种变换。 不要使用除13条中描述的其他任何对关键帧的操作，比如滤镜，显示混合等。 不要使用缓动，不要使用补间动画时元件旋转等高端操作。如果某一帧某个元件不可见，可以通过设置它的透明度为0，或者插入空白关键帧来实现。 不要使用嵌套动画：就是说关键帧上最好只用eles中的元素来做，不要做好了一段动画，把这段动画作为关键帧使用。。 最后，保存成fla就可以了。美术人员最终输出就是一个.fla文件。
程序人员使用美术制作好的动画
程序拿到美术人员制作好的fla文件后，首先要进行一番检查，看看是否合格。
所以需要确保程序员熟悉flash的页面和菜单，并了解一些简单的flash软件操作。
打开.fla文件。简单检查一下文件完成度。
是否3个文件夹都在(anims，pics，eles)。 是否动画文件都在anims文件夹内。 是否pics与eles内文件数量相同，并且一一对应，相对应的2个组件名字也要完全一致。 是否pics和eles内的组件名字都有.png后缀。
如果需要给关键帧添加事件，需要选中该关键帧（首先在timeline中选中关键帧，然后在主页面中选中该帧代表的图片，过程中最好隐藏timeline中的其它层），然后点击右侧与library同级的标签页properties。在第一行标有 & Instance Name & 的输入框，输入你的事件名，程序能够在播放到这一帧的时候，触发这个事件。
事件添加完成后，选择菜单：Commands（命令）- &3.导出动画数据&。窗口底部同Timeline（时间轴）同级的Output（输出）栏中会显示脚本执行过程。
成功后，打开.fla文件所在的目录，即可看到&.flajson文件&和.fla同名&图片文件夹&（里面是图片）。
如果需要使用二进制动画描述文件，则需要把&.flajson文件&转为&.flabin文件&，这两个后缀也不能改。
转换需要使用脚本&源码根目录/tools/JsonToBin.py&文件。这是一个python脚本。如果系统内没有python，则需要安装一个。
然后打开命令行（mac中使用终端，Windows中可使用cmd）执行如下命令，执行后的.flabin就是转换成二进制后的文件。
python 源码根目录/tools/JsonToBin.py [.flajson文件全路径] [.flabin文件全路径]
这时候可以把&.flajson文件&（或者 &.flabin文件&，二者使用其一即可，代码库内部处理，无需额外写代码判断）和&图片文件夹&放入程序指定目录就可以使用了。
cocos2dx可以放在资源目录中任意位置。代码初始化时需要指定目录。 需要将这2个文件放入 Assets文件夹的子文件夹flashAnims中。 iOS拖入xcode中，选择&copy if need&和&create groups&，点击确定。
程序员如何在代码中调用动画
//cocos2dx版本使用方法
//包含头文件
#include &AnimNode.h&
//使用代码
AnimNode *animNode = AnimNode::create();
animNode-&load(&xxxx/flashFileName.flajson&);
animNode-&play(&animationName&, WINDY_ANIMNODE_LOOP_FOREVER);//这里的animationName就是flash中anims文件夹内的动画名称
superNode-&addChild(animNode);
android:layout_width=&match_parent&
android:layout_height=&match_parent&
tools:context=&com.xcyo.yoyo.flashsupport.MainActivity&&
FlashView:designDPI=&326&
FlashView:loopTimes=&0&
android:id=&@+id/flashview&
//iOS版本使用方法
#import &FlashView.h&
FlashView *flashView = [[FlashView alloc] initWithFlashName:@&flashFileName&];
flashView.frame = self.view.// CGRectMake(100, 100, 200, 500);
flashView.backgroundColor = [UIColor clearColor];
[superView addSubview:flashView];
[flashView play:@&animationName& loopTimes:FOREVER];//这里的animationName就是flash中anims文件夹内的动画名称
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'08-1608-1709-1308-15
02-2103-2202-0503-17
◇本站云标签我想学flash制作动画，遇到了问题，该怎么做？
我先是用ps把人物和躯干画保存成png无白底图片，再导入flash调动作，可是这样图片就很大图形却很小，导致我调动作出现问题，就像你在玻璃上贴了个图画拿到房间里。该怎么解决这个问题？（别让我再用flash画一遍）&img data-rawheight=&2448& data-rawwidth=&3264& src=&/ffe1a8a096a97a995844fba02c1f04e7_b.jpg& class=&origin_image zh-lightbox-thumb& width=&3264& data-original=&/ffe1a8a096a97a995844fba02c1f04e7_r.jpg&&&br&
图为我把人物导入flash的样子，就像一块玻璃上贴了一个图，我看网上教学别人的图片是这样的。
&img data-rawheight=&3264& data-rawwidth=&2448& src=&/cfd2a6bad094d5622ed04ae_b.jpg& class=&origin_image zh-lightbox-thumb& width=&2448& data-original=&/cfd2a6bad094d5622ed04ae_r.jpg&&&br&我要怎么去掉多余的那些透明？有没有大神解答一下要怎么用ps做图，flash调动作制作flash动画，ps保存多大尺寸什么格式？多少分辨率？flash输出影片什么格式？（别说看你需要多大尺寸，我自己也不知道。给我个比较通用的尺寸）如果能把制作流程从零开始详细解答一下更好了，万分感激。
我先是用ps把人物和躯干画保存成png无白底图片，再导入flash调动作，可是这样图片就很大图形却很小，导致我调动作出现问题，就像你在玻璃上贴了个图画拿到房间里。该怎么解决这个问题？（别让我再用flash画一遍）
图为我把人物导入flash的样子，就像一块玻璃上贴了一个图，我看网上教学别人的图片是这样的。
方法一：将每一层定义成一个新的元件（symbol），然后加一层画遮罩（mask）抠像。方法二：将每一层定义成一个新的元件（symbol），打散（Ctrl + B），位图变成填充，然后用橡皮擦大致擦掉透明的区域。方法三：由于你的人物本身上色简单，可以直接用位图转矢量的功能（修改→位图→转换位图为矢量图），但会存在一定失真，还需要自己动手修形。正确的顺序的话……如果只是像你现在这种设计，最好还是在 Fl 或 Ai 里画成矢量的，完全没必要动用 Ps。如果非要用 Ps 的话，直接适当裁剪（Crop），尽量每层分别裁剪。另外还有类似 Vector Magic 这种第三方位图转矢量的软件可以用。仅供参考。
已有帐号？
无法登录？
社交帐号登录Flash教程,动画制作_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Flash教程,动画制作
上传于||文档简介
&&F​l​a​s​h​教​程​,​动​画​制​作
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩16页未读，继续阅读
你可能喜欢