More Related Content
Similar to Using Edge Animate to Create a Reusable Component Set
Similar to Using Edge Animate to Create a Reusable Component Set (20)
More from Joseph Labrecque
More from Joseph Labrecque (20)
Using Edge Animate to Create a Reusable Component Set
- 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Joseph’s Edge Animate Publications
3
- 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
EDGE ANIMATE
- 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
COMPONENT
CREATION
- 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. © 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. © 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. © 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. © 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. © 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
FLASH PROFESSIONAL
16
- 17. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
EDGE ANIMATE
COMPOSITIONS
- 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. © 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
ANIMATE SYMBOLS
21
- 22. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
CREATING
COMPONENTS
- 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. © 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. © 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
CREATE A BUTTON
27
- 28. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
ADVANCED
COMPONENTS
- 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
LIVE DEMO:
ADVANCED EXAMPLES
38
- 39. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
COMPONENT
LIBRARIES
- 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. © 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. © 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. © 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. © 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
FURTHER
EXPLORATIONS
- 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. © 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. © 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