Comunidad de diseño web y desarrollo en internet online

Ayuda Diagramación Líquida.

Citar            
MensajeEscrito el 13 Ago 2009 04:17 pm
Buenas tardes. Soy un poco (muchísimo...) novato en esto de la diagramación y llevo más de dos semanas intentándolo... ahora ya no se ni que hacer... a ver si me pueden ayudar porque... muchas grácias.

Mi problema es el siguiente (Con AS2): Quiero poner una imagen de fondo que se redimensione según tamaño del navegador y por encima de la imágen que se carguen unos swf externos alineados a la derecha, izquierda, centro, arriba o abajo y que según se cambie el tamaño del navegador estos queden siempre a la derecha, izquierda, centro....

NO HAY MANERA... estoy ya desesperado.

Lo que he hecho es lo siguiente:

En el primer fotograma tengo este código para que me redimensione según tamaño del navegador el fondo que tengo en un mc con el nombre contenidor_fons.

Código ActionScript :

Stage.scaleMode = "noScale";
//-----------------------
var StageWidth:Number = 762;
var StageHeight:Number = 510;
function escalaFondo()
{
   if (Stage.width > Stage.height) {
      contenidor_fons._width = Stage.width;
      contenidor_fons._yscale = contenidor_fons._xscale;
   } else {
      contenidor_fons._height = Stage.height;
      contenidor_fons._xscale = contenidor_fons._yscale;
   }
   contenidor_fons._x = (StageWidth - contenidor_fons._width) / 2;
   contenidor_fons._y = (StageHeight - contenidor_fons._height) / 2;
}
//-----------------------
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();
//-----------------------

En el fotograma 5 tengo este otro código para ver si consigo alinear otros mc donde yo quiera:

Código ActionScript :

Stage.scaleMode = "noScale";
Stage.align = "TL";

ancho_minimo = 762;
alto_minimo = 510;

clips_ajustables = new Array();

myListener = new Object();

Stage.addListener(myListener);

myListener.onResize = rec;
function rec() {
   alto = Stage.height;
   if (alto<alto_minimo) {
      alto = alto_minimo;
   }
   ancho = Stage.width;
   if (ancho<ancho_minimo) {
      ancho = ancho_minimo;
   }
   for (var g = 0; clips_ajustables[g]; g++) {
      clips_ajustables[g].alinear();
   }
}

MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) {
   this.ajuste_x = ajuste_x;
   this.ajuste_y = ajuste_y;
   this.ajuste_width = ajuste_width;
   this.ajuste_height = ajuste_height;
   
   this.x0 = this._x;
   this.y0 = this._y;
   this.w0 = this._width;
   this.h0 = this._height;
   this.ajustePersonalizado = false;
   
   clips_ajustables.push(this);
   this.alinear();
};

MovieClip.prototype.alinear = function() {
   
   if (this.ajuste_width) {
      if (this.ajuste_width.indexOf("%") != -1) {
         // si el valor de this.ajuste_width es un porcentaje
         this._width = (_root.ancho*parseInt(this.ajuste_width))/100;
      } else {
         // si el valor de this.ajuste_width es un número de píxeles
         this._width = this.ajuste_width;
      }
   }
   
   if (this.ajuste_height) {
      if (this.ajuste_height.indexOf("%") != -1) {
         this._height = (_root.alto*parseInt(this.ajuste_height))/100;
      } else {
         this._height = this.ajuste_height;
      }
   }
   // ajustes de posicion de los clips
   if (this.ajuste_x == "izquierda") {
      this._x = this.x0;
   }
   if (this.ajuste_x == "derecha") {
      this._x = Math.round(this.x0+(_root.ancho-_root.ancho_minimo));
   }
   if (this.ajuste_x == "centrar") {
      this._x = Math.round((_root.ancho-this._width)*0.5);
   }
   if (this.ajuste_y == "arriba") {
      this._y = this.y0;
   }
   if (this.ajuste_y == "abajo") {
      this._y = Math.round(this.y0+(_root.alto-_root.alto_minimo));
   }
   if (this.ajuste_y == "centrar") {
      this._y = Math.round((_root.alto-this._height)*0.5);
   }
   
   if (this.ajustePersonalizado) {
      this.ajustar();
   }
};


Bien, el problema es que ambos POR SEPARADO funcionan, el PRIMERO REDIMENSIONA EL FONDO y EL SEGUNDO situa los mc donde le digo poniendo en el mc el seguiente código:

Código ActionScript :

onClipEvent (load) {
   this.setAjuste("centrar", "arriba", false, false);
}

Pero cuando estan todos en el ESCENARIO lo que hace es desplazarme el fondo y no redimensionarmelo.

Alguien me podria ayudar??

Muchas grácias.

Voy a tomar un café porqué estoy ya desesperado con este tema.

Gracias de nuevo.

