Adobe MAX 2015 - Giving Flash Professional Another Look

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Giving Flash Professional Another Look
Joseph Labrecque | Senior Interactive Software Engineer

Joseph Labrecque
 Senior Interactive Software Engineer
Adjunct Faculty
University of Denver
 Principal and Sole Proprietor
Fractured Vision Media, LLC
 Adobe Education Leader
Adobe Community Professional
Adobe Systems, Inc.
 Apache Software Foundation
Apache Flex Committer
 Author
Lynda.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:
Mobile:
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 CC
Mobile 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

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 your
name to win the daily grand prize:
Dell UltraSharp 25” Monitor

Adobe MAX 2015 - Giving Flash Professional Another Look

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Adobe MAX 2015 - Giving Flash Professional Another Look

Similaire à Adobe MAX 2015 - Giving Flash Professional Another Look (20)

Plus de Joseph Labrecque

Plus de Joseph Labrecque (20)

Dernier

Dernier (20)

Adobe MAX 2015 - Giving Flash Professional Another Look