Archive for the ‘videotutorial’ Category

Videotutorial: Vectorizar logo de Flash… en Flash

Domingo, Febrero 28th, 2010

En este video tutorial Flash veremos cómo vectorizar el logo de Flash utilizando herramientas de dibujo.


Enviar comentario

Programación para diseñadores 6: Condiciones switch

Miércoles, Febrero 10th, 2010

En este videotutorial aprenderemos el uso de condicionales con la instrucción de casos Switch de Javascript.


Videotutoriales de programación para diseñadores:

Encuentras enlaces a los más recientes en el más avanzado o en los tutoriales de programación:

  1. Introducción a la programación para diseñadores
  2. Programación para diseñadores 2: Javascript y comentarios
  3. Programación para diseñadores 3: Algoritmos
  4. Programación para diseñadores 4: Programación estructurada
  5. Programación para diseñadores 5: Condicionales
  6. Programación para diseñadores 6: Condiciones switch
  7. Programación para diseñadores 7: Ciclos while
  8. Programación para diseñadores 8: Scripts en Photoshop
  9. Revisa el más reciente para la lista completa…

Enviar comentario

MDM Zinc: Conceptos Básicos

Miércoles, Diciembre 2nd, 2009

MDM Zinc 3.0 es un software que nos permite extender las propiedades usadas en Flash para crear aplicaciones robustas de escritorio. Podemos crear instaladores, leer y escribir archivos hasta crear nuestro propio navegador web.

Algo así como lo que hace AIR, pero sin complicarnos demasiado, a mi personalmente me gusta más MDM Zinc por su libertad, pero es una porquería en documentación. Intentaré resolver poco a poco los dilemas de documentación.

En este tip abordaremos los temas principales para crear un proyecto desde cero con MDM Zinc, aunque no haremos nada de código aun.

Creando Nuestro Primer Proyecto


Conceptos básicos de una aplicación con MDM Zinc

Esto rara vez lo encontrarán en la Web, por ello es bueno tener en cuenta los siguientes aspectos:

Forms

MDM Zinc trabaja con "forms", que son básicamente películas flash standalone que genera desde sus .SWF. Un "mainform" puede tener a su vez múltiples "sub-forms" para ayudarse en sus tareas. Todos los forms pueden conectarse y hasta moverse entre sí. Para este ejemplo usaremos un solo form.

Ventanas

Zinc nos permite personalizar nuestras ventanas de manera fácil. Haciendo doble click sobre nuestro form, podremos ver un menu "Window" con las siguientes opciones:

  • Style: Que tipo de ventana usaremos. Puede ser Standard (Normal), Alpha (Para transparencias de 0 al 100% de alpha), Transparente (Completamente transparente) o Masked (Recortada con un BMP de recorte).
  • Buttons: Que botones deseamos que contenga nuestro form. Maximize, Minimize, Close.
  • State: Como queremos que abra el form ni bien ese ejecutado. Standard (Normalmente), Maximized o Mimized.

Position

Nos permite posicionar al centro nuestra ventana. Aunque desde el panel "Windows Properties" podremos configurar valores personalizados de X y Y.

Applications Tab

Nos permite configurar nuestra aplicación en los siguientes aspectos:

  • Aplication Type: Podemos configurar si será una aplicación para escritorio (Desktop), salva pantallas (ScreenSaver) o para aplicaciones "Kiosk", que son las aplicaciones estilo un ATM.
  • Aplication Name: Configura como se llamará nuestro .exe al ser exportador por Zinc.
  • Aplications Icons: Aplication Icon y Tray Icon son los iconos que aparecerán en nuestro .exe y una vez este mimizado en el tray bar. Cuidado: Haganlo con Microangelo o similares el .ico, no renombren un .JPG a .ICO porque se morirá Zinc.
  • Show in Tray/Show in TaskBar: Permite configurar si será visible la aplicación en el Tray Bar y en el TaskBar. Es útil cuando se arman aplicaciones "invisibles".
  • Window Stay on Top: Configura la aplicación para que mientras este abierta se mantenga siempre sobre las ventanas. Atención: El focus se perderá aunque este al "Top" de todo.
  • Versión Info: Configura los datos de versión, ideales si estamos creando una aplicación estilo software.
  • Splash Screen: Permite configurar nuestro form con las propiedades de un splash screen (Una ventana de "Bienvenida" por decirlo de alguna forma).
  • Screen Saver: Permite configurar nuestro form con las propiedades específicas de screen saver, en caso de haber declarado el proyecto como tal.
  • Trial: Permite configurar nuestro form para que en N tiempo deje de funcionar. Incluso ponerle un Serial Number. Ideal para software licenciatario.

Forms Tab

Desde aquí podremos controlar nuestro "mainform" y los "subforms" asociados.

Extensions Tab

Zinc funciona haciendo uso de ciertas, clases por así decirlo, o extensiones. Estas extensiones solo funcionan en el caso de estar embebidas dentro del player al crear la exportación final. Para que esto funcione realmente, debemos ir al tab extensions, y "tildar" aquellas que necesitemos. Por ejemplo: Si estamos trabajando con ScreenCaptures, tildaremos "Images".

