Comunidad de diseño web y desarrollo en internet online

Deformar video AS3 en la linea de tiempo

Citar            
MensajeEscrito el 14 Nov 2012 09:31 am
Buenas a todos, he encontrado un tutorial bastante bueno de como distorsionar un video en .mp4 con AS3.

El problema viene que el ejemplo encontrado tiene las clases metidas en un .as y yo necesito que estén en la linea de tiempo. Mi pregunta es si es posible crear esta distorsión sin importar clases y teniendo todo el código en la linea de tiempo del .fla.

Os dejo el código que encontré, que funciona a las mil maravillas... pero importando :(

Código ActionScript :

package {
   import fl.video.FLVPlayback;
   import fl.video.VideoAlign;
   import fl.video.VideoEvent;
   import fl.video.VideoScaleMode;
   
   import flash.display.Shape;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.geom.Point;
   
   import jel.com.display.SpriteCenter;
   import jel.com.effects.DeformSprite;
   
   [SWF(backgroundColor="0x000000", frameRate="25")]

   public class PantallaTv extends SpriteCenter
   {
      [Embed(source="assets/imagenes/fondo.png")]
      private var FondoPantalla:Class;
      
      private var video:FLVPlayback;
      private var pantalla:Sprite;
      private var pantallaDeformada:DeformSprite;
      
      public function PantallaTv()
      {
         super(1280, 720);
         addChild(new FondoPantalla());
         
         pantalla = new Sprite();
         var fondoNegro:Shape = new Shape();
         fondoNegro.graphics.beginFill(0x000000, 0.0);
         fondoNegro.graphics.drawRect(0, 0, 739, 410);
         pantalla.addChild(fondoNegro);
         video = new FLVPlayback();
         with(video) {
            x = 0;
            y = 0;
            autoPlay = true;
            autoRewind = true;
            bufferTime = 1.0;
            source = getUrl("flv/video_1.mp4");
            align = VideoAlign.TOP_LEFT;
            scaleMode = VideoScaleMode.NO_SCALE;
            skin = null;
            addEventListener(VideoEvent.COMPLETE, onCompleteFlv);
         }
         pantalla.addChild(video);
         
         pantallaDeformada = new DeformSprite(pantalla, false, false, 6, 4);
         pantallaDeformada.smooth = true;
         pantallaDeformada.transformBezier(   new Point(28, 293),
                                    new Point(690, 318),
                                    new Point(690, 656),
                                    new Point(28, 690));
         addChild(pantallaDeformada);
         addEventListener(Event.ENTER_FRAME, onEnterFrameListener);
      }
      
      private function onCompleteFlv(evt:VideoEvent):void {
         video.play();
      }
      
      private function onEnterFrameListener(evt:Event):void {
         pantallaDeformada._sprite = pantalla;
         pantallaDeformada.render();
      }
      
      private function getUrl(url:String):String {
         if (!(url.indexOf(":") > -1 || url.indexOf("/") == 0 || url.indexOf("\\") == 0)) {
            var rootURL:String;
            if (root) {
               rootURL = root.loaderInfo.url;
               if (rootURL) {
                  var lastIndex: int= Math.max(rootURL.lastIndexOf("\\"), rootURL.lastIndexOf("/"));
                  if (lastIndex != -1) {
                     url = rootURL.substr(0, lastIndex + 1) + url;
                  }
               }
            }
         }
         return url;
      }
   }
}


Gracias por la paciencia

Por dooplanillo

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Nov 2012 01:58 pm
BuenAS:

Me suena ese código. blog Coconnut, quizá ;) Pufff cuánto tiempo, casi ni me acuerdo!

La clase que tienes que importar es

import jel.com.effects.DeformSprite

y te crea una instancia de ella a la que le pasas el vídeo ( o lo que quieras distorsionar)
Por ejemplo, si tu video se llama video en la línea de tiempo pòdrías escribir:

Código ActionScript :

