as3 unidad 12 cinematica inversa

Cinemática inversaCinemática inversa

Unidad 12Unidad 12

ObjetivosObjetivos Usar la herramienta de cinemática Usar la herramienta de cinemática

inversa.inversa. Usar las clases IK para crear Usar las clases IK para crear

animacionesanimaciones Verificar si el usuario tiene una Verificar si el usuario tiene una

cámara web conectadacámara web conectada Acceder y desplegar el video con Acceder y desplegar el video con

ActionScript.ActionScript. Crear un bitmap con ActionScriptCrear un bitmap con ActionScript

ObjetivosObjetivos Capturar objetos y salvarlos en un Capturar objetos y salvarlos en un

bitmap databitmap data Examinar la herramienta Pixel Examinar la herramienta Pixel

BenderBender Trabajar con filtrosTrabajar con filtros Aplicar un Pixel Bender a un objetoAplicar un Pixel Bender a un objeto Utilizar los deslizadores para Utilizar los deslizadores para

modificar el filtromodificar el filtro

Cinemática InversaCinemática Inversa

Los esqueletos se crean únicamente Los esqueletos se crean únicamente en el IDE de Flash.en el IDE de Flash.

Una vez creada, se puede manipular Una vez creada, se puede manipular por AS o por el usuario.por AS o por el usuario.

Los esqueletos se pueden hacer con Los esqueletos se pueden hacer con Símbolos o con Shapes, pero para AS Símbolos o con Shapes, pero para AS es mejor manipular MC.es mejor manipular MC.

Las armaduras se distinguen por el Las armaduras se distinguen por el símbolo en su capa.símbolo en su capa.


Una armadura solo puede tener una Una armadura solo puede tener una raíz (root joint) que es el punto raíz (root joint) que es el punto original de la misma.original de la misma.

Una vez que la armadura ha sido Una vez que la armadura ha sido creada, hay que indicar si será creada, hay que indicar si será manipulada por el usuario manipulada por el usuario (authoringtime) o por ActionScript (authoringtime) o por ActionScript (runtime).(runtime).


Cada vez que se crea una armadura, Cada vez que se crea una armadura, se genera automáticamente un se genera automáticamente un objeto IKArmature y otro IKManager.objeto IKArmature y otro IKManager.

Las clases IKLas clases IK

La clase IKManager es usada para La clase IKManager es usada para manipular manipular una armadura.una armadura.

La clase IKArmature es utilizada para La clase IKArmature es utilizada para describir describir una armadura. una armadura.

http://help.adobe.com/en_US/http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/ik/AS3LCR/Flash_10.0/fl/ik/IKManager.htmlIKManager.html


Con el método tracjAllArmature en false, Con el método tracjAllArmature en false, indicamos que la manipulación del indicamos que la manipulación del armadura la haremos con ActionScript.armadura la haremos con ActionScript.

Si tiene el valor de true, la manipulación Si tiene el valor de true, la manipulación la hará el usuario.la hará el usuario.

El objeto IKManager guarda una lista de El objeto IKManager guarda una lista de las armaduras del archivo.las armaduras del archivo.

Puedes hacer referencia a una Puedes hacer referencia a una armadura por medio del método armadura por medio del método IKManager.getArmatureAt().IKManager.getArmatureAt().

Las clases IKLas clases IK Nota: Si se tiene un proyecto con varias Nota: Si se tiene un proyecto con varias

armaduras, podemos hacer referencia a armaduras, podemos hacer referencia a cada una de ellas por medio del método cada una de ellas por medio del método getArmatureAt() o dando el nombre de getArmatureAt() o dando el nombre de la armadura por medio del método la armadura por medio del método getArmatureByName()getArmatureByName()

Por ejemplo:Por ejemplo: var arm0:IKArmature = var arm0:IKArmature =

IKManager.getArmatureAt(0)IKManager.getArmatureAt(0) La variable arm0 guarda la referencia La variable arm0 guarda la referencia

de la armadura en el escenario.de la armadura en el escenario.


La clase IKJoint sirve para La clase IKJoint sirve para administrar las articulaciones.administrar las articulaciones.

