Utilice Dreamweaver para crear efectos de presentación de diapositivas web

Como aficionado a la producción de páginas web que no comprende el código, a menudo envidio algunos de los interesantes trabajos multimedia escritos por programadores profesionales en el navegador. Lamentablemente, el programa impotente no es algo que se pueda lograr en un día. Requiere buenas habilidades de pensamiento lógico y suficiente práctica para lograrlo. ¿Es porque un programa nunca puede hacer realidad la propia creatividad e ideas? ¡No! Lo que vamos a hacer ahora es un reproductor que reproduce una presentación de diapositivas en una página web. Cuando el usuario presiona la tecla "REPRODUCIR" en el panel de control, las imágenes se reproducirán en un bucle continuo como una presentación de diapositivas. Cuando se presiona la tecla "Pausa", la imagen permanecerá en la posición actual. Cuando se presiona la tecla "REINICIAR", la presentación de diapositivas comenzará desde el principio. Todo esto se puede lograr simplemente utilizando las tecnologías de capa integrada (Capa), línea de tiempo (Línea de tiempo) y comportamiento (Comportamiento) en Dreamweaver3, y todo el código JavaScript se generará automáticamente en Dreamweaver. Esto no le anima a no tocar el código del programa. Por el contrario, si los lectores dominan algunas técnicas básicas de programación, desempeñará un papel muy importante en la producción de páginas web. De hecho, este ya es el requisito de calidad básico para los productores de páginas web profesionales de hoy en día.

Aquí hay instrucciones paso a paso para construir este reproductor.

Paso 1: Producción y elaboración de elementos gráficos.

Cree las imágenes utilizadas en la presentación de diapositivas y colóquelas en capas en Dreamweaver. Alternaremos entre 7 imágenes en cada diapositiva, por lo que necesitaremos crear 7 imágenes con contenido diferente. Tenga en cuenta que las imágenes deben optimizarse y comprimirse en Photoshop y cambiarse de tamaño al mismo tamaño. Cree una capa e inserte la imagen inicial, que es la primera imagen predeterminada en la diapositiva. Nombra la capa Layer_main y establece el valor del índice de la capa en 1.

Paso 2: Crea la apariencia del reproductor y cuatro botones de control.

Utiliza Photoshop para crear una apariencia de reproductor con efecto metálico. (Depende de usted cómo quiere que se vea, tal vez pueda inspirarse en el aspecto de Winamp). Después de una optimización óptima, genere una imagen GIF transparente. Para que los botones cambien cuando se mueve el mouse sobre ellos, debes crear 2 imágenes para cada botón (**** 6), y los dos botones solo necesitan diferir en color. Primero cree tres capas, ajuste sus posiciones e inserte dos imágenes de desplazamiento (Insert-Rollover Image) para cada uno de los tres botones de reproducción. Asegúrese de que la capa del reproductor esté encima de la capa Layer_main y debajo de la capa del botón ajustando el valor Index-Z de la capa. La capa de tipografía se muestra en la Figura 1.

Paso 3: Crea una línea de tiempo de presentación de diapositivas.

Presiona Ctrl F9 para abrir el panel de herramientas flotantes de la línea de tiempo. Seleccione la imagen inicial en la capa donde se encuentra la diapositiva (Layer_main) (asegúrese de seleccionar la imagen y no la capa), arrástrela con el mouse al panel de herramientas flotantes de la Línea de tiempo y suelte el mouse al inicio de la Línea de tiempo. . Establezca la velocidad de fotogramas en 5 fotogramas/segundo y marque la casilla Bucle. Seleccione uno de los fotogramas en la línea de tiempo, haga clic con el botón derecho del mouse y seleccione "Agregar fotograma clave" para seleccionar otra imagen de diapositiva para reemplazar la imagen inicial en Layer_main. Repita esto para agregar las cinco imágenes restantes a la línea de tiempo en diferentes fotogramas clave. Finalmente, ajuste la distancia entre cada fotograma clave de forma adecuada. La cadena de tiempo establecida se muestra en la Figura 2.

Paso 4: Agregar comportamientos para botones, etc.

Haga clic para seleccionar la imagen donde se encuentra el botón REPRODUCIR y, en el panel de herramientas flotantes de comportamiento, seleccione Línea de tiempo-Reproducir línea de tiempo en la lista desplegable (Agregar) comportamiento y luego seleccione Línea de tiempo_principal en la ventana emergente. cuadro de diálogo de cierre, haga clic en Aceptar. Haga clic para seleccionar la imagen donde se encuentra PAUSA.

En el panel de herramientas flotantes de comportamiento, seleccione Línea de tiempo --- Detener línea de tiempo en la lista desplegable (Agregar) Acción y seleccione Línea de tiempo_principal en el cuadro de diálogo emergente.

Haz clic para seleccionar la imagen donde se encuentra el REPLAY. En el panel de herramientas flotantes de comportamiento, seleccione Línea de tiempo en la lista desplegable (Agregar) Acción. Vaya al marco de la Línea de tiempo y seleccione Línea de tiempo principal en el cuadro de diálogo emergente, luego ingrese 1 en el cuadro de texto del marco y haga clic en Aceptar. . Agregar la siguiente acción. Seleccione Línea de tiempo---Reproducir línea de tiempo en la lista desplegable de acciones (Agregar) y seleccione Línea de tiempo_principal en el cuadro de diálogo emergente. Haga clic en Aceptar. De forma predeterminada, el evento onClick está configurado para la acción de alternar.

El reproductor completo de este ejemplo se puede ver en. Además, para que el reproductor sea más animado, puedes agregar sonidos a la presentación de diapositivas al mismo tiempo.

Si deseas poner este reproductor en Internet y el tamaño total de las imágenes supera los 150K, puedes agregar una capa de "carga" a la página hasta que se descargue todo el contenido y luego se muestre. Para evitar la sensación de reproducción lenta debido a que la imagen no se ha descargado. El método para crear la capa de "carga" se ha introducido en muchos lugares, por lo que no entraré en detalles aquí.

Por poner otro ejemplo, podemos crear un álbum de fotos. Puede agregar fotos de su familia o novia a la línea de tiempo de la presentación de diapositivas y agregar botones como anterior y siguiente para que a los espectadores les resulte más fácil disfrutarlas una por una. Si la foto es demasiado pequeña para ver los detalles claramente, también puede agregar un botón de zoom para vincularla a una nueva página de ventana y mostrar una sola foto ampliada. Por último, también puedes publicarlo online, lo que seguro sorprenderá a tu familia o novia.