My Adobe ANIMATE Hitparade

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…

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

divider

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

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

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

WORKSHOP: Form-Tween Animation
USER-GUIDE: Shape-Tween Animation
HANDBUCH: Anleitung zur Form-Tween Animation

divider

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

divider

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

divider

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:

divider

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.

divider

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

divider

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

divider

9. ERSTELLEN VON VERSCHACHTELTEN ANIMATIONEN (Parenting!)


TUTORIAL: Animation mit Hilfe von Parenting

divider

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

divider

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

divider

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

divider

TIPP: How to work with SOUND / Mit SOUND arbeiten:
Handbuch: Wie man mit SOUND arbeitet
FREE MUSIC: YOUTUBE Free Music Library

divider

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.

divider

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

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.

Advertisement

Motion & Animation 9

English:
PART 9:

Tip of today:
Tutorial about Adobe After Effects – How to add layers: AFTER EFFECTS LAYERS

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

Seek the truth to see the lies

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

Deutsch:
TEIL 9:
Tipp von heute:

Tutorial über Adobe After Effects – Mit Ebenen arbeiten: AFTER EFFECTS EBENEN

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

Motion & Animation 8

English:
PART 8:

Tip of today:
Tutorial about Adobe After Effects – Animate text part 2: AFTER EFFECTS

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

yeht crazy demo animation adobe education online tutorial

Seek the truth to see the lies

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

Deutsch:
TEIL 8:
Tipp von heute:

Tutorial über Adobe After Effects – Animieren von Text Teil 2: AFTER EFFECTS

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

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 3

English:
PART 3, ANIMATION WITH ADOBE ANIMATE CC
Here I’m sharing some great tutorials directly from ADOBE which helped me a great deal to understand ADOBE ANIMATE CC:

Tutorial 1: Animation with ADOBE ANIMATE CC
Tutorial 2: Animate a figure with ADOBE ANIMATE CC

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


Our animation was first done with ANIMATE – then we used AFTER EFFECTS to finish it.

Deutsch:
TEIL 3, ANIMATION MIT ADOBE ANIMATE CC
Hier zeige ich ein paar Tutorials (Lernvideos) direkt von ADOBE welche mir sehr geholfen haben ADOBE ANIMATE CC zu verstehen:

Tutorial 1: Animation mit ADOBE ANIMATE CC
Tutorial 2: Animiere eine Figur mit ANIMATE CC

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

Motion & Animation 2

English:
PART 2, my APP Tip for STOP MOTION
My favourite free APP for my Smart phone, easy to use on the road: Stop Motion Studio. Stop Motion Studio has received great ratings in the APP Store. A Step up would be: Stop Motion Studio Pro. Check it out, it is self-explanatory.

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


Artwork by Jasmine Attinger: JAS.LAND

Deutsch:
TEIL 2, mein APP Tipp für STOP MOTION:
Mein Lieblings-gratis App für mein Smart Phone heisst: Stop Motion Studio. Stop Motion Studio hat eine super Bewertung im APP Store erhalten. Das Stop Motion Studio Pro APP hätte noch mehr Möglichkeiten. Probiere es aus, es ist einfach zum lernen.

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

Stop Motion reel by Cynthia Gall, Los Angeles
(Cynthia uses Dragonframe and then compiled her reel in After Effects)

Motion & Animation 1

Moving images are the future / bewegte Bilder sind die Zukunft!
This is the beginning of my series about Animation, Stop Motion & Film editing. Never before was it so easy to create your own movies.
Dies ist der Anfang von meiner Serie über Animation, Stop Motion & Film schneiden. Noch nie war es so einfach wie heute deinen eigenen Film zu drehen.

Let’s go !

English:
PART 1, HOW TO CREATE AN ANIMATED GIF WITH ADOBE PHOTOSHOP:
Tutorial: How to create an animated GIF in Adobe Photoshop

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

Illustrated with Illustrator and animated with Photoshop for Z-DOG.org

Deutsch:
TEIL 1, WIE MAN EIN ANIMIERTES GIF MIT ADOBE PHOTOSHOP MACHT:
Tutorial: Wie man ein Portrait animiert

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

Happy 2019 !

Illustration & animation by Michael Alan Reed – www.REEDesign.ch

Michael Alan Reed used Adobe Illustrator for his illustration, Photoshop with a “Lense-Flare-Effect” in the timeline to animate it and export as a GIF file. For (online) lessons in German or English feel free to contact us. HAPPY 2019 !

Here is how we animate / Hier findest du unsere Animation-Tipps auch in Deutsch:
Animate with: Adobe After Effects
Animate with: Adobe Photoshop

Animate with Photoshop in 2016

