YYEVA支持动态元素的透明MP4动效播放器 - AE插件介绍篇 （三）

AllenGYb
300 阅读8分钟

YYEVA（YY Effect Video Animate）是一个开源的支持可插入动态元素的MP4动效播放器解决方案，包含设计资源输出的AE扩展，客户端渲染引擎，在线预览工具。

对比传统的序列帧的动画播放方式，具有更高的压缩率，硬解码效率更高的优点，同时支持插入动态的业务元素；对比SVGA、Lottie等播放器，支持更多的特效支持，如复杂3D效果、描边、粒子效果等，达到所见即所得的效果。

我们发布项目已经有数月，也有很多朋友加入了我们的社群提出一些优化方案，我们陆续在支持。也欢迎大家到 github给我们点个⭐⭐⭐，您的Star是对我们最大的支持。

目前针对Adobe开发介绍的文档相对比较少，其实我们可在Adobe上做的事情很多，可以根据公司内部的需求,开发一些工具链提升公司设计资源的输出效率。

今天我们来主要介绍下，我们是如何开发YYEVA的AE扩展完成设计资源的读取和解析，并生成符合YYEVA的MP4资源。也希望通过本文章，大家了解一些AE-CEP开发的相关知识，应用到大家的项目中去

out.gif

AE插件介绍

Adobe Ater Effects 提供了两种方式让第三方来扩展功能，定制符合需求的相关插件和扩展。其基本方式主要是2种

  • 基于C++开发的Adobe Plugin,扩展名为aex

  • 基于JS开发的Adobe CEP,扩展名为aep

image.png

Adobe Plugin主要偏向于扩展仅靠AE不能实现的功能，Adobe Cep主要是通过AE现有的功能接口，通过一个与宿主程序交互的WebApp，实质是一个nodejs项目，通过调用csInterface提供的接口，完成一些扩展。

由于我们的YYEVA是使用AE现有的功能接口可以完成需求可以，因此是基于Adobe Cep开发，下面就先针对Adobe Cep开发做个简单介绍。

Adobe CEP 扩展介绍

Adobe Cep扩展提供了丰富的接口，来使得开发者能够使用他们提供的一些能力。可以通过该docs查看相关文档。

image.png

宿主程序，是Adobe下面的一些程序，如PhotoShop 、After Effects、Animate、Illustrator等。这些程序都提供内置功能，嵌入了一个ExtendScript环境，通过CSInterface接口，方便第三方的Cep扩展调用内部的功能。CEP扩展通过 CSInterface.js 提供的接口与宿主程序进行交互。

CEP 和 ExtendScript 都使用 JavaScript VM ，但是它们分别运行在两个虚拟机中，并不在一个上下文中，所以互相是独立的。 另外，一个 CEP 扩展可以同时被多个宿主运行。 他们是通过CSInterface的接口进行通信的。

我们在github上放置了一个CEP基础模板代码 ，大家可以获取看一下代码地址请跳转到github开源仓库获取，基于这个模板代码，开始您的CEP开发旅程吧

image.png

上图是CEP-Base的代码结构，整体三个部分

image.png

  • /CSXS-- 包含manifest.xml存储扩展配置数据的文件。这是您的扩展程序显示在宿主程序中的要求。
  • /JS-- 包含前端 HTML、JavaScript 和 CSS 代码，以及所需的 AdobeCSInterface.js库和您可能想要包含的任何第三方库（例如 jQuery）。
  • /JSX-- 包含您的扩展的所有 ExtendScript 文件（在本例中host.jsx为 ）。这些用于访问和驱动宿主应用程序中的大多数功能

manifest.xml

此文件有许多可能的配置，具体可查看CEP提供的xml列表。

我们来分析下当前我们CEP-Base的manifest.xml

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

