WAS GIBT ES NEUES IM WEB-BEREICH?

CREATIVE CLOUD

PHOTOSHOP CCADOBE

ZEICHENFLÄCHEN

▸ Ähnlich wie in Illustrator kann man jetzt auch in Photoshop mit Zeichenflächen arbeiten.

▸ Über Zeichenflächen lassen sich z.B. Designs für unterschiedliche Endgeräte erstellen.

▸ Über die “+” Schaltfläche kann eine Zeichenfläche einfach dupliziert werden.

▸ In der Eigenschaften Palette können über Voreinstellungen Zeichenflächen für diverse Endgeräte ausgewählt werden.

CC BIBLIOTHEK UND DEVICE PREVIEW

▸ Über die Anbindung an die Creative Cloud Bibliothek lassen sich Bilder, Farben, Schriften, Stile usw. einfach mit anderen Adobe Programmen austauschen.

▸ Die Device Preview ermöglicht eine Vorschau des Design direkt auf dem mobilen Endgerät.

DREAMWEAVER CCADOBE

BOOTSTRAP INTEGRATION

▸ Das Bootstrap Framework fest wurde fest in Dreamweaver implementiert.

▸ Beim Anlegen einer neuen HTML Seite bietet Dreamweaver Bootstrap als Auswahl.

▸ Zusätzlich gibt es 6 Startvorlagen zu unterschiedlichen Themen mit denen der Einstieg erleichtert wird.

▸ Bootstrap wurde auch in der Einfügen Palette fest integriert und befindest sich dort unter einer eigenen Kategorie wieder.

▸ Das Layout lässt sich mit Containern und Spalten über die Einigen Palette erstellen.

▸ Alle wichtigen Komponenten wie Navigationselemente, responsive Bilder, Buttons, usw. befinden sich ebenfalls in der Palette.

MEDIAQUERIES ANPASSEN

▸ Über visuelle Medienabfragen (Mediaqueries) lassen sich die Breakpoints für unterschiedliche Endgeräte intuitiv erstellen.

▸ Ein Klick auf einer der visuellen Medienabfragen passt die Live-Ansicht direkt and die entsprechende Größe an.

▸ Eine Überprüfung durch lästiges Skalieren des Browserfenster entfällt.

LIVE-ANSICHT VERBESSERUNGEN

▸ Layouts lassen sich jetzt noch leichter in der Live-Ansicht von Dreamweaver editieren.

▸ Über sogenannte HUB’s (Head Up Displays) lassen sich sehr einfach und intuitiv Änderungen vornehmen.

▸ HTML5 Elemente lassen sich per Drag & Drop aus der Einfügen Palette in die Live Ansicht ziehen.

CSS DESIGNER

▸ Über die CSS Designer Palette lassen sich die CSS Eigenschaften sehr einfach und intuitiv anpassen.

▸ Mit jedem Update von Dreamweaver wird der CSS Designer weiter optimiert und verbessert.

▸ Die Bootstrap CSS Datei bleibt geschützt, so dass diese unabhängig aktualisiert werden kann.

ANIMATE CCADOBE

UNTERSTÜTZUNG VON ANIMATE

▸ Animate unterstützt jede Plattform, jedes Gerät und jeden Anwendungsfall.

▸ Flash Player

▸ AIR for Desktop

▸ AIR for iOS

▸ AIR for Android

▸ HTML5 Canvas

▸ WebGL

▸ Snap.SVG

▸ kompatibel zu weiteren Plattformen

UNZÄHLIGE NEUERUNGEN‣ New Paint Brush Tool‣ Brush Library with art brushes‣ Improved Brush tool ‣ Vector Art Brush Editor‣ CC Libraries Panel‣ Support for Adobe Stock‣ Stage Rotation‣ SVG Import dialog ‣ Colored Onion Skins‣ Tagged Swatches‣ Publish text as outlines in HTML5 Canvas‣ Stage Scaling‣ Content Scaling‣ Custom Platform optimizations‣ Video Export to multiple resolutions ‣ OAM Publishing support ‣ Improved Object Drawing Mode Representation ‣ New buttons for commonly used operations ‣ Bone Tool ‣ HTML5 Canvas Sprite Sheets with customizations‣ Timeline Video Guide ‣ Audio Splitting ‣ Scaled Brushes ‣ iOS 64-bit Output‣ Typekit support‣ Static Text support‣ HTML5 Canvas template support

BEISPIEL PROJEKTEAnimation‣ http://keyframer.com/ - all animations in his portfolio are animate/flash compositions‣ https://www.youtube.com/user/DrawWithJazza - Hugely popular flash artist with 500k

followers on youtube‣ Another one with 700 k subscribers - https://www.youtube.com/user/SamGreenMedia

Games‣ https://www.youtube.com/watch?v=ZfIwW-CeBIE&feature=youtu.be webgl game trailor

by Alex Fleisig who has done animations for Hollywood movies like shrek, madagaskar, ratarouile etc.

‣ Grant Skinners Html5 canvas games with images below. The source code is available on github - https://github.com/CreateJS/AdobeAnimateDemo

HTML5 Canvas Game‣ http://vlgreview.com/JumpSpark/site-preview/WorldwideClinicalTrials/

TossTheseSnowballs/

WebGL Game‣ http://yeahbutisitflash.com/projects/bunny-webgl-max/bunny.html

WebGL Animationhttp://yeahbutisitflash.com/projects/max-15/corgi/index.html

SVG Support (Custom Platform)‣ Example Source: http://ics-web.jp/lab/archives/8439 By - Ikeda Tainobe

André Reinegger

VIEL SPASS BEIM AUSPROBIEREN!!