Ver ejemplo >>

Descargar proyecto ActionScript completo >>

Es bastante habitual recurrir a gráficos fxg en proyectos Flex para personalizar skins de componentes o mostrar imágenes vectoriales; sin embargo, no es tan automático utilizarlos en proyectos AS ya que por defecto no se incluyen las libraries necesarias para poder instanciar SpriteVisualElement.

Si añades a tu proyecto ActionScript la carpeta ‘[ruta en tu disco duro a Flex SDK 4.0 o superior]\frameworks\libs’ podras incorporar cualquier archivo fxg compatible con Flex (cuidado con el idioma si no tienes configurado el proyecto para ‘en_US’).

En este proyecto, para mayor simplicidad, ya he añadido las libraries spark necesarias, por lo que no sería necesario configurar lo dicho en el párrafo anterior.

Nota: Verás que los gráficos tienen unos degradados un poco ‘bruscos’; no es problema de la representación de Flash Player, sino de los fxg utilizados. Si los abres con Adobe Illustrator verás que son idénticos a los mostrados por el swf. Una de las ventajas de recurrir a gráficos fxg es que se renderizan con las optimizaciones de imágenes vectoriales que incorpora Flash Player 10 y suelen verse bastante mejor que las imágenes vectoriales creadas directamente en Flash Prof.

Si quieres configurar un proyecto ActionScript para Flash Player 11,  sigue los pasos:

1. Lo primero que necesitas es Flash Player 11 Incubator. Descarga en la sección Flash Player Incubator Debug Installers la versión de Flash Player adecuada a tu sistema operativo e instalala.

2. Si no tienes el SDK 4.5, puedes descargarlo de aquí (debe ser, al menos, Build 4.5.0.19786), y añadirlo a los Installed Flex SDKs de Flash Builder.

3. Descarga playerglobal.swc para Flash Player 11 de aquí y copialo en la carpeta frameworks\libs\player\11.0\ del SDK 4.5.

4. Crea un nuevo proyecto ActionScript utilizando el SDK 4.5 que acabas de configurar.

5. Abre el panel de Properties del proyecto. En la sección ActionScript compiler selecciona Use specific version y configúralo para la 11.0. En el campo Aditional compiler arguments añade -swf-version=13.

6. Edita la plantilla index.template.html que encontrarás en la carpeta html-template y configura el parámetro wmode = “direct”.

7. Añade a tu proyecto algún framework preparado para Molehill, como Away3D 4. Puedes descargar la librería Away3D 4.0.0 Broomstick.

8. Gasta tiempo, neuronas y, sobretodo, visión espacial para desarrollar tu proyecto 3D

Además, un interesante tutorial sobre Molehill&Away3D 4 y cómo personalizar el SDK 4.5 para Molehill&Away3D 4,  por John Lindquist.

Ver tutorial de utilización >>

Descargar extensión Proyectos Flash >>

Si no quieres instalar la extesión, puedes descargarte sólo el documento swf (y archivos necesarios) y copiarlo en la carpeta “WindowSWF” de configuración de Flash CS4 Professional:

Descargar sólo swf  Proyectos Flash >>

Descomprime y copia los archivos en la carpeta (Windows XP):

UNIDAD:\Documents and Settings\usuario\Local Settings\Application Data\Adobe\Flash CS4\idioma\Configuration\WindowSWF

Y además, un panel de snippets:

Descargar extensión Snippets >>

Descargar sólo swf  Snippets>>

Si te interesan los proyectos Flex con los que he creado ambos paneles:

Descargar Proyecto Flex que genera el panel de proyectos >>

Descargar Proyecto Flex que genera el panel de snippets >>

Estos proyectos tienen configurada la ruta de publicación en “…Flash CS4\idioma\Configuration\WindowSWF” de la que hablaba antes. Configurala para la ruta de dicha carpeta en tu disco duro. Antes de compilar el proyecto, asegúrate de que has instalado las extensiones o, en su defecto, has copiado “proyectos_flash.rar” o “Snippets.rar” en “WindowSWF”.

Está “inspirado” en el panel de snippets de Lee Brimelow, con la salvedad de que el código no hay que copiarlo al portapapeles, sino que basta hacer doble click sobre el snippet y el código se inserta en la posición actual del cursor en el panel de acciones de Flash.

Tutorial Básico MonsterDebugger

Para quien no lo conozca, es una aplicación AIR Open Source, de la que te puedes descargar el proyecto Flex o sólo el instalador de la aplicación:

Descargar De MonsterDebugger

