Comunidad de diseño web y desarrollo en internet online

Efecto serpiente con AS3

Citar            
MensajeEscrito el 05 Mar 2010 07:37 pm
Hola que tal soy batun,

Estoy tratando de hacer una serpiente, pero no lo he logrado a ver si me pueden ayudar, les dejo el código que he encontrado y me salio algo asi:

Código ActionScript :

//Importamos las clases
import flash.events.Event;
import caurina.transitions.*;
import flash.filters.GlowFilter;
var myFilter:GlowFilter = new GlowFilter(0x348C0D,0,0,0,0,0,false,false);

Tweener.addTween(myFilter, {blurY:10, blurX:20,time:1 ,transition:"linear", onUpdate:updateHandler});
// V A R I A B L E S
function updateHandler():void {
  serpiente.filters = [myFilter];
}
//Vars
var escenario:Stage=stage;
var ancho=escenario.stageWidth;

/*####################################################*/
/*##### D I B U J A    K U K U L C A N           ####*/
/*####################################################*/

var serpiente:Shape = new Shape();
//Style
var lineaserpiente = 971;

addEventListener(Event.ENTER_FRAME, dibujaSerpiente);
function agregaSerpiente(event:MouseEvent){
   addEventListener(Event.ENTER_FRAME, dibujaSerpiente);//Agrega la funcion dibujalinea onEnterFrame
   //addEventListener(Event.ENTER_FRAME, entra);
}

//variables
var angulo:Number = 90; // ángulo de inicio
var amplitud:int = 5; // amplitud de la onda
var eje_y:int = 285; // eje vertical de la onda
var eje_x:int = 200; // eje vertical de la onda
var y1:Number;
var X:Number = 40;
serpiente.graphics.moveTo( X, eje_y );
var grosor:Number = 0;
var bandera:Boolean=true;

function dibujaSerpiente(event:Event):void {
   graphics.clear();
   y1 = ( Math.sin( angulo * ( Math.PI / 180 ) ) * amplitud ) + eje_y;
   //x1 = ( Math.sin( angulo * ( Math.PI / 180 ) ) * amplitud ) + eje_x;
   //serpiente.y = y1;
   X += 2;
   //y1 +=1;
   angulo += 8;
   //serpiente.x = X;
   if (grosor <= 9 && bandera==true){
      grosor +=1.5;
      trace("Menor"+grosor);
   }else{
      grosor -=1.5;
      bandera= false;
      if (grosor <= 9){
         bandera= true;
      }
      trace("Mayor"+grosor);
   }
   serpiente.graphics.lineStyle(grosor, 0xffffff, 30);
   //grosor +=1;

   //serpiente.graphics.lineStyle( 1, 0x666666, 1 );
   //A
   //serpiente.graphics.moveTo( X, y1 );
   serpiente.graphics.lineTo(X, y1);
   serpiente.filters = [myFilter];
   //B
   //serpiente.graphics.moveTo( X, y1 );
   //serpiente.graphics.curveTo( X, 150, X, y1 );
   //C
   //serpiente.graphics.moveTo(175, y1);
   //serpiente.graphics.lineTo(275, y1);
   //
   addChild(serpiente);
   serpiente.x = X/2;
   //serpiente.y = y1;
   //y1 = y1 - 35;
   if(X > (ancho/2)){
      //removeChild(serpiente);
      //addChild(serpiente);
      //X = 10;
      //serpiente.graphics.moveTo( X, eje_y );
      serpiente.addEventListener(Event.ENTER_FRAME,Mover);
      removeEventListener(Event.ENTER_FRAME, dibujaSerpiente);
   }
}
var l:Number = 300;

function Mover(e:Event){
   e.target.x = 200 + Math.sin(e.target.ang) * 150;
   var difx = e.target.x - serpiente.x;
   e.target.y = Math.sqrt(l*l - difx*difx) + serpiente.y;
   e.target.ang+=0.05;
}
///
// Creamos un objeto de la clase BezierSegment
//scena, de fondo oscuro, cuyas dimensiones sean 700 x 180 pixeles e inserten el siguiente código para calcular una curva cúbica igual a la de las imágenes anteriores:

// Definimos los 4 puntos de control de la curva cúbica

var p1:Point = new Point( 20, 160 );
var p2:Point = new Point( 200, 10 );
var p3:Point = new Point( 500, 10 );
var p4:Point = new Point( 680, 160 );

