swf2jpg

Posted in: ActionScript- sep 18, 2004 25 Comments

Últimamente han aparecido varios sitios en los cuales uno puede crear su wallpaper personalizado..
El cliente esta hecho en flash y al terminar tu “obra” puedes descargar el JPG…

Bueno hace poco platicando con Fer nos preguntábamos como poder hacer esto. Estuve investigando la forma más simple de hacerlo y la mejor opción por lo menos para mí fue usar las Librerías GD de PHP.

La explicación teórica es esta:

Cliente
1.- Poder elegir un grafico
2.- Moverlo por el “Stage”
3.- Situarlo donde más nos guste
4.- Incluirlo el grafico tantas veces queramos
5.- Enviar las propiedades de cada grafico a un Script .php

Servidor
1.- Tomar las propiedades de los gráficos y generar la imagen

bien, por cada grafico disponible en el Cliente, necesitaremos una copia con buena resolución en el servidor, para poder editarla mediante las librerías GD

y eso es todo…

Aquí esta el Ejemplo http://tmeister.net/archivos/swf2jpg/dibuja.swf

Solo basta dar click en un elemento grafico una vez disponible en el “Stage” posicionarlo donde gusten y por ultimo oprimir el botón Genera JPG…

El Script PHP

<?php
function thumb($source, $quality = 100 ,$x, $y, $w, $h){
        global $resize;
        $size = getimagesize($source);
        header('Content-Type: image/jpeg');
        switch ($size['mime']) {
                case 'image/jpeg':
                        $im = imagecreatefromjpeg($source);
                        imagecopyresampled($resize, $im, $x, $y, 0, 0, $w, $h, $size[0], $size[1]);
                        $imgInfo = array($resize, $quality);
                        break;
                case 'image/png':
                        $im = imagecreatefrompng($source);
                        imagecopyresampled($resize, $im, $x, $y, 0, 0, $w, $h, $size[0], $size[1]);
                        $imgInfo = array($resize, $quality);
                        break;
        }
}
//tamaño de la Imagen...
$w = 580;
$h = 420;
$resize = imagecreatetruecolor($w, $h);
//Creamos el Fondo Blanco
thumb("imgs/fondo.png",100,0,0,$w,$h);
//Tomamos la info de las imagenes y la destripamos
$map  = $_GET['imgs'];
$fotos = split("--", $map);
for($i = 0; $i&lt;count($fotos); $i++){
        list($nombre, $x,  $y, $alto, $ancho) = split(",",$fotos[$i]);
        thumb("imgs/".$nombre.".png",100,$x,$y,$ancho,$alto);
}
imagejpeg($resize, "", 100);
?>

Este Script recibe una variable con los nombres de las imagenes y sus propiedades algo asi:

ffm,48,51,81,162--diablito,369,246,107,92

Por el momento el cliente solo puede mover los gráficos no puede escalarlos.. :D

Archivos Fuente http://tmeister.net/archivos/swf2jpg/swf2jpg.zip

