© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Adobe Presentation
Joseph Labrecque | Using Ed...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Joseph Labrecque
Senior Interactive Software E...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Joseph’s Edge Animate Publications
3
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What we’ll be covering today
 Edge Animate Ov...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
EDGE ANIMATE
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Tools and Services
 Free to use at some ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate
 New tool for motion and interac...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
COMPONENT
CREATION
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Components?
 Components are self-contained bi...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Notable Component Structures
 Many, many, man...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Component Creation in Animate
 Components are...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Component Creation Overview
Major steps to com...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Familiar Component Creation Example
Flash Plat...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Authoring Component Parts
MovieClip Symbol
 B...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Wiring Up Interactivity
Force familiar button ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
FLASH PROFESSIONAL
16
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
EDGE ANIMATE
COMPOSITIONS
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
About Animate Compositions
 Much like Flash c...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Composition Symbol Structure
 Symbols in Anim...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Composition Symbol Properties
 Width / Height...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
ANIMATE SYMBOLS
21
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CREATING
COMPONENTS
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Creating a Simple Button Component
Simple Butt...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Generate Component Parts
Components almost alw...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Exposing Parts for Manipulation
Simple Button ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Using Custom Components
1. Drag an instance on...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
CREATE A BUTTON
27
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ADVANCED
COMPONENTS
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Creating an Advanced Component
Going beyond th...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Composition Setup
Important considerations bef...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Component Parts
When building a small widget i...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Using jQuery in a Component
jQuery is already ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Integrating External Data
Load in data using…
...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Load up the JSON
1. Expose a method to the par...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Parse and store the JSON
1. Instantiate a cont...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Generate Objects/Styles/Content from Data
We c...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Don’t forget to… ANIMATE!
Hey! We are building...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
ADVANCED EXAMPLES
38
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
COMPONENT
LIBRARIES
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate Libraries and Symbol Files
 Anim...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Edge Animate Templates
 Templates are persist...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Sharing Component Sets
There are a number of w...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Distribution Platforms
There are many private ...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FURTHER
EXPLORATIONS
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Resources and Links
Edge Animate Component Lib...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Thank You
Get in touch…
Twitter: @JosephLabrec...
© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Take the SESSION SURVEY on the MAX COMPANION a...
Upcoming SlideShare
Loading in …5
×

Using Edge Animate to Create a Reusable Component Set

5,219 views

Published on

