Cambiar imagen de fondo con botón

Hola estoy haciendo una web con diseño líquido y quiero que cada vez que se pulse uno de los apartados (Inicio, Profesión, Galería, Contacto) la imagen de fondo se cambie.

He creado 4 clips de película que contienen la imagen y cuando pulsas cualquier botón le aplico una clase tween de alpha. El problema es que solo me funciona una vez.

Os pongo el siguiente ejemplo:

Código ActionScript :

profesion_btn.onRelease = function()
{
   new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60);
};

En el clip de película fondo_mc tengo una imagen cargada que al darle al botón de Profesión debe de desvancerse, bueno pues no da fallos y no hace la transición. Podeis echarme una mano??
Gracias.

¿Estás llevando el alpha a 0 ... lo devuelves a 100 en algún punto? ¿Trabajas siempre sobre la misma instancia?

Jorge

Hola Jorge, mi intención es tener 4 clips de película con una imagen dentro en cada uno de ellos. Poner los clips a _alpha 0, y cuando se pulse su botón hacerle la transición de _alpha a 100. No se si debo de hacer algo mas como tu comentas. Gracias Jorge.

Entendí lo que quieres hacer, pero no me respondiste

Jorge

Gracias por tu interés Jorge. Ahora mismo las pruebas las estoy haciendo solo con un clip (fondo_mc). Si te sirve de referencia, antes del código que puse anteriormente pongo el código siguiente:

fondo_mc._width = Stage.width;
fondo_mc._height = Stage.height;

Para que la imagen que está dentro del clip de película tome las dimensiones de la escena.

Después de este código no he puesto ninguno mas que haga referencia al clip fondo_mc y ni estoy llevando el alpha a 0 ni lo devuelvo a 100 en algún punto. ¿Es necesario?

Gracias de nuevo Jorge!

Le estás diciendo que se esfume en 60 frames:

new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60);

Entonces la imagen se esfuma, no veo que haya transición hacia ningún lado, si tuviera un clip con 4 fotogramas y en cada uno un fondo le agregaría un listener al motionFinish para moverlo a otro fotograma y hacer el Tween opuesto, es decir de alpha 0 a 100. La idea sería

Código ActionScript :

var myTween:Tween = new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60); 
myTween.onMotionFinished = function() {
    change();
};
function change(){
  fondo_mc.gotoAndStop(2)
  new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 0, 100, 60); 
}

Tienes que parametrizarla para poder manejar adonde haces el gotoAndStop

Jorge

Creo que no me expliqué bien, te pongo el ejemplo y hablamos sobre ello. http://bamer.es/nuno/home.html

Mi intención es que al darle (por ejemplo) al botón de MI PROFESION, la imagen actual que ocupa toda la pantalla se vaya esfumando para que se cargue otra a la vez de fondo. Quiero tener una imagen de fondo en cada uno de los apartados de la web. Y la transición de cambio entre una imagen y otra es el _alpha.

Respecto al código que me has puesto, entiendo que tu idea es crear un clip de película de nombre fondo_mc con 4 fotogramas claves y en cada uno de ellos las imágenes de fondo que quiero tener, pero ¿como llamo a esta función cada vez que pulse uno de los botones ?

Gracias por tu tiempo e interés Jorge.

¿Como función? Simple:

Código ActionScript :

function cambia(fotograma:Number){
  var myTween:Tween = new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60);  
  myTween.onMotionFinished = function() { 
    change(fotograma); 
 }; 
function change(fotograma:Number){ 
  fondo_mc.gotoAndStop(fotograma) 
  new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 0, 100, 60);  
}
//llamada
cambia(5)

Jorge

Buenas Jorge, en el clip de película fondo_mc he creado 3 fotogramas mas metiendo el resto de imágenes de fondo para cada apartado.

Para probar, con un botón he puesto lo siguiente:

_root.profesion_btn.onRelease = function()
{
cambia(2);
}

Al ejecutarlo me daba fallo en la función 'cambia' y al quitar 'var myTween:Tween =' se ejecuta sin problemas, el problema es que se ejecuta el clip fondo_mc sin parar y va pasando por la 4 imagenes sin parar.

Le he puesto al clip de pelicula fondo_mc una capa mas donde en cada uno de los 4 fotogramas le he puesto un stop(); el resultado es que al ejecutar la película se para el clip de película y no pasa al siguiente fotograma cuando pulsas el botón de MI PROFESION.

Como puedo hacer para que al ejecutar la película se pare en el primer fotograma y si pulso en cualquier botón avance el clip de película hasta el fotograma que es, y me muestra la imagen con el _alpha.

Gracias de nuevo.

Pon el code tal cual lo tienes, no entiendo muy bien como quedó

Jorge

Jorge te pongo todo el código que tengo:

Código ActionScript :

cargar_pelicula = function (peli)
{
    // ESTA FUNCIÓN ES PARA CENTRALIZAR
    // EL SISTEMA DE CARGA EN UN SÓLO LUGAR
    cargador.loadMovie(peli);
};