<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" Version="6.0" ExtensionBundleId="com.yyeva.aecepdemo" ExtensionBundleVersion="1.0.0" ExtensionBundleName="YYEVADemo">
    <ExtensionList>
        <Extension Id="com.yyeva.aecepdemo" Version="1.0.0"/>
    </ExtensionList>
    <ExecutionEnvironment>
        <HostList> 
            <!--支持的宿主应用列表和版本--> 
            <Host Name="AEFX" Version="[13.0,99.9]" />  
        </HostList>
        <LocaleList>
            <Locale Code="All"/>
        </LocaleList>
        <RequiredRuntimeList>
            <RequiredRuntime Name="CSXS" Version="6.0"/>
        </RequiredRuntimeList>
    </ExecutionEnvironment>
    <DispatchInfoList>
        <Extension Id="com.yyeva.aecepdemo">
            <DispatchInfo>
                <Resources>
                    <MainPath>./index.html</MainPath>
                    <!--静态引入jsx文件 也可以动态引入  #include -->
                    <ScriptPath>./jsx/host.jsx</ScriptPath>
                    <CEFCommandLine>
                        <Parameter>--enable-nodejs</Parameter>
                        <Parameter>--mixed-context</Parameter>
                    </CEFCommandLine>
                </Resources>
                <Lifecycle>
                    <!-- 设置扩展面板为可视 -->
                    <AutoVisible>true</AutoVisible>
                    <!--<StartOn></StartOn>-->
                    <!-- 打开程序的时候自启动插件 -->
                </Lifecycle>
                <UI>
                    <Type>Modeless</Type>
                     <!-- 设置扩展显示为面板模式-->
                    <Menu>YYEVA-CEP-Demo</Menu> 
                    <!-- 设置扩展标题-->
                    <Geometry> 
                        <!-- 设置面板尺寸 -->
                        <Size>
                            <Width>470</Width>
                            <Height>530</Height>
                        </Size>
                        <MinSize>
                            <Width>470</Width>
                            <Height>530</Height>
                        </MinSize>
                        <MaxSize>
                            <Width>470</Width>
                            <Height>530</Height>
                        </MaxSize>
                    </Geometry> 
                    <Icons/>
                </UI>
            </DispatchInfo>
        </Extension>
    </DispatchInfoList>
</ExtensionManifest>

  • Extension BundleId：您分配给扩展程序的唯一包 ID，例如com.yyeva.aecepdemo

  • Extension Id ：您分配给扩展程序的唯一 ID。它通常遵循这样的语法：ExtensionBundleID+ .panel= com.yyeva.aecepdemo.panel（注意这个 ID 在清单中出现了两次）

  • Host Name & Version：宿主程序ID和您的扩展构建支持的版本的列表。可查看Adobe CEP HTML 扩展手册

  • MainPath ： 您的index.html. 确保此文件的路径来自代码库的顶级目录

  • ScriptPath：您的host.jsx. 确保此文件的路径来自代码库的顶级目录

  • 菜单：您的扩展名将出现在主机应用程序的下拉菜单中

  • 大小：扩展的默认大小

引入CSInterface.js

需要下载最新版本的CEP的CSInterface.js库，它使您能够控制扩展并与宿主应用程序通信。

您可以在代码库中的任何位置包含此库，只要您将其作为 <script> 依赖项包含在index.html文件中即可

如果您正在关注此示例，请将下载的CSInterface.js直接放在/client.

CEP-BASE是放在了src/helps/下

编写前端代码

先看看我们CEP-Demo案例的index.html ，按照大家的需求，创建属于您项目的Html网页即可。从下面代码中可以看出，该CSInterface.js库作为<script>依赖项包含在该index.html文件中。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en"> 

<script type="text/javascript" src="./src/helpers/CSInterface.js"></script>
<script type="text/javascript" src="./src/helpers/CSInterfaceHelper.js"></script> 
<script type="text/javascript" src="js/app.js"></script>
 
<body"> 
    <div class="set-content">
        <!--    <div style="height: 40px;"></div>-->
        <div class="set-title hd">
            <ul class="clearfix">
                <li class="on">HelloWorld</li>  
            </ul>
        </div>
        <div class="set-middle bd">
            <ul class="set-middle-item">
                <li> 
                    <div role="tabpanel" class="tab-pane fade in active" id="Section1"> 
                    </div>
                </li>
            </ul>  
        </div>
    </div> 
</body> 
</html>

编写您的 JavaScript 代码

先看看我们CEP-Demo案例的app.js

确保创建CSInterface. 您的CSInterface实例将使您能够访问对构建扩展有用的方法和属性。

其中一个方法，evalScript()，将允许您从客户端 JavaScript 与 ExtendScript 代码（ExtendScript 将在下一节中介绍）进行通信并返回。

