Comunidad de diseño web y desarrollo en internet online

FLASHE ESCALAR A PANTALLA COMPLETA

Citar            
MensajeEscrito el 15 Oct 2008 03:08 pm
BUENAS....

ME GUSTARIA PODER ESCALAR UNA IMAGEN DE FONDA DENTRO DE UNA WEB Y NO SE HACERLO NECESITARIA AYUDA. UN EJEMPLO ES.... www.christianservice.com.

TAMBIEN NECESITARIA ABER COMO DEJAR ELEMENTOS SIEMPRE ARRIBA A LA DERECHA O ABAJO IZQUIERDA COMO EN LA WEB.

GRACIAS
ESPERO RESPUESTA

Por estaper

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Oct 2008 04:09 pm
tenes que usar un listener al stage, para ver cuando se modifica. si cambia le asignas la posicion segun las medidas del stage.
ej

var myListener:Object = new Object();
myListener.onResize = function() {
menu._x = Stage.width-416;
};
Stage.addListener(myListener);

Por da_vidricota

20 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Oct 2008 04:23 pm
pero esto lo pongo en el primer frame? lo he puesto y la imagen se queda en el centro de la ventana. yo quiero que la foto sea la misma tanta si la ventana esta a 1200x800 que a 800 x 600. me explico?

gracias

Por estaper

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 15 Oct 2008 05:21 pm
descargate este ejemplo que te doy

http://desarrollo.elpixel.com/elpixel/stage.fla

Por da_vidricota

20 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Oct 2008 07:12 am
si esto de colocar los elementos siempore arriba derecha o abajo centro, mas o menos lo se hacer.
LO K kiero saber es como hacer lo de la foto de foto. Mira esta web i mira las imagenes de fondo, tu vas canbiando el ancho y alto de la ventana del explorador i la foto se va haciendo pekeña. www.christianservice.com.

Por estaper

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Oct 2008 09:59 am
En el ejemplo que pones no se trata de una sola imagen, hay una en cada lado del navegador que se ajusta siempre al ancho, lo cual se puede hacer de varias formas..

Para redimensionar una imagen y que ocupe todo el fondo:


Código ActionScript :

stop();
Stage.scaleMode = 'noScale';
Stage.align = 'TL';
redim = new Object();
redim.onResize = redimensionar;
Stage.addListener(redim);
function redimensionar() {
   fondo._width = Stage.width;
   fondo._height = Stage.height;
}
redimensionar();


fondo es el mc que contiene la imagen

Si lo que quieres es reporicionar se hace de otra manera
Suerte! :wink:

Por Fusel

Claber

339 de clabLevel



Genero:Masculino  

Madrid (España)

safari
Citar            
MensajeEscrito el 16 Oct 2008 10:26 am
perfecto ahora me sale bien, pero hay un problema que a la hora de redimensionar, no lohace proporcionalmente y la imagen se distorsiona... alguien me podria pasar a un .fla a [email protected]

muchas gracias
gracias por responder

Por estaper

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 16 Oct 2008 11:43 am

Por Fusel

Claber

339 de clabLevel



Genero:Masculino  

Madrid (España)

safari
Citar            
MensajeEscrito el 16 Oct 2008 02:26 pm
fusel lo he mirado y no me sale por eso lo digo

gracias

Por estaper

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Oct 2008 07:45 am
alguien podria hacer el mismo ejemplo de www.christianservice.com, que el menu y los elementos esten siempre a derecha, izquierda o abajo y que la foto se escale proporcionalmente, alguien me podria pasar un fla por favor es urgente.

muchas gracias a todos

Por estaper

17 de clabLevel



 

