Layout reattivo

Questa esercitazione viene illustrato come creare layout reattivo utilizzando JavaScript. Aggiungere due scatole alla libreria. Fare uno rosso e uno verde. Queste scatole sono solo esempi. Potrebbero essere utilizzati qualsiasi forme o oggetti.

Aggiungere le scatole all'editor.

Disporre le scatole, quindi riempire i lati sinistro e destro. Lasciare un bordo intorno a loro.

Questo è un esempio di una pagina web con contenuto sui lati sinistro e destro. Essa sarà bene su un browser web desktop o un telefono in modalità landscape. Purtroppo, questo layout non funziona bene in modalità portrait. Sia, le due caselle devono essere ridotto piccolo da stare, o espanso a riempire lo schermo, e tagliare i lati delle scatole.

Questa situazione è dove sono necessari layout reattivo. In modalità portrait, una scatola dovrebbe muoversi sopra l'altra. Per fare questo, abbiamo bisogno di spostare le caselle utilizzando JavaScript. Questo significa che lo spegnimento 'Utilizza Timeline' per entrambe le scatole e impostazione di un 'Script ID'.

Per spostare le caselle di fuori dei limiti del film, dobbiamo spegnere le clip nelle proprietà del film.

Il posto migliore per organizzare le scatole è nel 'Su Resize' evento di film.

Le funzioni che ci serve sono GetLeft, GetTop, GetWidth e GetHeight. Queste funzioni danno i limiti del web browser o dispositivo utilizzando le coordinate del film. Quando la clip è acceso, questi valori restituiscono i limiti del film. Se si utilizza il 'nessuno' scala di film, GetLeft e GetTop restituiscono sempre 0 e può essere ignorato.

In primo luogo permette di organizzare due scatole così uno riempie il lato sinistro e l'altro sul lato destro si riempie.

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

Successivamente, aggiungiamo un bordo di dimensioni 10. Questo valore 10 non è necessariamente in pixel, è nella stessa scala del film. Uso il film 'Nessuno' bilancia per tutto sia in pixel.

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

Infine ci metterà alla prova per vedere se la larghezza del web browser o dispositivo è inferiore all'altezza. Quando ciò accade, ridisporre le finestre verticalmente.

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

Ora è possibile vedere, se si ridimensiona il giocatore, le due caselle si organizzerà automaticamente. Queste due caselle possono essere facilmente sostituite con altri oggetti e forme. Questo esempio può essere espansa per gestire layout più complessi.

Creare un ciclo per il gioco

Estendendo l'HTML

Questa documentazione è stato tradotto dall'inglese, utilizzando un traduttore online. Ci scusiamo se trovate eventuali errori. Se volete aiutarci a fare le correzioni. C'è un editor di traduzione in Hippani Animator (nel menu aiuto). Noi diamo le chiavi di licenza gratuita a chiunque corregge più di 100 frasi. Si prega di contattarci per maggiori dettagli.