1. Cinemática inversaCinemática inversa
Unidad 12Unidad 12

2. ObjetivosObjetivos
 Usar la herramienta de cinemáticaUsar la herramienta de cinemática
inversa.inversa.
 Usar las clases IK para crear animacionesUsar las clases IK para crear animaciones
 Verificar si el usuario tiene una cámaraVerificar si el usuario tiene una cámara
web conectadaweb conectada
 Acceder y desplegar el video conAcceder y desplegar el video con
ActionScript.ActionScript.
 Crear un bitmap con ActionScriptCrear un bitmap con ActionScript

3. ObjetivosObjetivos
 Capturar objetos y salvarlos en un bitmapCapturar objetos y salvarlos en un bitmap
datadata
 Examinar la herramienta Pixel BenderExaminar la herramienta Pixel Bender
 Trabajar con filtrosTrabajar con filtros
 Aplicar un Pixel Bender a un objetoAplicar un Pixel Bender a un objeto
 Utilizar los deslizadores para modificar elUtilizar los deslizadores para modificar el
filtrofiltro

4. Cinemática InversaCinemática Inversa
 Los esqueletos se crean únicamente en elLos esqueletos se crean únicamente en el
IDE de Flash.IDE de Flash.
 Una vez creada, se puede manipular porUna vez creada, se puede manipular por
AS o por el usuario.AS o por el usuario.
 Los esqueletos se pueden hacer conLos esqueletos se pueden hacer con
Símbolos o con Shapes, pero para AS esSímbolos o con Shapes, pero para AS es
mejor manipular MC.mejor manipular MC.
 Las armaduras se distinguen por elLas armaduras se distinguen por el
símbolo en su capa.símbolo en su capa.

5. Cinemática InversaCinemática Inversa
 Una armadura solo puede tener una raízUna armadura solo puede tener una raíz
(root joint) que es el punto original de la(root joint) que es el punto original de la
misma.misma.
 Una vez que la armadura ha sido creada,Una vez que la armadura ha sido creada,
hay que indicar si será manipulada por elhay que indicar si será manipulada por el
usuario (authoringtime) o por ActionScriptusuario (authoringtime) o por ActionScript
(runtime).(runtime).

6. Cinemática InversaCinemática Inversa
 Cada vez que se crea una armadura, seCada vez que se crea una armadura, se
genera automáticamente un objetogenera automáticamente un objeto
IKArmature y otro IKManager.IKArmature y otro IKManager.

7. Las clases IKLas clases IK
 La clase IKManager es usada paraLa clase IKManager es usada para
manipularmanipular una armadura.una armadura.
 La clase IKArmature es utilizada paraLa clase IKArmature es utilizada para
describirdescribir una armadura.una armadura.
 http://help.adobe.com/en_US/AS3LCR/Flahttp://help.adobe.com/en_US/AS3LCR/Fla
sh_10.0/fl/ik/IKManager.htmlsh_10.0/fl/ik/IKManager.html

8. Las clases IKLas clases IK
 Con el método tracjAllArmature en false,Con el método tracjAllArmature en false,
indicamos que la manipulación del armaduraindicamos que la manipulación del armadura
la haremos con ActionScript.la haremos con ActionScript.
 Si tiene el valor de true, la manipulación laSi tiene el valor de true, la manipulación la
hará el usuario.hará el usuario.
 El objeto IKManager guarda una lista de lasEl objeto IKManager guarda una lista de las
armaduras del archivo.armaduras del archivo.
 Puedes hacer referencia a una armadura porPuedes hacer referencia a una armadura por
medio del métodomedio del método
IKManager.getArmatureAt().IKManager.getArmatureAt().

9. Las clases IKLas clases IK
 Nota: Si se tiene un proyecto con variasNota: Si se tiene un proyecto con varias
armaduras, podemos hacer referencia a cadaarmaduras, podemos hacer referencia a cada
una de ellas por medio del métodouna de ellas por medio del método
getArmatureAt() o dando el nombre de lagetArmatureAt() o dando el nombre de la
armadura por medio del métodoarmadura 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 de laLa variable arm0 guarda la referencia de la
armadura en el escenario.armadura en el escenario.

10. Las clases IKLas clases IK
 La clase IKJoint sirve para administrar lasLa clase IKJoint sirve para administrar las
articulaciones.articulaciones.
 Es necesario almacenar la referencia enEs necesario almacenar la referencia en
un objeto IKJoint para poder mover laun objeto IKJoint para poder mover la
armadura con la clase IKMover.armadura con la clase IKMover.
 Moviendo una sola articulación, seMoviendo una sola articulación, se
moverá toda la armadura.moverá toda la armadura.

11. Las clases IKLas clases IK
 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 connecesitamos “dibujar” la armadura con
