Comunidad de diseño web y desarrollo en internet online

Importar PNG imagen sin fondo

Citar            
MensajeEscrito el 18 Dic 2009 11:14 pm
Quisiera saber como importar archivos a flash cs3 con fondo transparente, ya los he intentando importar en .pgn con modo alpha y a pesar de que lo logro, no consigo como hacer para que esta imagen al separar (Control + B) no tenga la transparencia en el resto de la imagen, es decir, si se ve transparente, mas no se quita el fondo, este permanece y lo tengo que borrar yo mismo seleccionando ese pedazo de la imagen y borrandolo, se trata de un juego donde posterior mente habran funciones en ese clip de HitTest, esto hace que necesite que los clips tenga en tamaño justo de la imagen, el fondo transparente hace q la el clip sea un rectangulo gigante, son muchos frames y parece una locura hacerlo uno por uno, y no me sirvio de nada enmascarar. Otra solucion es PSD pero es mas pesado que Png y tambien me interesa que se mantenga esto liviano, como hago? Gracias...

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 18 Dic 2009 11:16 pm
La única te queda es usar vectores ya que no puedes llevarlo sinfondo

saludos, Hernan . -

Por Hernán

BOFH

6148 de clabLevel

19 tutoriales
23 articulos

Genero:Masculino   REC Desarrollador de GAIA

Marketing & IT

safari
Citar            
MensajeEscrito el 19 Dic 2009 02:53 pm
@sirstryker, el hitTest hazlo con la clase BitmapData, así podrás saber cuando un área opaca hace contacto con un Punto de la pantalla, un área de la misma u otro BitmapData. De esta manera no importa el tamaño del área transparente, esta no será tomada en cuenta. Observa el siguiente ejemplo, importa tu imagen transparente en flash y expórtala para ActionScript como "imagen", después pega este script en el primer frame de tu película y pruébala:

Código ActionScript :

import flash.display.BitmapData;
import flash.geom.Point;

//---Crear el BitmapData y el MovieClip contenedor
var bData:BitmapData = BitmapData.loadBitmap("imagen");
var mc:MovieClip = this.createEmptyMovieClip("my_mc", this.getNextHighestDepth());
mc.attachBitmap(bData, 1);

//---Función de darle posiciones al MovieClip
function moveMC():Void{
   
   mc._x = Math.random() * Stage.width;
   mc._y = Math.random() * Stage.height;
   
}

//---Chequear colisión
this.onEnterFrame = function():Void{
   
   var hit:Boolean = bData.hitTest(new Point(0, 0), 255, new Point(_root._xmouse - mc._x, _root._ymouse - mc._y));
   if(hit) trace("contacto x: " + _root._xmouse + " / y: " + _root._ymouse);
   
}

//---Ejecutar cada dos segundos
var portiempo:Number = setInterval(moveMC, 2000);

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 20 Dic 2009 10:10 am
No entendi muy bien amigo pero que yo sepa si tienes el programa Photoshop CS2 o CS3 se pone al guardar la imagen en PNG de tipo "entrelazado" (Photoshop te manda una casilla de como quieres que lo guarde Normal o Entrelazado), asi te va a quedar transparente, esto funciona como archivo externo para flash y tambien introduciendolo en flash (resimple si es lo q deseabas). Si lo deseas en dibujo, redibujalo en Illustrator y pasalo tambien. o usa mascara de capa en flash. bueno cuidate

Por Julio Cesar X

37 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Dic 2009 03:33 pm
Okey pasa lo siguiente, mascara de capa no me sirve, igual se reconoce el movieclip desde afuera como un ractangulo grande, y redibujado tampoco porque estamos hablando de una imagen hecha en 3d y de render exportado como .png con opcion alpha.

Aun tengo el problema, la imagen sigue teniendo el fondo molesto transparente, de verdad que eso parece un error del programa, ya lo intente con varias iimagenes y sigo sin entender porque al separar (control+B) me toma lo transparente como parte de la imagen. Me gustaria adjuntar una imagen de un congelado de pantalla en el foro pero no se como se hace.