import jel.com.effects.DeformSprite;

var pantallaDeformada:DeformSprite = new DeformSprite(video, false, false, 6, 4);
addChild(pantallaDeformada:DeformSprite);


Y deberías tener en una carpeta jel/com/effect el archivo DeformSprite.as

Un saludo.

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 14 Nov 2012 02:48 pm
Hola Lukánicos y gracias por contestar.

El código lo saqué exactamente de tutoriales-flash.com :)

Mi problema es el siguiente, hay un programa (creado en C++ creo) que es el que administra los vídeos que van a lanzarse a la pantalla (sean .mp4 o .swf) el problema es que los swf no pueden tener archivos externos (.as) de ahí mi pregunta si hay alguna manera de colocar la clase DeformSprite en la linea de tiempo.

El ejemplo que puse arriba funciona perfectamente, pero lo necesito sin importar nada, todo el código debe estar en la linea de tiempo.

... Alguna manera??

Por dooplanillo

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Nov 2012 02:56 pm
Los archivos as se integran en tiempo de compilación y lo que usa el programa e C++ supongo que es el swf, no el fla+as externos. Mucha gente cree que los as son como los include de php (que es interpretado, no compilado aunque sea a bytecode como Flash) y los sube al servidor, cuando no importa cuantas clases hayas importado ni cuantas bibliotecas usado en tu flash, lo unico que necesitas para que funcione es el swf

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 14 Nov 2012 03:38 pm
Gracias por la aclaración, solisarg, el problema es que el C++ solo coge el archivo .swf, cuando este tira de la ruta donde se ubica el .as y no lo encuentra, peta.

Por dooplanillo

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Nov 2012 03:41 pm
Error: al compilar un swf, ya no necesita ningún archivo as externo, pues el código se integra en el archivo final. En todo caso puede ser un recurso que carga externo (xml, txt, assets de imagenes, etc) porque la ruta se modifica

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 15 Nov 2012 08:08 am
Ok, me he puesto en ello, tengo lo siguiente:

Código ActionScript :

ns.play("video_1.mp4"); 
function asyncErrorHandler(event:AsyncErrorEvent):void 
{ 
    // ignore error 
}
//Creamos, llamamos y colocamos el vídeo en el escenario
//var video_1:Video = new Video(); 
//video_1.attachNetStream(ns);
//video_1.width = 663;
//video_1.height = 373;
//video_1.x = 28;
//video_1.y = 319;
//addChild(video_1);

import DeformSprite;

var pantallaDeformada:DeformSprite = new DeformSprite(video_1, false, false, 6, 4);
addChild(pantallaDeformada:DeformSprite);


Pero me da error en la última línea:

Código ActionScript :

addChild(pantallaDeformada:DeformSprite);


1084: Syntax error: expecting rightparen before colon.

Sabéis que falla??

Por dooplanillo

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Nov 2012 08:29 am
Perdón, es que hice copy&paste de tu código y se me pasó borrar algo

Código ActionScript :

import jel.com.effects.DeformSprite;

var video:MovieClip =//Aquí debería está el MovieClip con tu vídeo

var pantallaDeformada:DeformSprite = new DeformSprite(video, false, false, 6, 4);
pantallaDeformada.smooth = true;//Esto es para que se reproduzca suavizado, pero consume más recursor
pantallaDeformada.transformBezier(
     new Point(28, 293),
     new Point(690, 318),
     new Point(690, 656),
     new Point(28, 690)
);
addEventListener(Event.ENTER_FRAME, onEnterFrameListener);

addChild(pantallaDeformada);

function onEnterFrameListener(evt:Event):void {
     pantallaDeformada._sprite = video;
     pantallaDeformada.render();
}

Ves que se añaden 4 puntos (Point), deben ser las coordenadas de las 4 esquinas con la posición que quieres que tenga el vídeo en pantalla.

Como te comenta Jorge, una vez que hayas compilado el swf la clase va dentro del swf y no tienes que preocuparte de nada salvo de subir a tu web el swf.