ActionScript para ser movida.ActionScript para ser movida.
 Una vez definidas, las demásUna vez definidas, las demás
articulaciones serán “hijitas” de la raíz.articulaciones serán “hijitas” de la raíz.

12. Las clases IKLas clases IK
 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 referenciaAhora podemos animar con la referencia
del objeto jt0.del objeto jt0.
 Nota: La raíz no se mueve. Si animamos aNota: La raíz no se mueve. Si animamos a
una de las articulaciones, todo launa de las articulaciones, todo la
armadura (o esqueleto) se moverá.armadura (o esqueleto) se moverá.

13. La Clase IKMoverLa Clase IKMover
 La clase IKMover es utilizada para animarLa clase IKMover es utilizada para animar
(mover) las articulaciones de una(mover) las articulaciones de una
armadura o esqueleto.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 queEl primer parámetro es la articulación que
se desea mover. El segundo es lase desea mover. El segundo es la
posición actual.posición actual.

14. Mover la armaduraMover la armadura
 El método moveTo() recibe comoEl método moveTo() recibe como
parámetro un objeto de la clase Point (conparámetro un objeto de la clase Point (con
un valor de x, y).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, FlashFinalmente, al mover la articulación, Flash
calculará el movimiento de los demáscalculará el movimiento de los demás
huesos de la armadurahuesos de la armadura

15. Acceder a la cámaraAcceder a la cámara
WebWeb
Unidad 12Unidad 12

16. Acceder a la cámara WebAcceder a la cámara Web
 La claseLa clase CameraCamera maneja la cámara omaneja la cámara o
cámaras conectadas a la computadora delcámaras conectadas a la computadora del
usuario.usuario.
 El métodoEl método getCameragetCamera() conecta la cámara() conecta la cámara
con ActionScript.con ActionScript.
 Este método accede a la información de laEste método accede a la información de la
cámara, pero no muestra las imágenes.cámara, pero no muestra las imágenes.
 Para mostrar la salida de la cámara, esPara mostrar la salida de la cámara, es
necesario un objeto de la clasenecesario un objeto de la clase VideoVideo..

17. Acceder a la cámara WebAcceder a la cámara Web
 Nota: Flash puede acceder a cuatroNota: Flash puede acceder a cuatro
cámaras web conectadas a lacámaras web conectadas a la
computadora, pero sólo muestra la salidacomputadora, pero sólo muestra la salida
de una a la vez.de una a la vez.
 Para conectar la cámara web, se necesitaPara conectar la cámara web, se necesita
crear el objeto:crear el objeto:
var camara:Camera = Camera.getCamera()var camara:Camera = Camera.getCamera()
 Si el valor del objeto es nulo, indica queSi el valor del objeto es nulo, indica que
no hay cámaras conectadas.no hay cámaras conectadas.

18. Acceder a la cámara WebAcceder a la cámara Web
 Para visualizar la salida, necesitamos unPara visualizar la salida, necesitamos un
objeto video.objeto video.
var video:Video = new Video(160,120);var video:Video = new Video(160,120);
 Posteriormente hay que conectar el objetoPosteriormente hay que conectar el objeto
video (visual object) a la cámara.video (visual object) a la cámara.
video.attachCamera(camera);video.attachCamera(camera);
 Y añadir el video a la lista deY añadir el video a la lista de
visualización:visualización:
addChild(video);addChild(video);

19. Acceder a la cámara WebAcceder a la cámara Web
 Cuando AS se conecta a la cámara,Cuando AS se conecta a la cámara,
deberá aparecer un mensaje de Flashdeberá aparecer un mensaje de Flash
Player, pidiendo autorización.Player, pidiendo autorización.
 No se puede hacer nada para saltarseNo se puede hacer nada para saltarse
este mensaje de seguridad.este mensaje de seguridad.

20. Las clases Bitmap yLas clases Bitmap y
BitmapDataBitmapData

21. Las clases Bitmap y BitmapDataLas clases Bitmap y BitmapData
 La claseLa clase BitmapDataBitmapData almacena laalmacena la
información del gráfico.información del gráfico.
 La claseLa clase BitmapBitmap es el objeto visual en laes el objeto visual en la
lista de visualización, y se alimenta de lalista de visualización, y se alimenta de la
anterior por medio del métodoanterior por medio del método draw()draw()..
 Finalmente hay que añadir el objetoFinalmente hay que añadir el objeto
Bitmap a la lista de visualización con elBitmap a la lista de visualización con el
métodométodo addChild(),addChild(), como cualquier otrocomo cualquier otro
objeto visual.objeto visual.

22. Pixel BenderPixel Bender

23. Pixel BenderPixel Bender
 El Pixel Bender es una herramienta paraEl Pixel Bender es una herramienta para
crear y manipular filtros.crear y manipular filtros.
 Se instala junto con cualquier paquete deSe instala junto con cualquier paquete de
Adobe de diseño o se puede bajar enAdobe de diseño o se puede bajar en
forma gratuita de Adobe.forma gratuita de Adobe.
 El Pixel Bender posee su propio lenguajeEl Pixel Bender posee su propio lenguaje
para crear filtros.para crear filtros.
 Se puede importar, probar y modificarSe puede importar, probar y modificar
filtros existentes.filtros existentes.

24. Pixel BenderPixel Bender
 Los filtros del Pixel Bender se puedenLos filtros del Pixel Bender se pueden
aplicar a MovieClips, videos, texto oaplicar a MovieClips, videos, texto o
mapas de bits por medio de ActionScript.mapas de bits por medio de ActionScript.
 En la herramienta sólo se puede aplicar aEn la herramienta sólo se puede aplicar a
mapas de bits.mapas de bits.
 La compatibilidad con Pixel Bender existeLa compatibilidad con Pixel Bender existe
a partir de Flash Player 10 y Adobe AIRa partir de Flash Player 10 y Adobe AIR
1.5.1.5.

25. Examinar el archivo PBFilterExaminar el archivo PBFilter
 Este archivo fue desarrollado por el autor.Este archivo fue desarrollado por el autor.
 Los filtros se manejan con la claseLos 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;

26. Examinar el archivo PBFilterExaminar el archivo PBFilter
 La clase Shader crea una instancia, y conLa clase Shader crea una instancia, y con
la clase ShalterFilter utilizaremos lala clase ShalterFilter utilizaremos la
instancia como un filtro.instancia como un filtro.
 Las siguientes variables son publicas y lasLas siguientes variables son publicas y las
modificaremos para manipular el filtro.modificaremos para manipular el filtro.
 La función constructora recibe dosLa función constructora recibe dos
parámetros:parámetros:

27. Examinar el archivo PBFilterExaminar el archivo PBFilter
 Función constructora:Función constructora:
public function PBFilter(image:Bitmap=null, val:Number = 0):voidpublic function PBFilter(image:Bitmap=null, val:Number = 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();
}}