var csInterface = new CSInterface();
var curExtensionPath = csInterface.getSystemPath(SystemPath.EXTENSION);
 
...

window.onload = function () {
    csInterface.addEventListener("LogMessageEvent",aeLogMessageEvent)
    //需要补充 active project change事件
    var version =  (getPluginVersion())

    document.getElementById("ae_ver_text").innerText = "插件版本:" + version;

}

window.onunload = function () {
    //删除临时文件
    // 删除临时文件目录
    csInterface.removeEventListener("LogMessageEvent")
}

编写您的 ExtendScript 代码

ExtendScript 代码与客户端 JavaScript 的不同之处在于，通过 ExtendScript，您可以访问主机应用程序的功能，例如打开文档、编辑文档、导出文档以及主机应用程序可以执行的几乎所有其他操作。

在此示例中，我们将创建一个函数，用于获取当前AE当前选中的合成名字和合成中第一个图层的名字

/**
 * 获取当前所选合成的名字
 * Author:Guoyabin YY Inc
 */
 
 function getActivieItemName(){
   var activeItem = app.project.activeItem
   var name = activeItem.name
}
 
 
/**
 * 获取当前所选合成的第一个图层的名字
 * Author:Guoyabin YY Inc
 */
function getActivieLayers(){
   var activeItem = app.project.activeItem
   var layer = activeItem.layer[1]
   var layerName = layer.name
}

其实CEP提供的一个全局对象，我们都可以通过文档查看到，大家跳转到官方开发文档查看即可

我们这里介绍几个关于AE的对象(app,project,item)

设计师在制作AE资源项目的时候，都会创建一个项目，

  • app

    提供对 After Effects 应用程序中对象和应用程序设置的访问。单个全局对象始终可以通过其名称 app 获得。Application 对象的属性提供对 After Effects 中特定对象的访问。Application 对象的方法可以创建项目、打开现有项目、控制监视文件夹模式、清除内存以及退出 After Effects 应用程序。当 After Effects 应用程序退出时，它会关闭打开的项目，提示用户根据需要保存或放弃更改，并根据需要创建项目文件。

    从上面案例中，我们通过全局对象来获取相关信息，其实这个app代表的就是宿主app，在ExtentionScript环境里，就是用app表示

  • project

    项目对象代表一个 After Effects 项目。属性提供对项目中特定对象的访问，例如导入的文件或素材和合成，以及对项目设置（例如时间码基础）的访问。方法可以导入素材、创建实体、合成和文件夹，以及保存更改。

  • item

    Item 对象表示可以出现在“项目”面板中的项目。第一项在索引 1 处。

    Item 是AVItem 对象和FolderItem 对象的基类，它们又是各种其他项类型的基类，因此在处理所有这些项类型时，Item 属性和方法都可用。常用的是 CompItem，代表的是一个合成对象

扩展打包发布

CEP 扩展必须有签名才能运行，而所谓签名是验证扩展文件是否与签名时一致的手段，能保证你的扩展不被篡改和识别扩展作者。所以你会发现修改了别人的扩展插件后，扩展就无法运行了。

这里引用一篇文章，介绍了如何进行扩展打包发布工作，大家可以前往学习下零基础的 PhotoShop CEP 6 开发教程　「 9 」签名打包与 ZXPSignCmd，这篇文章写的不错，大家可以去学习下。

安装ZXP

打包发布后，就可以使用ZXP_Installer工具可以进行安装zxp包,这里有个视频，介绍了如何安装ZXP

在AE启动您的扩展

通过下列步骤，可以打开一个扩展，正式运行您的程序

窗口 > 扩展 > 我的第一个面板

结语

AE扩展做的事情可以很多，大家可以根据各自项目的需求，为我们的设计师开发一些符合特定场景的扩展，来降低设计师的输出成本，下面几篇文章我们还会给大家介绍关于 YYEVA扩展的一些内部实现，大家敬请期待，一起探索YYEVA扩展的奥秘哈！

希望可以为我们的项目 YYEVA 点上一个⭐⭐⭐,您的支持就是我们一直更新文章下去的动力哈。希望大家多多鼓励

avatar
文章
阅读
粉丝