詹瞻要去哪

笔记本

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


一份来自 iOS🙈 的零基础 After Effects CEP 教程 -- [ 2 ] Hello World

闲话不说,配置完环境后,我们先创建一个能跑起来的项目,然后再对项目目录进行解释吧!

开始 Hello World !!!

 

1.建立项目目录

我们先创建一个文件夹,名称随意,为了宿主应用启动时加载,它需要被放在指定目录:

OS X:         /Library/Application Support/Adobe/CEP/extensions/
Windows 32 位:C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
Windows 64 位:C:\Program Files\Common Files\Adobe\CEP\extensions\

项目中必要的文件有: 你可以根据自己的需求去扩展这个目录。


2.创建 manifest.xml 配置文件

manifest.xml 是一个 XML 格式的配置文件,里面有我们这个扩展的配置信息,包括扩展名称、版本、在什么宿主中运行、入口文件、尺寸等等等配置,后面我们还会详细介绍 manifest.xml。

我们在扩展工作目录中建立一个名为 CSXS 的文件夹,并在其中新建一个文本并命名为 manifest.xml ,并输入以下内容,保存为 UTF-8 编码:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" Version="6.0" ExtensionBundleId="com.yourName.HelloWorld" ExtensionBundleVersion="1.0.1" ExtensionBundleName="HelloWorld">
    <ExtensionList>
        <Extension Id="com.yourName.HelloWorld" Version="1.0.1"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList>

            <!--支持的宿主应用列表和版本-->
            <Host Name="AEFT" Version="[13.0,15.9]"/>
            <Host Name="AEFX" Version="[13.0,15.9]"/>

            <!-- Illustrator -->
            <!-- <Host Name="ILST" Version="[18.0,18.9]" />-->
            <!-- InDesign -->
            <!-- <Host Name="IDSN" Version="[10.0,10.9]" /> -->
            <!-- Premiere -->
            <!-- <Host Name="PPRO" Version="[8.0,8.9]" /> -->
            <!-- AfterEffects -->
            <!--<Host Name="AEFT" Version="[13.0,15.9]"/>-->
            <!--<Host Name="AEFX" Version="[13.0,15.9]"/>-->
            <!-- PRELUDE -->
            <!-- <Host Name="PRLD" Version="[3.0,3.9]" />   -->
            <!-- FLASH Pro -->
            <!--<Host Name="FLPR" Version="[14.0,18.9]" />-->

        </HostList>
        <LocaleList>
            <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="6.0"/>
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.yourName.HelloWorld">
            <DispatchInfo>
                <Resources>
                    <MainPath>./index.html</MainPath>
                    <!--引入 jsx 文件-->
                    <ScriptPath>./hosts/host.jsx</ScriptPath>
                    <CEFCommandLine>
                        <Parameter>--enable-nodejs</Parameter>
                    </CEFCommandLine>
                </Resources>
                <Lifecycle>
                    <!-- 设置扩展面板为可视 -->
                    <AutoVisible>true</AutoVisible>
                    <!--<StartOn></StartOn>-->
                    <!-- 打开程序的时候自启动插件 -->
                </Lifecycle>
                <UI>
                    <Type>Panel</Type> <!-- 设置扩展显示为面板模式-->
                    <Menu>Hello World</Menu> <!-- 设置扩展标题-->
                    <Geometry>
                        <!-- 设置面板尺寸 -->
                        <Size>
                            <Width>500</Width>
                            <Height>500</Height>
                        </Size>
                        <!--<MinSize>-->
                            <!--<Width>470</Width>-->
                            <!--<Height>500</Height>-->
                        <!--</MinSize>-->
                        <!--<MaxSize>-->
                            <!--<Width>470</Width>-->
                            <!--<Height>500</Height>-->
                        <!--</MaxSize>-->
                    </Geometry>
                    <Icons/>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>



3.创建 HTML 页面

CEP 的用户界面使用的是 HTML ,也就是网页,在 manifest.xml 中定义了扩展的入口 HTML 文件。

在工作目录根目录建立一个文本命名为 index.html ,填入下面内容,保存为 UTF-8 编码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">

    <script src="js/CSInterface.js"></script>
    <script src="js/pageAction.js"></script>

    <style type="text/css">

        body{
            background-color: #474747;
        }

        #helloWorldBtn{

            width: 100px;
            height: 70px;

            background-color: aquamarine;
        }

    </style>

</head>

<body>

<button id="helloWorldBtn" onclick="helloWorldBtnDidClick()">HelloWorld</button>

</body>
</html>



4.扩展其他目录

