Machete de receptiv

Acest ghid demonstrează cum pentru a crea machete receptiv folosind JavaScript. Adauga doua cutii de la biblioteca. Face unul roşu şi unul verde. Aceste cutii sunt doar exemple. Orice forme sau obiecte ar putea fi folosite.

Adauga cutii de editor.

Aranjați casetele, astfel încât acestea umple părţile stângă şi dreaptă. Lăsaţi-o bordură în jurul lor.

Acest lucru este acum un exemplu de o pagina web cu conţinut de pe laturile de stânga şi din dreapta. Se va arata bine pe un browser desktop web sau un telefon în modul peisaj. Din păcate, acest aspect nu va funcţiona bine în modul portret. Fie, două cutii trebuie să fie diminuat mici pentru a se potrivi, sau extins pentru a umple ecranul, şi părţi ale cutii tăiate.

Această situaţie este în cazul în care sunt necesare receptiv machete. În modul portret, o cutie trebuie mutat deasupra celeilalte. Pentru a face acest lucru, avem nevoie pentru a muta cutii folosind JavaScript. Acest lucru înseamnă dezactivarea 'Utilizează cronologia' pentru ambele cutii şi setarea un 'Script ID'.

Pentru a muta cutii in afara limitele de film, avem nevoie pentru a opri clip în proprietăţile de film.

Cel mai bun loc pentru a aranja cutiile este în 'Pe redimensionare' film eveniment.

Funcţiile pe care avem nevoie sunt GetLeft, GetTop, GetWidth şi GetHeight. Aceste funcţii da limitele de browser-ul web sau dispozitiv folosind coordonatele de film. Atunci când clipul este pornit, aceste valori reveni limitele de film. Dacă utilizaţi "nici una" scară de film, GetLeft şi GetTop întotdeauna va întoarce 0 si poate fi ignorat.

În primul rând vă permite să aranja două cutii, astfel încât unul completează partea stângă şi alte completează partea dreaptă.

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

Apoi, vom adăuga un chenar de dimensiune 10. Această valoare de 10 nu este neapărat în pixeli, este în aceeaşi scală de film. Utilizarea filmul "Nici una" scară pentru tot pentru a fi în pixeli.

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

În cele din urmă vom testa pentru a vedea dacă lăţimea de web browser-ul sau dispozitivul este mai mică decât înălţimea. Când se întâmplă asta, rearanja cutii vertical.

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

Acum puteţi vedea, dacă redimensionați jucător, două cutii va se aranja automat. Aceste două cutii cu uşurinţă pot fi inlocuite cu alte forme şi obiecte. Acest exemplu poate fi extins pentru a gestiona aspectele mai complexe.

Crea o buclă de joc

Extinderea HTML

Această documentaţie a fost tradus din limba engleză, folosind un translator online. Ne cerem scuze dacă găsiţi greşeli. Dacă doriţi pentru a ne ajuta face corecturi. Există un editor de traducere în Hippani Animator (în meniul Ajutor). Vom da cheile de licenţă gratuită pentru oricine care corecteaza mai mult de 100 de fraze. Va rugam sa ne contactati pentru mai multe detalii.