The following illustration was created by Mimi Selmi Reed (webdesign: Adobe Muse) with pencils and water color – traced and executed in Illustrator & Photoshop – animated in Adobe Photoshop CC.
(Tutorial see below / Anleitung siehe unten)

Copyright by Miriam Selmi Reed - member SCBWI - all rights reserved.

Copyright by Miriam Selmi Reed – member SCBWI – all rights reserved.

Every Follower, Like and comment is welcome! More comics & cartoons at: Z-DOG COMIC

divider

ENGLISH:
Animations with Photoshop / Animationen mit Photoshop:
Photoshop timeline for animations is under Window > Timeline. Have fun!
How to create frame animations in Photoshop

DEUTSCH:
Die Photoshop-Zeitleiste für Animationen kann man unter Fenster > Zeitleiste finden. Viel Spass!
Erstellen von Frame-Animationen in Photoshop

animation

REEDesign visual audio portfolio

Intro & Outro for DOKUMASTER by Peter Jäger
© 2021 by Peter Jäger
Animations by Miriam Selmi Reed – www.reedesign.ch
Program: Adobe Animate

divider


Trailer for BITCOIN DINNER Treff by Jean Pierre Seemann
© 2019 by Jean Pierre Seemann

Illustrations, composition, video & audio – www.reedesign.ch
Michael A. Reed & Miriam S. Reed
Programs: Adobe After Effects CC, Apple Logic Pro, Adobe Photoshop

divider


Trailer for LICHTBOX.CH
www.lichtbox.ch
© 2018 Funk & Meier AG, Obfelden

Composition, video & audio – www.reedesign.ch
Michael A. Reed & Miriam S. Reed
Programs: Adobe After Effects CC, Apple Logic Pro, Adobe Photoshop

divider


Trailer for SWISSVEG
www.swissveg.ch
© 2017 swissveg

Composition, animation & audio – www.reedesign.ch
Michael A. Reed & Miriam S. Reed
Programs: Adobe After Effects CC, Apple Logic Pro, Adobe Illustrator

divider


Trailer for SWISSVEG
www.swissveg.ch
© 2017 swissveg

Composition, animation & audio – www.reedesign.ch
Michael A. Reed & Miriam S. Reed
Programs: Adobe After Effects CC, Apple Logic Pro, Adobe Illustrator

divider


Trailer for Lauterbach Weine SA
www.lauterbachweine.ch
© 2012-2016 Lauterbach SA

Composition, video & audio – www.reedesign.ch
Michael A. Reed & Miriam S. Reed
Programs: Adobe After Effects CC, Apple Logic Pro, Adobe Photoshop

divider


Animation for Trailer I PEAK GmbH.
Client: i-peak infosystems gmbH
Creative Director / CEO: Raoul Julen
Animation & Editing: www.reedesign.ch / Michael A. Reed / Miriam S. Reed
Soundtrack: “Fleure Bleue” / proudmusiclibrary.com
Programs: Adobe After Effects CS6, Apple Logic Pro

divider


New visual audio portfolio for REEDesign, under the art direction of Michael Alan Reed. Set to the instrumental groovy theme of “C how U r” by Michael Alan Reed.

ANIMATION & PRODUCTION:
REEDesign.ch – Michel Alan Reed
Music Copyright © 2013 by Michael Alan Reed, all rights reserved.
Programs: Adobe After Effects / Audition, Photoshop, Illustrator and Apple Logic Pro
divider


Animation for CIC Bank:
Werbeagentur: Brainheart GmbH
Creative Director: Mirjam Pierig
Kunde: CIC Bank, Sebastian Comment, Leiter Marketing & Kommunikation
Thomas D’haemer, Projektleiter Marketing & Kommunikation
Music & Trailer Edit: Michael A. Reed – www.reedesign.ch

Custom video display advertising for Swiss client Bank CIC, based on Mondrian art style under the creative direction of Mirjam Pierig Brainheart GmbH. Set to the laid-back, chill-groove of the instrumental theme “Way” by Michael Alan Reed.

divider


The making of the Siemens Commercial.
Film company: Zeitsprung Commercial
Werbeagentur: Kaelinkom & Partner
Creative Director: Rolf Kälin
Kunde: Siemens Hausgeräte
Storyboard: Miriam Selmi Reed
Music & Trailer Edit: Michael A. Reed – www.reedesign.ch

divider


The making of the Emmi Latte Commercial.
Film company: Rosas & CO Films AG
Werbeagentur: ByHeart
Creative Director: Hans Siegwart
Kunde: Emmi Caffé Latte
Francina Modeling- www.francinamodels.com
Storyboard: Miriam Selmi Reed
Music & Trailer Edit: Michael A. Reed – www.reedesign.ch