firefox
Citar            
MensajeEscrito el 17 Oct 2008 07:25 pm
Pasar el fla no es la solución, debería interesarte aprender a hacerlo y no buscar alguien que te lo haga, si tienes algún problema en utilizar el tutorial postea donde tienes problemas o que parte no te sale y de seguro muchas personas te ayudarán en tu tarea, pero de la otra forma quizás no.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 20 Oct 2008 08:36 am
Hola, me acabo de registrar porque este tema me ha interesado mucho, y estoy intentando hacer algo parecido a la web que se indica.

Por el que se dice, creo que se quiere hacer una web a pantalla completa con imagen de fondo escalable uniformemente, (a partir de este tutorial Fondo bitmap que se ajusta al tamaño del navegador en Flash) y que además los elementos de la web se adapten al tamaño de pantalla, lo que se conoce como "diagramación líquida" (tutorial de ejemplo ).

Después de pelearme para juntar las 2 características he conseguido lo siguiente: web

Tamaño de mi lienzo: 800 x 600
Tamaño imagen de fondo: 1500 x 941

Si probais de reescalar la ventana del explorador, lo web se reescala pero la imagen de fondo llega un punto que no se adapta bien y aparecen blancos... Por lo que dice el tutorial de Fondo bitmap que se ajusta al tamaño del navegador en Flash, la imagen debe ser cuadrada y creo que es por eso que no se escala bien. De hecho, lo he probado con una imagen cuadrada y funciona bien, pero se pierde parte importante de la imagen. Por lo tanto, como debería modificar el código para que se reescale la imagen de fondo sin necesidad de que sea cuadrada?

Muchas gracias!

;-)

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox
Citar            
MensajeEscrito el 20 Oct 2008 11:04 am
@mllibre, postea el código que te quedó al final.

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 20 Oct 2008 02:24 pm
Ok, el código es básicamente el del ejemplo de diagramación líquida, y en la función rec que es la que se ejecuta cuando se redimensiona la ventana, he insertado el código del bitmap a pantalla completa. También he tenido que cambiar la coordenada x e y del mc fondo, porque si no no lo escalaba bien (se escalaba des del centro).

Ahí va el código, y gracias por colaborar:

Código :

// todos los clips ajustables deben tener su origen
// en su esquina superior inquierda
// ajustes iniciales -----------------
// no queremos que se cambie la escala de la película
Stage.scaleMode = "noScale";
// la peli se ajusta arriba a la izquierda
Stage.align = "TL";
// definimos el tamaño mínimo de la peli
ancho_minimo = 800;
alto_minimo = 600;
// en este array almaceno los clips que se tienen
// que ajustar al cambiar el tamaño de la pantalla
clips_ajustables = new Array();
// definimos el objeto que va a detectar el cambio de tamaño
myListener = new Object();
// asociamos el objeto al stage para detectar los cambios
// de tamaño del stage
Stage.addListener(myListener);
// ejecuto la función rec al cambiar el tamaño
myListener.onResize = rec;
function rec() {
   // definimos el alto y ancho que queda
   // después de reescalar, si no alcanza
   // los mínimos, asignamos éstos
   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();
   }
   if (Stage.width > Stage.height) {
      fondo._width = Stage.width;
      fondo._yscale = fondo._xscale;
    }else {
      fondo._height = Stage.height;
      fondo._xscale = fondo._yscale;
    }
   //fondo._x = (ancho_minimo - fondo._width) / 2;
   fondo._x = 0;
   //fondo._y = (alto_minimo - fondo._height) / 2;
   fondo._y = 0;
}
// resolución total
//altoTotal = System.capabilities.screenResolutionY;
//anchoTotal = System.capabilities.screenResolutionX;
//alto = stage.height;
//ancho = stage.width;
// con esta función implemento el método setTipo
// en todos los movieClip.
// Los valores para ajuste_x son "izquierda", "derecha" y "centrar"
// Los valores para ajuste_y son "arriba", "abajo" y "centrar"
// Los valores para ajuste_width son false y un número que
// indica el porcentaje de la anchura del clip respecto de la escena
// Los valores para ajuste_height son false y un número que
// indica el porcentaje de la altura del clip respecto de la escena
MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) {
   // estos ajustes nos dicen como se tiene modificar el
   // el clip al redimensionar
   this.ajuste_x = ajuste_x;
   this.ajuste_y = ajuste_y;
   this.ajuste_width = ajuste_width;
   this.ajuste_height = ajuste_height;
   // almaceno la posición y el tamaño
   // iniciales de los clips ajustables
   this.x0 = this._x;
   this.y0 = this._y;
   this.w0 = this._width;
   this.h0 = this._height;
   this.ajustePersonalizado = false;
   // almaceno el clip en el array
   clips_ajustables.push(this);
   this.alinear();
};
// función para alinear los clips en funcion de su tipo
MovieClip.prototype.alinear = function() {
   // si se le ha pasado el parámetro ajuste_width en la función
   // setAjuste, significa que debo ajustar el ancho del clip
   // cuando reescalo la pantalla
   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;
      }
   }
   // lo mismo con el ajuste del alto del clip
   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);
   }
   // si el clip tiene un ajuste especial ejecuto su función ajustar
   // que hemos definido en el onClipEvent(load) del clip
   if (this.ajustePersonalizado) {
      this.ajustar();
   }
};

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox
Citar            
MensajeEscrito el 20 Oct 2008 03:22 pm
Vaya tela, yo personalmente utilizo otra técnica dado que no me gusta que los textos se ajusten porque normalmente salen lineas demasiado largas y estéticamente quedan fatal, además de perjudicar en la lectura...