[The Fricky!]Cuando postees código actionscript, colócalo entre las etiquetas [*as] y [*/as] (sin los asteriscos)[/The Fricky!]

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 05:08 pm
El width y el height, o solo uno de ambos(Yo suelo poner solo en ancho), hay que ponerlos al 100%, asi cogera el 100% de la pantalla/resolución que sea...

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 05:27 pm
Buenas tardes Jorge. Grácias por tu respuesta pero no la entiendo. Donde tengo que poner 100% de todo este código que tengo??? Está bien lo que intento hacer o la estoy liando bastante.

Muchas grácias por responder ante todo.

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 05:35 pm
Hola de nuevo,

Suponiendo que tu archivo de flash lo fueras a cargar en una pagina html, en esa página, en el código, cuando hayas puesto tu flash, buscas su width/heigth y pones 100%

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 05:39 pm
Gracias Jorge... ya lo hize pero se me ve fatal... no me redimensiona la imágen de fondo.

ESte es el código que tengo en el html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="100%" id="fondoPantalla" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mare.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#ffffff" />
<embed src="mare.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="100%" name="fondoPantalla" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>


Grácias por tu interés... me lleva loco ya este tema...

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 05:47 pm
La proxima vez, pon etiquetas para que se vea mejor ;)

Código HTML :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="100%" height="700" id="fondoPantalla" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mare.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mare.swf" quality="high" scale="noscale" bgcolor="#ffffff" width="100%" height="700" name="fondoPantalla" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>


Prueba haber asi que tal se te ve...le he puesto 700 en height, por poner un numero fijo...pon lo que quieras...

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 06:02 pm

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 06:05 pm
OK. La imagen la tienes dentro del swf?En el escenario me refiero

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 06:33 pm
No. La cargo en un contenedor. La imagen es externa...

Lo hago con

Código ActionScript :

_root.contenidor_fons.loadMovie("imatges/caixa/01.jpg")


es más si solo pongo en el primer fotograma el código para ajustar la imágen de fondo funciona!!!

Código ActionScript :

Stage.scaleMode = "noScale";
//-----------------------
var StageWidth:Number = 762;
var StageHeight:Number = 510;
function escalaFondo()
{
   if (Stage.width > Stage.height) {
      contenidor_fons._width = Stage.width;
      contenidor_fons._yscale = contenidor_fons._xscale;
   } else {
      contenidor_fons._height = Stage.height;
      contenidor_fons._xscale = contenidor_fons._yscale;
   }
   contenidor_fons._x = (StageWidth - contenidor_fons._width) / 2;
   contenidor_fons._y = (StageHeight - contenidor_fons._height) / 2;
}
//-----------------------
Stage.addListener(this);
this.onResize = escalaFondo;
escalaFondo();
//-----------------------
stop();


Sólo con esto me redimensiona correctamente la imágen de fondo pero al poner, en el fotograma 3 el código para situar otros movieclips en el escenario... pues se espachurra todo y sale lo que ves en el enlace.

El código del fotograma 3 es:

Código ActionScript :

Stage.scaleMode = "noScale";
Stage.align = "TL";
ancho_minimo = 762;
alto_minimo = 510;

clips_ajustables = new Array();

myListener = new Object();

Stage.addListener(myListener);

myListener.onResize = rec;
function rec() {
   
   alto = Stage.height;
   if (alto<alto_minimo) {
      alto = alto_minimo;
   }
   ancho = Stage.width;
   if (ancho<ancho_minimo) {
      ancho = ancho_minimo;
   }
   for (var g = 0; clips_ajustables[g]; g++) {
      clips_ajustables[g].alinear();
   }
}

MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) {
   this.ajuste_x = ajuste_x;
   this.ajuste_y = ajuste_y;
   this.ajuste_width = ajuste_width;
   this.ajuste_height = ajuste_height;
   
   this.x0 = this._x;
   this.y0 = this._y;
   this.w0 = this._width;
   this.h0 = this._height;
   this.ajustePersonalizado = false;
   
   clips_ajustables.push(this);
   this.alinear();
};

MovieClip.prototype.alinear = function() {

   if (this.ajuste_width) {
      if (this.ajuste_width.indexOf("%") != -1) {
         this._width = (_root.ancho*parseInt(this.ajuste_width))/100;
      } else {
         this._width = this.ajuste_width;
      }
   }

   if (this.ajuste_height) {
      if (this.ajuste_height.indexOf("%") != -1) {
         this._height = (_root.alto*parseInt(this.ajuste_height))/100;
      } else {
         this._height = this.ajuste_height;
      }
   }

   if (this.ajuste_x == "izquierda") {
      this._x = this.x0;
   }
   if (this.ajuste_x == "derecha") {
      this._x = Math.round(this.x0+(_root.ancho-_root.ancho_minimo));
   }
   if (this.ajuste_x == "centrar") {
      this._x = Math.round((_root.ancho-this._width)*0.5);
   }
   if (this.ajuste_y == "arriba") {
      this._y = this.y0;
   }
   if (this.ajuste_y == "abajo") {
      this._y = Math.round(this.y0+(_root.alto-_root.alto_minimo));
   }
   if (this.ajuste_y == "centrar") {
      this._y = Math.round((_root.alto-this._height)*0.5);
   }

   if (this.ajustePersonalizado) {
      this.ajustar();
   }
};


