Peerialism

Adobe Animate CC und das neue HTML5 Canvas-Element

Fast 20 Jahre lang spielte Adobe Flash eine wichtige Rolle im Webdesign. Da es mittlerweile veraltet ist, hat Adobe entschieden, die Entwicklung 2020 einzustellen und zu neuen Techniken zu wechseln. Dementsprechend hat das Unternehmen seine Entwicklungsumgebung Adobe Animate auf HTML5 und WebGL umgestellt. Ob für Animationen, Werbebanner, kleine Spiele, Webcomics oder Computerkunst, das Canvas ersetzt Flash in vielen Anwendungsbereichen und ist sicherer, schneller und responsiver.

Das HTML5 Canvas-Element

Das Canvas (zu Deutsch: Leinwand) ist ein HTML-Element, mit dem sich ein zweidimensionaler Zeichenbereich in die Webseite einfügen lässt. Mithilfe von JavaScript-Funktionen lassen sich auf der Leinwand Linien, Rechtecke, Bézierkurven, Kreise, Ellipsen und Bögen sowie Texte und Bilder zeichnen. Darüber hinaus erlaubt das Canvas-Element neben dem direkten Bearbeiten der einzelnen Pixel auch das Programmieren von Benutzerinteraktionen und 2D-Transformationen. Wer zum Thema HTML5/Canvas Programmierung mit Animate CC Hilfe benötigt, findet hier eine ausführliche Anleitung mit vielen Beispielen.

Animate CC und das HTML5 Canvas

Abgesehen von den neuen Dokumenttypen „HTML5 Canvas“ und „WebGL“ hat sich bei Animate CC wenig verändert. Erfahrene Animate-Nutzer werden sich gut zurechtfinden, zumal die Flash-Entwicklung nach wie vor möglich ist. Zum Erstellen eines Canvas-Projektes klicken Sie im Startbildschirm auf die Option „HTML5 Canvas“. Anschließend können Sie wie gewohnt mit den Arbeitsbereichen Bühne und Zeitleiste arbeiten und Elemente hinzufügen und programmieren. Das Projekt lässt sich direkt zu HTML- und JavaScript-Dateien exportieren und in Webseiten einbinden. Des Weiteren lassen sich ActionScript- und Flash-Dokumente zu HTML5-Projekten umwandeln, wobei die Leinwand einige Funktionen wie die 3D-Transformation nicht unterstützt.

Bild: Bigstockphoto.com / Goodluz