adobe max 2015 - giving flash professional another look

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Giving Flash Professional Another LookJoseph Labrecque | Senior Interactive Software Engineer


Joseph Labrecque

Senior Interactive Software EngineerAdjunct FacultyUniversity of Denver

Principal and Sole ProprietorFractured Vision Media, LLC

Adobe Education LeaderAdobe Community ProfessionalAdobe Systems, Inc.

Apache Software FoundationApache Flex Committer

AuthorLynda.com, Train Simple, Adobe Press, Peachpit, Brainbuffet, Packt, O’Reilly, video2brain


Why am I doing this?

I BELIEVE IN FLASH PROFESSIONAL.

I BELIEVE IN CREATIVE EXPRESSION.

I BELIEVE IN FREEDOM OF TECHNOLOGY CHOICES.


Most importantly…

I BELIEVE THAT

FLASH PROFESSIONAL

DESERVES ANOTHER LOOK.


Session Overview

Flash Professional Overview Targets and Platforms Reach and Stats

Explore Creative Tooling Asset Creation Animation

What’s New General Overview Flash Professional CC 2015.1

Expanded Workflows Document Conversion Sharing Content

Demos! Closing


Historical Overview

Flash Player: FutureSplash Animator (1996) Macromedia Flash 1 (1996) Adobe Flash Professional CS3 (2007)

Adobe AIR: Adobe Flash Professional CS4 (2008)

Mobile: Adobe Flash Professional CS5 (2010)

Multiplatform!!! Adobe Flash Professional CS6+ (2012)


Flash Professional… TODAY

Adobe Creative Cloud 64-bit - Rewritten Multiple Platforms Expanded Creative Tooling Retaining a sense of history Renewing interest 20 years old next year!


Everything


Target Platforms and Reach

Flash Player Adobe AIR HD Video HTML5 Canvas WebGL Sprite Sheets Image Sequences SVG CUSTOM PLATFORMS


Flash Player

1st Version : 1996 Standalone or embedded runtime Runs SWF files Browser Extension Native Bundling

STABLE: Flash Player 19 [September 21st]


Flash Player Statistics

The standalone Flash Player runtime is downloaded 1.2 billion times per month* from Adobe.

Integrated Flash Player is built into Google Chrome, Internet Explorer 11, and Microsoft Edge.

Every ChromeBook includes Flash Player. Huge for educational content.

99% of Facebook gaming content Add this all up – Flash Player is (still)

everywhere!

*as of September 2nd, 2015


Adobe AIR

Flash Player without the browser A mechanism to build native apps for: Windows OS X Android iOS

Extensive capabilities beyond Flash Player Extend via native extensions (ANE) 64-bit with threading – even on iOS!


Adobe AIR Statistics

Adobe AIR is HUGE! AIR Application Installs*:

4 billion (4,053,801,461 to be exact) Mobile AIR applications*:

200k ( 173,258 Android & 42,924 iOS) #2 app development platform behind

native on Android!



HTML5 Canvas

Canvas is an element in HTML5. Draw pixels within the element for visual display. Flash Professional has native support for HTML5

Canvas. Write JavaScript in Actions Panel. Utilizes the CreateJS libraries: EaselJS TweenJS SoundJS


HTML5 Canvas Statistics

About 30%-35%* of Flash Professional users are targeting HTML5 Canvas document type.

The CreateJS CDN hits grew from 1.4 billion to 7.8 billion per month*in less than six months.

Huge increase in usage!



WebGL

GPU Acceleration Utilizes Canvas element as well. Adobe WebGL Runtime Flash Professional has native support

for WebGL. Write JavaScript in Actions Panel.


Raw HD Video

Frame by frame precision Even renders animation via code Encode via AME Bring into Premiere Pro Bring into After Effects Export MP4 for Web


Custom Platforms

Defines Flash Professional as an “interactive media creation tool”.

Not tied to any specific target platforms. Anyone can extend Flash Professional to support

their specific platform. C++ SDK from Adobe.

https://creative.adobe.com/addons


Custom Platform Examples

Using the Custom Platforms SDK, anyone can integrate their own platform as a real FLA based target.

Existing Custom Platforms: Snap.svg Animator GAF Publisher OpenFL Away3D


Snap.svg Animator

Great example of a custom platform! Uses Snap.svg Library Snap.svg written by the author of Raphaël “The JavaScript SVG library for the modern

web” Fully animated SVG output!


Multiple Image Formats

Direct Export: Static GIF PNG JPG

Export Dialog: Sprite Sheets PNG Sequence

Publish Dialog: Animated GIF Static SVG PNG JPG


What’s New?


Flash Professional CC (2013)

HTML5 Canvas Publishing 64-bit Architecture Real Time Drawing Unlimited Pasteboard Debugging AIR via USB New Actions Editor Timeline JDIs



Variable-width Strokes Motion Editor SVG Export Animated WebGL Projectors HTML Panels


Flash Professional CC (2014.1)

Custom Platforms Interactive WebGL Custom Brushes Animation Guides SWF Import



Bone Tool Canvas Sprite Sheets Timeline Video Guide Audio Splitting Scaled Brushes iOS 64-bit Output



New Paint Brush Tool Brush Library filled with vector art

brushes Vector Art Brush Editor Tagged Swatches CC Libraries Panel OAM publishing support for AS3,

WebGL, and HTML5 Canvas Publish text as outlines in HTML5

Canvas documents Color-coded onion skinning Stage Rotation Tool



SVG Import dialog Stage contents scale proportionally

to Stage size Video Export to multiple resolutions Improved drawing experience with

Brush tool Improved Object Drawing Mode

