Cómo cambiar el tamaño de la etapa de animación de Adobe Edge

  1. Software
  2. Adobe
  3. Adobe Edge Animate
  4. Cómo cambiar el tamaño de la etapa de animación de Adobe Edge

Libro Relacionado

Adobe Edge Animate CC para maniquíes

Por Michael Rohde

El escenario es donde usted colocará sus elementos, tales como imágenes, texto y objetos dibujados. El Stage es una ventana HTML en vivo, lo que significa que lo que usted ve en la pantalla, es lo que su audiencia ve cuando ve e interactúa con su composición. Puedes dimensionar el escenario de un par de maneras diferentes:

  • Píxeles: Adobe Edge Animate CC le permite configurar el escenario para que permanezca en un tamaño específico sin importar el tamaño de la ventana del explorador.
  • Porcentaje: Para aquellos que prefieren un diseño web más sensible.
  • Pruebas de diseño web sensible: Es posible que desee cambiar el color de fondo de la etapa para probar la capacidad de respuesta de su diseño.

Dimensionamiento del escenario según los valores de los píxeles

Lo más probable es que uno de los primeros pasos que quieras dar sea medir tu escenario adecuadamente. Si planeas insertar tu animación en una página web existente, primero determina cuánto espacio quieres que ocupe tu animación en esa página, y luego dimensiona el escenario en consecuencia.

Para cambiar el tamaño de la Etapa, haga clic en los números de color naranja en la sección Etapa del panel Propiedades – en la columna de la parte superior izquierda cerca de la parte superior de la pantalla – como se muestra. Al hacer clic en los números de anchura o altura, puede escribir las dimensiones exactas (en píxeles) que desea que tenga su escenario.

Si no quieres escribir los números, Edge Animate te ofrece un método alternativo para cambiar el tamaño de la etapa: Simplemente coloque el cursor sobre uno de los números naranjas. Cuando el cursor se convierte en una flecha doble (como se muestra), puede hacer clic y arrastrar para aumentar o disminuir el tamaño del escenario.

Determinar el tamaño de su escenario según el porcentaje del tamaño de la pantalla

Si desea crear una animación que no tiene que ajustarse a ninguna dimensión específica, entonces debe cambiar de píxeles (px) a porcentaje (%), haciendo clic en el botón (vea esta figura). Este es un paso para crear un diseño web sensible. Cuando se ajusta el tamaño de la etapa por porcentaje de pantalla en lugar de por valores de píxel, la etapa se ajusta al tamaño del elemento padre.

Un ejemplo de un elemento padre puede ser la propia ventana del navegador – si la animación es una página web independiente. Sin embargo, si la animación es una parte de una página web, entonces el elemento padre puede ser un elemento div dentro del cual se anida la animación.

Para que su escenario llene toda la ventana del navegador, establezca el ancho y la altura del escenario en 100%, como se muestra en esta figura. Para que su Stage llene la mitad de la ventana del navegador, establezca el Stage en un 50%; y así sucesivamente, dependiendo de la cantidad de la ventana del navegador que desee que su animación ocupe.

Por defecto, el fondo del Stage es blanco. Por lo tanto, no verá ninguna diferencia en la Etapa cuando cambie entre px y %.

Para probar la diferencia entre usar px y % para el tamaño de la Etapa, cambie el color de fondo de la Etapa a algo que no sea blanco, como el rojo. Luego experimente con diferentes porcentajes y dimensiones de px para ver los diferentes efectos.

Para cambiar el color de fondo del escenario (como se muestra), haga clic en el cuadrado blanco para que aparezca un selector de color.

Puede decirle a Edge Animate que mantenga las proporciones de ancho y alto iguales haciendo clic en el icono de Ancho y Alto de Enlace (resaltado en esta figura). De forma predeterminada, el icono de Ancho y Alto de Enlace está desactivado; con ese valor predeterminado en efecto, Edge Animate no mantendrá el ancho (o alto) en la misma proporción cuando cambie el tamaño.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *