当前位置: 首页 > 编程日记 > 正文

Adobe源码泄漏?3行代码搞定,Flash动画无缝导入Android/iOS/cocos2dx(二)

[注] iOS代码已重构,效率提升90%,200层动画不卡。[2016.10.27]

上一篇 点此阅读 简要介绍了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-- libs/--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动画完整要求

  1. 下面涉及名字的地方可以使用 英文字母,数字和下划线,不要用中文。
  2. 先制作动画所需要的图片,png/jpg格式的,所有的动画元素需要全部使用图片,不可以使用矢量图和文字等等。
  3. 图片命名尽量简单,以减少程序处理的数据量。
  4. 建立fla时,使用Action Script 3。
  5. 在库中建立3个文件夹,名字为:pics(图片),anims(动画的动作,比如idle, move等),eles(图片对应的元件)。对应的资源请在不同的文件夹中建立。
  6. 每张图片(pics)都需要生成一个元件(eles),不要把多张图片放在一个元件中。所以元件的数量应该同图片的数量是相同的。
  7. 所有的元件请使用 “影片剪辑”(movie clip), 不要使用 “按钮” 和 “图片”。
  8. 把制作好的png图片(只用png,不要用jpg或其它格式图片)导入到flash中,并拖进pics文件夹下面。
  9. 依次生成png图片对应的元件(影片剪辑),把图片拖到元件中。使图片居中。元件名字应该同图片的名字完全相同。这一步可以使用脚本(“1.根据png创建元件“)代替这个操作。
  10. 建立新的元件,还是使用”影片剪辑”(movie clip),然后拖进anims文件夹中。这就是需要制作的动作了。
  11. 这时候,就可以使用eles(不要使用pics中的图片)中的元件在时间轴中制作动作了。
  12. 制作动作,帧的普通操作(关键帧关键帧之间的传统补间,只能使用传统补间)都可以使用,但是对关键帧的处理只支持以下几种:移动,缩放,旋转,倾斜,颜色叠加,透明度的变化 这5种变换。
  13. 不要使用除13条中描述的其他任何对关键帧的操作,比如滤镜,显示混合等。
  14. 不要使用缓动,不要使用补间动画时元件旋转等高端操作。如果某一帧某个元件不可见,可以通过设置它的透明度为0,或者插入空白关键帧来实现。
  15. 不要使用嵌套动画:就是说关键帧上最好只用eles中的元素来做,不要做好了一段动画,把这段动画作为关键帧使用。。
  16. 使用eles中的原件制作动画时,始终保持锚点的位置在原件的中央,否则会出现位置不对的问题。默认锚点是在中央的,不要手动去调整它。
  17. 最后,保存成fla就可以了。美术人员最终输出就是一个.fla文件。

程序人员使用美术制作好的动画

程序拿到美术人员制作好的fla文件后,首先要进行一番检查,看看是否合格。
所以需要确保程序员熟悉flash的页面和菜单,并了解一些简单的flash软件操作。

  • 打开.fla文件。简单检查一下文件完成度。
    • 是否3个文件夹都在(anims,pics,eles)。
    • 是否动画文件都在anims文件夹内。
    • 是否pics与eles内文件数量相同,并且一一对应,相对应的2个组件名字也要完全一致。
    • 是否pics和eles内的组件名字都有.png后缀。
  • 如果需要给关键帧添加事件,需要选中该关键帧(首先在timeline中选中关键帧,然后在主页面中选中该帧代表的图片,过程中最好隐藏timeline中的其它层),然后点击右侧与library同级的标签页properties。在第一行标有 < Instance Name > 的输入框,输入你的事件名,程序能够在播放到这一帧的时候,触发这个事件(在代码中,事件对应的字段为”mark”)

  • 事件添加完成后,选择菜单: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可以放在资源目录中任意位置。代码初始化时需要指定目录。
    • Android需要将这2个文件放入 Assets文件夹的子文件夹flashAnims中。
    • iOS拖入xcode中,选择“copy if need”和“create groups”,点击确定。

程序员如何在代码中调用动画

//cocos2dx版本使用方法
//包含头文件
#include "AnimNode.h"
using namespace windy;... ...//使用代码
AnimNode *animNode = AnimNode::create();
animNode->load("xxxx/flashFileName.flajson");
animNode->play("animationName", WINDY_ANIMNODE_LOOP_FOREVER);//这里的animationName就是flash中anims文件夹内的动画名称
superNode->addChild(animNode);
<!--Android版本使用方法-->
<!--Android还需要在manifest文件中添加权限,与demo中相同添加即可。不要忘记res/values目录中的flashview_attr.xml文件。 -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:FlashView="http://schemas.android.com/apk/res-auto" <!--!!!!!!注意这个要加-->android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.xcyo.yoyo.flashsupport.MainActivity"><com.flashanimation.view.FlashView
        android:layout_width="match_parent"android:layout_height="match_parent"FlashView:flashDir="flashAnims"FlashView:flashFileName="callTextAnim"FlashView:defaultAnim="arriving1" <!--这里的defaultAnim就是flashanims文件夹内的动画名称-->FlashView:designDPI="326"FlashView:loopTimes="0"android:id="@+id/flashview"/></RelativeLayout>
