Wat is hype?
Hype is een krachtig HTML5-animatietool voor de Mac. Hiermee kunnen ontwerpers interactieve, opvallende animaties maken, die kunnen worden geëxporteerd en in webpagina's kunnen worden ingesloten.
Blocs is geoptimaliseerd om samen te werken met Hype en levert een gestroomlijnde ontwerpworkflow. De volgende twee gratis aangepaste Brics moet worden geïnstalleerd in Blocs voordat je doorgaat.
Let op, deze workflow vereist Blocs 3.4.3 minimum en Hype 4.0.3 minimum.
Realtime preview van hype-projecten
Blocs ondersteunt realtime previewing van een momenteel open Hype-project, waardoor ontwerpers HTML5-animaties in Hype kunnen maken en zien hoe ze eruitzien in een Blocs project zonder de noodzaak om ze te compileren en te exporteren, levert dit een ongelooflijk snelle, efficiënte en krachtige webontwerpworkflow voor animaties op.
Gebruik de volgende stappen om een voorbeeld van de momenteel geopende Hype-animatiereeks te bekijken in Blocs.
1. Voeg de Hype Preview Bric toe aan uw pagina met behulp van de Stenen bar.
2. Druk in Hype op de voorbeeldknop en selecteer Blocs van de beschikbare opties. De Hype preview Bric binnen Blocs zal nu de huidige Hype-animatiereeks weergeven.
Voorbeeld uitvoermodi
De Hype preview Bric heeft twee uitvoermodi, Preview en leven.
Voorbeeldmodus
In de voorbeeldmodus wordt de huidige animatiereeks weergegeven zoals deze eruit zou zien als deze eenmaal is geëxporteerd en in een pagina is ingesloten. Deze modus is standaard ingeschakeld.
Live-modus
Live-modus toont een realtime spiegel van de daadwerkelijke Hype-ontwerpfase in het Blocs ontwerpomgeving. Als u bijvoorbeeld Hype instelt om de huidige animatiereeks af te spelen en te herhalen met behulp van de Hype-tijdlijnbesturingen, wordt dezelfde uitvoer weergegeven in Blocs.
Let op, de Hype preview Bric is alleen bedoeld voor gebruik terwijl u uw Hype-animatiesequentie maakt en test. Wanneer u uw website met de definitieve Hype-animatie wilt exporteren en hosten, gebruikt u de Hype Embed Bric om uw hype-reeks toe te voegen voor productie.
Embed een hype-animatie
Een hype-reeks insluiten in een pagina in Blocs is ongelooflijk eenvoudig.
1. Exporteer uw reeks in Hype door te selecteren Bestand> Exporteren als HTML5> Map… vanuit het hoofdtoepassingsmenu. Hiermee wordt een map gemaakt die alle benodigde bronnen voor uw Hype-animatie bevat. U zou moeten opmerken dat de directorynaam eindigt op .hyperbronnen, bijvoorbeeld: uw_projectnaam.hyperesources
2. Sleep gewoon de geëxporteerde hype .hyperbronnen directory van de MacOS Finder naar de Blocs ontwerp canvas. Hiermee worden alle bronnen voor de Hype-animatiereeks toegevoegd aan de huidige Blocs project als projectbijlagen.
3. Voeg de Hype Embed Bric toe aan uw pagina met behulp van de Stenen bar. Met de Hype Bric geselecteerd op de Blocs design canvas, navigeer naar het Drop-down menu in de zijbalkinspecteur, gelabeld Hype Naam en selecteer de Hype-animatiereeks die u hier wilt weergeven.
Nu wanneer u voorbeeld van uw project binnen Blocs uw Hype-animatie wordt weergegeven.
Houd er rekening mee dat een enkele Hype-animatiereeks maar één keer op een pagina kan worden weergegeven. Om een Hype-animatiereeks toe te voegen aan elke pagina in een Blocs project, voeg gewoon de Hype embed Bric toe aan een Bloc dat is genest in een van de projecten Wereldwijde gebieden.
Nieuw bij Hype
Als u nieuw bent bij Hype en hulp zoekt bij het maken van inhoud die responsief kan worden geschaald, raden we u aan het volgende te lezen in de Hype-documentatie.