This is the deck from an demo I gave in Feb 2015 Demo Link - http://bit.ly/captivateEdgeDemo

1. Demo by Kirsten Rourke
Breaktime
Investigations
“FDCPA Uncovered”
Adding Edge Animate content to Adobe
Captivate 8 projects
http://bit.ly/captivateEdgeDemo

2. 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.

3. The Plan
Workflow – PS into Edge into Captivate
Responsive Scaling vs. Percentage
Adding Edge OAM to Captivate
Publish

4. 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

5. 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

6. Responsive Scaling/Percentage
 Width, Height, or Both
 X and W set to %
 You can pin content to edge
 Stage = Width 100%

7. 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

8. 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.

9. 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

10. What we talked about
Workflow - IL and PS into Edge into Captivate
Responsive Scaling vs. Percentage
Adding Edge OAM to Captivate
Publish

11. Good Links
 Demo Recording - http://bit.ly/captivateEdgeDemo
 http://www.edgehero.com/
 http://www.edgedocks.com/
 http://html.adobe.com/edge/animate/showcase.html

12. Thank You!
Any Questions?
Kirsten Rourke
@kirstenrourke
http://www.KirstenRourke.com
http://about.me/kirstenrourke