Responsive Layouts

Hippani Animator Ein kurzer Rundgang Lernprogramme

Erste Schritte Blinkendes Dreieck Verwendung von Zeitplänen Hinzufügen von Schaltflächen Bildtasten Skript in der Zeitleiste Abspielen in umgekehrter Richtung Hinzufügen von mehr Szenen Webseiten öffnen Verbinden von zwei Filmen Textschatten Bild-Schatten Übergänge verwischen Bilder ausschneiden Wellen Erstellen von Masken Wiederholen einer Schleife Mithilfe von Pivot-Punkte Arbeiten mit Ebenen Verständnis-Skript-ID Hinzufügen eines YouTube-Videos Steuerung der Zeitachse Hinzufügen von Audio Hinzufügen von JavaScript Erfassung der Tastatur Arbeiten mit Eingabefeldern und Formularen Frames mit JavaScript Steuern Halten der Tasten Erstellen einer Spiel-Schleife Responsive Layouts Erweitern des HTML-Codes Telefon-Anwendungen erstellen XML-Datenbanken Veröffentlichung auf WordPress Veröffentlichung auf Facebook Video-Tutorials

Erscheinungsbild

Menüs und Symbolleisten Einstellungen Zeitleiste Bibliothek Editor Player Exportieren Grafik-Editor Zeichnung-Editor Schriften Radlader

Animation

Film Szenen Frame

Objekte JavaScript Übersetzungseditor Lizenz Versionsvergleich Was ist neu

Erstellen einer Spiel-Schleife

Erweitern des HTML-Codes

Dieses Lernprogramm veranschaulicht das responsive Layouts mit Hilfe von JavaScript zu erstellen. Zwei Kästen zur Bibliothek hinzufügen. Stellen Sie eine rote und eine grüne. Diese Felder sind nur Beispiele. Alle Formen oder Objekte könnte verwendet werden.

Die Felder in den Editor einfügen.

Ordnen Sie die Felder, so sie die linken und rechten Seiten füllen. Lassen Sie einen Rahmen um sie herum.

Dies ist nun ein Beispiel einer Webseite mit Inhalten auf der linken und rechten Seiten. Es sieht gut auf einem desktop-Web-Browser oder ein Telefon im Querformat. Leider funktioniert dieses Layout auch im Portrait-Modus nicht. Entweder, die zwei Felder müssen verkleinert, klein, Sie passen oder erweiterte, den Bildschirm zu füllen, und die Seiten der Boxen abgeschnitten.

Diese Situation ist, wo responsive Layouts benötigt werden. Im Portrait-Modus sollte ein Kästchen übereinander bewegen. Hierzu müssen wir die Boxen, die mit JavaScript verschieben. Dies bedeutet ausschalten 'Zeitleiste verwenden' für Boxen und Einstellung eines 'Skript-ID'.

Um die Felder außerhalb der Grenzen des Films zu gelangen, müssen wir Clip in den Filmeigenschaften deaktivieren.

Der beste Ort, um die Felder anordnen ist der 'Auf Resize' Film-Ereignis.

Die Funktionen, die wir brauchen sind GetLeft, GetTop, GetWidth und GetHeight. Diese Funktionen geben die Begrenzungen des der Web-Browser oder das Gerät mit den Koordinaten des Films. Wenn Clip aktiviert ist, Rückgabewerte diese der Begrenzungen des Films. Verwenden Sie die Option"' Film-Skala, GetLeft und GetTop gibt immer 0 zurück und kann ignoriert werden.

Erstens können die beiden Felder zu ordnen, also einer der linken Seite füllt und die andere der rechten Seite füllt.

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

Danach fügen wir einen Rahmen der Größe 10. Der Wert 10 ist nicht unbedingt in Pixel, es ist in der gleichen Größenordnung des Films. Verwendung der Film scale 'None' für alles in Pixel sein.

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

Schließlich werden wir testen, um festzustellen, ob die Breite des der Web-Browser oder das Gerät kleiner als die Höhe ist. Wenn das passiert, ordnen Sie die Felder vertikal.

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

Jetzt Sie sehen können, wenn Sie den Player verkleinern, werden die beiden Felder selbst automatisch anordnen. Diese beiden Felder können leicht mit anderen Formen und Objekte ersetzt werden. In diesem Beispiel kann erweitert werden, um komplexere Layouts zu behandeln.

Erstellen einer Spiel-Schleife

Erweitern des HTML-Codes

Diese Dokumentation wurde aus dem englischen, mit einem online-Übersetzer übersetzt. Wir entschuldigen uns, wenn Sie irgendwelche Fehler finden. Wenn Sie uns Korrekturen helfen möchten. Gibt es ein Übersetzungseditor in Hippani Animator (im Menü "Hilfe"). Kostenlose Lizenz-Schlüssel geben wir jedem, der mehr als 100 Sätze korrigiert. Bitte kontaktieren Sie uns für weitere Details.