{"id":329,"date":"2026-03-06T21:19:18","date_gmt":"2026-03-06T21:19:18","guid":{"rendered":"https:\/\/hackcuba.net\/?p=329"},"modified":"2026-03-06T21:19:18","modified_gmt":"2026-03-06T21:19:18","slug":"un-poco-de-movimiento","status":"publish","type":"post","link":"https:\/\/hackcuba.net\/?p=329","title":{"rendered":"Un poco de movimiento…"},"content":{"rendered":"\n

Para quienes se inician en el mundo del Flash, llegar a mover un objeto a trav\u00e9s del escenario puede encender esa chispa que los llevar\u00e1 a profundizar en conceptos mucho m\u00e1s interesantes. As\u00ed se comienza… y -por suerte- nunca se termina. Pues, siguiendo el enunciado del viejo Niklaus E. Wirth (creador del lenguaje Pascal) de que \u201cla programaci\u00f3n normalmente se ense\u00f1a a trav\u00e9s de ejemplos<\/em>\u201d, intentaremos ir paso a paso para que puedan descubrir c\u00f3mo el Adobe Flash permite programar en pocas l\u00edneas lo que demorar\u00edamos en dise\u00f1ar utilizando inclusive interpolaci\u00f3n de movimientos.<\/p>\n\n\n\n\n\n\n\n

<\/a><\/p>\n\n\n\n

Para no poner las cosas dif\u00edciles en este c\u00f3digo, comenzaremos dibujando un cuadrado que acotaremos con la herramienta Selecci\u00f3n<\/em> para convertirlo en un tri\u00e1ngulo is\u00f3sceles, como se muestra en el objeto de la derecha de la figura. Luego lo convertimos en un MovieClip llamado triangle<\/code>, con punto de registro central y hacemos doble clic sobre \u00e9l para editarlo. Dentro del MovieClip, insertamos un nuevo fotograma, donde rotaremos la figura en un \u00e1ngulo de 180\u00b0 (Ctrl<\/em>+Alt<\/em>+S<\/em>). En este punto podemos probar la pel\u00edcula Flash (Ctrl<\/em>+Enter<\/em>) para ver los cambios realizados hasta el momento.<\/p>\n\n\n\n

Como pueden observar, nuestro MovieClip no hace m\u00e1s que reflejarse horizontalmente a una frecuencia de 12 cuadros por segundo. Eso quiere decir de que es hora de que pongamos manos a la obra, poniendo nuestros dedos en el teclado para escribir stop();<\/code> en ambos fotogramas del MovieClip triangle<\/code>. Ser\u00eda suficiente hacerlo s\u00f3lo en el primero para detener el giro autom\u00e1tico de la figura, pero ya veremos m\u00e1s adelante por qu\u00e9 redundamos en este caso.<\/p>\n\n\n\n

El _root<\/code> es el MovieClip ra\u00edz sobre el que se sit\u00faan todos los elementos que insertamos en una pel\u00edcula Flash. Se hace \u00e9nfasis en esto porque a partir de ahora, todo el c\u00f3digo que escribamos estar\u00e1 contenido en el _root<\/code>. Quienes no lo hayan hecho a\u00fan, deben irse olvidando de escribir libras de c\u00f3digo en diferentes MovieClips por todo el escenario. Tal desorden no contribuye ni a la limpieza ni a la reusabilidad. Por suerte, todas las instancias pueden ser referenciadas desde all\u00ed sin problemas. Pero debemos acostumbrarnos a nombrar cada instancia que creemos a partir de cualquier objeto en la ventana Propiedades<\/em>. Ahora nombraremos triangleA<\/code> a la instancia del MovieClip que hemos creado, nos paramos en el primer fotograma del _root<\/code> y escribimos lo siguiente:<\/p>\n\n\n

\nvar velocity:Number = 5;\n\/\/ Ajuste del l\u00edmite izquierdo y derecho del escenario\nvar limit_left:Number = triangleA._width \/ 2;\nvar limit_right:Number = Stage.width - (triangleA._width \/ 2);\n\n\ntriangleA.onEnterFrame = function():Void {\n\/\/ En cada frame del tri\u00e1ngulo, ejecutar la funci\u00f3n:\n\u00a0\u00a0triangleA._x += velocity; \/\/ Velocidad constante en el eje X\n\u00a0\u00a0if(triangleA._x <= limit_left || triangleA._x >= limit_right){\n\u00a0\u00a0\u00a0\u00a0\/\/ Si la punta del tri\u00e1ngulo toca los l\u00edmites del escenario:\n\u00a0\u00a0\u00a0\u00a0velocity *= -1; \/\/ Invertir la direcci\u00f3n del movimiento\n\u00a0\u00a0\u00a0\u00a0triangleA.play(); \/\/ Avanzar al siguiente fotograma del tri\u00e1ngulo\n\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
<\/object><\/p>\n\n\n\n
Como pueden analizar, no se permiti\u00f3 que el punto de registro de triangleA<\/code> llegara a la posici\u00f3n Stage.width<\/code>, porque al estar el MovieClip padre registrado en el centro, la mitad de su contorno se saldr\u00eda del escenario. Para resolver este problema inherente a la mayor parte de las pel\u00edculas que contienen este tipo de movimiento, sumamos algebraicamente a las posiciones l\u00edmites en el eje X de ambos lados del escenario la cantidad triangleA._width\/2<\/code>, correspondiente a la mitad del ancho de dicha instancia.<\/p>\n\n\n\n
Este ejemplo se puede complicar cuanto deseemos, no s\u00f3lo por describir alguna movimiento mucho m\u00e1s complejo, sino porque podemos dibujar el MovieClip a base de c\u00f3digos, utilizando los m\u00e9todos de la clase flash.geom.Rectangle<\/code>, flash.geom.Transform<\/code> y flash.geom.ColorTransform<\/code>. \u00bfSe atreven a dar ese salto?<\/p>\n\n\n\n
Para saber m\u00e1s…<\/h2>\n\n\n\n