Comunidad de diseño web y desarrollo en internet online

clips y máscaras

Citar            
MensajeEscrito el 08 May 2008 05:24 pm
Muy buenas tengo una galería de imágenes de carga dinámica y utiliza una máscara para mostrar las miniaturas, en el fotograma donde está la galería tengo un boton (atrás) que es para ir hacia otro fotograma de la película raíz, es decir para volver a la pantalla anterior a la galería. Pero cuando vuelvo a entrar en la galería la máscara de las miniaturas desaparece y las muestra todas.

Aquí os pongo el código, ayudarme por fa:

System.useCodepage = true;
XML.prototype.ignoreWhite = true;
import mx.transitions.Tween;
// separacion-> distancia entre las imágenes
// tanto horizontal como vertical
var separacion:Number = 113;
// vbles para pasar de página
var pagina_actual:Number = 1;
var num_paginas:Number;
// array donde metemos los elementos del XML
var IMG_array:Array;
// objeto XML que carga la lista de miniaturas

var miniaturasXML:XML = new XML();
miniaturasXML.ignoreWhite = true;

miniaturasXML.onLoad = mostrarMiniaturas;
miniaturasXML.load(\"prueba.xml\");
// funcion que se ejecuta al cargar el XML

function mostrarMiniaturas():Void {
// contadores de columna y fila para
// disponer las miniaturas
var fila:Number = 0;
var col:Number = 0;
// paso los datos del XML al array
IMG_array = this.firstChild.childNodes;
num_paginas = Math.ceil(IMG_array.length/4);
// creo el clip donde meteremos todas las miniaturas
var lienzo:MovieClip = _root.createEmptyMovieClip(\"lienzo_miniaturas\", _root.getNextHighestDepth());
// lo posiciono donde nos conviene
lienzo._x = 50;
lienzo._y = 375;
// y lo enmascaro con el clip situado en la
// capa mascara. se enmascara para hacer el deslizamiento del
// clip cuando tengamos muchas miniaturas y no entren todas a
// la vez en pantalla (nuestro caso)
lienzo.setMask(mascara_mc);
// recorro el array que contiene la lista con los nombres de
// los archivos de las miniaturas e invoco la función crearMiniatura
// que es la que carga la imagen, la recoloca, le pone un pequeño
// marco y le asigna las acciones para verla ampliada
for (var k:Number = 0; IMG_array[k]; k++) {
// extraigo la ruta del archivo de imagen
//var ruta:String = \"minis/\"+IMG_array[k].attributes.nombre;
// como sólo tengo tres columnas, cuando llegue a
// la tercera, avanzo una fila y retorno a la primera
if (col>3) {
col = 0;
fila++;
}
// creo la miniatura. extraigo la ruta del archivo de imagen
// y la paso como tercer parámetro
crearMiniatura(col, fila, IMG_array[k].attributes.nombre);
col++;
}
}

//En el bloque anterior hemos definido el objeto XML que va a recibir los datos y también la función encargada de procesarlos.

function crearMiniatura(columnaF:Number, filaF:Number, ruta:String) {
// bajo_clip es el clip que contendrá el marco de la miniatura
var bajo_clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip(\"bajo_\"+filaF+\"_\"+columnaF, lienzo_miniaturas.getNextHighestDepth());
// clip contendrá la imagen
var clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip(\"foto_\"+filaF+\"_\"+columnaF, lienzo_miniaturas.getNextHighestDepth());
// para cargar la miniatura definimos un objeto MovieClipLoader
// y un objeto detector de eventos
var mi_mcl:MovieClipLoader = new MovieClipLoader();
var miListener:Object = new Object();
mi_mcl.addListener(miListener);
clip.valor = \"aaa\";
// cargamos la imagen
mi_mcl.loadClip(\"/minis/\"+ruta, clip);
miListener.onLoadStart = function(target_mc:MovieClip) {
// cuando comienza la carga de la imagen
// ponemos al _alpha a 0
target_mc._alpha = 0;
};
miListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno
};
// cuando ya se ha completado la carga y tenemos disponible el clip
miListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta, con _alpha=0)
target_mc._x = (separacion*columnaF)+(100-target_mc._width)*0.5;
target_mc._y = (separacion*filaF)+(100-target_mc._height)*0.5;
// recolocamos el marco que rodea a la foto
bajo_clip._x = target_mc._x-5;
bajo_clip._y = target_mc._y-5;
// dibujamos el marco
with (bajo_clip) {
beginFill(0xffffff);
lineStyle(1, 0xEEEEEE, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
bajo_clip.onRelease = function() {
verFotoGrande(ruta);
};
// muestro la miniatura animando el _alpha hasta 100
var myTween:Tween = new Tween(target_mc, \"_alpha\", mx.transitions.easing.Regular.easeOut, 0, 100, 2, true);
};
}
//Carga de clips externos en Flash. La clase MovieClipLoader.

function verFotoGrande(ruta:String) {
clearInterval(intervaloColor);
// creo el clip donde irá la foto grande en una profundidad fija
// para que se reemplace cada vez que pincho en una miniatura
var grande:MovieClip = _root.createEmptyMovieClip(\"grande_mc\", 2*IMG_array.length+11);
// igual con el clip que contendrá el marco
var bajo_grande:MovieClip = _root.createEmptyMovieClip(\"bajo_grande_mc\", 2*IMG_array.length+10);
// posición vertical fija
grande._y = 45;
// para cargar la foto grnade definimos otro objeto MovieClipLoader
// y otro objeto detector de eventos
var grande_mcl:MovieClipLoader = new MovieClipLoader();
var grandeListener:Object = new Object();
grande_mcl.addListener(grandeListener);
// cargo la foto grande
grande_mcl.loadClip(\"/originales/\"+ruta, grande);
grandeListener.onLoadStart = function(target_mc:MovieClip) {
// aplico una transformación de color que deja el clip
// tintado de blanco
myColor = new Color(target_mc);
myColorTransform = new Object();
myColorTransform = {ra:100, rb:255, ga:100, gb:255, ba:100, bb:255, aa:100, ab:0};
myColor.setTransform(myColorTransform);

};
grandeListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
// aquí podéis poner acciones para mostrar una precarga,
// este caso no lo hemos considerado oportuno
};
grandeListener.onLoadInit = function(target_mc:MovieClip) {
// recolocamos la imagen (todavía está oculta)
target_mc._x = 382+Math.round((315-target_mc._width)*0.5);
// recolocamos el marco que rodea a la foto grande
bajo_grande._x = target_mc._x-5;
bajo_grande._y = target_mc._y-5;
// dibujamos el marco
with (bajo_grande) {
beginFill(0xffffff);
lineStyle(1, 0xEEEEEE, 100);
lineTo(target_mc._width+10, 0);
lineTo(target_mc._width+10, target_mc._height+10);
lineTo(0, target_mc._height+10);
lineTo(0, 0);
endFill();
}
// con estas rutinas hacemos la transición de color desde el blanco
var indiceColor:Number = 255;
intervaloColor = setInterval(cambiarColor, 10);
function cambiarColor() {
myColorTransform = {ra:100, rb:indiceColor, ga:100, gb:indiceColor, ba:100, bb:indiceColor, aa:100, ab:0};
myColor.setTransform(myColorTransform);
indiceColor -= 2;
if (indiceColor == -1) {
clearInterval(intervaloColor);
}
}
};
}

//Ya hemos creado la foto grande. Para hacer las transición de la foto grande hemos usado el método setTransform de la clase Color. Es este otro tutorial se explica un ejemplo de su uso.

// con esta función desplazo el lienzo de las miniaturas para
// pasar de página
function moverLienzo(posY:Number):Void {
var myTween:Tween = new Tween(lienzo_miniaturas, \"_y\", mx.transitions.easing.Regular.easeOut, lienzo_miniaturas._y, posY, 1, true);
}
// deshabilito de inicio el botón de volver atrás
// ya que se muestra la página 1
pMenos_btn.enabled = false;
pMenos_btn._alpha = 30;

Y el código del botón atras es este:
on(release){
unloadMovie (\"_root.lienzo\");
unloadMovie (\"_root.lienzo_miniaturas\");
unloadMovie (\"_root.grande\");
unloadMovie (\"_root.grande_mc\");
unloadMovie (\"_root.bajo_grande_mc\");
gotoAndPlay(\"Servicios\");
}

Desde ya muchísimas gracias!!!!!!!!

Por PVDC

10 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 08 May 2008 05:33 pm
Yo con más de 10 líneas de código ya me pierdo, pero quien se lea el troncho que posteaste estará muy feliz si usas los tags code al principio y final, lo que permite que el código no pierda el formato y facilita su compresión

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 09 May 2008 09:18 am
Tienes mucha razón...resumiré el código principal para que sea mas conciso, vale?

En un fotograma tengo una galeria en la que cargo las miniaturas de esta manera:

var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas", _root.getNextHighestDepth());
lienzo.setMask(mascara_mc);
var clip:MovieClip = lienzo_miniaturas.createEmptyMovieClip("foto_"+filaF+"_"+columnaF, lienzo_miniaturas.getNextHighestDepth());
var mi_mcl:MovieClipLoader = new MovieClipLoader();
var miListener:Object = new Object();
mi_mcl.addListener(miListener);
clip.valor = "aaa";
mi_mcl.loadClip("/minis/"+ruta, clip);

Cuando salgo de este fotograma hago el unloadmovie de los clips y cuando vuelvo a este fotograma para volver a visualizar la galería, funciona todo correctamente, excepto que la máscara no me funciona como tal.

Espero me hayas entendido...y puedas ayudarme.... muchas gracias por contestarme!!!!!

Paola

Por PVDC

10 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 09 May 2008 09:27 am
jaja lo siento no poder ayudarte, pero asi mucho mejor y mas limpio la primera vez que lloro viendo codigo en flash jajaja xD

Por CaLeR

18 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 09 May 2008 09:41 am
Lo de moverse entre fotogramas cuando hay aplicaciones es muy mala idea. Por ejemplo aquí se ejecuta todo el código de nuevo, y como usa getNextHighestDepth(), todo lo creado dinámicamente sigue allí, es decir, apilas cosas cada vez que te mueves. Fíjate si puedes pasar a un esquema de niveles fijos, así por lo menos al volver a crear reemplazas.

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 09 May 2008 09:55 am
Entiendo lo que dices y es verdad, pero creia que con unloadmovie lo solucionaba...
Lo siento pero no se a que te refieres con un esquema de niveles fijos, me puedes dar una idea???

Gracias Jorge!!!

Paola

Por PVDC

10 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 09 May 2008 10:18 am
Por ejemplo este clip:

var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas", _root.getNextHighestDepth());

Se quita con

lienzo.removeMovieClip() y no con unloadMovie

Luego si quiero que la siguiente vez que se cree reemplaze el que estaba en vez de crearse otro haría:

var lienzo:MovieClip = _root.createEmptyMovieClip("lienzo_miniaturas", 100);

Luego la siguiente vez reemplazará al anterior, aunque ojo, al pasar a niveles fijos hay que tener en cuenta que no se altere el stack necesario

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 09 May 2008 11:36 am
Gracias...lo probare asi y luego te digo algo....vale?

Paola

Por PVDC

10 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 09 May 2008 12:56 pm
Jorge ya lo he probado...y queda estupendamente, ahora la máscara funciona!!!

Como veras no tengo demasiada experiencia con Action Script, pero me gusta mucho programar y me gustaría aprender mas y poder resolver problemas básicos yo sola...conoces algún tutorial que esté bien???

Muchisisimas gracias!!!

Paola

Por PVDC

10 de clabLevel



Genero:Femenino  

msie7
Citar            
MensajeEscrito el 09 May 2008 01:06 pm
En este mismo sitio tienes un buen surtido ;)

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox

 

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