Adobe MAX 2013

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,219
On SlideShare
0
From Embeds
0
Number of Embeds
927
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Using Edge Animate to Create a Reusable Component Set

  1. 1. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Adobe Presentation Joseph Labrecque | Using Edge Animate to Create a Reusable Component Set 1
  2. 2. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Joseph Labrecque Senior Interactive Software Engineer | Adjunct Faculty University of Denver Proprietor | Owner Fractured Vision Media, LLC Adobe Community Professional Adobe Education Leader Adobe Certified Expert Adobe Certified Educator Adobe Influencer Author Packt Publishing | O’Reilly Media | Lynda.com | video2brain | Adobe Press | Peachpit Artist An Early Morning Letter, Displaced | shivervein 2
  3. 3. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Joseph’s Edge Animate Publications 3
  4. 4. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. What we’ll be covering today  Edge Animate Overview  Historical Component Creation  Animate Composition Anatomy  Creating Simple Components  Advanced Components  Component Libraries  Resources 4
  5. 5. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. EDGE ANIMATE
  6. 6. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Edge Tools and Services  Free to use at some level  Part of the Adobe Creative Cloud  Built from scratch for creative HTML, CSS, and JavaScript  Includes the following:  Edge Animate  Edge Code  Edge Inspect  Edge Reflow  Edge Web Fonts / Typekit  PhoneGap Build 6
  7. 7. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Edge Animate  New tool for motion and interactivity  Based upon standard web technologies  Precise animation tools  Web font integration  CSS Filters and Gradients  Motion Paths  Symbols  Mobile friendly 7
  8. 8. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. COMPONENT CREATION
  9. 9. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Components?  Components are self-contained bits of code and assets which enable specific functionality across an application.  Buttons  Lists  Sliders  Inputs  Widgets 9
  10. 10. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Notable Component Structures  Many, many, many Flash Libraries  Web Templates  Adobe TopCoat  Twitter Bootstrap  Foundation  Flat UI  Apache Flex  “The Shadow DOM” 10
  11. 11. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Component Creation in Animate  Components are just Symbols!  How you think about them and how you wire them up matters a great deal.  They can be as simple or as complex as you want.  Could be a simple button.  Could be a complex nested widget.  Fully sharable via Animate Symbol Libraries and Templating. 11
  12. 12. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Component Creation Overview Major steps to component creation: 1. Plan out functionality 2. Plan design in support of that functionality 3. Asset creation 4. Edge Animate Symbol creation 5. Wire up assets with interactivity 6. Expose variables for customization 7. Optionally integrate external data 8. Distribution 12
  13. 13. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Familiar Component Creation Example Flash Platform Tooling:  Component creation in Flash Professional is very similar to approaches in Edge Animate :)  Skills are easily transferable. We will:  Create a Button with 3 states and the ability to set a custom label.  Examples using Flash Professional first – then transfer this modal to Edge Animate.  Also see a complex component in Edge Animate. 13
  14. 14. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Authoring Component Parts MovieClip Symbol  Button skin  Up  Hover  Down  Dynamic label text object  Actions Layer to stop() the Timeline  Labels Layer to set state 14
  15. 15. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Wiring Up Interactivity Force familiar button behavior:  Set buttonMode and useHandCursor to true  Set mouseChildren to false Event listeners for Up, Over Out, and Down  Corresponding functions to handle each event and jump to a specific label for each: this.gotoAndStop(“Hover”); 15
  16. 16. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LIVE DEMO: FLASH PROFESSIONAL 16
  17. 17. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. EDGE ANIMATE COMPOSITIONS
  18. 18. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. About Animate Compositions  Much like Flash content, Animate compositions can be used to create any number of projects:  Web Animations  Web Banners  Web Interactives  Mobile Assets (PhoneGap)  Simple Games  Widgets 18
  19. 19. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Composition Symbol Structure  Symbols in Animate have their own Stage and Timeline.  Similar to How Flash Professional MovieClip Symbols have their own Timeline.  Symbols can have nested logic and assets. Animate Symbol Stage Events:  creationComplete()  beforeDeletion() 19
  20. 20. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Composition Symbol Properties  Width / Height  Overflow:  Visible  Hidden  Scroll  Auto  Autoplay  Instance:  Scale  Resize  Min / Max Width 20
  21. 21. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LIVE DEMO: ANIMATE SYMBOLS 21
  22. 22. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. CREATING COMPONENTS
  23. 23. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Creating a Simple Button Component Simple Button* has:  3 different button states  Up, Hover, Down  Label which can be changed per-instance  Will scale upon resize *of course – you may define as many states as desired… 23
  24. 24. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Generate Component Parts Components almost always include the following parts:  Skins / Image Assets  Layout / Motion  Interaction Logic Can also include:  Sound  External Data  Property Exposure 24
  25. 25. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Exposing Parts for Manipulation Simple Button States:  Timeline Labels: Up, Hover, Down  Map to Mouse Events:  mouseup, mouseout, mousedown, mouseover  Jump to Timeline Labels to switch state.  “label” is a Text Box exposed within the Symbol for outside manipulation.  Easy! 25
  26. 26. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Using Custom Components 1. Drag an instance onto the Stage 2. Give it an instance id 3. Invoke sym.getSymbol(‘id’) 4. From here… you can…  Invoke functions  Modify variables  Target elements 26
  27. 27. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LIVE DEMO: CREATE A BUTTON 27
  28. 28. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ADVANCED COMPONENTS
  29. 29. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Creating an Advanced Component Going beyond things like; Button, List, Scroller, Accordion, ToggleButton, et cetera.  Nested parts with isolated events  Presentation of many data pieces  Communication between Symbol instances  Data injection from the parent Stage  Tap into remote data APIs 29
  30. 30. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Composition Setup Important considerations before getting too far in the development of our component  Will this be a responsive layout?  Is it better to resize, or scale?  Set defaults for layout  When should the component initialize?  What properties/methods may be exposed? 30
  31. 31. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Component Parts When building a small widget in Animate – we will want all of these tasks to occur internal to that component Symbol.  Makes it easily accessible.  Makes it infinitely distributable.  Contains all aspects of the component within itself. 31
  32. 32. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Using jQuery in a Component jQuery is already part of Edge Animate!*  Why use jQuery?  Already available within the composition  Mature library  Familiarity  Cross-browser support  Great JSON support via AJAX!  (Using Twitter JSON results) *jQuery 1.x – not the new 2.x 32
  33. 33. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Integrating External Data Load in data using…  JSON  XML  Other data transport formats Twitter Public Search APIs  Lots of web services have nice APIs to tap into which server as JSON or XML  We are going to use Twitter  Pull @ mentions into a component! 33
  34. 34. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Load up the JSON 1. Expose a method to the parent Stage which allows method invocation (and passing of args): loadTweets("@EdgeAnimate", 7); 2. Use jQuery to import the JSON via the getJSON() method: $.getJSON(dataURL + '&callback=?', function(data) {} 3. We can easily view the results in Chrome: console.log(tweetArray); 34
  35. 35. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Parse and store the JSON 1. Instantiate a container array to store our data: var tweetArray = new Array(); 2. Create a function to loop over the results and build up internal data structures based upon these results. 3. Once finished, manipulate the component in such a way that it is fed the ingested data and exposes it through the Animate composition. 35
  36. 36. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Generate Objects/Styles/Content from Data We can do this in a number of ways…  Change the text within a Text element  Adjust CSS properties w/ jQuery  Adjust Animate properties like location, scale, and transform.  Even generate additional instances of component parts through nested symbol duplication. 36
  37. 37. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Don’t forget to… ANIMATE! Hey! We are building these things in an animation program, after all…  Animation adds life into what might otherwise be a dull experience.  Subtle animation is often the best animation.  …but sometimes crazy stuff is what catches attention.*  It all depends upon the project and the intended audience. *Just as with Flash content – be careful when doing crazy stuff… a lot of power here… 37
  38. 38. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. LIVE DEMO: ADVANCED EXAMPLES 38
  39. 39. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. COMPONENT LIBRARIES
  40. 40. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Edge Animate Libraries and Symbol Files  Animate Symbols can be exported from the Library via right-click menu.  These .ansym files can be imported into additional projects.  When imported, they retain Symbol structure and contents.  Anything on the main composition Stage is not carried over with Animate Symbol files. 40
  41. 41. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Edge Animate Templates  Templates are persistent across projects.  Templates, much like Animate Symbol Libraries, are distributable.  We can include any amount of functionality we desire within a Template.  Templates with a formed Stage.  Templates with basic Library exposed.  Templates which demonstrate component usage :) 41
  42. 42. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Sharing Component Sets There are a number of ways to share these components once they have been created and tested:  Zip up the Animate project  Save the entire composition as a Template  Save individual Symbol components as Animate Symbol Libraries 42
  43. 43. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Distribution Platforms There are many private and public platforms which can be used to distribute these component sets:  GitHub  BitBucket  DropBox  SkyDrive  Google Drive  Adobe Creative Cloud  Local Network 43
  44. 44. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. FURTHER EXPLORATIONS
  45. 45. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Resources and Links Edge Animate Component Library https://github.com/josephlabrecque/EdgeAnimateCo mponentLibrary Joseph’s Books & Videos http://josephlabrecque.com/books/ Lynda.com http://www.lynda.com/ EdgeCommons https://github.com/simonwidjaja/EdgeCommons 45
  46. 46. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thank You Get in touch… Twitter: @JosephLabrecque Email: Joseph.Labrecque@du.edu Web: http://JosephLabrecque.com/ Flash… HTML5… either way… À votre santé! 46
  47. 47. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Take the SESSION SURVEY on the MAX COMPANION 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 - an Apple iPod Nano. 47

×