Es necesario almacenar la referencia Es necesario almacenar la referencia en un objeto IKJoint para poder en un objeto IKJoint para poder mover la armadura con la clase mover la armadura con la clase IKMover.IKMover.

Moviendo una sola articulación, se Moviendo una sola articulación, se moverá toda la armadura.moverá toda la armadura.


Para referenciar la raíz de la armadura, Para referenciar la raíz de la armadura, necesitamos crear primero su referencianecesitamos crear primero su referencia

var rt0:IKJoint = arm0.rootJoint;var rt0:IKJoint = arm0.rootJoint; Una vez que tenemos la referencia, Una vez que tenemos la referencia,

necesitamos “dibujar” la armadura con necesitamos “dibujar” la armadura con ActionScript para ser movida.ActionScript para ser movida.

Una vez definidas, las demás Una vez definidas, las demás articulaciones serán “hijitas” de la raíz.articulaciones serán “hijitas” de la raíz.


Por ejemplo:Por ejemplo:var jt0:IKJoint = rt0.getChildAt(0).getChildAt(0).getChildAt(0);var jt0:IKJoint = rt0.getChildAt(0).getChildAt(0).getChildAt(0);

Ahora podemos animar con la Ahora podemos animar con la referencia del objeto jt0.referencia del objeto jt0.

Nota: La raíz no se mueve. Si Nota: La raíz no se mueve. Si animamos a una de las animamos a una de las articulaciones, todo la armadura (o articulaciones, todo la armadura (o esqueleto) se moverá.esqueleto) se moverá.

La Clase IKMoverLa Clase IKMover

La clase IKMover es utilizada para La clase IKMover es utilizada para animar (mover) las articulaciones de animar (mover) las articulaciones de una armadura o esqueleto.una armadura o esqueleto.

Para ello se utiliza el método moveTo().Para ello se utiliza el método moveTo(). Primero hay que crear una instancia:Primero hay que crear una instancia:

var mover0:IKMover = new IKMover(jt0, jt0.position)var mover0:IKMover = new IKMover(jt0, jt0.position)

El primer parámetro es la articulación El primer parámetro es la articulación que se desea mover. El segundo es la que se desea mover. El segundo es la posición actual.posición actual.

Mover la armaduraMover la armadura

El método moveTo() recibe como El método moveTo() recibe como parámetro un objeto de la clase Point parámetro un objeto de la clase Point (con un valor de x, y).(con un valor de x, y).

var pt0:Point = new Point(x, y);var pt0:Point = new Point(x, y);

mover0.moveTo(pt0);mover0.moveTo(pt0); Finalmente, al mover la articulación, Finalmente, al mover la articulación,

Flash calculará el movimiento de los Flash calculará el movimiento de los demás huesos de la armadurademás huesos de la armadura

Acceder a la cámara Acceder a la cámara WebWeb

Unidad 12Unidad 12

Acceder a la cámara WebAcceder a la cámara Web

La clase La clase CameraCamera maneja la cámara o maneja la cámara o cámaras conectadas a la computadora cámaras conectadas a la computadora del usuario.del usuario.

El método El método getCameragetCamera() conecta la () conecta la cámara con ActionScript.cámara con ActionScript.

Este método accede a la información de Este método accede a la información de la cámara, pero no muestra las la cámara, pero no muestra las imágenes.imágenes.

Para mostrar la salida de la cámara, es Para mostrar la salida de la cámara, es necesario un objeto de la clase necesario un objeto de la clase VideoVideo..


Nota: Flash puede acceder a cuatro Nota: Flash puede acceder a cuatro cámaras web conectadas a la cámaras web conectadas a la computadora, pero sólo muestra la computadora, pero sólo muestra la salida de una a la vez.salida de una a la vez.

Para conectar la cámara web, se Para conectar la cámara web, se necesita crear el objeto:necesita crear el objeto:var camara:Camera = Camera.getCamera()var camara:Camera = Camera.getCamera()

Si el valor del objeto es nulo, indica Si el valor del objeto es nulo, indica que no hay cámaras conectadas.que no hay cámaras conectadas.