Código ActionScript :

var miListener:Object = new Object();
miListener.onResize = reSize;
function reSize(Void) {
new mx.transitions.Tween(abajo, "_y", mx.transitions.easing.Back.easeInOut, abajo._y, Stage.height-abajo._height, 20, false);
}
Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.addListener(miListener);



Este código hace que un mc llamado abajo se reposicione donde su nombre indica...
Además con easing!!! U_U

Por Fusel

Claber

339 de clabLevel



Genero:Masculino  

Madrid (España)

safari
Citar            
MensajeEscrito el 20 Oct 2008 07:26 pm
@mllibre, prueba algo como esto, es muy parecido a lo que tienes pero creo que obtendrás un diferente resultado:

Código ActionScript :

function rec():Void{
   
   //---Tamaño del fondo
   var maxWidth:Number = Stage.width;
   var maxHeight:Number = Stage.height;
   
   fondo._width = maxWidth;
   fondo._yscale = fondo._xscale;
   
   if(fondo._height < maxHeight){
      
      fondo._height = maxHeight;
      fondo._xscale = fondo._yscale;
      
   }
   
   //---Posición del fondo
   fondo._x = (Stage.width - fondo._width ) / 2;
   fondo._y = (Stage.height - fondo._height ) / 2;
   
}

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 20 Oct 2008 09:22 pm
fantástico :o , el resultado es el que quería.

muchas gracias.

:wink:

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox
Citar            
MensajeEscrito el 28 Abr 2009 02:54 pm
oOola

soi nuevo en el foro . :)

gracias el resultado fue el que quise

pero, hai un problemita:

como estoi haciendo una animacion, con objetos y toda la cosa, al reescalar el fondo, los movieclips, textos y botones se quedan del tamaño original(pequeños).

como puedo hacer para que tambien se reescalen proporcionalmente al fondo?
:crap:
Salu2

Por pumperhams

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 28 Abr 2009 02:57 pm
ups mi firma esta mal no le hagan caso XD

Por pumperhams

1 de clabLevel



 

msie7
Citar            
MensajeEscrito el 15 Abr 2010 11:16 am
tengo una duda que me ha surgido con el escalado de MC.

Tengo un MC que se compone de una animación dentro de una máscara y el escalado detecta los elementos que se salen del tamaño de esta máscara.

He intentado cargando al movieclip otro swf externo con máscara y lo escala bien en principio hasta que modificas la ventana del navegador y vuelve a detectar los objetos ocultos.

