All Articles Adobe
Erstellen HTML5 Animationen mit Adobe Edge-
Tareq Fadel on Thu, April 11th 0 comments
Gone are the days when animation on the web meant only using Adobe Flash. In this excellent article, Tareq Fadel introduces the joys of animating in HTML5 using Adobe Edge.

Youd gerne ein bisschen brutzeln zu Ihrer Website hinzuzufügen, vielleicht einige Animationen? Aber zur gleichen Zeit wie Ihre Animationen youd auf Ihrem iPad und Ihrem iPhone laufen. Traditionell youd bauen Sie Ihre Animationen in Adobe Flash und geben sie als SWF, aber leider ist die SWF-Format wird nicht im Browser laufen auf dem iPhone, iPad oder den neuen Android-Handys.

Die Alternative ist, Ihre Animationen bauen mit HTML5, aber das erfordert eine Menge Code und viel Programmieraufwand nur für eine einfache Animation. Zum Glück für uns gibt es Adobe Rand . Adobe Edge ist derzeit ein kostenloses Produkt, die heruntergeladen und verwendet werden kann von der Adobe Creative Cloud. Adobe Edge können Sie Animationen erstellen und Interaktivität Ihrer HTML5-Websites.

In diesem Tutorial werden wir eine Animation für die macProVideo.com logo. Wir, indem der Glanz Quadratmeter bewegen sich von links beginnen und dann das Logo verblasst in. Danach werden wir die "video.com" bounce in haben und kurz darauf die "MacPro".

Pic 1


1 - Einstellen der Bühne

Erstellen Sie eine neue Datei und setzt die Hintergrundfarbe auf Schwarz und erweitern die Breite der Bühne, um das Logo passen. In meinem Beispiel habe ich die Bühne auf 800

Pic 2


2 - Importieren Sie Ihre Vermögenswerte

Bereiten Sie alle Bilder vor dem Import in freundliche Formate Web. Ich habe umgerechnet all die verschiedenen Teile des Logos PNG importiert sie durch einen Klick auf das Symbol in der Bibliothek / Assets. Ich importierte die folgenden Dateien (gloss.png, hat.png, macPro.png, video.com.png) Die Vermögenswerte nun unter der Vermögenswerte Panel erscheinen soll.

Exercise-files.zip


3 - Animieren

Ziehen Sie das Quadrat von der Bühne in die linke.

Pic 3


Doppelklicken Sie dann auf die Abspielposition in der Timeline, um den Stift auf 0 lassen und bewegen Sie die Abspielposition auf 0,750.

Pic 4


Dann bewegen Sie den Platz, um die Position auf der Bühne, wo Sie es haben wollen. Drücken Sie die Leertaste, um eine Vorschau zu sehen. Wir fügen Sie dann eine Leichtigkeit, auf dem Balken in der Zeitleiste klicken und in der Timeline wählen Easing: Abbremsen Quad

Pic 5


Doppelklicken Sie auf den Stift erneut, um sie zurückzusetzen und sicherstellen, dass der Stift und die Abspielposition sind 0,750.

Pic 6


Ziehen Sie nun die hat.png und legen Sie es auf dem Platz. Dieses Mal benutzen wir den Stift in umgekehrter Reihenfolge. Ziehen Sie den blauen Stift über den Abspielkopf in der Zeitleiste und verschieben Sie es 0,75 bis 1,5 s dann positionieren Sie wählen den Hut auf der Bühne und die Deckkraft auf 0 auf dem Fenster Eigenschaften. Drücken Sie die Leertaste, um eine Vorschau Ihrer Animation.

Pic 7


Als nächstes müssen wir in beiden Wörtern hüpfen. Zuerst werden wir in video.com ziehen und wenn sie dies tun es geben werde Sie eine Eingabeaufforderung, dass der Name nicht geeignet ist und ändern Sie es für Sie zu VideoCom.

Pic 8


Legen Sie sie mit den smartguides statt.

Pic 9


Gleiche wie vorher, ziehen Sie den blauen Stift durch Doppelklick und bewegte sie vor der Abspielposition auf 0,75 und dann den Text über die Bühne. Ändern Sie die Lockerung Ease Out: Bounce.

Pic 10


Wiederholen Sie den gleichen Vorgang für macPro.png und Anwendung der Ease Out: Bounce. Drücken Sie erneut die Leertaste, um eine Vorschau Ihrer Animation.

Pic 11


Sobald Sie die Animation abgeschlossen haben, können Sie sehen, Ihre Animation im Browser spielen. Um den Test im Browser auszuführen, drücken Sie Befehlstaste-Enter und Edge wird die Anwendung in der Standard-Browser zu laden. Wenn Sie zufrieden mit Ihrer Animation und bist möchte es für den Einsatz ausgeben, dann wählen Sie Datei

Pic 12


Related Videos
Comments (0)

You must be logged in to comment.

Quicklook Guide
HTML & CSS 100
Dream It. Do It.
Do you want to learn Quicklook Guide?
Yes, I want to learn!
No Thanks, I just want to read the article.
Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: