Was ist Hype?
Hype ist ein leistungsstarkes HTML5-Animationstool für den Mac. Designer können damit interaktive, auffällige Animationen erstellen, die exportiert und in Webseiten eingebettet werden können.
Blocs ist für die Zusammenarbeit mit Hype optimiert und bietet einen optimierten Design-Workflow. Die folgenden zwei kostenlosen benutzerdefinierten Brics sollte in installiert werden Blocs bevor Sie fortfahren.
Bitte beachten Sie, dass für diesen Workflow Folgendes erforderlich ist Blocs 3.4.3 Minimum und Hype 4.0.3 Minimum.
Echtzeit-Hype-Projektvorschau
Blocs unterstützt die Echtzeitvorschau eines derzeit geöffneten Hype-Projekts, sodass Designer HTML5-Animationen in Hype erstellen und sehen können, wie sie in einem aussehen Blocs Projekt ohne die Notwendigkeit, sie zu kompilieren und zu exportieren, liefert dies einen unglaublich schnellen, effizienten und leistungsstarken Animations-Webdesign-Workflow.
Führen Sie die folgenden Schritte aus, um eine Vorschau der aktuell geöffneten Hype-Animationssequenz in anzuzeigen Blocs.
1.Fügen Sie den Hype Preview Bric zu Ihrer Seite hinzu, indem Sie Bric Bar.
2. Drücken Sie in Hype die Vorschau-Taste und wählen Sie Blocs aus den verfügbaren Optionen. Die Hype-Vorschau Bric innerhalb Blocs zeigt nun die aktuelle Hype-Animationssequenz an.
Vorschau der Ausgabemodi
Die Hype-Vorschau Bric verfügt über zwei Ausgabemodi, Vorschau und leben.
Vorschau Modus
Der Vorschaumodus gibt die aktuelle Animationssequenz so aus, wie sie nach dem Exportieren und Einbetten in eine Seite angezeigt wird. Dieser Modus ist standardmäßig aktiviert.
Live-Modus
Der Live-Modus zeigt einen Echtzeitspiegel der tatsächlichen Hype-Entwurfsphase innerhalb des Blocs Designumgebung. Wenn Sie beispielsweise Hype so einstellen, dass die aktuelle Animationssequenz mithilfe der Steuerelemente der Hype-Zeitleiste abgespielt und geloopt wird, wird dieselbe Ausgabe in angezeigt Blocs.
Bitte beachten Sie, dass die Hype-Vorschau Bric nur für die Erstellung und Prüfung Ihrer Hype-Animationssequenz vorgesehen ist. Wenn Sie Ihre Website mit der endgültigen Hype-Animation exportieren und hosten müssen, verwenden Sie die Hype Embed Bric um Ihre Hype-Sequenz für die Produktion hinzuzufügen.
Betten Sie eine Hype-Animation ein
Einbetten einer Hype-Sequenz in eine Seite in Blocs ist unglaublich einfach.
1. Exportieren Sie in Hype Ihre Sequenz, indem Sie auswählen Datei> Als HTML5 exportieren> Ordner… aus dem Hauptanwendungsmenü. Dadurch wird ein Verzeichnis erstellt, das alle erforderlichen Ressourcen für Ihre Hype-Animation enthält. Sie sollten beachten, dass der Verzeichnisname mit endet .Hyperressourcen, Zum Beispiel: Ihr_Projektname.hyperesources
2. Ziehen Sie einfach den exportierten Hype .Hyperressourcen Verzeichnis aus dem MacOS Finder auf die Blocs Design Leinwand. Dadurch werden alle Ressourcen für die Hype-Animationssequenz zur aktuellen hinzugefügt Blocs Projekt als Projektanhänge.
3. Fügen Sie den Hype Embed Bric zu Ihrer Seite hinzu, indem Sie Bric Bar. Mit dem Hype Bric ausgewählt auf der Blocs Leinwand entwerfen, navigieren Sie zu Dropdown-Menü im Seitenleisteninspektor beschriftet Hype-Name und wählen Sie die Hype-Animationssequenz aus, die hier angezeigt werden soll.
Jetzt wenn du Vorschau Ihres Projekts . Blocs Ihre Hype-Animation wird angezeigt.
Bitte beachten Sie, dass eine einzelne Hype-Animationssequenz nur einmal auf einer Seite gerendert werden kann. So fügen Sie jeder Seite in a eine Hype-Animationssequenz hinzu Blocs Projekt, binden Sie einfach den Hype Embed Bric in ein Bloc das ist in einem der Projekte verschachtelt Globale Bereiche.
Neu bei Hype
Wenn Sie Hype noch nicht kennen und Hilfe bei der Erstellung von Inhalten suchen, die sich entsprechend skalieren lassen, empfehlen wir Ihnen, die folgenden Informationen aus der Hype-Dokumentation zu lesen.