Definición de páginas en BauMotionComics

Creación de páginas en BauMotionComics


Definición de páginas en BauMotionComics

Las presentaciones de BauMotionComics se dividen en páginas .

Cada página puede contener una serie de imágenes y texto y una o varias animaciones que se ejecutan secuencialmente.

Para definir una página se utiliza la etiqueta Page :

<Page>
.......
</Page>

Fondos

Para utilizar un fondo en nuestra página, simplemente indicamos la brocha que se va a utilizar:

<!-- Página 1 -->
<Page>
	<LinearBrush ResourceKey="BrsLinearGreen" />
	....
</Page>

<!-- Página 2 -->
<Page>
	<RadialBrush ResourceKey = "BrsRadialYellow" />
	....
</Page>

<!-- Página 3 -->
<Page>
	<ImageBrush ResourceKey="Bg2" Stretch="Fill" />
	...
</Page>

Con las etiquetas anteriores hemos definido tres páginas, la primera de ellas utiliza una brocha lineal como fondo, la segunda una brocha radial y la última una imagen. En los tres casos, estamos utilizando elementos definidos en un archivo de recursos por eso utilizamos el atributo ResourceKey .

Elementos de la página

Una página puede contener cualquier elemento , es decir, imágenes, textos, frames..., simplemente tenemos que indicar dentro de la etiqueta Page el elemento a utilizar.

Así para utilizar una imagen:

<Page>
	<Image Key="P11" Left="100" Top="100" Width="252" Height="275" 
		Visible = "true" FileName="Images\Page 03-01.png" />
</Page>

En la etiqueta de imagen, indicamos la clave de la imagen con el atributo Key , la posición con los atributos Left y Top , las dimesiones con los atributos Width y Height (opcionales, si no los especificamos se dibuja la imagen con su tamaño original) el nombre de archivo con el atributo FileName y si es visible o no con el atributo Visible .

También podemos utilizar una imagen que se haya definido en un archivo de recursos utilizando el atributo ResourceKey

<Page>
	<Image Key="Sp1" ResourceKey="Bg1" Top="50" Left="280" Width="252" Height="275"/>
</Page>

Lo mismo ocurre con el resto de elementos de la página : textos, brochas, figuras... podemos utilizar tanto un elemento nuevo como un elemento de un archivo de recursos.

Animaciones

Dentro de la página identificamos las diferentes animaciones. Cada animación está dentro de su etiqueta TimeLine :

<TimeLine Duration="2">
       ...
</TimeLine>

El atributo Duration indica la duración total de la animación. Cada TimeLine puede estar compuesto de varias instrucciones, cada una de ellas puede tratar un elemento diferente de la página. Por ejemplo:

<TimeLine Duration="2">
	<Rotate Key="Sp5" Angle="-25" OriginX ="0" OriginY="0"/>
	<Translate Key="Sp5" Top = "200" Left = "400" MustAnimate="false" />
	<SetZIndex Key="Sp5" ZIndex = "2" Start="0" Duration="0.1" />
	<Rotate Key="Sp8" Angle="25" OriginX ="0.5" OriginY="0.5" Start="1" Duration="1" />
	<Rotate Key="Sp10" Angle="360" OriginX ="0.5" OriginY="0.5" Start="1" Duration="1" 
			  AccelerationRatio="0.25" DecelerationRatio="0.30" />
</TimeLine>

Cada una de los nodos internos del TimeLine identifica una acción (rotación, traslación, modificación del ZIndex o el ViewBox de una imagen,...). En todos los casos, el atributo Key define la clave del elemento de la página al que afecta la acción, el atributo Start indica el momento en que comienza a ejecutarse la acción y Duration el tiempo que tarda en ejecutarse (ambos en segundos).

Los atributos AccelerationRation y DecelerationRatio definen el tiempo de aceleración y deceleración de la acción. Así, cuando definimos una aceleración de 0.25 y una deceleración de un 0.30, como en el ejemplo, lo que indicamos es que el primer 25 % del tiempo de la animación se acelera y el 30 % final del tiempo se desacelera.

Por su parte, el atributo MustAnimate indica si la acción se debe animar o simplemente ejecutarla sin animación.

En las siguientes secciones veremos las diferentes animaciones que podemos utilizar:

Mostrar elemento y cambiar la opacidad

Si queremos cambiar la opacidad de un elemento utilizamos la acción Show :

<Show Key="Sp5" Opacity="0.5" Start="1" Duration="3" />
<Show Key="Sp3" Visible = "false" />
<Show Key="Sp3" />

Esta acción cambia la opacidad del elemento cuando utilizamos el atributo Opacity o bien muestra / oculta el elemento si utilizamos el atributo Visible . En caso que no indiquemos ni Opacity ni Visible , se mostrará el elemento.