// Importamos la clase BezierSegment
import fl.motion.BezierSegment;
// Creamos un objeto de la clase BezierSegment
var bezier:BezierSegment = new BezierSegment( p1, p2, p3, p4 );
//Agreguen el siguiente código para dibujar la curva:
// Creamos el objeto sobre el que vamos a dibujar
var curva:Shape = new Shape();
curva.graphics.lineStyle( 1, 0xCCCCCC, 0.5 );
// Ajustamos el inicio de la curva
curva.graphics.moveTo( p1.x, p1.y );
addChild( curva );
// Definimos los segmentos de la curva
var segs:uint = 50;
// Dibujamos la curva
for( var i:uint = 1; i <= segs; i++ ){
// Obtenemos la coordenada en relación al tiempo
var coord:Point = bezier.getValue( ( 1 / segs ) * i );
curva.graphics.lineTo( coord.x, coord.y );
p1.x = p1.x + 50;
p1.y = p1.y + 50;
}


[flash width=450 height=285]http//:www.mayawebhosting.com.mx/INTRO B.swf[/flash]

Por batun

2 de clabLevel



 

La capital de Mundo Maya

firefox
Citar            
MensajeEscrito el 05 Mar 2010 07:39 pm

Por batun

2 de clabLevel



 

La capital de Mundo Maya

firefox
Citar            
MensajeEscrito el 05 Mar 2010 09:09 pm

Por batun

2 de clabLevel



 

La capital de Mundo Maya

firefox
Citar            
MensajeEscrito el 17 Mar 2010 05:52 pm
Ya que nadien me ayudó, despues de varios días he encontrado la solucion en la web, aqui se las dejo:

Código ActionScript :

/*[email protected]*/
/**
* CurveTests by Grant Skinner. May 30, 2008
* Visit www.gskinner.com/blog for documentation, updates and more free code.
*
* You may distribute and modify this code freely.
*/
// for unloading:
/*
// Declaramos las variables generales
// Definimos la función que se ejecutará en cada fotograma
addEventListener( Event.ENTER_FRAME, movimientoOndulatorio );// Definimos la función a ejecutar
function movimientoOndulatorio( event:Event ):void {// Obtenemos la ordenada vertical
y1 = ( Math.sin( angulo * ( Math.PI / 180 ) ) * amplitud ) + eje_y;// Asignamos la posición vertical
esfera_mc.y = y1;// Incrementamos la posición horizontal
esfera_mc.x += 6;// Incrementamos el ángulo
angulo += 8;// Evaluamos si el objeto rebasa el límite horizontal
if( esfera_mc.x > 490 ){// Regresamos al objeto al extremo izquierdo
esfera_mc.x = -10;
}
}
*/
var angulo:Number = 0; // ángulo de inicio
var angulo2:Number = 0;
var amplitud:int = 50; // amplitud de la onda
var amplitud2:int = -50;
var eje_y:int = 100; // eje vertical de la onda
var eje_y2:int = 100; // eje vertical de la onda
var y1:Number;
var Y2:Number;
//Movieclips en el escenario
pt1.posY = 1 * 0.5;// Asignamos la función que se ejecutará en cada fotograma
pt1.addEventListener( Event.ENTER_FRAME, movimiento );// Agregamos nuestro objeto al Display Lists
pt2.posY = 2 * 0.5;
pt2.addEventListener( Event.ENTER_FRAME, movimiento );
pt3.posY = 3 * 0.5;
pt3.addEventListener( Event.ENTER_FRAME, movimiento );
pt4.posY = 4 * 0.5;
pt4.addEventListener( Event.ENTER_FRAME, movimiento );
pt5.posY = 5 * 0.5;
pt5.addEventListener( Event.ENTER_FRAME, movimiento );
pt6.posY = 6 * 0.5;
pt6.addEventListener( Event.ENTER_FRAME, movimiento );
pt7.posY = 7 * 0.5;
pt7.addEventListener( Event.ENTER_FRAME, movimiento );

