Lydhøre layout

Denne veiledningen viser hvordan du oppretter responsiv oppsett ved hjelp av JavaScript. Legge til to bokser i biblioteket. Gjøre en rød og en grønn. Disse boksene er bare eksempler. Noen figurer eller objekter kan brukes.

Legge til boksene til redaktøren.

Ordne boksene, slik at de fyller den venstre og høyre siden. La en ramme rundt seg.

Dette er nå et eksempel på en webside med innhold på venstre og høyre side. Det vil se fint på en desktop web kikker eller en telefon i liggende modus. Dessverre vil ikke dette oppsettet fungere godt i stående modus. Heller, de to boksene må reduseres små til å passe eller utvidet til å fylle skjermen, og sidene av boksene avskåret.

Denne situasjonen er der forståelsesfull oppsett er nødvendig. I stående modus bør én boks flytte over hverandre. Gjør trenger vi å flytte boksene ved å bruke JavaScript. Dette betyr å slå av 'Bruke tidslinjen' for både bokser og en 'Brukerskript-ID'.

For å flytte boksene utenfor grensene av filmen, må vi slå av klipp i filmen egenskapene.

Det beste stedet å ordne figurene er i den 'I endre størrelse' filmen hendelse.

Funksjonene vi trenger er GetLeft, GetTop, GetWidth og GetHeight. Disse funksjonene gir grensene for det web kikker eller enhet ved hjelp av koordinatene til filmen. Når klippet er slått på, tilbake disse verdiene grensene av filmen. Hvis du bruker 'Ingen' film skala, GetLeft og GetTop vil alltid returnere 0 og kan ignoreres.

Først kan du ordne de to boksene så en fyller til venstre og den andre fyller høyre side.

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

Deretter vil vi legge en ramme av størrelse 10. Verdien 10 er ikke nødvendigvis i piksler, i samme skala av filmen. Bruk filmen skalere 'Ingen' for alt i piksler.

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

Til slutt vil vi teste om bredden på det web kikker eller enheten er mindre enn høyden. Når det skjer, omorganisere boksene loddrett.

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

Nå kan du se, hvis du endrer spillerens størrelse, vil de to boksene ordne seg selv automatisk. Disse to boksene kan lett erstattes med andre figurer og objekter. I dette eksemplet kan utvides for å håndtere mer komplekse oppsett.

Opprette en Game løkken

Utvider HTML

Denne dokumentasjonen var oversatt fra engelsk, bruke en online oversetter. Vi beklager hvis du finner noen feil. Hvis du ønsker å hjelpe oss å gjøre rettelser. Det er en oversettelse redaktør i Hippani Animator (i Hjelp-menyen). Vi gir ut ledig eksportbevilling keys til noen som retter opp mer enn 100 uttrykk. Kontakt oss for mer informasjon.