Básicamente Sencha es un programa que genera un código html a partir de textos, imágenes y vídeos, al estilo “What You See is What you Get”.
Antes de nada, comentaros que existen otros programas que también generan un texto en html, como Tumult Hype, que son bastante más económicos. Pero nosotros lo probamos y no nos acabó de convencer, ya que nos daba errores frecuentes. De todos modos lo han actualizado varias veces desde entonces, y puesto que existe una versión de prueba, también podéis descargarlo y probarlo.
Abrimos el programa y lo primero que tenemos que hacer es guardar una copia en File > Save Project As ... para poder continuar trabajando.
Cuando guardamos el proyecto se generan varios archivos dentro de una carpeta con la ubicación y el nombre que vosotros deseéis.
KeepMeAround.txt: es un archivo de información que utiliza Sencha y que no vamos a tocar durante todo el proceso.
La carpeta assets es el directorio donde automáticamente Sencha almacena todas las imágenes.
nombredelarchivo.anim, es el archivo del programa.
En la pantalla observamos diferentes secciones:
- En la parte izquierda existen varias herramientas: de selección, creación de figuras, insertar imágenes y vídeos ...
- En la parte superior nos encontramos con el “Time Line”, la línea temporal en la que añadiremos las acciones y la duración de las animaciones que vayamos creando.
- En la parte central se encuentra el área de trabajo, dónde colocaremos las imágenes y textos que deseemos, y que serán las que aparecerán en nuestra aplicación. La parte blanca es lo que se muestra en la pantalla, la parte oscura es una especie de mesa de trabajo.
- En la parte inferior se muestran las escenas que compondrán nuestro proyecto.
- En la parte derecha tenemos tres columnas: Properties, Library y Project. Las dos últimas apenas las hemos utilizado, así que vamos a centrarnos en Properties.
Debemos tener en cuenta dos aspectos: el tamaño de la pantalla del dispositivo para el que vayamos a realizar la aplicación, y el tamaño y la resolución de las imágenes que incorporaremos en nuestro proyecto.
Comencemos con la pantalla del dispositivo. El iphone tiene unas dimensiones de 320x480 píxeles, pero nosotros dejamos que la barra de estado se viera, así que el tamaño final sería de 320 x 460 píxeles.
Vamos pues a cambiar el tamaño predefinido por Sencha a 320 x 460 en
Properties > General > Dimensión
Ahora vamos a darle color a nuestra primera escena. Para ello no tenemos más que arrastrar una imagen sobre el área de trabajo y listo!!
Puedes hacer click sobre la imagen y arrastrarla hasta la posición que desees.
Si te das cuenta, cuando haces click sobre la imagen, a la derecha se despliega un panel con mucha información.
Aquí puedes seleccionar la posición de la imagen en la pantalla, las dimensiones, rotación, opacidad, si deseas añadir bordes etc...
También aquí se añaden las acciones a las imágenes. Existen numerosas acciones que se pueden aplicar a cada imagen, pero por hoy sólo nos centraremos en la acción Click.
En la barra superior, en el menú Scenes, tenemos diversas opciones que nos pueden servir:
Add New: Añadir nueva escena
Duplicate: Duplicar escena
Delete: Borrar una escena ya existente
También podemos añadir una nueva escena con mayor facilidad, pulsando el botón más que se encuentra en la parte inferior derecha del área de trabajo.
Añade una escena y verás cómo aparece una nueva en blanco. Arrastra una imagen sobre ella, y ya tienes tu segunda escena.
Ahora vamos a ver como pasar de una escena a la siguiente con la acción click:
Ve a la escena uno y selecciona la imagen que deseas que realice una acción. En el panel derecho, en Actions > Click pulsa en el panel desplegable y selecciona Go to Scene.
Debajo aparece un submenú llamado Scene. Selecciona Scene 2 y ya tenemos lista la acción.
Ahora veamos en la web (Mejor si utilizas Safari) lo que hemos creado. Ve a File > Preview Project in Browser ó utiliza cmd+Enter.
Haz click sobre la imagen a la que le añadiste la acción (primera escena), y verás cómo te lleva a la siguiente escena (siguiente escena)
Esperemos que os haya servido de ayuda este segundo post .... Y cómo ya son las 11 de la noche y llevamos desde las 8 de la mañana sin parar de trabajar, necesitamos irnos a dormir ... el próximo día más y mejor ... gracias por leernos :)
