Full browser flash y search integrado

25 09 2007

Esta semana comenzó reunidos con nuestros auspiciadores compartimos unas ideas para el uso del mapa; llevábamos un ‘killer idea‘ que les encantó. Con esta lograríamos que los usuarios usen el mapa, creen un ’social graph’ involucrando sus amigos, incluimos sites como Q2, facebook y myspace para compartir contenido y empujamos la interacción de la marca en una manera divertida. Esperamos que la idea pueda launch para diciembre, un mes después del launch oficial de Wifiwyg. También trabajamos en la integración del search asíncrono a flash y una técnica que hace que el flash player expanda a todo el browser window, el internet le llama ‘full browser flash‘ y aunque hay varias formas de efectuarla, esta es la primera vez que la hemos hecho tan bien. Viendo el mapa en una pantalla de 61″ (1920 x 1180), en un dual monitor setup de (2560 x 1024) y en mi laptop de (1280 x 800) notamos que al fin hemos talao la técnica. Pueden ver el mapa full-browser y con el search integrado aquí. Todavía no hemos subido toda la base de datos, pero de nuevo, pueden hacer búsquedas como ‘azul’ para ver todos los edificios azules. Aqui una lista de referencias para

Notamos que la mejor manera de hacerlo es con elementos dentro de flash que cambien de posición con el resizing del canvas (player) en este caso el browser. Aquí esta el código que usamos para Flash:/*LAYOUT*/
// ***Stage aligned top left
Stage.align = "TL";
// *** Stop the stage from scaling with the browser window.
Stage.scaleMode = "noScale";
stop ();
// initiate postitions and scaling values for objects
searchBox._x = (Stage.width)/2
searchBox._y = 60;
map.setSize(Stage.width, Stage.height);
//create a listner that checks to see if the browser window is resized
sizeListener = new Object();
sizeListener.onResize = function() {
// change movieclip properties when the window is resized.
searchBox._y = 60;
searchBox._x = (Stage.width)/2;
map.setSize(Stage.width, Stage.height);
};
Stage.addListener(sizeListener);
Y esto para el CSS: body {
height: 100%;
width: 100%;
margin: 0;
}


Actions

Informations

Leave a comment

You can use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>