Adobe produce una amplia gama de líneas de productos de software de procesamiento multimedia, que abarcan edición de audio y vídeo, procesamiento de imágenes, diseño gráfico, postproducción de cine y televisión y otros campos. Para ampliar las funciones del software, Adobe ofrece a los desarrolladores dos formas de aumentar las funciones del software: complementos y extensiones. El año pasado, se desarrollaron dos complementos de Premiere utilizando el SDK proporcionado oficialmente, que se utilizaron para importar archivos multimedia en formatos personalizados y obtener vistas previas de transmisiones de video. Recientemente he experimentado el desarrollo de Adobe Extension.
El complemento de Adobe se utiliza generalmente para proporcionar funciones más cercanas al nivel subyacente. Por razones de eficiencia, el SDK de complemento oficial proporcionado se basa en el lenguaje C++. Adobe Extension tiende a proporcionar extensiones para aplicaciones de capa superior, que se implementaron en forma de Flash en la era de Adobe CS.
En la era de Adobe CC, se proporcionó la implementación de HTML5, lo que permitió a los desarrolladores interactuar con HTML5, CSS3, Javascript e incluso NodeJS para el desarrollo. Debido a que Adobe ha integrado CEF en Premiere Pro, puede analizar y renderizar HTML5 de manera eficiente y ejecutar programas Nodejs. Nodejs puede realizar la llamada de funciones del sistema, ¡lo cual no es demasiado fácil! En este artículo, resumo aproximadamente el recorrido del uso de HTML5 para desarrollar una extensión de Adobe. La extensión que queremos hacer es muy simple, como se muestra en la siguiente figura:
Esta es una extensión de PremierePro desarrollada por Pond5, un conocido sitio web extranjero de comercio de material de video. Permite a los usuarios iniciar sesión en el sitio web en Pro, descargar materiales de vista previa, comprar materiales de alta definición, importar videos automáticamente o reemplazar videos automáticamente. Esto elimina la necesidad de que los usuarios abran un navegador para iniciar sesión en el sitio web, lo que mejora enormemente la experiencia del usuario. Shutterstock desarrolla complementos similares:
2. Entorno de desarrolloAdobe lanzó oficialmente un IDE para desarrollar la extensión Adobe Html5 basada en eclipse. Por lo tanto, primero configuramos el entorno de desarrollo de acuerdo con el siguiente proceso:
Descargue Eclipse, preferiblemente la versión 3.6 o superior, y Extension Builder
Instale Adobe Premiere Pro CC 2014/2015. Configure la aplicación de destino y el Administrador de servicios de elicpse.
Active el modo de depuración: agregue el campo 'PlayerDebugMode' en el registro
La configuración está completa y ahora puede usar eclipse para generar el proyecto de plantilla de extensión. El proyecto de plantilla generado es muy simple, con solo un botón predeterminado en el panel:
3. Archivo manifest.xml de configuración del proyectoEn el desarrollo de Adobe Html5 Extension, el archivo más importante es manifest.xml. Este archivo describe la información básica de esta extensión para que el programa host de Adobe pueda reconocerla y cargarla normalmente. Su contenido general es el siguiente:
Entre ellos, el desarrollador determina BundleName, BundleId y BundleVersion, generalmente en función de la iteración de la versión normal. Lo más importante es el contenido de las dos etiquetas HostList y RequiredRuntimeList. HostList determina qué programas host admite esta extensión (como PremierePro, After Effects, etc.). El siguiente código indica que se pueden cargar varios programas host:
Aquí solo se admite Photoshop Extended y su ID de host corresponde a PHXS. Los ID de host y las versiones de otros programas host son los siguientes:
Tenga en cuenta que la versión utiliza la forma de corchetes [14.0, 14.9], lo que indica que esta extensión admite las versiones 14.0-14.9 de Photoshop Extended. Las versiones de Photoshop Extended superiores o inferiores no cargarán esta extensión. Sin embargo, ¿qué sucede si desea especificar que se admitan todas las versiones superiores a una determinada versión? Por ejemplo, si desea admitir PremierePro CC 2014 o superior, ¿cómo especificar esta versión? Simplemente escriba el número de versión más bajo:
Además, existe la etiqueta RequiredRuntimeList. Esta etiqueta especifica la versión CEP del tiempo de ejecución. El llamado CEP es la abreviatura de Common Extensibility Platform. Proporciona un conjunto de servicios centrales para facilitar a los desarrolladores ejecutar código Extendscript, detectar las variables de entorno del programa host y procesar eventos enviados entre la extensión y el host. Anteriormente, este conjunto de servicios se llamaba Creative Suite Extensible Services, o CSXS para abreviar. Por lo tanto, la abreviatura CSXS todavía se puede ver en algunos archivos de configuración. La versión inicial de CEP era 4.x y hasta ahora se ha desarrollado en 5 versiones principales. La última versión es 8.x, que es compatible con el último programa host Adobe CC 2018.
Como se muestra arriba, si queremos admitir la versión CC de primera generación del programa host, la versión de RequiredRuntime debe configurarse en 4.0. De lo contrario, la extensión no se podrá cargar normalmente. Además, si desea acceder al sistema de archivos en la extensión, debe especificar parámetros adicionales:
Desactivar la verificación de firmaCuando desarrollamos, necesitamos ajustar el código de extensión en cualquier momento. El programa host de Adobe ignora las extensiones no firmadas y no las carga. Por lo tanto, debemos activar el modo de depuración para no tener que firmar la extensión durante el desarrollo:
En una Mac, abra el archivo ~/Library/Preferences/com.adobe.CSXS.6.plist y agregue una línea con el nombre de clave PlayerDebugMode, escriba String y el valor establecido en 1. En Windows, abra la clave de registro: HKEY_CURRENT_USER /Software/Adobe/CSXS.6, agregue un par clave-valor denominado PlayerDebugMode, escriba Cadena, valor 1.
Nota: Si la versión del programa host es diferente, los archivos correspondientes también pueden ser diferentes. Por ejemplo, en CC2017, debe cambiar la parte correspondiente anterior a CSXS.7
depuración de cromoLa herramienta de depuración de Chrome ayuda a observar el resultado de la extensión y explorar la estructura DOM de la extensión, lo cual es muy útil para la depuración. Habilitar la herramienta de depuración de Chrome también es muy simple. Cree un archivo llamado .debug en el directorio raíz de la carpeta de extensión y escriba el siguiente contenido:
Esta lista ilustra los diferentes puertos utilizados al depurar diferentes programas host. Tomando Pond5 como ejemplo, el contenido de su archivo .debug es el siguiente:
Al especificar la extensión de depuración de Premiere, el puerto es 8089. Como se muestra a continuación:
Limpieza de caché CEPDurante el desarrollo, es posible que necesite desactivar CEF para que no almacene en caché el contenido web. Puede eliminar directamente manualmente la carpeta correspondiente a la extensión en la siguiente ubicación:
Windows: C:/Usuarios/NOMBRE DE USUARIO/AppData/Local/Temp/cep_cache/Mac: /Usuarios/NOMBRE DE USUARIO/Biblioteca/Logs/CSXS/cep_cache
Por supuesto, algunos desarrolladores de Adobe también dicen que se especifique el parámetro CEF <Parameter>--disable-application-cache</Parameter> para deshabilitar el almacenamiento en caché de CEF, pero no parece funcionar después de que lo probé. Carpeta de extensión La extensión se almacena en dos ubicaciones, en todo el sistema y en la personal del usuario. Si instala la extensión en todo el sistema, el archivo de extensión se almacenará en la siguiente ubicación: En Mac:/Biblioteca/Application Support/Adobe/CEP/extensionsEn Windows:C:/Program Files (x86)/Common Files/Adobe/ CEP/extensiones
De esta forma, todos los usuarios del sistema actual pueden cargar esta Extensión. También se puede instalar solo para el usuario actual y su ubicación es la siguiente:
En Mac: ~/Library/Application Support/Adobe/CEP/extensions En Windows: C://AppData/Roaming/Adobe/CEP/extensions Paquete de firmas
Al publicar una extensión, es necesario firmar todo el paquete. Debe utilizar la herramienta ZXPSignCmd aquí, que se puede descargar desde el sitio web oficial. En primer lugar, para firmar necesitamos un certificado digital. Podemos comprar este certificado a través de una agencia emisora de certificados de terceros, lo que requiere una cierta cantidad de financiación. También puede crear un certificado autofirmado para firmar la extensión. Repasemos el proceso de la última manera:
Esto generará un certificado autofirmado en el directorio actual y luego podremos usar este certificado para firmar el paquete:
Cuando la herramienta ZXPSignCmd firma, generará un archivo META-INF en el directorio de extensión, que almacena la información de la firma. Luego, la herramienta empaquetará y comprimirá todo el directorio en un archivo *.zxp. Este es el archivo de expansión que finalmente debemos publicar. ^_^
Análisis de rutina de Pond5 y Shutterstock Al analizar cuidadosamente la implementación de Pond5 y Shutterstock, podemos resumir la lógica general de ejecución de este tipo de extensión:
(1) Abra el panel de extensión en el programa host y busque la extensión cargada a través de Extensiones de ventana
(2) El script de extensión analizará si el usuario lo está utilizando por primera vez. Si es la primera vez, permita que el usuario seleccione la ubicación donde se guardará el material de video. Esto generalmente se logra a través de un cuadro de diálogo emergente. La información de ubicación seleccionada por el usuario generalmente se conserva en el directorio de inicio del usuario a través de un archivo xml. Si el usuario no utiliza la extensión por primera vez, el archivo xml en el directorio de inicio se cargará y analizará directamente.
(3) El usuario hace clic en un determinado material de vídeo para iniciar la descarga. Este proceso generalmente se puede lograr mediante nodejs. Sin embargo, se debe configurar la función de devolución de llamada de descarga.
(4) Después de que la descarga sea exitosa, ejecute la función de devolución de llamada e importe el archivo de video descargado al programa host. Este paso se implementa llamando al script extendscript. Para escribir guiones específicos, consulte aquí. En referencia a esta rutina, implementamos Adobe Extension similar a Pond5 y Shutterstock:
ResumirLo anterior es el tutorial gráfico para la primera experiencia del desarrollo de la extensión Adobe Html5 presentado por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!