Representation New buttons for commonly used

operations in the Properties Panel Custom Platform optimizations


Creativity


Vector Asset Creation Tools

Pen Tool Text Tool Line Tool Rectangle Tools Oval Tools PolyStar Tool Pencil Tool Paint Brush Tool Brush Tool


Asset Modification Tools

Selection Tool Subselection Tool Free Transform Tool Gradient Transform Tool 3D Rotation and Translation Tools Bone and Bind Tools Width Tool


Animation Tools

Frames based Timeline Keyframes (filled and blank) Tweens (Motion, Shape, and Classic) New Motion Editor Easing and Ease Presets Improved Onion Skinning Looping and playback controls Motion Presets Panel Save and recall animation


Inverse Kinematics

Natural movement Create Armature layers with the

Bones Tool. Add a bones structure to simple

shapes or sets of MovieClip instances. Build a set of Poses and animate

between them. Angle Constraints Springs


Paint Brush Tool and Vector Art Brushes

New vector art brushes! Brush Library: set of built-in Art Brush

profiles CC Libraries Panel: custom vector art

brushes from Adobe Capture Built-in vector art brush editor Can combine both vector art brushes

and variable width stokes


Creative Cloud Libraries

All your content from Adobe Capture Mobile to desktop workflow Color Themes Illustrator-type Vector Brushes Captured shapes Drag and drop shapes onto the Stage Adobe Stock access


Enhanced Onion Skinning

Color coded! Same workflow as always Previous frames appear tinted blue Upcoming frames are tinted green Looks cool ;)


Stage Rotation

Grouped with the Pan Tool Set a Pin Rotate around the set Pin Makes it easier when using certain

devices to author stage content. Reset with the Center Stage button.


Tagged Swatches

Allows swatch reuse and updates across the project!

Change the tagged swatch and it updates anything that uses the tagged swatch

Indicated by small white triangle in corner.


Workflow


Document Conversion

Convert from any document type to any other Preserves the original document Carries over all assets and animation Code is generally commented out Warning will be issues to help convert Even works on custom platforms


Exploring Platform Differences

ActionScript No constraints!

HTML5 Canvas 3D Transform Tool 3D Rotation Tool Certain Filters

WebGL Text Tool 3D Transform Tool 3D Rotation Tool Certain Filters

Custom Platforms Varies…


Interactivity with JavaScript

JavaScript code snippets for Canvas and WebGL document types.

Full, native JavaScript editing within the Actions Panel.

CreateJS syntax (HTML5 Canvas) closely mimics ActionScript.

Use browser tools to inspect and debug.


Mobile Simulator for iOS and Android

Write Flash interactive content for Apple iOS and Google Android

Runs as native app through the App Store and Google Play

Simulate touches, gestures, geolocation, accelerometer, and more…


Sprite Sheets and Image Export

LOTS of different platforms support spritesheets

Flash Professional allows many options: Edge Animate JSON JSON-Array Sparrow v1 + v2 Starling Cocos2D v2 + v3 EaselJS


Publish as an OAM for InDesign, Muse, and Dreamweaver

Export Flash content in ActionScript, WebGL, or HTML5 Canvas to OAM (.oam) animated widget files.

The OAM files generated from Flash can be placed in Dreamweaver, Muse and InDesign.

Just choose “OAM Package” from the Publish Settings dialog.


Flexible Stage Scaling and Multi-resolution HD Video

Scale the Stage and all contents in complete perspective!

Select an anchor point in Document Settings, specify the height and width, and scale the Stage accordingly.

When “Scale content” is disabled, the Stage expands in the directions according to the selected anchor point


Importing Graphical Assets

Special Import Dialogs: Photoshop PSD Illustrator AI SVG

Direct Import: Flash SWF JPG PNG


Sharing Content via the Library or SWC

Drag and Drop Library items between open documents.

File > Import > Open External Library Export the Library contents as a SWC for use in

Apache Flex, other AS3-based projects, or even toolkits such as Haxe!


Paste Content Across Layers

Original Document Select Layers to copy Right Click > Copy Layers

New Document Select empty Layer(s) Right Click > Paste Layers


Let’s Flash!


LIVE DEMONSTRATION


Wrapping Up…


Flash Professional is undergoing a creative transformation

Flash Professional includes a mature and expanding set of creative tooling. Adobe continues to bring new creative tooling to an already mature

application. Whether drawing vector art, animating for video or web output, or creating

interactives – Flash Professional remains an all-in-one creative powerhouse.

The same workflow can be used across publish platforms. Flash Player and Adobe AIR remain hugely viable targets. HTML5 Canvas and WebGL targets are both fully integrated into the

application. The variety of additional platforms and targets is tremendous and growing.


Recent Flash Related Publications

Building Custom HTML5 Video Playback with

AngularJS

Flash Professional CCMobile App Development


Learn Interactive Media Using Adobe Flash Professional CC


Thank You…

Joseph Labrecque… http://josephlabrecque.com/ http://twitter.com/JosephLabrecque http://inflagrantedelicto.memoryspiral.com/ http://www.lynda.com/JosephLabrecque http://amazon.com/author/josephlabrecque

http://josephlabrecque.com/

http://twitter.com/JosephLabrecque

http://inflagrantedelicto.memoryspiral.com/

http://www.lynda.com/JosephLabrecque

http://amazon.com/author/josephlabrecque


Take the SESSION SURVEY on the MAX mobile app

…for your chance to WIN one of these e-books from Adobe

Press

Every survey you submit enters yourname to win the daily grand prize:

Dell UltraSharp 25” Monitor

adobe max 2015 - giving flash professional another look

Technology