luego en el fotograma 5 pongo:

Código ActionScript :

rec();
stop();


pero nada de nada... el resultado es el que ves en http://www.infocambrils.com/diagramacion/

No se...

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 06:38 pm
La imagen es una imagen estática, verdad?

Porque no la metes directamente al escenario? Eso hara que sea del flash, y te lo redimensionara bien al ponerle el 100%

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 06:50 pm
si la pongo en el escenario me hace lo mismo...

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 06:54 pm
Te hace lo mismo? Que raro....

Me estoy saltando algo....

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 07:05 pm
si quieres puedo enviarte el archivo fla ... lo que pasa que no se como se hace para enviar un archivo por el foro...

de todos modos muchas grácias... y a ver si lo consigo... tengo la idea para la web pero el diseño requiere que esto funcione... buffffffff...

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 07:15 pm
Una pregunta, el pedazo de script que tienes arriba, es solamente para ajustar a las pantallas?

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 07:32 pm
Ese script lo que hace es colocalr los movieclips en el centro, derecha, izquierda, arriba o abajo según les pongas... si le pones al mc este código

Código ActionScript :

onClipEvent (load) {
   this.setAjuste("centrar", "arriba", false, false);
}


te centra el movieclip i lo enclava arriba... y siempre queda ahí aunque se redimensione la ventana... no se si es correcto o no pero ese script lo fastidia todo.

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 07:35 pm
Ok, otra opcion, que quizas sea mas sencilla, y funcionalmente creo que será igual.

Te creas mcs vacios, y llamas con loadmovie, a tus pelis externas, todo ese script, en este caso, yo creo que sobraria, y colocas tu imagen de fondo. Asi luego, puedes dimensionar al 100%.

esta opcion se que funciona, porque he realizado varias webs llamando todo con loadmovie, y estan al 100% en cualquier resolucion...ademas los mcs se te quedarian en la posicion que los pusieras, y se dimensionarian tambien

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 07:55 pm
si pero como hago para que el mc se quede siempre alineado a la izquierda, derecha, centro o en una posición determinada y que mantenga esa posición cuando se redimensione la pantalla?

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Ago 2009 08:03 pm
Tu creas un mc, y lo pones en las coordenadas que tu quieras. De ahi no se va a mover.

Luego en ese clip vacio, cargas mediante loadMovie los swf externos...

Y ya esta, no es mas....

Para luego dimensionarlo, solo hay que poner el width en el html al 100%...para mi, muchisimo mas sencillo

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 14 Ago 2009 11:20 am
Buenos dias.

Así lo hice pero resulta que creo el mc vacio con el nombre contenedor y dentro del mcvacio (contenedor) le pongo

Código :

_root.contenedor.loadMovie("bandera.swf",10);
para que me cargue dentro del mc_vacio con el nombre contenedor el archivo bandera.swf a nivel 10.

El mc vacio (contenedor) está situado a la izquierda superior pero al redimensionar la pantalla no se me queda anclado a la izquierda-superior sinó que se mueve... no se...

Muchas grácias por tu ayuda...

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Ago 2009 11:25 am
Hola de nuevo,

Bine, le pusiste nombre de instancia"contenedor",no?

Pues ese codigo que tu tienes, ponloen el frame1, no dentro. Debiera de quedarse donde lo pusiste...no tiene porque moverse de sitio

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 14 Ago 2009 11:50 am
PErfecto!!! Muchísimas grácias Jorge... un problema solucionado pero tengo la otra parte que no funciona.

Ahora he conseguido que si tengo un escenario de 762x510px, todo lo que ponga en el no se me mueva. Pero si tengo el contenedor_mc que me carga una película en su interior y este contenedor_mc, en mi escenario, ocupa la posición x=0 e y=0 (o sea alineado a la parte superior izquierda) pero cuando redimensiono la ventana los mc quedan tal y como estan en el escenario 762x510 y yo querria que alguno de estos objetos al redimensionar la ventana conserven la posición x=0 y=0 por ejemplo o alineados abajo del todo como la barra menú de abajo del todo de esta web.

http://www.alexvilchez.com/


Muchas grácias y perdona por tanta insistencia.

Un saludo.


Miquel.

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Ago 2009 11:56 am
jejeje ya nos ha costado!! :P