28. Examinar el archivo PBFilterExaminar el archivo PBFilter
public function onComplete(e:Event=null):voidpublic 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];
}}

29. Uso del archivo PBFilterUso del archivo PBFilter
 Nota: Algunos filtros consumen muchoNota: Algunos filtros consumen mucho
procesador. Pueden correr muy bien enprocesador. Pueden correr muy bien en
máquinas nuevas, pero en algunas losmáquinas nuevas, pero en algunas los
resultados no serán óptimos.resultados no serán óptimos.

30. 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 seráindicarle a Flash que la armadura será
manejada con ActionScript?manejada con ActionScript?
 ¿Qué objetos son creados en forma¿Qué objetos son creados en forma
automática cuando se crea unaautomática cuando se crea una
armadura?armadura?
 Describa los pasos para observar la salidaDescriba los pasos para observar la salida
de la cámara Web con Flash.de la cámara Web con Flash.

31. Preguntas de revisiónPreguntas de revisión
 Describa el proceso para crear un bitmapDescriba el proceso para crear un bitmap
en ActionScript, tomando como baseen ActionScript, tomando como base
algún elemento del escenario.algún elemento del escenario.
 ¿Cuál es el evento utilizado con el¿Cuál es el evento utilizado con el
componente Slider para que los datos secomponente Slider para que los datos se
actualicen cuando el usuario mueve elactualicen cuando el usuario mueve el
indicador en forma directa?indicador en forma directa?

32. Ligas de interésLigas de interés
 http://adobe.edgeboss.net/download/adobhttp://adobe.edgeboss.net/download/adob
e/adobetv/gotoandlearn/animatepb.move/adobetv/gotoandlearn/animatepb.mov
 http://adobe.edgeboss.net/download/adobhttp://adobe.edgeboss.net/download/adob
e/adobetv/gotoandlearn/pixelbender1.move/adobetv/gotoandlearn/pixelbender1.mov
 http://adobe.edgeboss.net/download/adobhttp://adobe.edgeboss.net/download/adob
e/adobetv/gotoandlearn/pixelbender2.move/adobetv/gotoandlearn/pixelbender2.mov

33. Ligas de interésLigas de interés
 http://help.adobe.com/es_ES/ActionScript/http://help.adobe.com/es_ES/ActionScript/
3.0_ProgrammingAS3/WS3E659D01-3.0_ProgrammingAS3/WS3E659D01-
10C0-479d-8175-B40950BBC223.html10C0-479d-8175-B40950BBC223.html