04 LK脚本基本框架

版权声明：本文为博主原创文章，转载请保留原作者名和原文链接。 https://blog.csdn.net/Likianta/article/details/79341189

学习本次实例将会让你初步了解一些JS语法以及AE表达式的知识，这两部分是我们在编写过程中必须用到的。

新建“LK Subtitle Generator.js”文件，你可以直接在ESTK上编写，但我更推荐使用专业的编辑器比如Sublime Text 3、VS Code、Notepad++等来进行编写。

1. 脚本框架 LK_SubtitleGenerator

参考官方代码的规范，本脚本将按照先写功能（function）再写执行的方式编写。即：

{
    // LK字幕生成工具（LK Subtitle Generator）

    function LK_SubtitleGenerator(thisObj)
    { 
        ... // 函数主体
    }

    LK_SubtitleGenerator(this); // 执行该函数
}

2. UI界面的编写

该界面我们在上章已经完成了，现在把它加入到脚本文件中。代码如下：

{
    // LK字幕生成工具（LK Subtitle Generator）

    function LK_SubtitleGenerator(thisObj)
    {
        var scriptName = "LK Subtitle Generator"; // 脚本标题

        // UI变量初始化
        var btn_1 = null; // 起始按钮
        var btn_2 = null; // 结束按钮
        var btn_3 = null; // 删除按钮
        var btn_4 = null; // 生成按钮
        var btn_5 = null; // 导入按钮
        var color = null; // 颜色输入框
        var edt = null; // 文本输入框
        var listbox = null; // 列表控件
        var panel = null; // 主面板
        var win = null; // 父窗口
        // 下面编写函数功能
        function createUI() {
            // 使用P9 UI创建用户交互界面

            // 创建窗口和面板
            // 第一个参数是控件类型
            // 第二个参数是标题名称
            // 第三个是相对位置（“100,100”是相对电脑屏幕左上角的间距，“600,575”是窗口右下角的坐标，因此窗口的宽度为500px，高度为475px）
            // 第四个参数是窗口属性
            win = new Window("palette", scriptName, [100,100,600,575], {resizeable:true});
            // 在该窗口中添加一个面板（panel），位置是相对**父控件**的位置（即充满父窗口）
            panel = win.add("panel", [0,0,500,475]);

            // 创建一个含有四纵列的列表控件（listbox）
            listbox = panel.add("listbox", [5,25,490,375], '', {
                // 花括号内是第四个参数，定义listbox的专有属性
                numberOfColumns: 4, // 列数为4
                showHeaders: true, // 显示每列的标题头
                columnTitles: ['id', 'start', 'end', 'content'], // 标题头名称依次是编号、起始时间、结束时间和文本内容
                columnWidths: [45,95,95,235]}); // 定义每列的宽度

            // 颜色编辑框，位于图中的右上角
            color = panel.add("edittext", [402,5,490,23], "color", {
                multiline:false, // 不允许多行显示
                wantReturn:false}); // 不允许回车换行

            // 文本编辑框，位于图中的底部，用于输入当前字幕内容
            edt = panel.add("edittext", [5,380,490,430], "", {
                multiline:true, // 允许文本自动换行
                wantReturn:true}); // 允许回车换行

            // 底部的一排按钮控件
            // 依次为：起始时间、结束时间、删除、生成图层、导入外部文件
            btn_1 = panel.add("button", [10,440,98,465], "Start");
            btn_2 = panel.add("button", [108,440,196,465], "End");
            btn_3 = panel.add("button", [206,440,294,465], "Delete");
            btn_4 = panel.add("button", [304,440,392,465], "Generate");
            btn_5 = panel.add("button", [402,440,490,465], "Import");

            // 最后记得把窗口显示出来
            win.show();
        }
        createUI(); // 执行该函数
    }


    LK_SubtitleGenerator(this);
}

运行效果图：

3. 控件初始化

UI创建完成后，接下来要编写事件；但在二者之间还需要一步“过渡”操作，那就是初始值的设置。

我们之所以设置初始值，是为了让这些初始值能够在后续的事件中重复利用，以打通各个按钮事件之间的隔阂，并且节省内存开支（虽然这很微小）。下面是相应的代码：