//iOS版本使用方法
#import "FlashView.h"... ...FlashView *flashView = [[FlashView alloc] initWithFlashName:@"flashFileName"];
flashView.frame = self.view.frame;// CGRectMake(100, 100, 200, 500);
flashView.backgroundColor = [UIColor clearColor];
[superView addSubview:flashView];
[flashView play:@"animationName" loopTimes:FOREVER];//这里的animationName就是flash中anims文件夹内的动画名称

相关文章:

the user operation is waiting for building workspace to complete解决办法

如果你在开发android应用程序中总是出现一个提示&#xff0c;显示“the user operation is waiting for "building workspace" to complete”&#xff0c;解决办法如下&#xff1a; 1.选择菜单栏的“Project”,然后把菜单栏中“Build Automatically”前面的对钩去掉。…

ios开发趋势_2020年将成为iOS应用开发的主要趋势

ios开发趋势Technology has always brought something new with time. And with these ever-changing technologies, you need to stay updated to get all the benefits from whats new. 随着时间的流逝&#xff0c;技术总是带来新的东西。 借助这些不断变化的技术&#xff0c…

http 权威指南 目录

第一部分 HTTP&#xff1a;Web的基础 第1章 HTTP概述 1.1 HTTP——因特网的多媒体信使 1.2 Web客户端和服务器 1.3 资源 1.3.1 媒体类型 1.3.2 URI 1.3.3 URL 1.3.4 URN 1.4 事务 1.4.1 方法 1.4.2 状态码 1.4.3 Web页面中可以包含多个对象 1.5 报文 1.6 连接 1.6.1 TCP/IP 1.6…

java初学者笔记总结day9

异常的概念throwable&#xff1a;异常&#xff0c;程序非正常执行的情况error&#xff1a;错误&#xff0c;程序非正常执行的情况&#xff0c;这种问题不能处理&#xff0c;或不应该处理exception&#xff1a;例外&#xff0c;程序非正常执行的情况&#xff0c;这种问题可以通过…

1小时学会:最简单的iOS直播推流(一)介绍

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

leetcode dfs_深度优先搜索:具有6个Leetcode示例的DFS图遍历指南

leetcode dfsHave you ever solved a real-life maze? The approach that most of us take while solving a maze is that we follow a path until we reach a dead end, and then backtrack and retrace our steps to find another possible path. 您是否解决了现实生活中的迷…

MySQL排序原理与MySQL5.6案例分析【转】

本文来自&#xff1a;http://www.cnblogs.com/cchust/p/5304594.html&#xff0c;其中对于自己觉得是重点的加了标记&#xff0c;方便自己查阅。更多详细的说明可以看沃趣科技的文章说明。 前言 排序是数据库中的一个基本功能&#xff0c;MySQL也不例外。用户通过Order by…

7.RabbitMQ RFC同步调用

RabbitMQ RFC同步调用是使用了两个异步调用完成的&#xff0c;生产者调用消费者的同时&#xff0c;自己也作为消费者等待某一队列的返回消息&#xff0c;消费者接受到生产者的消息同时&#xff0c;也作为消息发送者发送一消息给生产者。参考下图&#xff1a; 调用流程如下&…

1小时学会:最简单的iOS直播推流(二)代码架构概述

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

sh脚本每天创建一个文件夹_我每天创建一个月的视频。 这就是发生的事

sh脚本每天创建一个文件夹At the end of 2019 I promised that 2020 would be all about my YouTube channel. So thats what Ive been doing. &#x1f603; 在2019年底&#xff0c;我保证2020年将成为我的YouTube频道的全部 。 这就是我一直在做的。 &#x1f603; On the f…

1小时学会:最简单的iOS直播推流(三)使用系统接口捕获音视频数据

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

什么是bower

Bower是一个客户端技术的软件包管理器&#xff0c;它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具&#xff0c;如YeoMan和Grunt&#xff0c;这个会在以后的文章中介绍。 准备工作 安装node环境:node.js安装Git&#x…

ES6中export及export default的区别

在ES6中&#xff0c;export和export default均可用于导出常量、函数、文件、模块等&#xff0c;你可以在其他文件或模块中通过import (常量 | 函数 | 文件 | 模块)名的方式将其导入&#xff0c;以便能够对其进行使用&#xff0c;但在一个文件或模块中&#xff0c;export、impo…

sm2加密算法实例_实例说明加密算法

sm2加密算法实例Cryptography, at its most basic, is the science of using codes and ciphers to protect messages. 密码学从根本上讲就是使用代码和密码保护消息的科学。 Encryption is encoding messages with the intent of only allowing the intended recipient to un…