Es una aplicación MUY RECOMENDABLE no sólo para depurar. Cuando se utilizan clases que no tienen una “representación visual” en el stage hasta que se compila, una de las cosas que más tiempo consume es dar el tamaño y posición de elementos. Caso concreto: cuando empiezas con Papervision3D, una de las dudas que te surge es qué tamaño le das a esa bonita caja que quieres rotar en 3D y a qué distancia colocas la cámara (y suponiendo que no tienes la extensión para Flash), con MonsterDebugger puedes ir modificando en tiempo real (o sea, viendo los cambios que hagas en las propiedades/métodos directamente reflejados en tu swf) la posición de la cámara o el tamaño de la caja, sin el molesto pause/resume.

Sólo hay que incluir una instancia de una clase que te genera automáticamente la aplicación, y que sirve para enlazar tu swf con MonsterDebugger.

El tutorial entra, en los dos ejemplos que hace, a nivel de stage, o sea que el árbol de propiedades/métodos que te va a salir va a ser el completo de todo tu swf:

var debugger:MonsterDebugger = new MonsterDebugger(this);

Sin embargo, la gran ventaja que tiene es que puedes pasar como argumento el “target” que te interese, o sea, el símbolo con el que te interese “trastear”. Para el caso que comentaba, si pasamos como parámetro una cámara de PV3D:

var debugger:MonsterDebugger = new MonsterDebugger(camera);

Se trata de una herramienta genérica que se puede utilizar con cualquier IDE, ya sea Flash, FlashDevelop, Flex… Lo que se conecta con MonsterDebugger es el swf a través de la clase que instancias, estableciendo una LocalConnection.

Al conectar MonsterDebugger con nuestro swf nos saldría el árbol de propiedades de dicha cámara, y a disfrutar: moverla y configurarla en tiempo real.

Y otra cosa MUY IMPORTANTE para quien no se haya dado cuenta: la clase que instanciamos CONECTA el swf a la aplicación AIR a través de una LocalConnection. Una cosa que está muy bien cuando estás depurando, pero MUY PELIGROSA si la subes así a tu servidor, ya que cualquier persona va a poder establecer esta conexión con el swf y saber qué lleva dentro. Por tanto, es FUNDAMENTAL borrar la línea de código donde instanciamos MonsterDebugger. Hecho esto, no hay ningún peligro de seguridad.

Quien no lo conozca, que le eche un vistazo al menos al tutorial de GotoAndLearn, que vale la pena.
P.D.:GotoAndLearn NO me paga por la promoción

Ver ejemplo >>

Ver tutorial >>

Descargar Proyecto Flex completo (proyecto ActionScript) >>

Descargar versión Flash CS3 (archivo Fla y clases Papervision3D GreatWhite) >>

Descargar biblioteca compilada Papervision3D GreatWhite >>

Se trata de un proyecto ActionScript realizado con Flex Builder 3. Va incluído el archivo max con la escena original. Puedes encontrarlo en la carpeta src/assets/max.

Si no tienes el script AS3GeomClassExport.ms puedes descargarlo de este enlace:

AS3GeomClassExporter

O bájalo directamente de su página:

AS3GeomClassExporter >>

Por cierto, el libro que aparece en el atril lo puedes descargar gratuítamente del siguiente enlace:

The Photoshop Anthology >>

Es una guía básica de Photoshop.

El tutorial  muestra la forma de convertir símbolos (sprites, movieClips) de la biblioteca de Flash CS3 en componentes Flex. Crea una biblioteca compilada swc con dichos componentes que más tarde importa desde Flex Builder.

Ver ejemplo desarrollado en el tutorial >>

Ver tutorial >>

Descargar proyecto Flex y archivo Fla >>

Por tratarse de 8 iconos llamados Icono1, Icono2… Icono8, hemos utilizado el método  getDefinitionByName para instanciarlos. Igualmente podríamos haber empleado el operador new:

var boton1:UIMovieClip = new Icono1();

Lo aclaro por si alguien no está habituado a utilizar esta forma de instanciar objetos y lo asocia a una peculiaridad de Flex Component Kit. Aunque… seguro que no. Hay mucho nivel en los lectores del blog .

Ver tutorial >>

Papervision3D Download  >>

Repositorio PV3D  >>

Si nunca has descargado un repositorio, en ese mismo enlace puedes encontrar TortoiseSVN. Es muy fácil de utilizar.

Cuando descargues todos los archivos tendrás en la carpeta de tu disco duro una estructura de directorios similar a esta:

Papervision

as2

as3

branches

Effects

GreatWhite

Esta última carpeta es la que contiene PV3D 2.0 GreatWhite.

El primer tutorial muestra cómo crear una biblioteca compilada swc a partir de los archivos as (ActionScript) descargados del repositorio; y el segundo, cómo utilizar dicha biblioteca en un proyecto ActionScript:

Ver tutorial de creación de una biblioteca compilada para PV3D >>

Ver tutorial de creación de un proyecto ActionScript para PV3D >>

Sólo tienes que sincronizar periódicamente el repositorio para tener actualizada la biblioteca PV3D