{
    // LK字幕生成工具（LK Subtitle Generator）

    function LK_SubtitleGenerator(thisObj)
    {
        ...
        createUI();

        // 初始化值
        var content = ''; // 文本变量，记录文本编辑框中的文字
        var id = 0; // 列表编号
        var item = null; // 字幕。一行字幕就是一个item，即一个item包含编号、起始时间、结束时间、文本内容四个属性
        var last_item = null; // 记录上一个item
        var last_time = ''; // 记录上一次的时间值
        var last_value = ''; // 记录上一次的值（可以用来记录颜色值、标记值、状态值等）
        var s = ''; // 变量`s`用于记录任何不重要的中间（过程）值，但主要是用来传递时间值的

        var FPS = 0; // 静态值，表示当前工程中的合成视频的帧速率
        var INDEX = 0; // 静态值，表示合成视频位于当前工程中的素材文件的位置
        // ↑ 相关学习：[AE脚本 app.project.item(index) 讲解](https://likianta.coding.me/2018/0130225017/)

        // 下面对静态值进行预处理
        function presetStaticValues() {
            // INDEX & FPS
            // 首先获取当前工程面板中的素材总数量
            // （相关学习：[AE脚本 app.project.item(index) 讲解](https://likianta.coding.me/2018/0130225017/)）
            s = app.project.numItems;
            // 然后遍历素材，找到“合成视频”这个素材，并读取它在素材中的绝对位置（INDEX）以及视频帧速率（FPS）
            for (i = s; i > 0; i--) { // 从倒数第一个向第一个素材遍历，目的是找到一个含有合成视频的素材（也就是我们当前工程中的“视频序列”）
                if (app.project.item(i).hasVideo && app.project.item(i).typeName == '合成') {
                    // 找到以后记录下它的位置和视频帧率，以后会作为静态值调用
                    INDEX = i;
                    FPS = app.project.item(INDEX).frameRate; // 获取当前视频的帧速率
                    break;
                } else if (i == 1) { // 如果完全遍历后仍找不到，那么会弹出警告提示框
                    alert("There is no video compItem found!", 'Warning');
                }
            }
        }
        presetStaticValues(); // 执行预处理函数
    }


    LK_SubtitleGenerator(this); // 脚本执行
}

4. 控件事件绑定

{
    // LK SubtitleScript for Fansub.jsx

    function LK_SubtitleScript(thisObj)
    {
        ...

        // 设置按钮监听器
        btn_1.onClick = onBtn1Click; // 创建本条字幕开始时间
        btn_2.onClick = onBtn2Click; // 创建本条字幕结束时间
        btn_3.onClick = onBtn3Click; // 删除选定的字幕
        btn_4.onClick = onBtn4Click; // 开始生成字幕图层
        btn_5.onClick = onBtn5Click; // 设置选项
        color.onClick = onColorClick; // 设置颜色值
        edt.onClick = onEdtClick; // 监听编辑框中的键盘事件

        // 以下为具体函数功能实现

        function onBtn1Click() {
            // 主要目标：创建本条字幕的开始时间
        }

        function onBtn2Click() {
            // 主要目标：创建本条字幕的结束时间
        }

        function onBtn3Click(){
            // 删除被选中的字幕
        }

        function onBtn4Click() {
            // 开始生成文本图层      
        }

        function onBtn5Click() {
            // 导入字幕文件（会弹出文件选择对话框）
        }

        function onColorClick() {
            // 输入颜色六位十六进制值
            last_value = color.text;
            color.text = '';
        }

        function onEdtClick() {
            // 编辑框相关事件
        }
    }


    LK_SubtitleScript(this); // 脚本执行
}  

下章开始编写起始按钮被按下时的事件。

下章链接：05 创建本条字幕的开始时间

---

参考

• JavaScript Tools Guide CC
  
  • listbox - p71,73,128
• After Effects CS6 Scripting Guide
• JavaScript 变量
• c# ListBox控件 - Mr&C - 博客园
• listbox控件用法详解 - CSDN博客
• 谁说设计师不会写代码？超简单Photoshop脚本语言介绍 - 优设-UISDC
• 了解在 Adobe After Effects 中链接动画的表达式基础知识
• 如何按比例设置listbox多列列宽_百度知道