Demo by Kirsten Rourke

BreaktimeInvestigations

“FDCPA Uncovered”

Adding Edge Animate content to Adobe

Captivate 8 projects

http://bit.ly/captivateEdgeDemo

Presenter

Kirsten Rourke

CompTIA Certified Technical Trainer, Speaker, and Instructional Designer focused on Adobe graphic design and eLearning products.

Adobe Community Professional

Owner of Rourke Training since 2000

Co-hosts a weekly podcast, "eMediaChat," with Rick Zanotti

UGM of CMAAUG (Central MA Adobe User Group) covering both the Adobe eLearning products and Creative Cloud.

The Plan

Workflow – PS into Edge into Captivate

Responsive Scaling vs. Percentage

Adding Edge OAM to Captivate

Publish

Cp - Advanced Action Navigation

This button will:

• bring you back to the

“investigation” page

• disables the “Talk to the

neighbor” button

• and adds a checkmark

Edge Animate into Captivate 8

1. Create logo in Edge

2. Publish as OEM file

3. Insert OEM in Captivate as either Web Object

or HTML5 Object

Responsive Scaling/Percentage

Width, Height, or Both

X and W set to %

You can pin content to edge

Stage = Width 100%

Edge Logo Animation

450 square stage

Import “detectiveLogo.png”

Draw ring and mask half

Duplicate

Name and Color

Top Ring = Black/Bottom Ring = Slate

Use Keyframes and Pin to set rotation points

Responsive Scaling, Save

Publish Settings for OAM, Publish

Edge Animation Spritesheet

Take images from Illustrator; paste as smart objects in PS

– or –

Create directly in PS

Make Spritesheet directly in Photoshop

http://bit.ly/ConverseSpritesheet

Photoshop – load script to make spritesheets

http://bit.ly/PSspritesheets

http://bit.ly/EdgeImportSpritesheets

Run script to generate .png and .eas files.

Things to watch for

SVG server settings, best alternative is use PNG

https://helpx.adobe.com/edge-animate/kb/best-practices-

graphics-edge-animate.html

Hide Firefox Browser Warning for Cap 8

https://support.muse.adobe.com/thread/1558076?start=

0&tstart=0

What we talked about

Workflow - IL and PS into Edge into Captivate

Responsive Scaling vs. Percentage

Adding Edge OAM to Captivate

Publish

Good Links

Demo Recording - http://bit.ly/captivateEdgeDemo

http://www.edgehero.com/

http://www.edgedocks.com/

http://html.adobe.com/edge/animate/showcase.html

Thank You!

Any Questions?

Kirsten Rourke

@kirstenrourke

http://www.KirstenRourke.comhttp://about.me/kirstenrourke