Cambio de posición

Para cambiar la posición del elemento utilizamos la acción Translate :

<Translate Key="Sp5" Top="50" Left="100" />

En este caso los atributos Top y Left indican la posición final del elemento.

También se puede trasladar un elemento siguiendo una ruta aunque para ello tenemos que utilizar el elemento Path :

<Path Key="Text1" RotateWithTangent="True">
	M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100
</Path>

Donde el contenido del elemento es la ruta a seguir mientras que el atributo RotateWithTangent indica si el elemento debe rotarse siguiendo la tangente a la curva definida.

Cambio de tamaño

Para modificar el tamaño de un elemento utilizamos la acción Resize :

<Resize Key="Sp1" Width ="600" Height="681" Stretch ="Fill" />

Los atributos Width y Height definen el ancho y alto final del elemento y el atributo Stretch el modo en que se ajusta la imagen al nuevo tamaño.

Rotación

Para rotar un elemento, utilizaremos la acción Rotate :

<Rotate Key="Sp5" OriginX="0.5" OriginY="0.5" Angle="30" >

En este caso, con los atributos OriginX y OriginY son el origen de la rotación con valores de 0 a 1 (donde 1 es el ancho o el alto completo, es decir, 0.5 indica un punto medio) y Angle es el ángulo de rotación final en grados.

Cambio de ZIndex

Para modificar el ZIndex de un elemento, es decir, la posición sobre o debajo de un elemento, se utiliza la etiqueta SetZIndex :

<SetZIndex Key="Sp2" ZIndex = "2" />

Donde ZIndex , es la posición en el eje Z del elemento, un valor 0 indica que el elemento está colocado sobre el fondo y valores superiores indican que el elemento está en una capa superior.

Escalado

Para realizar un zoom sobre un elemento utilizamos la etiqueta Zoom :

<Zoom Key="Sp1" OriginX="0.5" OriginY="0.5" ScaleX="0.5" ScaleY="0.5">

Donde OriginX y OriginY son el origen del escalado y ScaleX y ScaleY indican el escalado. En este caso se ha reducido el tamaño del elemento a la mitad.

Cambiar el modo de visualización

Para cambiar como se visualiza una imagen utilizamos el elemento SetViewBox :

<SetViewBox Key="Sp9"
			ViewBox = "0, 0, 1, 1"	
			ViewPort = "0, 0.5, 1, 1" TileMode = "FlipXY" />

Donde ViewBox y ViewPort indican las posiciones que se utilizan para visualizar la imagen y TileMode indica la forma en que se repite la imagen.

Modificaciones en las brochas

También se pueden animar las brochas con SetRadialBrush :

<SetRadialBrush Key="Page" Center="0.2,0.2" RadiusX = "1" RadiusY = "1" />
<SetRadialBrush Key="Sp7" Center="0,0" RadiusX = "1" RadiusY = "1" />

Donde Center indica el nuevo centro de la brocha y RadiusX y RadiusY el nuevo radio.

Si en el atributo Key utilizamos el valor Page indicamos que la brocha que vamos a animar es la de la página, en cualquier otro caso, modificaremos el elemento de la página especificado.

Modificadores de la acciones

Todas las acciones pueden contener una función que modifica la forma en que se ejecuta la acción. Estas funciones indican si deseamos que se repita la animación con un efecto de rebote o de muelle o se aplica el tiempo siguiendo alguna función en especial.

Podemos utilizar los siguientes modificadores dentro de una acción:

<BounceEase Bounces="2" EasingMode="EaseIn | EaseOut | EaseInOut" Bounciness="0.5" />
<CircleEase EasingMode="EaseIn | EaseOut | EaseInOut" />
<BackEase Amplitude="0.3" EasingMode="EaseIn | EaseOut | EaseInOut" />
<CubicEase EasingMode="EaseIn | EaseOut | EaseInOut" />
<ElasticEase Oscillations="3" Springiness="1" EasingMode="EaseIn | EaseOut | EaseInOut" />
<ExponentialEase Exponent="6" EasingMode="EaseIn | EaseOut | EaseInOut" />
<PowerEase Power="20" EasingMode="EaseIn | EaseOut | EaseInOut" />
<QuadraticEase EasingMode="EaseIn | EaseOut | EaseInOut" />
<QuarticEase EasingMode="EaseIn | EaseOut | EaseInOut" />
<SineEase EasingMode="EaseIn | EaseOut | EaseInOut" />

Donde EasingMode indica si la función se debe aplicar al principio, al final o al principio y al final de la animación.

Páginas relacionadas