git---远程仓库版本回滚

开发中&#xff0c;发现有错误版本提交带远程分支master&#xff0c;怎么处理&#xff1f; 1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况&#xff0c;于是做了一下研究&#xff0c;写下这篇博客。 2 问题 如果提交了一个错误的版本&#xff0c;怎么回退版本&#x…

1小时学会:最简单的iOS直播推流(四)如何使用GPUImage,如何美颜

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

团队任务四(无图)

任务要求&#xff1a; WBS练习对团队项目进行任务分解要求所有人共同参与队长列出需求成员进行估计队长领导大家达成共识形成团队报告&#xff0c;发至团队博客项目分解&#xff1a; 一、手机监控(24h) &#xff08;1&#xff09;手机当前运行程序监控&#xff08;用以观察用户…

react测试组件_测试驱动的开发,功能和React组件

react测试组件This article is part of my studies on how to build sustainable and consistent software. In this post, we will talk about the thinking behind the testing driven development and how to apply this knowledge to simple functions, web accessibility,…

CDOJ 1073 线段树 单点更新+区间查询 水题

H - 秋实大哥与线段树Time Limit:1000MS Memory Limit:65535KB 64bit IO Format:%lld & %llu Submit Status Practice UESTC 1073Appoint description: System Crawler (2016-04-24)Description “学习本无底&#xff0c;前进莫徬徨。” 秋实大哥对一旁玩手机的学…

1小时学会:最简单的iOS直播推流(五)yuv、pcm数据的介绍和获取

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

beta冲刺第一天

1、今天解决的进度 成员进度陈家权回复界面设计&#xff0c;由于成员变动加上和其他成员距离较远&#xff0c;服务器404赖晓连改进Alpha版本页面没能及时更新的问题雷晶获取提问问题时间更新到数据库林巧娜今天的任务是夜间模式功能块&#xff0c;没有完成&#xff0c;查找了很…

angular绑定数据_Angular中的数据绑定说明

angular绑定数据数据绑定 (Data Binding) 动机 (Motivation) Data often defines the look of an application. Interpreting that data into the user interface involves class logic (.component.html) and a template view (.component.ts) . Angular connects them throug…

WPF判断两个时间大小避免误差

进行查询操作的时候&#xff0c;经常用到判断开始时间和结束时间大小的条件&#xff0c;由于从控件上获取的时间除了年月日时分秒&#xff0c;还包括毫秒、微秒等&#xff0c;导致直接判断时间大小的时候会产生一些误差&#xff0c;如下&#xff1a; 结果分析&#xff1a;年月日…

1小时学会:最简单的iOS直播推流(六)h264、aac、flv介绍

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

分享一款Markdown的css样式

使用 本样式在这个样式的基础上做了一些修改&#xff0c; 主要是对于表格和代码块以及一些细节的修改。 主要目的是用在chrome的扩展 Markdown Preview Plus中&#xff0c; 替换其内置的样式。 由于 Markdown Preview Plus对css文件大大小有要求&#xff08;小于8K&#xff09;…

远程桌面怎么持续连接_如何拥有成功且可持续的远程产品管理职业

远程桌面怎么持续连接Remote work is rapidly growing in all industries. Some professionals might try to push away this new way of working, seeing it as simply a current necessity. They might not think its fit for a product manager who’s constantly managing …

1小时学会:最简单的iOS直播推流(七)h264/aac 硬编码

最简单的iOS 推流代码&#xff0c;视频捕获&#xff0c;软编码(faac&#xff0c;x264)&#xff0c;硬编码&#xff08;aac&#xff0c;h264&#xff09;&#xff0c;美颜&#xff0c;flv编码&#xff0c;rtmp协议&#xff0c;陆续更新代码解析&#xff0c;你想学的知识这里都有…

Linux日常命令记录

1、查找进程 ps -ef | grep javajps 2、杀死进程 kill -9 1827 3、进入tomcat中的日志文件夹 cd logs 4、查看日志 tail -f catalina.outtail -n 10000 catalina.out 5、查看tomcat的连接数 ss -nat|grep -i "8081"|wc -lnetstat -nat | grep -i "8081" | …

【特效】移入显示移出隐藏

移入显示移出隐藏的效果也是很常见的&#xff0c;例如&#xff1a; 如果页面有有多处地方有此效果&#xff0c;那么也可以合并到一块&#xff0c;只写一段js代码&#xff0c;只要注意控制样式和class名字和用于js获取元素的class名字分开设置就可以了。代码很简单&#xff0c;用…

web前端开发最佳实践_学习前端Web开发的最佳方法

web前端开发最佳实践为什么要进行网站开发&#xff1f; (Why web development?) Web development is a field that is not going anywhere anytime soon. The web is moving quickly, and there are regular improvements to the devices many people use daily. Web开发是一个…