Upload
joseph-labrecque
View
3.343
Download
0
Embed Size (px)
Citation preview
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Giving Flash Professional Another LookJoseph Labrecque | Senior Interactive Software Engineer
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Why am I doing this?
I BELIEVE IN FLASH PROFESSIONAL.
I BELIEVE IN CREATIVE EXPRESSION.
I BELIEVE IN FREEDOM OF TECHNOLOGY CHOICES.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Most importantly…
I BELIEVE THAT
FLASH PROFESSIONAL
DESERVES ANOTHER LOOK.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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)
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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!
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Target Platforms and Reach
Flash Player Adobe AIR HD Video HTML5 Canvas WebGL Sprite Sheets Image Sequences SVG CUSTOM PLATFORMS
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Player
1st Version : 1996 Standalone or embedded runtime Runs SWF files Browser Extension Native Bundling
STABLE: Flash Player 19 [September 21st]
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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!
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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!
*as of September 2nd, 2015
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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!
*as of September 2nd, 2015
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
WebGL
GPU Acceleration Utilizes Canvas element as well. Adobe WebGL Runtime Flash Professional has native support
for WebGL. Write JavaScript in Actions Panel.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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!
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Multiple Image Formats
Direct Export: Static GIF PNG JPG
Export Dialog: Sprite Sheets PNG Sequence
Publish Dialog: Animated GIF Static SVG PNG JPG
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Professional CC (2013)
HTML5 Canvas Publishing 64-bit Architecture Real Time Drawing Unlimited Pasteboard Debugging AIR via USB New Actions Editor Timeline JDIs
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Professional CC (2014)
Variable-width Strokes Motion Editor SVG Export Animated WebGL Projectors HTML Panels
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Professional CC (2014.1)
Custom Platforms Interactive WebGL Custom Brushes Animation Guides SWF Import
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Professional CC (2015)
Bone Tool Canvas Sprite Sheets Timeline Video Guide Audio Splitting Scaled Brushes iOS 64-bit Output
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Professional CC (2015.1)
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flash Professional CC (2015.1)
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Vector Asset Creation Tools
Pen Tool Text Tool Line Tool Rectangle Tools Oval Tools PolyStar Tool Pencil Tool Paint Brush Tool Brush Tool
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Asset Modification Tools
Selection Tool Subselection Tool Free Transform Tool Gradient Transform Tool 3D Rotation and Translation Tools Bone and Bind Tools Width Tool
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Enhanced Onion Skinning
Color coded! Same workflow as always Previous frames appear tinted blue Upcoming frames are tinted green Looks cool ;)
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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…
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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…
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Importing Graphical Assets
Special Import Dialogs: Photoshop PSD Illustrator AI SVG
Direct Import: Flash SWF JPG PNG
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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!
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Paste Content Across Layers
Original Document Select Layers to copy Right Click > Copy Layers
New Document Select empty Layer(s) Right Click > Paste Layers
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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.
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Recent Flash Related Publications
Building Custom HTML5 Video Playback with
AngularJS
Flash Professional CCMobile App Development
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Learn Interactive Media Using Adobe Flash Professional CC
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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