Windows properties

Desde aquí podremos configurar las bases de nuestra ventana con más precisión que antes. Tenemos básicamente los siguientes conceptos:

  • Position: Posicionamiento personalizado de nuestra ventana.
  • Size: Control personalizado del tamaño de la ventana.
  • Window: Propiedades varias de la ventana como Estilo, botones, etc…
  • Style Properties: Como lo dice, propiedades de estilo de la ventana. Desde aquí podremos "transparentar" nuestro window por ejemplo. Para usarlo hay que modificar las instancias "Type".
  • Mouse: Permite controlar justamente eso, que "clicks" del mouse usaremos como inputs de nuestro form.

Saludos y espero lo encuentren de utilidad

Enviar comentario

Cómo crear una plantilla de Wordpress

Miércoles, Noviembre 25th, 2009

Continuando con la videoserie de Así las Armamos en Español vamos a llevar a nuestra plantilla Tabletop al siguiente nivel: la vamos a convertir en una plantilla wordpress funcional.

En esta primera edición de Wordpress he hecho dos videos: En el primer video veremos la maquetación estática de la sección "blog" de nuestra plantilla para luego hacer la instalación de la plataforma en un servidor local. Posiblemente implementare la plantilla como un portafolio para ver cosas mas avanzadas.

En el segundo video comenzaremos a dinamizar nuestra web viendo los template tags para rutas, nuestros links y también para nuestro menú estático

Te recuerdo ver las primeras partes de esta serie: Cómo convertir PSD de Photoshop a CSS y XHTML, parte 1 Convertir PSD a CSS y XHTML, parte 2 Convertir PSD en HTML, parte 3 PSD a XHTML y CSS, 4 Convertir PSD a CSS y XHTML, parte 5 Convertir PSD a CSS y XHTML, parte 6

Wordpress: Instalación y maquetación de un blog


Wordpress: Menús de navegación, rutas y links


No olviden dejar sus comentarios y sugerencias por aquí en Cristalab o siguiéndome a través de twitter @raymicha. En el siguiente capítulo continuaremos con nuestra implementación conociendo el Loop de Wordpress para los posts y armando nuestra barra de búsqueda. No se lo pierdan!

Enviar comentario

Convertir PSD a CSS y XHTML, parte 5

Miércoles, Octubre 7th, 2009

Y aquí está la continuación del cuarto capítulo de "Así las armamos en español" mi videoserie sobre maquetación web. En esta parte veremos dos plugins de jquery que nos permitirán hacer cambios en las fuentes y darle funcionabilidad a nuestro slide.

Te recuerdo ver las primeras partes de esta serie Convertir PSD a XHTML/CSS parte 1, Convertir PSD a XHTML/CSS parte 2 , Convertir PSD a XHTML/CSS parte 3

Así las armamos en Español: Javascript

Podríamos decir que esta es ya la última parte de la maquetación de esta web, pero no, vamos a ver la sección de contáctanos con el objetivo de darle una mirada a las estructuras y estilizaciones de los formularios y veré como podemos sacarle el jugo a las otras secciones aprendiendo algún truco


Temas para Próximos Vídeos

  • Jquery
  • Wordpress
  • Tips y algunas propiedades vistas mas a fondo de CSS
  • Mas maquetaciones!!

No olviden que pueden dejarme sus comentarios por aqui en Cristalab o seguirme en twitter @raymicha muchas gracias a todos los que siguieron mis videos hasta ahora nos vemos pronto con nuevas cosas para aprender :D

Enviar comentario

Videotutorial de como agregar sombras en Flash

Lunes, Octubre 5th, 2009

En este videotutorial de Adobe Flash, veremos una t�cnica para sombrear personajes utilizando la herramienta de la brocha y la opci�n de pintar selecci�n.



Descargar Archivo Flash

Enviar comentario

Videotutorial de fondo decorativo en Flash

Lunes, Mayo 25th, 2009

En éste videotutorial de Flash crearemos un fondo con un estilo de estrella y duplicaremos rectángulos con degradados para lograr el efecto deseado.


Link de tutorial en HD

Enviar comentario

Videotutorial sobre animación 3D en Flash CS4

Martes, Noviembre 18th, 2008

En éste videotutorial veremos las nuevas herramientas para manipular y animar objetos en 3D utilizando Flash CS4


Enviar comentario

Nueva forma de animar en Flash CS4

Viernes, Noviembre 14th, 2008

Video tutorial acerca de las nuevas interpolaciones de movimiento en Flash CS4.


Enviar comentario

Cómo crear brujas y calabazas animadas en Flash

Lunes, Octubre 27th, 2008

En este vídeo tutorial mostraré como realizar un dibujo de una calabaza de Halloween en Flash:


Descargar Archivo para Flash CS3.

En este segundo video tutorial realizare mostraré como realizar una animación de bruja volando.


Descargar Archivo para Flash CS3.

Enviar comentario