La solucion del codigo que me dio elchininet tampoco me soluciono porque parece estar malo, me dice sintaxis error, y como no entiendo ni papa el codigo no se a q se refiere. tiene como 3 errores mas.

Otra cosa es que es una secuencia de imagenes de de muchos frames por eso es q no borro uno por uno al separar la imagen. Gracias... y de verdad aun espero me puedan ayudar.

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Dic 2009 11:00 pm
@sirstryker, la mejor solución es la que te di y es la mejor forma de trabajar colisiones con Bitmaps, el código no está malo porque antes de postearlo lo probé, si te da algún error postéalo porque no tiene ninguno, lo más seguro que te suceda es que estés trabajando con AS1 o AS3 y el código que he posteado es AS2.

Lo que te sucede no es un error del programa con CTRL+B sólo separas la imagen para poder trabajarla como un relleno, la parte transparente aunque no lo creas forma parte de la imagen y por lo tanto no la podrás eliminar de esa manera a no ser que la selecciones como estabas haciendo, lo que quieres lograr se hace con Modify>Bitmap>Trace Bitmap y entonces lo transparente lo podrás eliminar.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 20 Dic 2009 11:14 pm
hola, que programa de 3d estas usando?, porque por ejem en blender tenes la posibilidad de configurar el tamaño del render, supongo que en 3d max tambien, sino solo te queda pasarlo por photoshop para recortarlo y dejarlo con las medidas justas sin que te sobre nada :wink:

y para subir una vista previa de lo que sucede, captura la pantalla y esa foto subila a http://es.tinypic.com/ y despues postea el link que esta entre estas etiquetas [img] ... [/img]

Saludos =)

Por Verys

67 de clabLevel



Genero:Femenino  

Argentina

firefox
Citar            
MensajeEscrito el 21 Dic 2009 02:52 am


Ok gracias, aqui coloque entonces la imagen para dar que entiendan mejor cual es el problema, esta es la imagen png alpha importada a flash, dispuesta dentro de un clip movie, fijense que en la imagen a la izquierda se encuentra separada y lista para recortar, la de la derecha esta normal (aun no editable), ¿que es lo q yo quiero? que me ayuden a que ese fondo desaparesca, el mismo no deberia existir... y con photoshop no lo puedo hacer con todos los cuadros, porque como ven en la imagen hay elementos separados y al recortar la foto para tomarlos quedarian muchas veces con rectangulos muy grandes y ya que eso mas adelante le colocare un hitTest el area de impacto no puede ser una zona sin nada.

La solucion de elchininet de hacer Menu-Modify>Bitmap>Trace Bitmap esta muy buena, seria la ideal si no postarizara la imagen, sin embargo seria una tarea que hay que hacerse en todos los cuadros, cosa que a estas alturas no me importa pero seria una solucion buenisima.

La solucion que yo encontre fue una locura y lo hice con 25 cuadros y aun me faltan mas de mil, jajaja... esta en esta imagen porsupuesto esto es lo q quiero evitar. Gracias a todos por la atencion y la ayuda.

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Dic 2009 03:02 am
Hey yo mismo me respondere con algo, amigo creo q si me sirve el trace bitmat, con los valores 1 y 1, en relacion a esto te pregunto, ¿sera que eso hace que pese mas el documento? porque hace que la imagen se vea compuesta de nodos, y crea miles por cada cuadro, no se, eso no me parece razonable, deberia ser apenas una silueta...

Hace un redibujo completo y total de la imagen en alta fidelidad, pero huy... eso se ve pesado.

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Dic 2009 08:01 am
yo creo que no te debes complicar la existencia.
o solo quitales el fondo en imagen PNG y guardalo entrelazado, o hazte dibujos en illustrator, es completamente mas facil, ademas si no estas usando 3d es tonto seguir con esto no crees amigo?

