Using Edge Animate to Create a Reusable Component Set

Adobe PresentationJoseph Labrecque | Using Edge Animate to Create a Reusable Component Set

Joseph Labrecque

Senior Interactive Software Engineer | Adjunct FacultyUniversity of Denver

Proprietor | OwnerFractured Vision Media, LLC

Adobe Community ProfessionalAdobe Education LeaderAdobe Certified ExpertAdobe Certified EducatorAdobe Influencer

ArtistAn Early Morning Letter, Displaced | shivervein

Joseph’s Edge Animate Publications

What we’ll be covering today

Edge Animate Overview Historical Component Creation Animate Composition Anatomy Creating Simple Components Advanced Components Component Libraries Resources

EDGE ANIMATE

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

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

COMPONENTCREATION

Components?

Components are self-contained bits of code and assets which enable specific functionality across an application. Buttons Lists Sliders Inputs Widgets

Notable Component Structures

Many, many, many Flash Libraries Web Templates Adobe TopCoat Twitter Bootstrap Foundation Flat UI Apache Flex “The Shadow DOM”

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.

Component Creation Overview

Major steps to component creation:1. Plan out functionality2. Plan design in support of that functionality3. Asset creation4. Edge Animate Symbol creation5. Wire up assets with interactivity6. Expose variables for customization7. Optionally integrate external data8. Distribution

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.

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

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”);

LIVE DEMO:FLASH PROFESSIONAL

EDGE ANIMATECOMPOSITIONS

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

Composition Symbol Structure

Symbols in Animate have their own Stage and Timeline.

Similar to How Flash Professional MovieClipSymbols have their own Timeline.

Symbols can have nested logic and assets.

Animate Symbol Stage Events: creationComplete() beforeDeletion()

Composition Symbol Properties

Width / Height Overflow: Visible Hidden Scroll Auto

Autoplay Instance: Scale Resize

Min / Max Width

LIVE DEMO:ANIMATE SYMBOLS

CREATINGCOMPONENTS

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…

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

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!

Using Custom Components

1. Drag an instance onto the Stage2. Give it an instance id3. Invoke sym.getSymbol(‘id’)4. From here… you can… Invoke functions Modify variables Target elements

LIVE DEMO:CREATE A BUTTON

ADVANCEDCOMPONENTS

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

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?

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.

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

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!

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);

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.

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.

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…

LIVE DEMO:ADVANCED EXAMPLES

COMPONENTLIBRARIES

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.

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 :)

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

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

FURTHEREXPLORATIONS

Resources and Links

Edge Animate Component Libraryhttps://github.com/josephlabrecque/EdgeAnimateComponentLibrary

Joseph’s Books & Videoshttp://josephlabrecque.com/books/

Lynda.comhttp://www.lynda.com/

EdgeCommonshttps://github.com/simonwidjaja/EdgeCommons

Thank You

Get in touch…

Twitter: @JosephLabrecqueEmail: Joseph.Labrecque@du.eduWeb: http://JosephLabrecque.com/

Flash… HTML5… either way…À votre santé!

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.

Using Edge Animate to Create a Reusable Component Set

Technology

Information Common Realization Knowledge/Competency ... · PDF fileDOC Platform + APIs to reusable services and facilities OMAs + Component Models ... 11 Microsoft’s Pre .Net Component

Animate yournamecards

Reusable Software Component Retrieval: Part II

Model-Based Integration of Reusable Component … Integration of Reusable Component-Based Avionics Systems ... fact testing necessary ... The Avionics Software Integration Challenge

Reusable Software Component Retrieval: Part I Taciana Amorim Vanderlei tav@cin.ufpe.br

A MODEL-DRIVEN SOFTWARE COMPONENT · PDF fileA MODEL-DRIVEN SOFTWARE COMPONENT FRAMEWORK FOR FRACTIONATED SPACECRAFT ... (and .NET) platform of ... composition of reusable components

Animate Form

Animate pp1

Component-Based Software Engineering Main issues: assemble systems out of (reusable) components compatibility of components

Software Reuse zBuilding software from reusable … › ... › teaching › CS451 › pdf › reuse.pdfzFunction reuse – The reusable component is a single function. ©Ian Sommerville

16 Shots of an Animate/In-animate Object

Validation Testing System: Reusable Software Component Design

2017 · Cosplay animate cosplay 200 2 500 10:00-24:00 1-21-1 TECH35 B1F-7F animate SEGA 60 UNIQLO UNIQLO animate 5. animate animate animate animate 13 / 16

NATO STANDARD FOR MANAGEMENT OF A … OF A REUSABLE SOFTWARE COMPONENT LIBRARY Volume 2 (of 3 Documents) - Development of Reusable Software Components - Management of a Reusable Software

Reusable Whiteboard Wicket Component for Apache Openmeetings

Developing Reusable Software Components for Embedded …ltahvild/courses/ECE750-11-S09/... · Developing Reusable Software Components for Embedded Systems ... Component models such

COTS and Reusable Software Management Planning: A …8.2 Elaboration Phase 59 8.2.1 Planning Evaluation Activities 60 ... software is just one type of reusable software component,

Go Animate !

Reusable Component Services RCS

Presentation Component Cookbook - SDN · PDF fileSitecore CMS 6.1 Presentation Component Cookbook ... especially to identify reusable data, ... multiple .NET assemblies,