Tutoriales
Valora este artículo
(1 Voto)

Plantillas de inicio en DW CC 2015

Creando páginas con las plantillas de inicio de DW CC 2015

En esta entrada trabajaremos en un brevísimo tutorial donde mostraremos como trabajar con las plantillas de inicio de Dreamweaver CC 2015, a partir de las cuales podremos luego crear nuevas páginas web; para lo cual se espera que el alumno, o eventual diseñador, adquiera o maneje las habilidades necesarias de edición de los documentos generados, de forma que le permitan modificar el diseño, así como cambiar, eliminar o agregar comportamientos nuevos de acuerdo a los propósitos desados.

Comencemos entonces con este tutorial de dificultad baja, dirigido a estudiantes iniciales y diseñadores que toman primer contacto con Dreamweaver, o más específicamente, con Dreamweaver CC 2015:

Valora este artículo
(1 Voto)

Sonidos en la línea de tiempos - Cabezal

Sonidos en la línea de tiempo en Animate

Usar sonidos en la línea de tiempo es la forma más básica de uso de sonidos en Adobe Animator, existiendo varias formas de trabajar con ellas, que veremos a continuación, y varios formatos admitidos, tales como Adobe Sound (.asnd), Wave (.wav), AIFF (.aif, .aifc), MP3 (.mp3), Sun AU (.au, .snd), Ogg Vorbis (.ogg, .oga) o FLAC (.flac), entre otros; de acuerdo a las configuraciones de publicación se presentan casos en que opciones como WAV (formato sin compresión) resulta un mejor método que importar achivos previamente comprimidos (.mp3) ya que será luego Flash quien determine la compresión de sonido necesaria de acuerdo a las opciones de publicación que le indiquemos (veremos este tema en una próxima entrada).

Valora este artículo
(1 Voto)

Slider responsivo - Cabezal del tutorial

Carousel responsivo usando Bootstrap en Dreamweaver CC

En este tutorial veremos la forma de generar un slider (slideshow) con Bootstrap en Dreamweaver CC 2015, para lo cual alternaremos entre la vista de diseño y la ventana de códigos con la finalidad de mejorar la comprensión de los códigos html y, por consiguiente, la edición lo más afinada posible de los mismos, lo que genera una independencia paulatina de la plataforma usada, así como un conocimiento mayor de los comportamientos de cada etiqueta html y las propiedades CSS involucradas. En este tutorial, además del agregado del Carousel de forma casi automática en Dreamweaver hablaremos sobre etiquetas body, div, ul, ol y otras:

Valora este artículo
(1 Voto)

Animaciones Compuestas en Animate (tutorai básico, parte 2)

Animate: 3 modos de animación anidando clips de película (ii)

Segunda parte del tutorial básico (ver primera parte haciendo click aquí) donde se muestran los modos de animar anidando clips de película usando animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento:

Valora este artículo
(1 Voto)

Animaciones Compuestas en Animate (tutorai básico, parte 1)

Animate: 3 modos de animación anidando clips de película (i)

Este tutorial tiene por finalidad orientar al estudiante que se inicia en el uso de Adobe Animate para crear animaciones compuestas básicas usando las líneas de tiempo de clips de película anidadas, donde se crearán, a modo de ejemplo, dos animaciones fotograma a fotograma, una interpolación clásica y una animación de movimiento para mostrar dos ejemplos de uso de cada una de éstas formas de animar; debido al caracter introductorio de este tutorial, no nos centraremos en aspectos estéticos, más allá de los mínimos necesarios, ni se utilizarán acciones (sentencias) de AcionScript, para no distraernos de los objetivos finales planteados.

Comencemos entonces:

Valora este artículo
(1 Voto)

Animaciones cuadro a cuadro en Animate - Cabezal

Creando una animación cuadro a cuadro usando Animate CC2015

En este tutorial veremos una forma de generar una animación fotograma a fotograma (y una máscara de capa) utilizando la aplicación Animate CC2015 de Adobe, para el cual usaremos la misma imagen que utilizamos para el tutorial GIF Animado desde la línea de tiempo de PhotoShop CC2015 (descargarla para poder trabajar con el tutorial):

Miércoles, 18 Mayo 2016 19:32

The Walking Bear (iii)

Valora este artículo
(1 Voto)

Controlando la línea de tiempo con ActionScript 3

Controlando la línea de tiempo con botones usando AS 3

Usando ActionScript 3 veremos como como controlar líneas de tiempo asociadas a componentes de botón, para lo que partiremos de la entrada anterior, "The Walking Bear" (ii); veremos en este caso como detener el movimiento del oso, cómo reactivar su movimiento, y también como reiniciar las líneas de tiempo de los clips implicados en el movimiento. Adicionalmente agregaremos un botón adicional que abra una dirección web en una nueva ventana del navegador web que el usuario esté usando al momento de visitar la página donde hemos publicado nuestra animación; en caso de que esté editando el archivo .fla el sistema abrirá el navegador que el usuario use por defecto.

Veamos el desarrollo del proceso:

Valora este artículo
(2 votos)

Envío de formularios con archivos adjuntos

Formulario de contacto con envío de adjuntos en DW CC2015

Veremos a continuación cómo generar un código básico de ejemplo para un formulario de contacto, usando Adobe Dreamweaver CC2015.2:

Valora este artículo
(2 votos)

Cabezal Imagen de Sustitución en DW CC2015

Consulta de Clase: Imagen de Sustitución en DW CC2015

Esta entrada es el complemento a una respuesta en clases sobre cómo colocar imágenes de sustitución usando Dreamweaver CC2015, ya que la ubicación del menú de esta opción ha cambiado respecto a la versión anterior:

Martes, 10 Mayo 2016 19:04

The Walking Bear (ii)

Valora este artículo
(2 votos)

Animando un oso en Animate CC (ii)

"The Walking Bear" (ii)

Segunda y última parte del tutorial "The Walking Bear" cuya primera parte podemos consultar haciendo clic en este enlace, en la que logramos animar la cabeza, cola, pierna y pata derechas, y brazo y mano derechas del oso, en un movimiento aún bastante rudimentario, sin que el oso avanzara aún sobre el escenario.

Es posible descargar la animación lograda en la primera parte del tutorial haciendo clic en el siguiente enlace: OsoAnimado_01.fla y continuar trabajando sobre este archivo.

Vayamos ahora con el paso a paso de esta última parte del tutorial: