学习本次实例将会让你初步了解一些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多列列宽_百度知道