Enjoy… 8)

  • Galileo

    Interesante, muy interesante

    Gracias !!

  • http://therror.nodani.com fael

    interesantísimo, realmente hay poco tutoriales que incluyan la librería gd, no se diga que además estén en español, así que voy a spammear un poco (digo, si me lo permiten), hace poco escribí 2 tutoriales usando la librería gd, aquí están las urls
    http://therror.nodani.com/documentos.php?doc=pixel
    http://therror.nodani.com/documentos.php?doc=toogle
    [/spam]
    saludos

  • http://www.applett.com Hunter

    Muy interesante el tema, yo he estado tratando de hacer algo por el estilo, sin embargo no encuentro la forma de resolverlo
    Ejemplo
    Lo que intento es que se elabore un mapa en linea personalizando colores y dar la posibilidad de exportalo como jpg. Ahora bien con esta alternativa que en este tutorial se indica puedo hacer una especie de rompecabezas, tener todos los estados en imagenes png y despues armar el mapa, sin embargo no he podido cambiar el color de una imagen a otro que yo le indique, lo he intentado con la función imagecolorsforindex pero no obtengo resultado, alguna idea o sugerencia

  • http://www.tmeister.net Tmeister

    Para cambiar el color a una imagen completa se usa la funcion ImageColorAllocate

    Aqui pongo un ejemplo completo..

    < ?php
    header('Content-Type: image/jpeg');
    $original = 'imgs/ffm.png';
    $im_size = GetImageSize($original);
    $imageWidth = $im_size[0];
    $imageHeight = $im_size[1];
    $im = imageCreate($imageWidth,$imageHeight);
    ImageColorAllocate($im, 0xFF,0x00,0x00);
    $im2 = imagecreatefrompng($original);
    ImageCopyMerge($im,$im2,0,0,0,0, $imageWidth, $imageHeight, 100);
    imagejpeg($im, "", 100);
    ImageDestroy($im2);
    ?>
    

    Si te das cuenta dicha funcion necesita 4 parametros

    ImageColorAllocate($im, 0xFF,0x00,0x00);
    

    imagen y los tres valores hexadecimales del color… En este caso Rojo FF0000

    aqui hay un ejemplo de como queda la imagen http://tmeister.net/archivos/swf2jpg/color.php

    Saludos!! 8)

  • http://www.elecash.org/blog Raúl Jiménez

    Mmmm…. realmente interesante e ilustrativo. La potencia de Flash y PHP conjuntados no deja de sorprenderme.

    Muy bueno Tmeister, muy, muy bueno.

    Un saludo!!

  • Kari

    Excelente, me parece super interesante…..
    Pero disculpen mi ignorancia, no hay manera de hacer lo mismo pero en ASP e igualmente con Flash

  • alejandro

    Hola me parece genial el tuto y la aplicacion,..hace tiempo queria saber como lo hacian,….
    una pregunta,..no me funciona,… me imagino q es x las librerias GD de php,..o es x otra cosa?,…
    pd:soy novato,….no se nada de php,…

  • http://therror.nodani.com fael

    en asp, por lo que sé no hay librería que pueda manejar imagenes on the fly

    para instalar gd abre el archivo php.ini y busca el módulo que dice algo así como “php_gd2.dll”, le quitas el punto y coma ( ; ) que está al inicio de la línea y ya, si no, pregúntale a google

    saludos

  • http://www.applett.com Hunter

    mmm realmente no e slo que pensaba en cuanto a cambio de color, más bien esta sobreponiendo un color, es decir, mi idea es que por ejemplo cambies el color al elemento de las letras, que las letras salgan en verde por ejemplo y que la carita de diablito salga en azul por ejemplo. con estas funciones que comentas no lo hace, yo creo que mas bien seria reemplazar el color de los pixeles de cada elemento por uno en especifico o algo asi por el estilo… mm no se si me entienden cual es la idea???

    a seguir buscando la forma :)

  • http://therror.nodani.com fael

    en la liga al tutorial que dejé (el de toogle) se explica la función imagecolorat, eso te serviría para reemplazar, por ejemplo 0×000000 por 0xff0000 o el color que quisieras, pero qué tal si hay varias gamas de negro, ejemplo 0×110010? esas quedarían igual, por lo pronto no se puede (automáticamente) y programado es muuuy laborioso

  • Angueto

    Hola amigos… me dice “Formato inseperado” cuando abro el fla.
    Otra cosa: yo tengo las imágenes en la biblioteca del flash se puede hacer con actionscript? o como seria?
    Gracias gentes…

  • sebazam

    che, gracias por la ayuda. si puedo ayudarles en algo, pregunten no más.

  • Sergio

    Que tal, esta muy padre esto, pero no se puede hacer a partir de vectores, o sea que no se necesiten los archivos de fotos?

  • david

    hola, la verdad es que no entiendo mucho la mecánica del asunto, lo cierto es que estoy muy interesado en saber como puedo generar un wallpaper desde un swf (o una imagen jpg) pero desconectado, o sea solo operando en mi computador.

    Si alguien me pudiera ayudar estaría muy agradecido.

    PD: no pude abrir el fla que venía en el ejemplo, me dice formato inesperado

  • Pingback: FlashBlog » swf2jpg

  • larry caldron

    hola a todos ando buscando por favor datos acerca de como adaptar el tamaño de mi .sfw incertado en un html para que cualquier usuario lo vea igual indepedientemente de la resolusion que use en su pantalla. agradecido estare si alguien me pasa un dato por lo menos.

  • ladobonline

    Hola!
    He usado este ejemplo durante algún tiempo y funcionaba a la perfección. En mi caso se trataba de una grilla de 20 imagenes ya con posición definida y con una variable que le agregaba número para no sobreescribirse… Bien, ahora luego de mucho tiempo funcionando a la perfección, no coloca todas las imagenes, queda solo el fondo blanco… y si quito algunas, funciona! (es decir si antes colocaba 20 imagenes en el lienzo, ahora solo admite 10, sino aparece solo el lienzo)… sabes a que se puede deber?
    Muchas gracias!

  • ladobonline

    Después de horas (y no exagero) investigando y probando, descubrí el problema, y por ende, lo solucioné. Resulta que los parámetros pasan por “GET” y son muchos datos… reduje la cantidad de datos eliminando las dimensiones de las imagenes (que son siempre las mismas) y acortando los nombres de los ficheros eliminando sus rutas que tb son siempre las mismas!
    La duda que me queda es por qué antes funcionaba y ahora no… pero en fin! ya está solucionado!
    :D

  • jose luis

    hola q tal soy nuevo en php y quisiera saber como mostrar todas las imagenes redimensionadas ya q extraigo todos los datos de una base de datos y quiero mostrarlas en una oagina pero solo me muetra una se los agradecere mucho si me pueden ayudar…

  • marcos

    hola buen dia este tutorial esta muy chido. ahora no se si me podrian ayudar con esto, e querido poner un input text y lo que escribas en esa casilla se generara en la imagen jpg junto con los graficos, si alguien sabe, me pudiera pasar el dato. se los agradecería mucho

  • Raul

    Holas

    Bueno quisiera saber si esto funciona sólo cuando es el archivo es .flv más no .swf ???

    Puesto que quiera generar thumbnails de apartir de .swf a gif o jpg

  • http://www.gvoweb.com gvo

    Hola, esta muy interesante, lamentablemente buscaba algo casi relacionado, que haga un jpg pero con la opcion de guardar en una carpeta y no que genere el jpg en un pag del explorer, sino que al ponerle generar jpg me de la opcion de guardarlo o bien que lo guarde directamente en una carpeta, saludos muchas gracias

  • Aracely Gonzalez

    Chicos,

    Estoy utilizando una libreria de graficos que me genera la salida como .swf

    Recien surgio el requerimiento de vaciar dicho reporte con graficas a un documento word por lo que necesito obtener el equivalente de mis graficos en jpg o algun formato bitmap para poder incrustarlo y que se despliegue sin ningun problema

    Mi app corre en un Server Linux con Apache, PHP y cuento con GD

    Tienen algun ejemplo que me apoye con lo que necesito ?

    Mil gracias de antemano y que tengan un excelente dia
    Aracely

  • http://none.com Julio

    Hola,
    muy interesante pero este script que tienes crea un jpg basado en parametros, pero lo que no hace es comvertir un swf a jpg,

    grasias.

  • Manuel

    me ha gustado mucho.
    seria posible mover los gráficos, escalarlos y rotarlos para colocarlos al gusto?

    muchas gracias