使用本项目,不需要关注Scratch2.0功能的具体实现,只需要简单的js基础即可调用Scratch的相关功能,助力项目快速开发。
demo见编译的bin-debug/scratch2.html文件
Chrome已禁止Flash插件,可以使用其他浏览器或IE、Edge
本项目接受PR,如果大佬有更好的实现方法和更好的创意,欢迎提交PR!
同时也欢迎提出Issue,BUG建议均可
├── bin-debug # 编译后的文件夹
│ ├── internalapi # 素材库资源
│ ├── scratchr2 # 素材库索引
│ ├── locale # 语言包
│ ├── siteapi # api demo
│ ├── js # 用的的js文件
│ │ ├── scratch.js # scratch初始化
│ │ ├── swfobject.js # flash和js交互
│ ├── scratch2.html # scratch页面demo
│ └── scratch2.swf # scratch本体
├── libs # as3库
├── html-template # html编译模板
├── src
│ ├── assets # 资源文件
│ ├── blocks # 积木相关
│ ├── com # 第三方库
│ ├── extensions # 拓展管理
│ ├── filters # 图像处理相关
│ ├── interpreter # 积木解释器
│ ├── leelib # flv编码插件
│ ├── logging # 日志工具类
│ ├── primitives # 积木基类
│ ├── scratch # scratch核心
│ ├── sound # 声音处理
│ ├── soundbank # 音频资源
│ ├── soundedit # 声音编辑器
│ ├── svgeditor # svg编辑器
│ ├── svgutils # svg工具类
│ ├── ui # ui实现
│ ├── uiwidgets # ui组件
│ ├── util # 工具类
│ ├── CSS.as # 全局样式
│ ├── Specs.as # 积木的定义和分类
│ ├── Scratch.as # Scratch主文件
│ └── scratch2.mxml # 界面组件布局
├── README.md
├── README-RAW.md # 官方原版README
└── package.json
└── webpack.consig.js
https://www.213.name/archives/1033
https://www.213.name/archives/1756
建议使用FireFox浏览器
-
下载相应浏览器的flash player debugger (NPAPI)
https://www.adobe.com/support/flashplayer/debug_downloads.html
-
下载FireFox扩展Flash Debugger
-
按F12打开开发者工具即可调试
As3错误信息和日志也会在JS控制台输出,严重错误将会弹框提示
-
方式一: 创建object标签时将默认参数直接传入。
-
方式二:flash载入后js直接与as3交互,即用js直接调用as3的方法。
As3使用ExternalInterface.addCallback(functionName, closure)来注册一个对js开放的接口,scratch里已经帮我们封装好了一些js接口。可自行仿照添加新的接口。
如:
addExternalCallback("loadProjectByUrl", loadProjectByUrl);
scratch已提供as调用js的方法
externalCall(functionName:String, returnValueCallback:Function = null, ...args)
参数:
参数名 | 描述 |
---|---|
functionName | js中的函数名 |
ReturnValueCallback | 执行完后包含返回值的回调 |
Args | 传入js的参数 |
如:
externalCall("getProjectData",null,projectName(),zipData); //获取项目文件
初始化在scratch.js里的flashvars内配置
// 初始化配置
var flashvars = {
extensionDevMode: 'true', //启用拓展设备模式
microworldMode: 'false', //小窗口模式,隐藏菜单栏等
autostart: 'false', //自动运行项目
showOnly: 'false', //是否仅保留播放窗口
urlOverrides: {
internalAPI: "internalapi/", //素材库
staticFiles: "scratchr2/static/", //素材库索引
upload: "project/", //sb2文件加载目录
uploadAPI: 'siteapi/api_file.php', //文件上传api
mp4Encoder: "lib/mp4/FW_SWFBridge_ffmpeg.swf", //mp4编码插件
},
inIE: (navigator.userAgent.indexOf('MSIE') > -1)
};
推荐使用js动态生成object标签来加载scratch,并将flash的启动参数一并传入,我们已在scratch.js内实现。 swfobject.js可以对flash进行一些操作,如监听flash是否加载完毕
window.SWFready = $.Deferred();
$.when(window.SWFready).done(function() {
//Scratch加载完毕
});
通过winodow.scratch对象来调用scratch的API
scratch回调均通过window.scratchCallback对象内的方法,具体请看scratch.js
window.scratch.loadProjectByUrl
参数名 | 描述 |
---|---|
url | sb2文件地址 |
projectName | 项目名称 |
window.scratch.loadProjectById
参数名 | 描述 |
---|---|
url | sb2文件地址 |
uuid | 项目uuid |
加载后项目的UUID,需要配置好projectPath参数
window.scratch.uploadProject
由于flash的安全沙箱限制,js触发上传动作必须要由用户确认,所以无法去除是否上传的对话框。
window.scratch.getProjectData
返回Base64编码数据
window.scratch.getScreenshotData
返回Base64编码数据
window.scratch.getProjectName
window.scratch.setProjectName
参数:
参数名 | 描述 |
---|---|
projectName | 项目名称 |
window.scratch.getUUID
UUID新建或从URL加载项目时重新生成
- 录像MP4编码、上传
- UI设置
- 菜单栏按钮设置
- ……
Flash不能加载非同源资源,也就是scratch无法加载非同一域名下的项目、素材库、翻译等等。
解决方案是在资源服务器根目录下添加crossdomain.xml文件。
下为允许所有来源的请求配置:
<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<site-control permitted-cross-domain-policies="all"/>
<allow-http-request-headers-from domain="*" headers="*" secure="false" />
<allow-access-from domain="*" secure="false" />
</cross-domain-policy>