My Adobe ANIMATE Hitparade

Here are my personal Animate Tutorials directly from ADOBE!


LEARN WHATS NEW: ADOBE ANIMATE JUNE 2020 RELEASE
WAS GIBTS NEUES: ADOBE ANIMATE JUNE 2020 NEUE VERSION
ADOBE ANIMATE: Adobe Animate Youtube Channel

Tutorials in English and German / Anleitungen in Deutsch und Englisch
Deutsch / English mixed infos…

divider

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).
SNAP 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”
Tip: How to convert Flash Ads into HTML5 files with Adobe Animate.

My user guide from Adobe: Adobe Animate Unser Guide
Mein Benutzer-Handbuch von Adobe: Adobe Animate Benutzerhandbuch

divider

Umfassender Überblick über die Funktionalität von Adobe Animate CC

THE TIMELINE / DIE ZEITLEISTE:
TUTORIAL: Timeline / Zeitleiste

VISUAL GLOSSARY / VISUELLES GLOSSAR:
Einführung in die Werkzeuge, Ebenen, Zeitleiste und GIU von Adobe Animate CC:
VISUELLES GLOSSAR

divider

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

divider

LETS START!
TUTORIAL: Dokumentarten und deren Verwendung.

divider

1. Work with Symbols / Arbeiten mit Symbolen
TUTORIAL: Symbols / Symbolarten
Tipp: wenn Steuerung > Testen nicht funktioniert zuerst unter Datei > Konvertieren > in HTML5 canvas speichern.

divider

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

1. Form-Tween Animation
USER-GUIDE: Shape-Tween Animation
HANDBUCH: Anleitung zur Form-Tween Animation

divider

2. Motion-Tween Animation / Bewegungs-Tween-Animation (Adobe Datei)
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

UNSER-GUIDE: How to edit motion tweens using Motion Editor
HANDBUCH: So bearbeiten Sie Bewegungs-Tweens mit dem Bewegungs-Editor

divider

Intro to classic tween Animation:

3. Classic-Tween Animation
USER-GUIDE: Work with classic tween animation
HANDBUCH: Arbeiten mit klassischen Tween-Animationen


TUTORIAL: Animieren mit klassischen Tweens

divider

4. How to use Mask-Layers / Wie man Masken benutzt:
USER-GUIDE: How to use mask layers in Adobe Animate
HANDBUCH: Maskenebenen in Adobe Animate CC

TUTORIAL:

divider

5. Wie man mit dem Asset-Verkrümmungs-Werkzeug animiert!

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.

divider

6. Farben in einem Dokument 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

divider

7. Character-Animation mit dem Knochenwerkzeug (Bone tool)
USER-GUIDE: Animate with the Bone Tool
HANDBUCH: Animieren mit dem Bone-Werkzeug

TUTORIAL: Animation with Bone Tool / Figurenanimation mit Knochen-Werkzeug

divider

8. Erstellen von verschachtelten Animationen (Parenting)


TUTORIAL: Animation mit Hilfe von Parenting

divider

9. In Adobe Animate einfache Formen zeichnen
USER-GUIDE: Draw lines & shapes with Adobe Animate
HANDBUCH: Zeichnen von Linien und Formen in Adobe Animate

TUTORIAL: Wie man Figuren anhand mit Grundformen zeichnen kann

divider

10. Wie man mit dem Pinsel-Werkzeug frei zeichnet:
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

divider

11. 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

divider

12. How to work with SOUND / Mit SOUND arbeiten:
TUTORIAL: Import Sound
FREE MUSIC: YOUTUBE Free Music Library

divider

13. Interaktivität und EXPORT:

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.

divider


TUTORIAL: WebGL-glTF-Dateien exportieren

divider

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

divider

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.

divider

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.

Motion & Animation 7

English:
PART 7:

Tutorial about Adobe After Effects – Animation with keyframes: AFTER EFFECTS

Tip of today: how to use filters on Text. Select your text in Adobe After Effects. Go to Menu > Animation > Browse Presets > which will take you to Adobe Bridge where you can preview the built in presets. Text animation preset infos.

Sharing infos: iADOBE FORUM Our tips for easy download: i-adobe eBook in English

Trailer YEHT animated with After Effects and illustrated by Michael Alan Reed

Graphic Novel YEHT available in the USA AMAZON.com / In Europe: AMAZON.de

Deutsch:
TEIL 7:
Film über Adobe After Effects – Animation mit Keyframes: AFTER EFFECTS

Tipp von heute: Wie man Filter bei Text benutzt. Wähle den Text in Adobe After Effects. Unter Menu > Animation > Vorgaben durchsuchen > damit wird man zu Adobe Bridge umgeleitet wo man alle Filter im Vorschau-Modus anschauen kann. Text Animationen Infos.

Tausche dich aus im iADOBE FORUMAlle unsere Tipps als: i-adobe eBook in Deutsch

Motion & Animation 6

English:
PART 6:
Below is a tutorial about another cool APP: Adobe Premiere RUSH CC… part of the Adobe cloud: a big WOW! if you like to edit your videos with your smart phone. Also Adobe SPARK Video is simple and easy to learn. Check it out: The SPARK REVOLUTION

Sharing infos: iADOBE FORUM Our tips for easy download: i-adobe eBook in English


This trailer we’ve filmed with our new iPhone. Then we made a quick film edit with Adobe PREMIERE RUSH. The animation was created with AFTER EFFECTS later on.