function movimiento( event:Event ):void {// Ajustamos la posición vertical
event.target.y = ( Math.sin( event.target.posY ) * amplitud ) + eje_y;// Ajustamos el ángulo del objeto
event.target.posY += 0.1;
event.target.x = event.target.x + ( Math.sin( event.target.posY )) + 1;
draw();
}
/*
function mueveS(event:Event){
   y1 = ( Math.sin( angulo * ( Math.PI / 180 ) ) * amplitud ) + eje_y;
   Y2 = y1;
   //Y2 = ( Math.sin( angulo2 * ( Math.PI / 270 ) ) * amplitud2 ) + eje_y2;
   pt1.x = pt1.x + 1;
   pt1.y = y1;
   pt2.x = pt2.x + 1;
   pt2.y = Y2;
   pt3.x = pt3.x + 1;
   pt3.y = y1;
   pt4.x = pt4.x + 1;
   pt4.y = Y2;
   pt5.x = pt5.x + 1;
   pt5.y = y1;
   pt6.x = pt6.x + 1;
   pt6.y = Y2;
   pt7.x = pt7.x + 1;
   pt7.y = y1;
   angulo += 8;
   angulo2 += 8;
   draw();
}
addEventListener(Event.ENTER_FRAME,mueveS);
*/
function halt():void {
   removeEventListener(MouseEvent.MOUSE_DOWN,handlePress);
   stage.removeEventListener(MouseEvent.MOUSE_MOVE,doDrag);
   stage.removeEventListener(MouseEvent.MOUSE_UP,endDrag);
   //stage.removeEventListener(MouseEvent.CLICK,handleClick);
}

//

var pts:Array = [pt1,pt2,pt3,pt4,pt5,pt6,pt7];

var canvas:Sprite = new Sprite();
addChildAt(canvas,1);

draw();

function draw():void {
   var g:Graphics = canvas.graphics;
   g.clear();
   var prevMidpt:Point = null;
   var l:Number = pts.length;
   for (var i:Number=1;i<l;i++) {
      var pt1:Object = pts[i-1];
      var pt2:Object = pts[i];
      
      // draw the straight lines:
      g.lineStyle(0,0xBBBBBB,0.6);
      g.moveTo(pt1.x,pt1.y);
      g.lineTo(pt2.x,pt2.y);
      
      // draw the bisection:
      g.lineStyle(0,0xBBBBBB,0.5);
      var midpt:Point = new Point(pt1.x+(pt2.x-pt1.x)/2,pt1.y+(pt2.y-pt1.y)/2);
      var a:Number = Math.atan2(pt2.y-pt1.y,pt2.x-pt1.x);
      g.moveTo(midpt.x+Math.cos(a+Math.PI/2)*8,midpt.y+Math.sin(a+Math.PI/2)*8);
      g.lineTo(midpt.x-Math.cos(a+Math.PI/2)*8,midpt.y-Math.sin(a+Math.PI/2)*8);
      
      // draw the curves:
      g.lineStyle(2,0x66FFFF,1);
      if (prevMidpt) {
         g.moveTo(prevMidpt.x,prevMidpt.y);
         g.curveTo(pt1.x,pt1.y,midpt.x,midpt.y);
      } else {
         // draw start segment:
         g.moveTo(pt1.x,pt1.y);
         g.lineTo(midpt.x,midpt.y);
      }
      prevMidpt = midpt;
   }
   // draw end segment:
   g.lineTo(pt2.x,pt2.y);
}

addEventListener(MouseEvent.MOUSE_DOWN,handlePress);
var dragProps:Object;
function handlePress(evt:MouseEvent):void {
   if (evt.target is Anchor) {
      dragProps = {target:evt.target};
      stage.addEventListener(MouseEvent.MOUSE_MOVE,doDrag);
      stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);
   }
}

function doDrag(evt:MouseEvent):void {
   dragProps.target.x = mouseX;
   dragProps.target.y = mouseY;
   draw();
}

function endDrag(evt:MouseEvent):void {
   dragProps = null;
   stage.removeEventListener(MouseEvent.MOUSE_MOVE,doDrag);
   stage.removeEventListener(MouseEvent.MOUSE_UP,endDrag);
}

//stage.addEventListener(MouseEvent.CLICK,handleClick);
function handleClick(evt:MouseEvent):void {
   if (evt.target is Anchor) { return; }
   var anchor:Anchor = new Anchor();
   anchor.x = mouseX;
   anchor.y = mouseY;
   pts.push(anchor);
   addChild(anchor);
   draw();
}

Por batun

2 de clabLevel



 

La capital de Mundo Maya

firefox
Citar            
MensajeEscrito el 26 Nov 2010 01:49 pm
Cool, justo necesito un efecto de mar con letras, voy a revisar tu código al detalle y mejorarlo. Yo pensaba hacerlo con parámetricas y un contador en un timer y desfazar los ángulos.

Por emedinaa

196 de clabLevel

2 tutoriales

Genero:Masculino  

Lima Perú

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.