Lyhörd layouter

Denna handledning visar hur du skapar lyhörd layouter med hjälp av JavaScript. Lägg till två lådor i biblioteket. Göra en röd och en grön. Dessa lådor är bara exempel. Alla figurer eller objekt kunde användas.

Lägg rutorna till redaktören.

Ordna rutorna så de fyller de vänstra och högra sidorna. Lämna en kant runt dem.

Detta är nu ett exempel på en webbsida med innehållet på de vänstra och högra sidorna. Det kommer att se bra på skrivbordet webbläsare eller en telefon i liggande läge. Tyvärr kommer inte denna layout fungerar väl i stående läge. Antingen, två lådor måste krympas liten för att passa eller utvidgas till att fylla skärmen, och sidorna av rutorna avskuren.

Denna situation är där lyhörd layouter behövs. I stående läge, bör en ruta flytta över den andra. För att göra detta, måste vi flytta rutorna med hjälp av JavaScript. Detta innebär att stänga av 'Använda tidslinjen' för både lådor och en 'Skript-ID'.

För att flytta rutorna utanför gränserna för filmen, måste vi stänga av klipp i filmegenskaper.

Det bästa stället att ordna rutorna är i den 'På Ändra storlek' film händelse.

De funktioner vi behöver är GetLeft, GetTop, GetWidth och GetHeight. Dessa funktioner ger gränserna för webbläsare eller enhet med koordinaterna för filmen. Dessa värden återgå när klippet är påslagen, gränserna för filmen. Om du använder den 'ingen' film skala, GetLeft och GetTop returnerar alltid 0 och kan ignoreras.

Först kan ordna två rutorna så en fyller den vänstra sidan och den andra fyller till höger.

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

Därefter lägger vi till en gräns av storlek 10. Detta värde på 10 är inte nödvändigtvis i pixlar, det är i samma skala av filmen. Använd filmen skala "Ingen" för allt ska vara i pixlar.

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);

Slutligen kommer vi att testa för att se om bredden på den webbläsare eller enhet som är mindre än höjden. När det händer, ordna rutorna vertikalt.

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 kan du se, om du ändrar storlek på spelaren, kommer de två rutorna ordnar sig automatiskt. Dessa två lådor kan lätt ersättas med andra former och objekt. Detta exempel kan utökas för att hantera mer komplexa layouter.

Skapa en spelet Loop

Utvidga HTML

Denna dokumentation var översatt från engelska, använder en online översättare. Vi ber om ursäkt om du hittar några fel. Om du vill hjälpa oss att göra korrigeringar. Det finns en översättning editor i Hippani Animator (i Hjälp-menyn). Vi ger ut gratis licensnycklar till vem som helst som korrigerar mer än 100 fraser. Kontakta oss för mer information.