Por cierto, quizá sea mejor que utilizaras las herramientas 3D de Flash para distorsionar el MovieClip( teclas W para rotar y G para mover en 3D)

Un saludo.

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 15 Nov 2012 10:20 am
Eso estaría fenómeno!!!

Entonces sería poner un mc en el escenario, distorsionarlo con la W y partir de ahí, intentar meter el .mp4 dentro del mc vía ActionScript 3. Y el .mp4 se acoplaría automáticamente a las medidas del mc distorsionado??

Por dooplanillo

23 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Nov 2012 10:31 am
Si, básicamente sería:

Arrastras al escenario el componente FlvPlayback (el componente de vídeo). Le das a la propiedad 'source' la ruta al video.

Seleccionado el componente, pulsa F8 para convertirlo en un MovieClip.

Y ahora Pulsando W cuando tengas selenccionado el MovieClip podrás rotarlo hasta alcanzar la forma deseada; G para moverlo en 3D. Son los iconos de la barra de herramientas en forma de globo y de 3 ejes)

Un saludo.

Por Lukánicos

Claber

468 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 05 Dic 2012 10:12 am
Vale funciona perfectamente, es mucho más sencillo que intentar deformarlo mediante AS3, pero al poner el objeto directamente en el escenario y deformarlo no tenía forma de controlar el comienzo y el final del vídeo, algo necesario para poder pasar al siguiente vídeo. Así que como ya tenía el MC donde contenía el vídeo deformado, añado el vídeo via As3 dentro de ese contenedor y funciona perfectamente, os pongo todo el código para quien le venga bien, pueda reutilizarlo:

Código ActionScript :

var nc:NetConnection = new NetConnection(); 
nc.connect(null);

var ns:NetStream = new NetStream(nc); 
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler); 
ns.play("ac3_e3_30s_v2_rip.mp4"); 
function asyncErrorHandler(event:AsyncErrorEvent):void 
{ 
    // ignore error 
}

//Creamos, llamamos y colocamos el vídeo en el escenario
var video_1:Video = new Video(); 
video_1.attachNetStream(ns);
//Necesitamos darle tamaño y posición al vídeo ya que el anidarlo en el movieclip mc_video no nos da
//el tamaño y posición que queremos, solo nos va a deformar el vídeo (al menos a mi)
video_1.width = 663;
video_1.height = 373;
video_1.x = 41;
video_1.y = 165;
video_1.width = 945;
video_1.height = 526;

//ahora meto el vídeo dentro del contenedor ya deformado, lo que hará deformarse al video
mc_video.addChild(video_1);

//Controlamos la variable audio que pasamos a través de URL. Yo necesitaba poder controlar el audio
//a través de una variable externa, para eso esta parte del código
var volumevalue:Number;
var param:Object = LoaderInfo(this.root.loaderInfo).parameters;

//Convertimos el valor de la variable a numero
try
{
   volumevalue = Number(param["volumevalue"]);
}
catch(e:Error)
{
   //---   
}
//Si la variable es igual a cero, quitamos el volumen
if(volumevalue == 0)
   SoundMixer.soundTransform = new SoundTransform(0);


//Desde aqui se controla cuando se inicia el video y cuando termina
ns.addEventListener(NetStatusEvent.NET_STATUS, statusHandler); 

function statusHandler(event:NetStatusEvent):void 
{ 
    switch (event.info.code) 
    { 
        case "NetStream.Play.Start": 
            trace("Start [" + ns.time.toFixed(3) + " seconds]"); 
            break; 
        case "NetStream.Play.Stop": 
            trace("Stop [" + ns.time.toFixed(3) + " seconds]");
         this.play();
            break; 
    } 
}


Muchas gracias a solisarg y a Lukánicos por vuestra inestimable ayuda :)

Por dooplanillo

23 de clabLevel



 

firefox

 

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