Utilice Dreamweaver para crear efectos de presentación de diapositivas web
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.