Darauf haben wir gewartet: Seit dem neuesten Update von Adobe Animate CC lassen sich HTML Canvas Animationen responsive exportieren, also so, dass sich die Bühne der Browsergrösse anpasst. So gehst du vor:
Öffne die Veröffentlichungseinstellungen übers Menu “Datei” > “Einstellungen für Veröffentlichungen…”. Im Dialogfeld siehst du die neuen Optionen “Interaktiv machen” und darunter “Auf sichtbaren Bereich skalieren”.
“Interaktiv machen” heisst, dass die Animation bzw. die Bühne herunterskaliert wird, wenn das Browserfenster kleiner ist als die Bühne. Im Dropdown kannst du zudem folgendes einstellen:
- Nach Breite: Die Bühne wird nur in der Breite angepasst. Die Höhe des Browsers wird ignoriert.
- Nach Höhe: Die Bühne passt sich nur in der Höhe an, rechts wird sie abgeschnitten wenn der Browser schmäler ist.
- Beides: Breite und Höhe werden berücksichtigt und herunterskaliert.
Diese Funktion alleine macht die Bühne aber nicht breiter als sie gestaltet wurde, sondern lediglich kleiner, wenn nötig. Die Funktion “Auf sichtbaren Bereich skalieren” ermöglicht genau das: Die Bühne wird auf die ganze Browsergrösse hochskaliert. Das Dropdown bietet folgende Einstellungen dazu:
- Einpassen: Die Bühne wird proportional vergrössert, bis sie entweder die Breite oder die Höhe des Browserfensters erreicht hat. Rechts oder Unterhalb der Animation kann so Leerraum sichtbar bleiben.
- Auswahlgrösse: Die Bühne wird proportional vergrössert, so dass sie den ganzen Platz im Browser einnimmt. Die Animation wird allerdings beschnitten, wenn das Seitenverhältnis des Browsers nicht dem der Bühne entspricht.
Neu in Animate CC?
Wenn du in die spannende Welt des Animierens von Werbebannern, Games und Cartoons eintauchen möchtest, bieten wir dir hierzu kompakte Tagesseminare oder individuelle Firmenschulungen an. Hier gehts zu den nächsten Terminen »
Über mich
Seit Beginn seiner beruflichen Laufbahn ist Andreas im Bereich Webdesign, SEO und Social Media tätig. Hier bloggt er über Wissenswertes aus diesem Themenkreis.