詹瞻要去哪

笔记本

谢谢你,翻开这尘封的笔记本。


一份来自 iOS🙈 的零基础 After Effects CEP 教程 -- [ 3 ] CEP 构成详解



上篇文章我们完成了第一个项目 – HelloWorld。
现在我们开始对一个 CEP 项目的构成进行详细解释:


JSX 文件

“JSX 中写的是 Adobe 为旗下软件的提供的自动化脚本 – ExtendScript。”
它是可以在宿主应用中独立运行的,这也是我将它放在第一个讲的原因。

举个栗子:
这个 ENMetadataCleaner.jsx 是博主写的一个 “PSD 文件瘦身” 脚本,有兴趣的可以 download 来看看。

其中:

var mainDocument = app.activeDocument;

调用了宿主应用 (这里是 PS) 提供的 API 从 DOM 中获取当前 appactiveDocument

deleteDocumentAncestorsMetadata();

这个方法的实现也是通过宿主应用提供的 API 进行一些对宿主应用的操作,总的来说就是控制宿主应用去做事,通过 JSX 基本上可以实现所有的操作。

完成对 JSX 的编辑后,我们只需要在宿主应用 (这里是 PS) 的菜单栏中选择:

「 文件 」——「 脚本 」——「 浏览 」

选中 JSX 文件,就可以跑起来啦。

你也可以使用一开始讲到的 Adobe ExtendScript Toolkit CC

只需要选择好宿主程序,在编辑框中写代码再点击运行即可。 你还可以在的 Toolkit 的 Data Browser 窗口实时查看宿主应用的 DOM,这可以让你查看对象中有什么成员:

比如前面提到的 app.activeDocument

关于 ExtendScript 的具体介绍,接下来会有一篇巨长的文章专门讲,这里就不再赘述。



CEP 界面

从 HelloWorld 中不难看出,CEP 无非就是一个由 HTML+CSS 写的界面面板,加上用 JavaScript 响应事件,再用 node.js(CEP 本身有 node 环境) 去读写本地文件这三个模块构成的一个本地 Web 项目。
这里借用浅藏的宝藏博主画的一张关系图:

从关系图可以看出,我们使用 CSInterface.js 充当连接宿主程序和 CEP 扩展的桥梁,通过

cs.evalScript("function()", callback);

来调用 JSX 中的方法从而控制宿主程序。



CSXS/manifest.xml 文件

manifest.xml 里面有扩展的重要的配置信息,包括扩展名称、版本、在什么宿主中运行、入口文件、尺寸等等等,manifest.xml 只有宿主应用启动时载入,所以修改了 manifest.xml 只有重启宿主应用才会使修改生效。 manifest.xml 是一个 XML 文件,你可以用任何文本编辑器打开并编辑它,另外还可以使用 foxe 等 XML 编辑器更加直观的以树形列表查看和编辑。

Hello World 的 manifest.xml 中,我写了部分注释,在这里我进行一次详细解释:



1.扩展

2.支持宿主版本

 <ExecutionEnvironment> 标签的子标签 <HostList> 中的 <Host> 定义了这个扩展集的所有程序可以在那些宿主和其对应版本中运行,比如:

<Host Name="PHSP" Version="14.0"/>
<Host Name="PHXS" Version="14.0"/>

 Name 属性是支持的宿主程序名, PHSP、PHXS 表示的是 PhotoShop ,Version 属性是限定宿主程序的版本,比如 PhotoShop CC2015 的版本是 16.0,除了限定在某个版本,还可以限定在一个区间,比如下面这个例子是限定运行在 11.0 到 99.9 之间的版本。

<Host Name="PHXS" Version="[11.0,99.9]"/>

这是各个 Adobe 程序与对应宿主 ID 还有各版本版本号的列表:



3.扩展定义

  <DispatchInfoList> 的子标签 <Extension> 中的 <DispatchInfo> 标签定义了扩展具体的各种属性。对应不同的子扩展,<DispatchInfoList>可以有多个<Extension> 标签。

指定资源文件

<Resources>    
  <MainPath>./index.html</MainPath>
  <ScriptPath>./jsx/Source1.jsx</ScriptPath>
</Resources>

 <MainPath> 指定的是主页面的 HTML 文化的位置, 这个文件就是 CEP 面板中的内容,在面板打开时第一个就会载入它。 <ScriptPath> 是指定扩展中会使用到的 JSX 文件的内容。(除了在这里指定还可以动态加载 JSX 文件,以后会详细说明)

生命周期
<Lifecycle> 标签下的设置关于插件启动和可视的设定。

  • 扩展可视
    <AutoVisible>true</AutoVisible>
     设定扩展是否可视,值为 false 的话, 扩展就是没有界面的不可视扩展。(要让插件完全隐形的话,可以不要设置下面会说的 <Menu> 标签,这样扩展就不会出现在 PhotoShop 的扩展功能菜单中)

  • 自动运行
     <StartOn> 标签下可以添加多个 <Event> 标签,每个 <Event> 标签值为一个事件,当事件发生时,扩展就会被自动打开。 下面这个例子中扩展会在 PhotoShop 启动时自动打开:

<Lifecycle>
    <StartOn>
       <Event>applicationActivate</Event>
    </StartOn>
</Lifecycle>

关于扩展中的事件(Event)后面会详细说。



4.界面

<UI> 标签下的各种子标签指定关于扩展界面的各种属性

 界面类型 <Type>

 扩展面板标题 <Menu>

 插件尺寸 <Size>

 扩展图标 <Icons>

打赏一个呗

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