Crear máscara
1. Producción de máscaras
La máscara de Qianqianjingting se encuentra en la carpeta Máscara en el directorio de instalación. La extensión puede ser .skn o .zip. De hecho, son iguales, ambos son archivos comprimidos en formato zip. Para el primero, primero puede cambiar la extensión .skn a .zip (para mostrar la extensión del archivo en el sistema, haga clic en "Herramientas" - "Opciones de carpeta" - "Ver" y luego cambie "Ocultar extensiones para tipos de archivos conocidos". Simplemente retire el pequeño gancho antes del nombre"), luego descomprímalo en una carpeta separada e ingrese a la carpeta. Puede encontrar que contiene muchas imágenes bmp y varios archivos xml, el más importante de los cuales es el archivo xml Skin.xml. Las funciones de varios otros archivos xml se mencionarán más adelante.
La imagen bmp es la imagen de fondo y del botón de cada ventana. Skin.xml es un archivo de configuración que define la información básica de la máscara, la posición y el tamaño de la ventana y el botón, etc. un archivo basado en formato XML, puede abrirlo directamente con el Bloc de notas integrado del sistema u otras herramientas de edición de texto. Después de abrirlo, podemos ver la estructura básica:
lt;lt.skin version=". 2" nombre=".. ." autor="..." url="..." email="..." transparent_color="..." gt;
lt; player_window imagen ="..." gt
...
lt;/player_windowgt;
lt;mini_window imagen="..." gt; /p>
..
lt;/mini_windowgt;
lt;lyric_window position="..." resize_rect="..." imagen=".. ." gt;
...
lt;/lyric_windowgt;
lt;equalizer_window position="..." image="..." eq_interval="..." gt;
...
lt;/equalizer_windowgt;
lt; lista de reproducción_ventana position="..." resize_rect= "..." imagen= "..." gt;
...
lt;/playlist_windowgt
lt;/skingt
Análisis cuidadoso Se puede encontrar que cada línea comienza con "lt;" y termina con "gt;". Hay algunos elementos y parámetros en el medio, que se pueden dividir en dos tipos. de la siguiente manera: lt; XXX AAA="aaa" BBB= "bbb"gt;lt;/XXXgt;
Los elementos como XXX se denominan elementos, los elementos como AAA y BBB se denominan atributos y aaa y bbb. son los valores de los parámetros de los atributos.
Aquí AAA y BBB son atributos de XXX, que se usan para modificar XXX. Por ejemplo, el atributo de posición se usa para definir la posición del elemento y el atributo de imagen se usa para definir el mapa de bits del elemento.
En este tipo, lt; XXXgt; y lt; /XXXgt; deben usarse al mismo tiempo para formar un bucle cerrado, es decir, lt; Ejemplos de dichos elementos incluyen la ventana principal (elemento player_window), la ventana del ecualizador (elemento equalizer_window), la ventana de letras (elemento lyrics_window), la ventana de lista de reproducción (elemento playlist_window) y la ventana minimodal (elemento miniventana). . ) Estas cinco ventanas básicas se incluyen entre lt;skingt; y lt;/skingt;.
La segunda estructura se ve así: AAAA CCC="ccc" DDD="ddd"/gt
Esto en realidad es AAAA CCC="ccc" La abreviatura de DDD="ddd; "gt; lt;YYYYgt; es el elemento de unidad más básico contenido en una única ventana básica, como un solo botón, barra de arrastre, etc.
Para el formato de archivos XML, puede consultar los documentos relevantes. Lo que quiero mencionar aquí es que el orden de los elementos y atributos no importa, y la cantidad de espacios no importa, siempre y cuando. como las posiciones de incluido e incluido y básico No cometa errores en el formato (por ejemplo, los valores de los parámetros de atributo deben estar entre comillas dobles en inglés, etc.), pero para facilitar la lectura y edición, Lo mejor es escribir estrictamente de acuerdo con el formato estándar. Pero para facilitar la lectura y la edición, es mejor escribir estrictamente en formato estándar. Analicemos en detalle la primera línea de Skin.xml:
lt; skin version="2" name="..." autor="..." url="..." email= "..." transparent_color="...
Esta línea se utiliza para definir los atributos básicos y la información del skin, donde versión="2" se refiere al número de versión del skin y no es necesario cambiar el siguiente nombre Los atributos, autor, URL y correo electrónico se refieren al nombre de la máscara, el nombre del autor, la dirección de la página de inicio del autor y la dirección de correo electrónico del autor, respectivamente. Esta información se mostrará en las opciones de Chiken; luego, el color transparente es muy importante. atributo, es decir, "color transparente" Es decir, "color transparente" Después de definir el color transparente, la parte con este color en la máscara se mostrará como transparente. Debido a que la imagen en formato bmp no admite transparencia. use el color transparente para crear ventanas y botones con fondos irregulares. Para lograr esto, la parte de visualización transparente se puede llenar con un color transparente definido. Una máscara solo puede definir un color transparente fijo y usar un código RGB para representar el color. Por ejemplo, el código RGB para el color púrpura puro es #FF00FF. Puede verlo en herramientas como Photoshop (el color transparente debe ser lo más parecido posible al color de la piel; de lo contrario, se superpondrá fácilmente con el color de la piel y provocará. las partes necesarias para que sean transparentes. En circunstancias normales, el color púrpura puro será suficiente)
A continuación está la configuración de las cinco ventanas básicas, que se explicarán en detalle en la ventana del modo mini más adelante. , las primeras cosas que deben configurarse son la ventana principal, la ventana de visualización de letras, la ventana del ecualizador y la ventana de lista de reproducción. Configuraciones relacionadas para estas cuatro subventanas, y luego configure los botones en cada ventana.
II.Parámetros de atributos
A continuación se muestra el diagrama correspondiente y la descripción de los atributos de cada elemento de la ventana:
Posición: Este es uno de los atributos más básicos entre el elemento multitud, utilizado para definir el fondo de la ventana y la posición y tamaño del botón. El formato del valor del parámetro es "a, b, c, d", donde los valores fijos de los cuatro elementos determinan. tanto la posición como el tamaño del elemento, donde (a, b) es la esquina superior izquierda, (a, b) es la coordenada de la esquina superior izquierda, (c, d) es la coordenada de la esquina inferior derecha, c-a es la longitud, d-b es la altura, el origen debe dividirse en dos situaciones: si es " Para las posiciones de las subventanas "Visualización de letras", "Ecualizador" y "Lista de reproducción", la esquina superior izquierda del la ventana principal se usa como el origen de las coordenadas de la subventana; si es la posición del botón dentro de la ventana, la esquina superior izquierda de la ventana se usa como el origen de las coordenadas, como "Visualización de letras", "Ecualizador" y "Lista de reproducción". Por ejemplo, el botón "Cerrar" en la ventana "Lyric Show" se basará en la esquina superior izquierda de la imagen de fondo de "Lyric Show", ¡y así sucesivamente!
Específicamente: ① El elemento de la barra de desplazamiento en la lista de reproducción no necesita definir el atributo de posición, y su posición se fijará automáticamente en el lado derecho de la lista de reproducción ② Los elementos de progreso y volumen en la lista de reproducción principal; ventana y ventana del ecualizador En los elementos balance, envolvente y preamplificador, el atributo de posición representa la posición del control deslizante. El atributo de posición del elemento de la lista de reproducción en la ventana principal y los elementos de balance, sonido envolvente y preamplificador en la ventana del ecualizador representan las coordenadas del rango móvil del control deslizante y las letras en la ventana del ecualizador de la lista de reproducción se muestran en la ventana del ecualizador; El atributo de posición del elemento de letra indica el rango de visualización de la lista de reproducción y la letra. Cuando el tamaño de la ventana de visualización de la lista de reproducción y la letra cambia, los tamaños de estos dos elementos también cambiarán automáticamente, pero sus cuatro lados y los cuatro lados de. la ventana será Igual que los cuatro lados de la ventana. La distancia entre sus cuatro lados y los cuatro lados de la ventana está representada por la posición;
resize_rect: un atributo único de las ventanas de visualización de letras y lista de reproducción, utilizado para definir partes de ventana extensibles, y su formato de parámetro es Lo mismo que position Igual, esto significa que cuando se cambia el tamaño de la ventana, solo la parte de la ventana dentro del rectángulo se estirará, solo la parte fuera del rectángulo permanecerá sin cambios. También hay un atributo resize_tile (mosaico) que también se usará en consecuencia. El valor de su parámetro puede ser 0 o 1, donde 0 significa que la ventana se ampliará cuando se cambie el tamaño y 1 significa que la ventana se colocará en mosaico. incluso si se usa el valor predeterminado de 0;
Además, hay otro elemento opcional en la ventana de visualización de letras y lista de reproducción: el título, que se puede usar cuando hay necesidades especiales (por ejemplo, mantener el título centrado al cambiar el tamaño de la ventana, etc.), el formato es el siguiente:
lt; title position="..." image="..." align="..." / gt;
El diagrama de los primeros tres elementos es el siguiente:
imagen: se utiliza para definir la imagen utilizada por este elemento.
En términos generales, la mayoría de las imágenes de botones se componen de 4 imágenes del mismo tamaño una al lado de la otra, que representan los 4 estados diferentes del botón: botón normal, botón del mouse sobre el botón, botón del mouse presionado y botón no válido. La siguiente imagen es el botón de reproducción. Imagen:
Nota: si el botón es el mismo en estos 4 estados, las mismas 4 imágenes deben colocarse una al lado de la otra para mostrarse correctamente ② Los atributos scrollbar_button y scrollbar_button del elemento de desplazamiento en la lista de reproducción; solo corresponden a Imágenes en tres estados: el botón es normal, el mouse pasa sobre el botón y el mouse presiona el botón;
align: se utiliza para definir la alineación de los elementos. Los valores de los parámetros se dividen. en dos situaciones: una está en la ventana principal. Entre los elementos LED, información, estéreo y estado de la ventana principal, los valores pueden ser izquierda, centro y derecha para representar la sangría de estos textos; aparece en los elementos título, cierre y parte superior de la ventana de visualización de letras. El segundo aparece en el título de la ventana de reproducción, cierre, elemento de la barra de herramientas, el segundo aparece en el título de la ventana de visualización de letras, cierre, elemento superior, el segundo. aparece en el título de la ventana de visualización de letras, cerrar, elemento superior, el segundo aparece en el título de la ventana de visualización de letras, cerrar, elemento superior Mostrar título de la ventana, cerrar, elementos de la barra de herramientas. En este momento, puede tomar valores como izquierda, centro, derecha, superior e inferior. Al cambiar el tamaño de la ventana, significa que la posición del elemento se mueve en relación con el borde. alineación horizontal al mismo tiempo, puede usar el signo más en inglés para conectar los dos, por ejemplo, "arriba a la izquierda" significa alineación superior en la dirección vertical y alineación izquierda en la dirección horizontal. thumb_image, fill_image, bar_image: elementos de progreso y volumen que existen en la ventana principal y el balance y envolvente de la ventana del ecualizador. En los elementos de sonido, preamplificador y ecualizador, la imagen utilizada para definir el control deslizante, la imagen que llena el control deslizante cuando el el control deslizante se mueve y la imagen de fondo dentro del rango de movimiento;
Vertical: existe en la ventana principal. En los elementos de progreso y volumen, el valor del parámetro puede ser verdadero o falso, donde verdadero significa que el control deslizante se mueve verticalmente. , false significa que el control deslizante se mueve horizontalmente;
color, bkgnd, font, font_size: existen en la ventana principal. En los elementos de información, estéreo y estado, se utiliza para definir el color, el color de fondo, la fuente, y tamaño de fuente del texto Si desea mostrar texto transparente, no necesita especificar el color de fondo (bkgnd);
thumb_resize_center: existe en reproducción Se utiliza para definir el color del texto en el. elemento de la barra de desplazamiento en la ventana de lista.
thumb_resize_tile: existe en el elemento de la barra de desplazamiento en la ventana de la lista de reproducción, se usa para definir el tamaño de la parte central del control deslizante del pulgar de la barra de desplazamiento que se puede colocar en mosaico y escalar. Si el valor es 0, significa. cambiando la reproducción El control deslizante no se escalará cuando se exceda la altura de la ventana de la lista;
thumb_resize_tile: existe en el elemento de la barra de desplazamiento en la ventana de la lista de reproducción y se usa para definir el tamaño de los elementos enlosables y ampliables. part;
thumb_resize_tile: existe en el elemento de la barra de desplazamiento de la ventana de la lista de reproducción. Se usa junto con la ventana de la lista de reproducción en el elemento de la barra de desplazamiento de la ventana de la lista de reproducción. ventana de lista de reproducción y ventana de letras;
hot_image: existe en el elemento de la barra de herramientas de la ventana de la lista de reproducción y se utiliza para definir la forma de la imagen de la barra de herramientas de la lista de reproducción cuando el mouse pasa sobre ella. Este atributo es opcional. Si se omite, el programa generará automáticamente el estado del botón cuando el mouse pasa sobre el botón;
eq_interval: existe en el elemento ecualizador_ventana de la ventana del ecualizador, en referencia a los 10 elementos eqfactor. El tamaño del intervalo de la banda de frecuencia (otro punto: el atributo de posición del elemento eqfactor representa el primer control deslizante entre 10 controles deslizantes).
es la posición del primer control deslizante entre los 10 controles deslizantes, mientras que otras propiedades son válidas para los 10 controles deslizantes);
Icono: existe dentro del elemento icono en la ventana principal, se usa para personalización. El ícono de máscara debe ser colocado en la carpeta del skin junto con el archivo de icono (*.ico, 16*16) y empaquetado en un archivo comprimido. Este atributo es opcional; si se omite, se utilizará el icono predeterminado del programa;
left_top_color, right_bottom_color: existen en el elemento mini_border en la ventana de letras, se utilizan para definir la esquina superior izquierda y la esquina superior izquierda de la ventana de letras en modo mini El color del borde en la esquina inferior derecha;
La ventana del modo mini se resaltará aquí:
Como se muestra arriba, el modo mini es en realidad una máscara independiente de la ventana principal, pero en el modo mini, las ventanas de lista de reproducción y ecualizador se omiten, y la ventana de visualización de letras y la ventana principal se simplifican. Todos los elementos, atributos y parámetros de la mini ventana son los mismos que los de la ventana principal y están contenidos en III. Empaquetado y Compresión Después de completar todas las imágenes y configurar Skin.xml, queda una cosa más por hacer, que es agregar Lyric.xml, Playlist.xml, Visual.xml y otros tres archivos xml, que se utilizan como esquemas de color y configuraciones relacionadas para la visualización de letras, listas de reproducción y efectos visuales. Si no se agregan estos tres archivos, la apariencia se basará en el esquema de color predeterminado. Si no agrega estos tres archivos, la máscara se mostrará de acuerdo con el esquema de color predeterminado. Por lo tanto, se recomienda agregar el esquema de color correspondiente para cada máscara para facilitar la combinación general, haciendo así que la piel sea más hermosa. , si la máscara no viene con su propio archivo de combinación de colores, al cambiar de otras máscaras con combinaciones de colores a esta máscara, también se incorporará la combinación de colores de la máscara original y el efecto será muy feo. Estos parámetros son similares a los de Skin.xml y se pueden configurar usando el Bloc de notas, pero existe otro método más conciso y eficiente, que es configurarlo en "Miles de opciones" y luego hacer clic en "Perfil". " - "Guardar en archivo" en cada pestaña para guardarlas como "Playlist.xml", "Playlist.xml", "Lyric.xml", "Visual.xml" respectivamente, y luego copiar a la carpeta del skin en el mismo directorio. , como se muestra en la figura: El último paso es empaquetar y comprimir estos archivos en máscaras. Puede utilizar herramientas de compresión como WinRAR o WinZIP, tomando WinRAR como ejemplo, presione el teclado Ctrl A. en Seleccionar todos los archivos y luego agregar todos los archivos al skin. Seleccione todos los archivos, luego agregue todos los archivos a la carpeta comprimida, seleccione "zip" como formato de archivo comprimido, seleccione "Mejor" como método de compresión y luego haga clic en "Aceptar" y ¡listo! En este punto, la creación del skin está completa. Copie el archivo comprimido en la carpeta del skin en el directorio de instalación de "El viaje de Chihiro", y luego haga clic en "Opciones de El viaje de Chihiro..." y luego en "Miles de opciones..." - Seleccione el skin de la aplicación en "Skin", o haga clic derecho en el panel principal - ¡"Seleccionar Skin"!