no pierdas tu tiempo valioso, eso del mapa de bits y recorte en flash es genial pero si vas a usar una gran cantidad de imagenes mejor solo redibuja en illustrator (pues el flash te sale pesado si no lo haces y alguna precarga que hagas de tu pelicula la gente se va a quedar dormida de esperar :lol: )
bye y cuidate

Por Julio Cesar X

37 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Dic 2009 11:14 am
@Julio Cesar X, la opción de guardar entrelazado nada tiene que ver con el fondo transparente, esta opción es parecida a la opción progresiva del formato JPG, lo que hace es guardar varias versiones de la misma imagen en el fichero para que al situarla en web se vayan creando poco a poco versiones de la imagen de menor a mayor calidad y así poder ir viendo las imágenes en conexiones lentas. Para guardar un PNG con fondo transparente basta con marcar "Transparency" y ya lo tendrás. Aún así esto no resuelve el problema de @sirstryker ya que el ya tiene las imágenes completamente transparentes, si lees sus posts te darás cuenta que su problema es tratar de eliminar el canal alpha en en modo autor de flash, cosa que le aconsejé que hiciera en runtime ya que se evita muchos problemas.

@sirstryker, para que el trace bitmap quede igual que la imagen en bitmap tienes que poner 1 en parámetro "Minimum área", píxels en "Curve Fit" y many corners en "Corner Threshold". Aparte que te llevará un tiempo hacerlo con todos, esto aumentará en gran medida el tamaño de tu flash, yo diría que bastante ya que cada píxel sería un pequeño cuadro en vectores.

¿Que problema tienes con seguir mi consejo? Ahí está la solución y más clara no puede estar... te evitas todo ese trabajo con unas pocas líneas de código y el hitTest te funcionará como debe ser, porque los hitTest de MovieClips no son muy confiables.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 21 Dic 2009 02:27 pm
Ok realmente coloque esta pregunta en esta seccion de flash para no colocarla en la de actionscrip ya que me temia una respuesta que me llevara a largos codigos, mas sin embargo voy a intentar colocarlo nuevamente y decirte cual es el problema, y me disculpan la ignorancia si no se colocar esa accion bien.

Asi coloque el codigo:



Quiza haces referencia a alguna instancia alli en el codigo. Si podrias explicarme que palabras tengo que sustituir te lo agradeceria, recordando que es una secuencia de imagenes y que si ese codigo que me diste sirve para uno solo tendria que colocarlo en todos los frames, :shock: cosa que parece medio loco. jeje. GRACIAS.

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Dic 2009 02:51 pm
Una pregunta... ¿puedo linkear aqui otro post para ver si alguien se anima a ayudarme con otra cosa? Gracias.

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 21 Dic 2009 06:54 pm
@sirstryker no debes poner aquí otro post, se debe mantener en cada hilo lo referente a un sólo tema.

Si no quieres trabajar con códigos lo mejor es que no te pongas a hacer un ejercicio como este, que por lo que veo parece un juego, eso es tarea muy difícil si no quieres lidiar con mucho ActionScript.

Lo que te sucede fue lo que te comenté en una respuesta anterior, estás trabajando con AS1 y debes cambiarlo a AS2, verás que si lo haces no te da error. El ejemplo es para que lo realices en un documento en limpio en AS2 con una sola imagen, cuando lo logres hacer te ayudaría para que te sirviera para todas tus imágenes, pero primeramente debes hacer lo que te recomendé.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 22 Dic 2009 12:40 am
Si tenias razon el scrip no genera error en un documento AS2, sin embargo no me funciona para que flash al ejecutar la pelicula haga que lo transparente no exista, al igual esta presente el mismo rectangulo que abarca el tamaño total de la imagen. Al querer que este clip ejecute hitTest contra una de las paredes el ignora el codigo y choca con todo y relleno transparente, me toca darle cuadro por cuadro recorte :S Pero bueno nada gracias por el intento, espero me puedan ayudar luego con otras inquietudes de este programa en un futuro.

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Dic 2009 10:19 am
@sirstryker, no quieras hacer las cosas de un golpe, lee lo que te puse anteriormente:

