Responsieve lay-outs

Deze tutorial legt uit hoe maak responsieve lay-outs met behulp van JavaScript. Twee vakken aan de bibliotheek toevoegen. Maak een rode en een groene. Deze vakken zijn slechts voorbeelden. Alle shapes of objecten kunnen worden gebruikt.

De vakken toevoegen aan de editor.

De vakken, snel ordenen zodat ze de linker en rechter zijden vullen. Laat een grens om hen heen.

Dit is nu een voorbeeld van een webpagina met inhoud aan de linker en rechter zijde. Het ziet er prima op een desktop webbrowser of een telefoon in landscape-modus. Helaas, deze lay-out werkt niet goed in portretmodus. Ofwel, de twee vakken moeten zijn gekrompen kleine te passen, of uitgevouwen om het scherm te vullen, en de zijkanten van de vakken afgesneden.

Deze situatie is waar responsieve lay-outs nodig zijn. In portretmodus, moet één vak verplaatsen boven de andere. Om dit te doen, moeten we de vakken met behulp van JavaScript verplaatsen. Dit betekent dat het uitschakelen van 'Gebruik de tijdlijn' voor zowel de dozen en de instelling van een 'Script-ID'.

Om te de vakken buiten de grenzen van de film verplaatsen, moeten we uitschakelen van de clip in de filmeigenschappen.

De beste plaats om te regelen van de vakken is in de 'Op grootte' film gebeurtenis.

De functies die we nodig hebben zijn GetLeft, GetTop, GetWidth en GetHeight. Deze functies geven de grenzen van de webbrowser of het apparaat met behulp van de coördinaten van de film. Wanneer de clip is ingeschakeld, weer deze waarden de grenzen van de film. Als u gebruikmaakt van de 'geen' film schaal, GetLeft en GetTop levert altijd 0 en kan worden genegeerd.

Eerst laat de twee vakken snel ordenen zodat een de linker kant vult en de andere de rechterkant vult.

BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

Vervolgens zullen we het toevoegen van een rand van grootte 10. Deze waarde van 10 is niet noodzakelijkerwijs in pixels, is het in dezelfde schaal van de film. Gebruik de film schalen 'Geen' voor alles te worden in pixels.

var Border=10;
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);

Tot slot zullen we testen om te zien als de breedte van de webbrowser of het apparaat minder dan de hoogte is. Wanneer dat gebeurt, de vakken verticaal herschikken.

var Border=10;
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 u zien kunt, als u het formaat van de speler wijzigt, zal de twee vakken zichzelf automatisch schikken. Deze twee vakken kunnen gemakkelijk worden vervangen door andere vormen en objecten. In het volgende voorbeeld kan worden uitgebreid voor het afhandelen van meer complexe lay-outs.

Creëren van een spel lus

Uitbreiding van de HTML-code

Deze documentatie is vertaald uit het Engels, met behulp van een online vertaler. Wij verontschuldigen ons als u eventuele fouten kunt vinden. Als u helpen ons correcties aan te brengen willen zou. Er is een vertaling editor in Hippani Animator (In het helpmenu). We geven gratis licentie sleutels aan iedereen die meer dan 100 zinnen corrigeert. Neem contact met ons op voor meer informatie.