| Indhold |
|
| At skabe en spil-loop | Udvide HTML'en |
Responsive Layouts
Tilføj 'Rektangel' og 'Cirkel' til editor ligegyldigt hvor.
Indstil 'Cirklen' til at starte i ramme 0 og blive usynlige i ramme 11.
Indstil 'Rektanglen' til at starte i ramme 20 og blive usynlige i ramme 31.
Føj felterne til editoren.
Arranger boksene, så de fylder henholdsvis den venstre og højre side. Lav en kant rundt om dem.
Det er nu et eksempel på en webside med indhold på de venstre og højre sider. Det vil se fint ud på en desktop web-browser eller en telefonen i landskabs-tilstand. Desværre, fungerer dette layout ikke godt i portrættilstand. Enten, skal de to bokse være meget små for at passe ind, eller udvidet for at fylde skærmen, så siderne af boksene bliver skåret af.
Det er denne situation, hvor der er behov for responsive layouts. I portrættilstand, skal én boks flytte over den anden. For at gøre dette, skal vi flytte boksene ved hjælp af JavaScript. Det betyder, 'Bruge tidslinjen' skal fjernes fra begge bokse og der indstilles et 'Script-ID'.
For at flytte kasser uden for grænserne af filmen, skal vi slukke 'klip elementer' egenskaberne.
Det bedste sted at arrangere boksene er i filmbegivenheden 'På Resize' .
De funktioner, vi har brug for er GetLeft, GetTop, GetWidth og GetHeight. Disse funktioner angiver webbrowserens eller apparatets grænseområde ved hjælp af koordinaterne for filmen. Når klip er slået til, returnerer disse værdier grænseområderne for filmen. Hvis du bruger 'None' filmskalaen, vil GetLeft og GetTop altid returnere 0 og kan ignoreres.
Lad os først arrangere de to bokse, så en fylder venstre side og den anden fylder højre side.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Dernæst vil vi tilføje en kant af størrelsen 10. Denne værdi af 10 er ikke nødvendigvis i pixel, det er i den samme skala som filmen. Brug filmen skaleres 'Ingen' så alt bliver i pixels.
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);
Endelig vil vi teste for at se, om bredden af web-browseren eller enheden er mindre end højden. Når det sker, omarranger boksene lodret.
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);
}
Nu kan du kan se, at hvis du ændrer størrelsen på spilleren, vil de to bokse arrangere sig selv automatisk. Disse to bokse kan nemt udskiftes med andre figurer og objekter.Dette eksempel kan udvides til at håndtere mere komplekse layouts.
| At skabe en spil-loop | Udvide HTML'en |