elchininet escribió:

Observa el siguiente ejemplo, importa tu imagen transparente en flash y expórtala para ActionScript como "imagen", después pega este script en el primer frame de tu película y pruébala:

No es para que resuelvas de un golpe lo que tienes, sólo crea un documento nuevo, importa una sola imagen haz lo que te dije en mi enterior post y prueba, cuando veas que el trace lanza positivo cuando toques la parte opaca de la imagen con el mouse, entonces podrás resolver otras cosas porque entenderías a que me refiero.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 22 Dic 2009 01:56 pm
ok aqui hago un tutorial de como lo hice:



los codigos utilizados en el paso 4

codigo en sd

onClipEvent (load) {
speedx = 0;
bottom = _root.bottom._y;
width = this._width/2;
}
onClipEvent (enterFrame) {
x = this._x;
y = this._y;
speedy = speedy+10;
x = x+speedx/6;
y = y+speedy/2;
if (y+width>=bottom) {
speedy = 0;
y = bottom-width;
jumping = "0";
}
if (x+width>250) {
x = width;
}
if (x-width<0) {
x = 250-width;
}
setProperty(this, _x, x);
setProperty(this, _y, y);
}
onClipEvent (keyDown) {
pressed = Key.getCode();
if (pressed == 87) {
if (jumping<>1) {
speedy = speedy-_root.jumpheight;
jumping = "1";
}
}
}


codigo en ds:

onClipEvent (load) {
movement1 = 12;
}
onClipEvent (enterFrame) {
if (Key.isDown(65)) {
this._x = this._x-movement1;
step = 1;
if (step=2) {
gotoAndStop(2);
}
}
}
onClipEvent (enterFrame) {
if (Key.isDown(68)) {
this._x = this._x+movement1;
step = 2;
if (step=1) {
gotoAndStop(1);
}
}
}


codigo paso 8:


onClipEvent (enterFrame) {
if (this.hitTest(_root.wall2)) {
this._x -= 10;
} else {
this._x += 0;
}
}
onClipEvent (enterFrame) {
if (this.hitTest(_root.wall1)) {
this._x += 10;
} else {
this._x += 0;
}
}


Asi quedo: al presionar "A" o "D" el personaje se desliza derecha o izquierda, pero aun reconoce la transparencia de relleno y por lo tanto se ejecuta el hittest antes de que el personaje toque las paredes.

http://server6.theimagehosting.com/image.php?img=problema.swf

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Dic 2009 02:36 pm
@sirstryker, después de 5 post que he puesto, no has hecho todavía lo que te dije en el primero. Como veo que no lees los posts, sino que quieres que tu ejercicio salga por arte de magia, y piensas que sólo con copiar y pegar un código que no tiene para nada que ver con eliminar transparencia se va a resolver tu problema, me retiro del asunto, cuando desees entender lo que he tratado de explicarte, lee el primer post y guiándote por la ayuda de flash puede que lo resuelvas.

Un saludo

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 22 Dic 2009 06:12 pm
http://www.filedropper.com/problema

Aqui te dejare el archivo que hice de acuerdo a lo que me dijiste en el primer post, para que tu mismo entonces compruebes que lo realice tal cual lo dijiste. La interaccion como dije desde un principio sera dado por las teclas "A" y "D" EL MOUSE NO TIENE NADA QUE VER. :roll:

Por sirstryker

12 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Dic 2009 07:40 pm
@sirstryker me he tomado el trabajo de descargar el flash, nada más lejano a lo que te pedí que hicieras.
Sigue mi consejo, empieza por cosas más sencillas.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox

 

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