Deutsch:
TEIL 6:
Oben ist ein Film über ein weiteres cooles APP: Adobe Premiere RUSH, Teil der Creative Cloud… einfach genial, wenn du unterwegs deine Videos schneiden möchtest! Auch Adobe SPARK Video ist simpel und einfach zum lernen. Hier ist mehr Info dazu: The SPARK REVOLUTION

Tausche dich aus im iADOBE FORUMAlle unsere Tipps als: i-adobe eBook in Deutsch

Motion & Animation 5

English:
PART 5:
Here is another cool software we’ve used for another animated children’s book:
This software is called: TigerCreate from Tigerbooks: Tiger Create Info

Sharing infos: iADOBE FORUM Our tips for easy download: i-adobe eBook in English

Deutsch:
TEIL 5:
Oben noch eine Animation welche wir für ein weiteres Kinderbuch erstellt haben:
Diese Software heisst: TigerCreate von Tigerbooks: Tiger Create Information

Tausche dich aus im iADOBE FORUMAlle unsere Tipps als: i-adobe eBook in Deutsch

Motion & Animation 4

English:
PART 4:
At this Z-DOG project below we’ve used Adobe AFTER EFFECTS to create this simple animation but, with Adobe PREMIERE PRO it also would have been possible to do this.
Both programs are part of the Creative Cloud and therefore free for us to use.
Bilingual Ziggy books are available through Amazon and other stores: Ziggy’s Store

Here’s a link to a great tutorial on After Effects for beginners directly from Adobe: AFTER EFFECTS Tutorial
Sharing infos: iADOBE FORUM Our tips for easy download: i-adobe eBook in English

Deutsch:
TEIL 4:
Bei diesem Z-DOG Projekt oben haben wir Adobe AFTER EFFECTS benutzt um diese Animation herzustellen, dies wäre aber auch möglich gewesen mit Adobe PREMIERE PRO. Beide Programme sind Teil der Creative Cloud und somit gratis für uns.
Zweisprachige ZIGGY Bücher können via VIER PFOTEN oder Ziggy’s Store bestellt werden.

Hier ist ein Link mit einem super Tutorial für After Effects Anfänger, direkt von Adobe (mit Deutschen Untertiteln): AFTER EFFECTS Tutorial
Tausche dich aus im iADOBE FORUMAlle unsere Tipps als: i-adobe eBook in Deutsch

Animate your illustrations

Tutorial in English and German / Anleitung in Deutsch und Englisch

Deutsche Version siehe unten!
divider
English version:

TIP OF THE WEEK: How to make simple animations

1. Tip: Draw a storyboard or write your concept in advance – see sample below:

TicTacToe_Storyboard

2. in my case: to feel the characters and their movements I made a simple animated GIF using the timeline in Adobe Photoshop:
-Draw your characters in several positions
-Open them in Adobe Photoshop and go to WINDOW > TIMELINE
Tutorial: How to create frame animations in Photoshop
zeitleiste

-save it as an ANIMATED GIF with a loop – under FILE > EXPORT > Save for Web:

Copyright by Mimi Selmi Reed

Copyright by Mimi Selmi Reed – for TigerBooks Germany

In order to complete the following animated ebook, I’ve used tigercreate, which runs similar like every animation program by using a timeline with frames:

Written, illustrated and animated by Mimi Selmi Reed & sound design by Mike Reed REEDesign.ch – all rights reserved. Z-DOG for Tigerbooks Germany.

divider

Deutsche Version:

TIPP DER WOCHE: Wie man einfache Animationen erstellen kann

1. Tipp: Zeichnen Sie ein Storyboard oder schreiben Sie ein Konzept im voraus – siehe Beispiel:

TicTacToe_Storyboard

2. Um ein Gespür für meine Charakteren und ihre Bewegungen zu erhalten, erstellte ich kurz ein animiertes GIF mit einer Zeitleiste in Adobe Photoshop:
-Zeichnen Sie ihre Charakteren in mehreren Positionen
-Öffnen Sie diese in Adobe Photoshop und gehen Sie zu FENSTER > ZEITLEISTE
Tutorial: Erstellen von Frame-Animationen in Photoshop
zeitleiste

-speichern Sie es als ANIMIERTES GIF mit einem Loop – unter DATEI > EXPORTIEREN > Speichern für Web:

Copyright by Mimi Selmi Reed

Copyright by Mimi Selmi Reed – for TigerBooks Germany

Um dieses animierte ebook fertigzustellen, benutzte ich tigercreate, welches ähnlich funktioniert wie jedes Animations Programm. Nämlich mit einer Zeitleiste:

Written, illustrated and animated by Mimi Selmi Reed & sound design by Mike Reed REEDesign.ch – all rights reserved. Z-DOG for Tigerbooks Germany.

Invitation / Einladung Art Show in Zurich, Switzerland

Vernissage_Facebook

Art Exhibition in Zurich, Switzerland – from 19.2. – 11.3.2016
Vernissage / Opening reception: Friday 19.2.16 starts at 6pm (18 Uhr) – GALERIE 16b, Ausstellungsstrasse 16, 8005 Zürich – (hinter dem HB Zürich) Finissage with concert: Friday 11.3.16 starts at 6pm (18 Uhr) – Gallery opening hours: WE to SA from 5 to 8pm. (Öffnungszeiten: MI bis SA von 17 bis 20 Uhr)

BLOG / Info: Fine Art / Illustrations by Miriam Selmi Reed

Programs used out of the Adobe Creative Cloud: Adobe Photoshop, After Effects, Audition, Illustrator and Apple Logic Pro

Fine Art & Footage: Miriam Selmi Reed
Music composed, played and arranged by Michael Alan Reed
Copyright 2015 – www.REEDesign.ch – all rights reserved