Para visualizar la salida, necesitamos un Para visualizar la salida, necesitamos un objeto video.objeto video.

var video:Video = new var video:Video = new Video(160,120);Video(160,120);

Posteriormente hay que conectar el Posteriormente hay que conectar el objeto video (visual object) a la cámara.objeto video (visual object) a la cámara.

video.attachCamera(camera);video.attachCamera(camera); Y añadir el video a la lista de Y añadir el video a la lista de

visualización:visualización:addChild(video);addChild(video);


Cuando AS se conecta a la cámara, Cuando AS se conecta a la cámara, deberá aparecer un mensaje de deberá aparecer un mensaje de Flash Player, pidiendo autorización.Flash Player, pidiendo autorización.

No se puede hacer nada para No se puede hacer nada para saltarse este mensaje de seguridad.saltarse este mensaje de seguridad.

Las clases Bitmap y Las clases Bitmap y BitmapDataBitmapData

Las clases Bitmap y Las clases Bitmap y BitmapDataBitmapData

La clase La clase BitmapDataBitmapData almacena la almacena la información del gráfico.información del gráfico.

La clase La clase BitmapBitmap es el objeto visual en es el objeto visual en la lista de visualización, y se alimenta la lista de visualización, y se alimenta de la anterior por medio del método de la anterior por medio del método draw()draw()..

Finalmente hay que añadir el objeto Finalmente hay que añadir el objeto Bitmap a la lista de visualización con Bitmap a la lista de visualización con el método el método addChild(), addChild(), como cualquier como cualquier otro objeto visual.otro objeto visual.

Pixel BenderPixel Bender


El Pixel Bender es una herramienta para El Pixel Bender es una herramienta para crear y manipular filtros.crear y manipular filtros.

Se instala junto con cualquier paquete Se instala junto con cualquier paquete de Adobe de diseño o se puede bajar en de Adobe de diseño o se puede bajar en forma gratuita de Adobe.forma gratuita de Adobe.

El Pixel Bender posee su propio El Pixel Bender posee su propio lenguaje para crear filtros.lenguaje para crear filtros.

Se puede importar, probar y modificar Se puede importar, probar y modificar filtros existentes.filtros existentes.


Los filtros del Pixel Bender se pueden Los filtros del Pixel Bender se pueden aplicar a MovieClips, videos, texto o aplicar a MovieClips, videos, texto o mapas de bits por medio de mapas de bits por medio de ActionScript.ActionScript.

En la herramienta sólo se puede En la herramienta sólo se puede aplicar a mapas de bits. aplicar a mapas de bits.

La compatibilidad con Pixel Bender La compatibilidad con Pixel Bender existe a partir de Flash Player 10 y existe a partir de Flash Player 10 y Adobe AIR 1.5.Adobe AIR 1.5.

Examinar el archivo PBFilterExaminar el archivo PBFilter

Este archivo fue desarrollado por el Este archivo fue desarrollado por el autor.autor.

Los filtros se manejan con la clase Los filtros se manejan con la clase Shader:Shader:– private var fr:FileReference; private var fr:FileReference; – private var shader:Shader; private var shader:Shader; – private var shaderFilter:ShaderFilter; private var shaderFilter:ShaderFilter; – public var filterValue:Number;public var filterValue:Number;– public var filterName:String;public var filterName:String;


La clase Shader crea una instancia, y La clase Shader crea una instancia, y con la clase ShalterFilter utilizaremos con la clase ShalterFilter utilizaremos la instancia como un filtro.la instancia como un filtro.

Las siguientes variables son publicas Las siguientes variables son publicas y las modificaremos para manipular y las modificaremos para manipular el filtro.el filtro.

La función constructora recibe dos La función constructora recibe dos parámetros:parámetros:


Función constructora:Función constructora:public function PBFilter(image:Bitmap=null, val:Number = public function PBFilter(image:Bitmap=null, val:Number =

0):void 0):void

{ {

filterValue = val;filterValue = val;

image2Filter = image;image2Filter = image;

fr = new FileReference(); fr = new FileReference();

fr.addEventListener(Event.SELECT, onSelect); fr.addEventListener(Event.SELECT, onSelect);

fr.addEventListener(Event.COMPLETE, onComplete); fr.addEventListener(Event.COMPLETE, onComplete);

fr.browse(); fr.browse();

} }

Examinar el archivo PBFilterExaminar el archivo PBFilterpublic function onComplete(e:Event=null):void public function onComplete(e:Event=null):void

{ {

shader = new Shader(fr.data);shader = new Shader(fr.data);

filterName = fr.name;filterName = fr.name;

if(shader.data.radius!= undefined){if(shader.data.radius!= undefined){

filterName += ": radius";filterName += ": radius";

shader.data.radius.value = [filterValue];shader.data.radius.value = [filterValue];

}else if(shader.data.amount != undefined){}else if(shader.data.amount != undefined){

filterName += ": amount";filterName += ": amount";

shader.data.amount.value = [filterValue];shader.data.amount.value = [filterValue];

}else if(shader.data.amplitude != undefined){}else if(shader.data.amplitude != undefined){

filterName += ": amplitude";filterName += ": amplitude";

shader.data.amplitude.value = [filterValue];shader.data.amplitude.value = [filterValue];

}else if(shader.data.Radius!= undefined){}else if(shader.data.Radius!= undefined){

filterName += ": Radius";filterName += ": Radius";

shader.data.Radius.value = [filterValue];shader.data.Radius.value = [filterValue];

}}

shaderFilter = new ShaderFilter(); shaderFilter = new ShaderFilter();

shaderFilter.shader = shader; shaderFilter.shader = shader;

image2Filter.filters = [shaderFilter];image2Filter.filters = [shaderFilter];

} }

Uso del archivo PBFilterUso del archivo PBFilter

Nota: Algunos filtros consumen Nota: Algunos filtros consumen mucho procesador. Pueden correr mucho procesador. Pueden correr muy bien en máquinas nuevas, pero muy bien en máquinas nuevas, pero en algunas los resultados no serán en algunas los resultados no serán óptimos.óptimos.

Preguntas de revisiónPreguntas de revisión

¿Cuál paso es indispensable para ¿Cuál paso es indispensable para indicarle a Flash que la armadura indicarle a Flash que la armadura será manejada con ActionScript?será manejada con ActionScript?

¿Qué objetos son creados en forma ¿Qué objetos son creados en forma automática cuando se crea una automática cuando se crea una armadura?armadura?

Describa los pasos para observar la Describa los pasos para observar la salida de la cámara Web con Flash.salida de la cámara Web con Flash.

Preguntas de revisiónPreguntas de revisión

Describa el proceso para crear un Describa el proceso para crear un bitmap en ActionScript, tomando bitmap en ActionScript, tomando como base algún elemento del como base algún elemento del escenario.escenario.

¿Cuál es el evento utilizado con el ¿Cuál es el evento utilizado con el componente Slider para que los componente Slider para que los datos se actualicen cuando el usuario datos se actualicen cuando el usuario mueve el indicador en forma directa?mueve el indicador en forma directa?

Ligas de interésLigas de interés

http://adobe.edgeboss.net/download/http://adobe.edgeboss.net/download/adobe/adobetv/gotoandlearn/adobe/adobetv/gotoandlearn/animatepb.movanimatepb.mov

http://adobe.edgeboss.net/download/http://adobe.edgeboss.net/download/adobe/adobetv/gotoandlearn/adobe/adobetv/gotoandlearn/pixelbender1.movpixelbender1.mov

http://adobe.edgeboss.net/download/http://adobe.edgeboss.net/download/adobe/adobetv/gotoandlearn/adobe/adobetv/gotoandlearn/pixelbender2.movpixelbender2.mov

Ligas de interésLigas de interés

http://help.adobe.com/es_ES/http://help.adobe.com/es_ES/ActionScript/3.0_ProgrammingAS3/ActionScript/3.0_ProgrammingAS3/WS3E659D01-10C0-479d-8175-WS3E659D01-10C0-479d-8175-B40950BBC223.htmlB40950BBC223.html

as3 unidad 12 cinematica inversa

Education