| Contenido |
|
| Creando un Bucle de Juego | Extender el HTML |
Diseños responsivos
Este tutorial muestra cómo crear diseños sensibles mediante JavaScript. Añadir dos cajas a la biblioteca. Hacer uno rojo y otro verde. Estas cajas son sólo ejemplos. Podrían utilizarse cualquier formas u objetos.
Agregue las cajas al editor.
Organizar las cajas, así que llenan los lados izquierdos y derecho. Dejar un borde alrededor de ellos.
Esto es ahora un ejemplo de una página web con contenido en los lados izquierdos y derecho. Se verá bien en un navegador web de escritorio o un teléfono en modo horizontal. Desafortunadamente, esta disposición no funciona bien en modo vertical. O bien, las dos cajas deben ser reducidas pequeña como para caber, o ampliadas para llenar la pantalla, y cortaron los lados de las cajas.
Esta situación es donde se necesitan diseños responsivos. En el modo de retrato, debe mover una caja sobre el otro. Para hacer esto, tenemos que mover las cajas mediante JavaScript. Esto significa apagar 'Usar Línea de Tiempo' para cajas y configuración de un 'Script ID'.
Para mover las cajas fuera de los límites de la película, es necesario apagar clip en las propiedades de película.
Es el mejor lugar para organizar las cajas es en el evento de película 'Al Escalar'.
Las funciones que necesitamos son GetLeft, GetTop, GetWidth y GetHeight. Estas funciones devuelven los límites del navegador web o dispositivo utilizando las coordenadas de la película. Cuando se activa el clip, estos valores devuelven los límites de la película. Si usted está usando el 'Ninguno' en la escala de película, GetLeft y GetTop siempre devuelven 0 y puede ser ignorados.
Primero vamos a organizar las dos cajas así uno llena el lado izquierdo y el otro llena del lado derecho.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
A continuación, vamos a añadir un borde de tamaño 10. Este valor de 10 no es necesariamente en píxeles, que es en la misma escala de la película. Uso de la película 'None' escala para que todo ser en píxeles.
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
Finalmente lo probaremos para ver si el ancho del navegador web o dispositivo es inferior a la altura. Cuando eso sucede, reorganizar los cuadros verticalmente.
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
Ahora puede ver, si cambia el tamaño del reproductor, las dos cajas se organizará automáticamente. Estas dos cajas pueden reemplazarse fácilmente con otras formas y objetos. Este ejemplo puede ser ampliado para manejar diseños más complejos.
| Creando un Bucle de Juego | Extender el HTML |