- - Maak webanimatie- en interactieontwerpen in HTML 5 met Adobe Edge

Maak webanimatie- en interactieontwerpen in HTML 5 met Adobe Edge

De nieuwste webstandaarden, HTML5 en CSS3 inin combinatie met JavaScript hebben de tijd en moeite die nodig is om websites met grafische, tekst- en animatierijke websites te maken, echt verminderd. Met behulp van de mogelijkheden van HTML5 hoeft u niet langer handmatig code te schrijven voor het insluiten van multimedia-inhoud, terwijl CSS3 uw web-UI-elementen flexibeler, robuuster en belangrijker gemakkelijker te hanteren maakt. Als u op zoek bent naar een tool voor webontwerp waarmee u maximaal kunt profiteren van de nieuwste webstandaarden zonder dat u gedwongen bent om handmatig code in te voeren voor elk UI-element, de vers gelanceerde Adobe Edge is waarschijnlijk precies wat je nodig hebt.

Adobe Edge is speciaal geschreven voorvisuele, web- en interactie-ontwerpers die vaak worstelen met het maken van webbewegingen en geanimeerde inhoud met behulp van HTML5-, CSS3- en JavaScript-webstandaarden. Het is eigenlijk een ontwerptool voor webbewegingen en interactie voor het maken van geanimeerde inhoud met HTML5, CSS3 en JavaScript. Hoewel het alle basistools bevat om de web-UI-elementen te maken, bewerken, aanpassen en ontwerpen, biedt het een intuïtieve animatiechoreograaf om eenvoudig geanimeerde inhoud op uw webpagina te maken en aan te passen. Bovendien dwingt het je niet om een ​​nieuw project helemaal opnieuw te beginnen, je kunt je HTML-bestand erin importeren om nieuwe UI-composities op te nemen en te sleutelen aan bestaande UI-elementen, zoals tabel, tekststijlen, afbeeldingsschaduwen, positie, lettertype, containeruitlijning en meer.

De hoofdinterface is verdeeld in 3 secties. De linkerzijbalk bevat geselecteerde gereedschappen voor het samenstellen van UI-elementen, de rechterzijbalk heeft alle hoofdweb-UI-elementenlijsten, inclusief schaduweffecten, afbeeldingen, tekst, terwijl het onderste gedeelte de tijdlijneditor bevat om animaties te choreograferen.

Edge main 2

In het deelvenster Elementen kunt u de geselecteerde tonen / verbergenelement en vergrendel het om verdere bewerking te voorkomen. Wanneer u een element selecteert in het hoofdscherm, wordt dit onmiddellijk gemarkeerd in het deelvenster Elementen, waardoor het gemakkelijker wordt om het te verbergen of te vergrendelen. Wanneer u de muisaanwijzer boven een item in Elementen plaatst, vertelt het u klasse-initialen met naam, zodat u het gemakkelijk kunt identificeren in een CSS-bestand.

elementen hoofd

Het eigenschappenvenster aan de linkerkant wordt weergegevencompositietools voor het geselecteerde UI-element van uw webpagina. Eenmaal geselecteerd, kunt u de locatiegrootte, de dekking, de lettertypefamilie, de grootte en de tekststijlen wijzigen, de oorsprong van transformaties, afbeeldingsrotatie enzovoort instellen.

rand 3

Met de tijdlijneditor kunt u de tijdlijn bekijkenvan elk geanimeerd element. Als u te maken hebt met één enorm CSS-bestand, klikt u op de filterknop om alleen geanimeerde elementen in het deelvenster Elementen weer te geven om snel hun posities, kleuren, grootte, enz. Te bewerken. Linksonder in het venster hebt u een zoomknop om de tijdlijn te vergroten voor het verifiëren van toegewezen tijd en overgangseffect van alle geanimeerde elementen.

geanimeerde elementen

Afgezien van het creëren van cross-browser compatibelgeanimeerde inhoud voor alle zeer populaire webbrowsers, waaronder Firefox, Chrome, Internet Explorer 9, webinhoud die met deze tool is gemaakt, werkt ook naadloos op iOS- en Android-platforms. Volgens de officiële community is Edge Preview actief in ontwikkeling en zal het binnenkort worden bijgewerkt met tal van functies. Adobe Edge werkt op Windows Vista en Windows 7.

Download Adobe Edge

Comments