Here are my personal Animate Tutorials directly from ADOBE!
LEARN WHATS NEW: ADOBE ANIMATE JUNE 2021 RELEASE
WAS GIBTS NEUES: ADOBE ANIMATE JUNI 2021 NEUE VERSION
ADOBE ANIMATE: Adobe Animate Youtube Channel
Tutorials in English and German / Anleitungen in Deutsch und Englisch
Deutsch / English mixed infos…
Getting to know Adobe Animate CC:
Introduction about Adobe Animate CC
Kennenlernen von Adobe Animate CC:
Einführung in Adobe Animate CC
AIR und Flash Player Info: AIR für iOS applications – für ihr Apple iPhone und iPad.
HTML5 CANVAS Info: responsive und interaktive Animationen erzeugen.
WEB GL Info: Inhalte als WebGL exportieren (Web Graphics Library Format).
SVG Info: SVG (Scalable Vector Graphics) ist die Vektor Sprache des Internets.
Whats the difference between starting with a HTML5 Canvas or Action Script?
Developers describe ActionScript as “An object-oriented programming language” for the Adobe Flash Player. It is often used to create animations and video games. On the other hand, HTML5 is detailed as “5th major revision of the core language of the World Wide Web”
Tipp: Export Flash-banners for HTML5 canvas / Flash-Werbebanner für HTML5 ausgeben
My user guide from Adobe: Adobe Animate Unser Guide
Mein Benutzer-Handbuch von Adobe: Adobe Animate Benutzerhandbuch
Umfassender Überblick über die Funktionalität von Adobe Animate CC
1. THE TIMELINE / DIE ZEITLEISTE:
Deutsches Tutorial über die Zeitleiste (Timeline)
VISUAL GLOSSARY / VISUELLES GLOSSAR:
Einführung in die Werkzeuge, Ebenen, Zeitleiste und GIU von Adobe Animate CC:
VISUELLES GLOSSAR
Einführung in die verschiedenen Bilder (Frames) in Adobe ANIMATE CC:
Bilder und Schlüsselbilder in Animate CC
Am Anfang haben wir ein leeres Schlüsselbild. Sobald wir ein Objekt einfügen wird es zum Schlüsselbild (Keyframe), da es nicht mehr leer ist. 
Ich klicke bei ca. 15 Frames und füge ein Bild ein. Damit bleibt das Objekt statisch:
Sobald ich wieder ein Objekt oder Text einfüge, wird es automatisch ein Schlüsselbild (Keyframe): Der Anfang einer Animation!
important SHORTCUTS / wichtige KURZBEFEHLE in ADOBE ANIMATE:
F4 = alle Bedienfelder anzeigen oder ausblenden
F5 = new Frame (neues Bild) / Shift + F5 = clear frame (Bild löschen)
F6 = new Keyframe (neues Schlüsselbild wo eine Animation stattfindet) / Shift + F6 = clear keyframe (Schlüsselbild löschen)
F7 = new blank Keyframe (leeres Schlüsselbild als Platzhalter)
ANIMATE Shortcuts in English
ANIMATE Tastaturbefehle in Deutsch
LETS START!
TUTORIAL: Dokumentarten und deren Verwendung.
2. Work with Symbols / ARBEITEN MIT SYMBOLEN
TUTORIAL: Symbols / Symbolarten
Tipp: wenn Steuerung > Testen nicht funktioniert zuerst unter Datei > Konvertieren > in HTML5 canvas speichern.
The 3 different Tweens: 1. Shape-Tween 2. Motion-Tween and 3. Classic-Tween
Die 3 Tweens: 1. Form-Tween 2. Bewegungs-Tween und 3. Klassisches-Tween
Die Unterschiede zwischen Bewegungs-Tween und Klassischem-Tween:
Vergleich von Bewegungs-Tweens und klassischen Tweens
WORKSHOP: Form-Tween Animation
USER-GUIDE: Shape-Tween Animation
HANDBUCH: Anleitung zur Form-Tween Animation
3. ANIMIEREN MIT MOTION-TWEENS (Bewegungsanimation)
UNSER-GUIDE: Motion tween animations
HANDBUCH: Info über Bewegungs-Tween-Animationen
(eigene Übungsdatei, rotes Auto mit Landschaft)
USER-GUIDE: How to create a Motion-Tween
HANDBUCH: Wie man ein Bewegungs-Tween erstellt
Deutsches Tutorial über Bewegungs-Tween-Animationen
UNSER-GUIDE: How to edit motion tweens using Motion Editor
HANDBUCH: So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor
4. ANIMIEREN MIT KLASSISCHEN TWEENS (Classic-Tween Animation)
USER-GUIDE: Work with classic tween animation
Deutsches Tutorial über Schlüsselbilder und klassischen Tweens
HANDBUCH: Arbeiten mit klassischen Tween-Animationen
TUTORIAL: Animieren mit klassischen Tweens
5. WIE MAN MIT MASKEN ARBEITET (How to use Mask-Layers)
Deutsches Tutorial über die Masken und klassische Tweens
USER-GUIDE: How to use mask layers in Adobe Animate
HANDBUCH: Maskenebenen in Adobe Animate CC
TUTORIAL:
6. ANIMIEREN MIT DEM VERKRÜMMUNGS-WERKZEUG
TUTORIAL: Animieren mit dem Verkrümmungs-Werkzeug
Tipp: Das Asset-Verkrümmungs-Werkzeug funktiniert bei Vektor Illustrationen und bei Bitmap Bildern. Grafik Symbole mit Cmd B vektorisieren. Funktioniert bei Action Script 3.0 und Html Canvas.
7. FARBEN ERSTELLEN UND VERWALTEN
USER-GUIDE: Strokes, fills and gradients in Adobe Animate CC
HANDBUCH: Verwaltung und Anwendung von Farbe und Verläufe
TUTORIAL: Verwaltung und Anwendung von Farbe
8. ANIMATION MIT DEM KNOCHEN-WERKZEUG (Bone tool)
USER-GUIDE: Animate with the Bone Tool
HANDBUCH: Animieren mit dem Bone-Werkzeug
Deutsches Tutorial: wie man mit dem Bone-Werkzeug animiert
TUTORIAL: Animation with Bone Tool / Figurenanimation mit Knochen-Werkzeug
9. ERSTELLEN VON VERSCHACHTELTEN ANIMATIONEN (Parenting!)
TUTORIAL: Animation mit Hilfe von Parenting
10. ZEICHNEN IN ANIMATE CC
USER-GUIDE: Draw lines & shapes with Adobe Animate
HANDBUCH: Zeichnen von Linien und Formen in Adobe Animate
Deutsches Tutorial wie man mit den Stiftwerkzeugen zeichnet
TUTORIAL: Wie man Figuren anhand mit Grundformen zeichnen kann
11. PINSEL IN ANIMATE CC
USER-GUIDE: Working with Paint brushes
HANDBUCH: Arbeiten mit dem Pinsel-Werkzeug
TUTORIAL: Wie man mit dem Pinsel-Werkzeug in Adobe Animate frei zeichnen kann
TIPP: HOW TO USE GOOGLE FONTS / WIE MAN GOOGLE FONTS benutzt:
USER-GUIDE: Using Google fonts in HTML5 Canvas documents
HANDBUCH: Verwenden von Google Fonts in HTML5 Canvas-Dokumenten
TIPP: How to work with SOUND / Mit SOUND arbeiten:
Handbuch: Wie man mit SOUND arbeitet
FREE MUSIC: YOUTUBE Free Music Library
12. INTERAKTIVITÄT UND EXPORT MÖGLICHKEITEN
USER-GUIDE: Publishing Animate documents
HANDBUCH: Veröffentlichen von Animate Dateien
TUTORIAL: Content für soziale Netzwerke designen und exportieren
HTML5 Canvas TUTORIALS:
1. Einfachen interaktiven Content designen mit HTML5
2. Mit dem Aktionsassistenten – ohne Code-Kenntnisse – Interaktivität hinzufügen.
Interactive Banner:
USER-GUIDE: Adding interactivity in HTML5 Canvas document
HANDBUCH: Hinzufügen von Interaktivität in einem HTML5 Canvas-Dokument
TUTORIAL: HTML5-Anzeige mit Expandable Banner für Google erstellen.
Adobe Animate bietet zwei WebGL-glTF-Optionen. Die Standardoption ermöglicht die Integration mit Wiedergabepaketen für Standard-glTF und ist auf einfache Interaktivität und Konformität mit Standards ausgerichtet. Die erweiterte Version ist speziell auf Animate ausgerichtet, d. h. auf komplexere Animationen.
TUTORIAL: WebGL-glTF-Dateien exportieren
FINAL WORKSHOP: How to vectorise your drawing in Adobe Capture and animate the character with Adobe Animate: Vektorisiere deine Zeichnung automatisch mit Adobe Capture und animiere es in Adobe Animate
Quick check list:
4:3 Ratio / SD = 720 x 576 Standard Definition
16:9 Rati0 / HD = 1920 x 1080 High Definition / 1280 x 720
2 K Formate 2560 x 1440
4 K Formate 3840 x 2160
Animation Frames per second: 24 fps
DSLR Digital SLR 1080 25 fps PAL = Europe / 30 fps NTSC = USA / 24 fps = movies / p = progressive (modern / Vollbilder) / i = interlaced (old / veraltete Monitore)
Audio = 48 kHz is now the standard, but for audio targeted at CDs, 44.1 kHz (and multiples) are still used.
KEY LEARNINGS digicomp Animate Basic
1. Umfassender Überblick über die Funktionalität von Adobe Animate CC
2. Arbeiten mit Symbolen und Instanzen
3. Verwenden von Webfonts
4. Erstellen von verschachtelten Animationen und diese detailliert anpassen
5. Verstehen von Objekte mit Interaktivität
6. Exportieren von Projekten für unterschiedliche Medien bzw. Geräte
7. Erstellen von Animationen für Banner, Slider, E-Learnings, Spiele, Apps usw.