// BOTONES ALFA 0
profesion_btn._alpha = 0;
galeria_btn._alpha = 0;
contactar_btn._alpha = 0;

//LINK LOGO
_root.bamer_mc.onRelease = function()
{
    getURL("http://www.bamer.es", _blank);
};

// TWEEN LATERAL BOTON INICIO 
import mx.transitions.Tween;
import mx.transitions.easing.*;
new mx.transitions.Tween(boton1, "_x", mx.transitions.easing.Back.easeOut, -200, 29, 20);

mov_tw = function (clip, prop, fin)
{
    new Tween(clip, prop, Strong.easeOut, clip[prop], fin, 25, false);
};

Stage.align = "TL";
Stage.scaleMode = "noScale";
this.createEmptyMovieClip("cargador",this.getNextHighestDepth());
//bamer_mc._y = (Stage.width - 996) / 2;
//bamer_mc._x = (Stage.height - 578) / 2;

// AJUSTE ESCENA VENTANA NAVEGADOR
var miListener:Object = new Object();
miListener.onResize = function()
{
    //CLIP DE PELICULA QUE CONTIENE LAS 4 IMAGENES CON LAS DIMENSIONES DE LA VENTANA DEL NAVEGADOR
    fondo_mc._width = Stage.width;
    fondo_mc._height = Stage.height;
    //BARRA INFERIOR
    barrainf_mc._width = Stage.width;
    barrainf_mc._y = Stage.height - barrainf_mc._height - 10;
    barrainf_mc._x = Stage.width - barrainf_mc._width;
    //POSICION LOGOTIPO BAMER
    bamer_mc._x = Stage.width - bamer_mc._width + 71;
    bamer_mc._y = Stage.height - bamer_mc._height - 8;
    //POSICION AVISO LEGAL
    avisolegal_mc._x = Stage.width - avisolegal_mc._width - 1160;
    avisolegal_mc._y = Stage.height - avisolegal_mc._height - 13;
    //CARGADOR DE CONTENIDO
    cargador._x = (Stage.width - 996) / 2;
    cargador._y = (Stage.height - 578) / 2;
};
Stage.addListener(miListener);
miListener.onResize();
contactar_btn._alpha = 0;

// FUNCIÓN CAMBIO IMAGEN DE FONDO
function cambia(fotograma:Number)
{
    var myTween:Tween = new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60);
    myTween.onMotionFinished = function()
    {
        change(fotograma);
    };
}
function change(fotograma:Number)
{
    fondo_mc.gotoAndStop(fotograma);
    new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 0, 100, 60);
}

// CAMBIO DE IMAGEN BOTON INICIO
boton1.onRelease = function()
{
    cambia(1);
};

// CAMBIO DE IMAGEN BOTON PROFESION
profesion_btn.onRelease = function()
{
    cambia(2);
};

// CAMBIO DE IMAGEN BOTON GALERIA
galeria_btn.onRelease = function()
{
    cambia(3);
};

// CAMBIO DE IMAGEN BOTON CONTACTAR
contactar_btn.onRelease = function()
{
    cambia(4);
};

No veo nada raro en tu code y no tengo tiempo de probarlo, en una peli nueva pon solo el fondo y los cinco botones, a ver si va el mecanismo, luego lo metes en tu peli a ver si funciona, sino es algo externo a la rutina misma

Jorge

Jorge, probado en un nuevo archivo AS2 con el código

Código ActionScript :

function cambia(fotograma:Number){ 
  var myTween:Tween = new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60);   
  myTween.onMotionFinished = function() {  
    change(fotograma);  
 };  
function change(fotograma:Number){  
  fondo_mc.gotoAndStop(fotograma)  
  new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 0, 100, 60);   
} 

y se comporta igual que en mis archivos, nada mas ejecutarlo no para de pasar por los 4 fotogramas.

Uuuuuuuuffff que desesperaciónnnnnnn!!!!!

Me funciona, es decir hace un fade-out y luego se va al 3 con esto:

Código ActionScript :

import mx.transitions.Tween;
function cambia(fotograma:Number):Void {
   var myTween:Tween = new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 100, 0, 60);
   myTween.onMotionFinished = function() {
      change(fotograma);
   };
}
function change(fotograma:Number) {
   fondo_mc.gotoAndStop(fotograma);
   new mx.transitions.Tween(fondo_mc, "_alpha", mx.transitions.easing.Back.easeOut, 0, 100, 60);
}
cambia(3);

Jorge

No me lo puedo creer, joder que estoy haciendo mal?? Pero si lo que hago es copiar el código. Puedes pasarme el .fla jorge??

Gracias de nuevo.

Espera .... ¿haz puesto un stop en el primer fotograma de fondo_mc?

Jorge

Creo que de las pruebas que hice si lo puse.

¿Creo?

Jorge

Ahora mismo no lo tengo puesto.

Entiendo que para llamar con esto es suficiente no??

profesion_btn.onRelease = function()
{
cambia(2);
};

Ya se cual es el problema: Mi sistema de carga de películas!!

Ese es el motivo de aislar un principio: ver que el error viene del contexto, bugfixing stepA

Jorge