Ésto último no te lo entiendo muy bien...puedes explicar mejor lo que quieres?

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 14 Ago 2009 02:28 pm
Ante todo muchas grácias Jorge por tu excelente ayuda.

Ahora el problema que tengo es que si pongo un mc vacio en la parte inferior derecha de mi stage que mide 762x510px donde le voy a cargar un swf externo de esa medida también, este swf externo se carga pero al mirarlo en el navegador el stage de 762x510 permanece centrado en la pantalla por lo que cuando yo puse mi mc_vacio en el stage de 762x510 estaba alineado a la parte inferior derecha pero al mirarlo en un navegador de 1600x1200px pues el contenido del mc no está alineado en la parte inferior derecha de la pantalla sino que está en la parte inferior derecha del cuadro centrado de 762x510 y yo quiero que el mc me lo alinee a la parte inferior derecha de la pantalla no de mi stage.

Un cosa que quiero hacer es una barra de navegación como la de la web de http://www.alexvilchez.com/. la que está en la parte inferior y que si redimensionas la ventana siempre se mantiene en la parte inferior con la medida que tiene y la imágen de fondo se va redimensionando... Eso es lo que yo pretendia hacer.

Repito que muchísimas grácias por todo me estás ayudando muchísimo...

Un saludo.


Miquel.

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Ago 2009 09:24 pm
Ahora si que te he entendido, pero...¿pusiste el 100% de ancho (Width) en el html?, si lo pusiste, es muy raro que se te quede en la posicion de tu flash, porque este debiera redimensionarse...

Por Wyrm

Claber

1545 de clabLevel

15 tutoriales

 

firefox
Citar            
MensajeEscrito el 15 Ago 2009 01:29 pm
No se redimensiona... mantiene el tamaño original del stage pero siempre alineado al centro.

Además yo lo que pretendia es cargar un swf externo pero que siempre quede alieneado a la derecha, izquierda, arriba, abajo o al centro de la pantalla no del stage... pero sin que se redimensione... manteniendo su tamaño original pero siempre anclado arriba, abajo, derecha, izq, o centro según le digamos... solo quiero que se redimensione el fondo... los demás swf no... solo que se posicionen donde yo quiera.

Eso es posible? En esa web que te comenté veo que tiene la barra inferior y la superior que siempre estan arriba o abajo, no se redimensionan pero siempre estan en esa posición aunque hagas pequeña o grande la pantalla.

No se si me explico o me enrrollo mucho...

Muchas grácias.

Por mikae

8 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Ago 2009 08:18 am
Buenos dias.

Hasta ahora tengo un escenario con 762x510px.

FOTOGRAMA 1:
- CAPA 5: Un mc de 1600x1200 px que será el tamaño de las imágenes de fondo con el nombre mc_fondo
- CAPA 4: Un mc de 0 x0 px que es donde está la carga de las imágenes con el siguiente código:

Código ActionScript :

_root.mc_fondo.loadMovie("imatges/caixa/01.jpg")

- CAPA 3: Un mc vacio de 0 x 0 pc que es un contenedor vacio con el nombre "contenedor" donde se cargarán swf externos. Esta en la posición X: 0.0 e Y: 0.0
- CAPA 2: Es la capa que tiene el código para cargar swf externos dentro del mc vacio con el nombre "contenedor". El código que he puesto para que lo cargue a nivel 10 es: _root.contenedor.loadMovie("credits.swf",10);
- CAPA 1: El siguiente código para que me redimensione las imágenes de fondo que hay en el contenedor mc_fondo:

Código ActionScript :

Stage.scaleMode = "noScale"; 
//----------------------- 
var StageWidth:Number = 762; 
var StageHeight:Number = 510; 
function escalaFondo() 
{ 
   if (Stage.width > Stage.height) { 
      mc_fondo._width = Stage.width; 
      mc_fondo._yscale = mc_fondo._xscale; 
   } else { 
      mc_fondo._height = Stage.height; 
      mc_fondo._xscale = mc_fondo._yscale; 
   } 
   mc_fondo._x = (StageWidth - mc_fondo._width) / 2; 
   mc_fondo._y = (StageHeight - mc_fondo._height) / 2; 
} 
//----------------------- 
Stage.addListener(this); 
this.onResize = escalaFondo; 
escalaFondo(); 
//----------------------- 
stop();


Ahora la pregunta seria como hacerlo si el swf externo que quiero cargar, y que también esta en un escenario de 762x510px, siempre se quede arriba, abajo o en el centro... pero que cuando cambie de tamaño la pantalla siempre se mantenga en esa posición sin redimensionarse.

Tal como lo tengo ahora el escenario, si cambia de tamaño la pantalla, siempre está en el centro.

Muchas grácias Jorge.

Un saludo.


Miquel.

Por mikae

8 de clabLevel



 

firefox

 

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