Por sergiojungle

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Abr 2010 09:00 am
sergiojungle, cuando tomas la propiedad "width" o "height" de un objeto te devolverá al ancho de todos los elementos que lo componen, estén enmascarados o no, lo que deseas hacer se logra mejor tomando el tamaño de la máscara dentro del MovieClip (la máscara debe ser un objeto accesible desde AS por ejemplo otro MovieClip)

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 19 Abr 2010 09:42 am
gracias no se me había ocurrido, ahora tengo que encontrar la forma de que se aplique el mismo factor de escala al contenido de la máscara

Por sergiojungle

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 19 Abr 2010 02:54 pm
Perdonad no se si ssoy muy cazurro me e estado fijando en vuestaras respuestas y no me sale yo tenglo el mismo problema tengo una galeria y al vargar las fotos depende de la resolucion de pantalla se me ve en un sitio u otro. Os paso mi script:


pic._x = ( Stage.width - pic._width ) / 2.4;
pic._y = ( pic_area._height - pic._height ) / 4 + pic_area._y;

import flash.filters.BlurFilter;
var quality:Number = 3;

stop();

pic.onEnterFrame = function()
{
if(this._alpha < 100 )
{
this._alpha+=8;
x_blur = 2*(20-this._alpha);
var filter:BlurFilter = new BlurFilter(x_blur, 0, quality);
var filterArray:Array = new Array();
filterArray.push(filter);
pic.filters = filterArray;
}
else
delete this.onEnterFrame;

trace("1st: "+this._alpha);

Por rafaied

6 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Abr 2010 05:28 pm
Prueba centrarlo al escenario, no soy un experto pero creo que esto es lo que hace que te aparezca cada vez en un sitio:

pic._x = ( Stage.width - pic._width ) / 2.4;
pic._y = ( pic_area._height - pic._height ) / 4 + pic_area._y;

Yo lo hice con esta funtion en AS3, el MC "pic" debe estar con el punto de origen en el centro para que funcione
function centerPic():void {
pic.x = stage.stageWidth / 2;
pic.y = stage.stageHeight / 2;
}

Por sergiojungle

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 20 Feb 2011 02:50 pm
FUSEL:
Yo tengo solucionado la re dimensión de mi fondo con diagramación líquida. Lo que quiero es que mi movieclip "mc" se adapte al centro pero con easing, me podrías dar una mano?

Código ActionScript :

Stage.scaleMode = 'noScale';  
Stage.align = 'TL';  
redim = new Object();  
redim.onResize = redimensionar;  
Stage.addListener(redim);  
function redimensionar() {  
   fondo._width = Stage.width;  
   fondo._height = Stage.height;  
   mc._x = (Stage.width - mc._width) / 2;  
   mc._y = (Stage.height - mc._height) / 2;  
}  
redimensionar(); 
miListener.onResize();

Por cristianarce

46 de clabLevel



Genero:Masculino  

Diseño & Programación

firefox
Citar            
MensajeEscrito el 23 Feb 2011 01:07 pm

Por elchininet

Claber

3921 de clabLevel

17 tutoriales

Genero:Masculino  

Front-end developer at Booking.com

firefox
Citar            
MensajeEscrito el 05 May 2011 01:11 am

elchininet escribió:

@mllibre, prueba algo como esto, es muy parecido a lo que tienes pero creo que obtendrás un diferente resultado:

Código ActionScript :

function rec():Void{
   
   //---Tamaño del fondo
   var maxWidth:Number = Stage.width;
   var maxHeight:Number = Stage.height;
   
   fondo._width = maxWidth;
   fondo._yscale = fondo._xscale;
   
   if(fondo._height < maxHeight){
      
      fondo._height = maxHeight;
      fondo._xscale = fondo._yscale;
      
   }
   
   //---Posición del fondo
   fondo._x = (Stage.width - fondo._width ) / 2;
   fondo._y = (Stage.height - fondo._height ) / 2;
   
}


aun no he podido hacer la diagramación liquida + el fondo escalado me di cuenta que el ajuste "TL" para la diagramacion liquida afecta el script para escalar el fondo podrías pasar el código completo, me salvarías la vida. saludos a todos

Por perceo1987

0 de clabLevel



Genero:Masculino  

diseñador grafico venezolano

chrome
Citar            
MensajeEscrito el 05 May 2011 06:04 am
perceo1987, este es un proyecto un poco antiguo (2008) casi no me acuerdo y no sé si funcionará al 100%.
He recuperado el archivo y este es el código que tengo en el primer fotograma:

Código ActionScript :

System.useCodepage = true;

// todos los clips ajustables deben tener su origen
// en su esquina superior inquierda
// ajustes iniciales -----------------
// no queremos que se cambie la escala de la película
Stage.scaleMode = "noScale";
// la peli se ajusta arriba a la izquierda
Stage.align = "TL";
// definimos el tamaño mínimo de la peli
ancho_minimo = 800;
alto_minimo = 600;
// en este array almaceno los clips que se tienen
// que ajustar al cambiar el tamaño de la pantalla
clips_ajustables = new Array();
// definimos el objeto que va a detectar el cambio de tamaño
myListener = new Object();
// asociamos el objeto al stage para detectar los cambios
// de tamaño del stage
Stage.addListener(myListener);
// ejecuto la función rec al cambiar el tamaño
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();
   }
   
      //---Tamaño del fondo 
   var maxWidth:Number = Stage.width; 
   var maxHeight:Number = Stage.height; 
    
   fondo._width = maxWidth; 
   fondo._yscale = fondo._xscale; 
    
   if(fondo._height < maxHeight){ 
       
      fondo._height = maxHeight; 
      fondo._xscale = fondo._yscale; 
       
   } 
    
   //---Posición del fondo 
   fondo._x = (Stage.width - fondo._width ) / 2; 
   fondo._y = (Stage.height - fondo._height ) / 2; 
}

MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) {
   // estos ajustes nos dicen como se tiene modificar el
   // el clip al redimensionar
   this.ajuste_x = ajuste_x;
   this.ajuste_y = ajuste_y;
   this.ajuste_width = ajuste_width;
   this.ajuste_height = ajuste_height;
   // almaceno la posición y el tamaño
   // iniciales de los clips ajustables
   this.x0 = this._x;
   this.y0 = this._y;
   this.w0 = this._width;
   this.h0 = this._height;
   this.ajustePersonalizado = false;
   // almaceno el clip en el array
   clips_ajustables.push(this);
   this.alinear();
};
// función para alinear los clips en funcion de su tipo
MovieClip.prototype.alinear = function() {
   // si se le ha pasado el parámetro ajuste_width en la función
   // setAjuste, significa que debo ajustar el ancho del clip
   // cuando reescalo la pantalla
   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;
      }
   }
   // lo mismo con el ajuste del alto del clip
   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);
   }
   // si el clip tiene un ajuste especial ejecuto su función ajustar
   // que hemos definido en el onClipEvent(load) del clip
   if (this.ajustePersonalizado) {
      this.ajustar();
   }
};


Y en el fotograma 2, llamo a la función que ejecuta el código:

Código ActionScript :

rec();


Espero que te sirva

Por mllibre

8 de clabLevel



 

web, seo, sem y social media

firefox
Citar            
MensajeEscrito el 07 May 2011 11:59 am
Hola buenas.

A ver estoy leyendo este post pero no me enteromuy bien porque copio y pego el/ los codigos y no consigo lo que quiero. ¿tengo que poner valores en algun sitio? como tamaño, posicon el archivo que uso de fondo etc etc..

Gracias un saludo.

Por pochoto

8 de clabLevel



 

firefox

 

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