在 HTML 文件中我们引入了一个 Javascript 文件,在根目录建立一个名为 js 的文件夹,并在其中新建文本 pageAction.js ,填入下面内容,保存为 UTF-8 编码:

function helloWorldBtnDidClick() {

    var csInterface = new CSInterface();
    csInterface.evalScript("getProjectInfo()", function (result) {

        alert("资源路径:" + result);
    });
}

HTML 中给一个按钮绑定了 pageAction.js 中的一个方法 helloWorldBtnDidClick() 这个方法会实现一个简单的功能:通过宿主应用获取当前资源路径。为了实现这个功能我们还需要一个执行ExtendScript 的 JSX 文件。 运行在 CEP VM 中的 JavaScript 无法直接调用宿主应用的功能,所以我们使用 CSInterface.js 做为桥梁调用 JSX 。我们在 HTML 文件中已经引用了 CSInterface.js 。
CSInterface.js 需要放入你的工作目录中,它是 Adobe 官方发布的可以从官方获取,在前面提到的CEP-Resources中可以看到。

可以看到我们在 JavaScript 中使用:csInterface.evalScript(“getProjectInfo()”, callBack); 调用了 getProjectInfo() 方法,
这个方法的实现在 manifest.xml 中定义的 ./hosts/host.jsx 文件。 在根目录建立一个名为 hosts 的文件夹,并在其中新建文本 host.jsx ,填入下面内容,保存为 UTF-8 编码:

function getProjectInfo() {

    return app.project.file.path + app.project.activeItem.name;
}



5.完成

到此我们的扩展已经完成了,打开 After Effects 就可以打开这个扩展了

这是一个最简单的扩展示例了,它展示了如何构建 CEP 和运行一个 CEP 插件 ,如果没看明白,还可以下载这个 Hello World! 扩展:示例下载


调试

1.远程调试

远程调试是在浏览器中打开调试页面调试插件。
上篇文章中下载的 CEP Client for Mac || CEP Client for Win 就用来做远程调试的。
进行远程调试之前我们要先配置 .debug 文件。

 1. 在根目录下创建 .debug 文件。
 2. 输入以下内容,保存为 UTF-8 编码:

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionList>
    <!--拓展 ID-->
    <Extension Id="com.yourName.HelloWorld">
        <HostList>
            <!--宿主名称  ---  测试端口号-->
            <Host Name="AEFT" Port="8000"/>
            <Host Name="AEFX" Port="8001"/>
        </HostList>
    </Extension>
</ExtensionList>

在浏览器中用 http://localhost:端口号/ 就能访问扩展的远程调试页面了,例如:http://localhost:8080

也可以选择 Chrome 来调试。


2.ExtendScript 调试

上文中,我们使用 csInterface.evalScript(“getProjectInfo()”, fun); 调用了 host.jsx 中的方法,这个 jsx 文件其实就是控制宿主应用操作的 ExtendScript 文件啦,我们可以使用 Adobe ExtendScript Toolkit CC 去编辑 ExtendScript 并让其在指定的宿主应用中运行,而且重要的是可以通过 Data Browser 查看实时查看宿主应用的 DOM :

有些无法用 Data Browser 直接查看的对象数据,我们可以使用 alert() 或者 $.writeln() 去查看。 另外在 Adobe ExtendScript Toolkit 的 Help 菜单中还有一个 Object Model Viewer 可以参看 ExtendScript 的对象模型文档:

3.HTTP Cookies




4.调试日志

插件的调试日志对插件的测试非常有用,在注册表中的

HKEY_CURRENT_USER\Software\Adobe\CSXS.5
或
HKEY_CURRENT_USER\Software\Adobe\CSXS.6 
或
HKEY_CURRENT_USER\Software\Adobe\CSXS.7

中的 LogLevel 项的值能够控制扩展脚本运行中产生日志的类型,

0 – 关(不生成日志)
1 – 错误(默认值日志记录)
2 – 警告
3 – 信息
4 – 调试
5 – 跟踪
6 – 所有



5.刷新

宿主应用不同刷新的方式也不同,一般重新载入插件就能刷新。
如果修改了 manifest.xml 文件需要重新载入宿主应用。
一些宿主应用,比如 Illustrator 由于它的扩展默认是持久性的,得要重启 Illustrator 才行。

也可以在远程调试的控制台中使用 closeExtension() 关闭扩展再打开。

new CSInterface().closeExtension()

在扩展的 js 文件中搜索 com.adobe.PhotoshopPersistent 相关语句,把其都删除或注释掉,也能关闭扩展的持久化,让刷新更简单。

打赏一个呗

取消

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

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

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