This is the deck for the "Responsive eLearning Design using Edge Animate and Captivate 8" shown at the Adobe Learning Summit 2014 in Vegas. The demo is here - http://kirstenrourke.com/VegasDemo2014/ Preview in Chrome. Firefox will kick up a browser warning.

1. Adobe Learning
Summit 2014
Create Responsive Animations with
Edge Animate 2014 & Adobe Captivate
8
With Dr. Pooja Jaisingh and Kirsten Rourke

2. Presenters
Dr. Pooja Jaisingh
 Senior eLearning Evangelist at Adobe
Systems
 Has worked for more than 12 years as a
teacher trainer, eLearning instructional
designer, and eLearning evangelist for
Adobe Systems.
 Conducts numerous seminars and
workshops, on Adobe Systems’ eLearning
products.
 Holds a master’s degree in education and
economics and a doctorate in
educational technology.
Kirsten Rourke
 Adobe Community Professional
 Owner of Rourke Training since 2000
 Certified Technical trainer and
instructional designer focused on Adobe
graphic design and eLearning products.
 Co-hosts a weekly podcast,
"eMediaChat," with Rick Zanotti
 UGM of CMAAUG (Central MA Adobe
User Group) which covers both the
Adobe eLearning site and Creative
Cloud.

3. Use Case
Employee “Breaktime Investigations” learning material on
banking regulations. Must be viewable on laptops, ipads, and
smartphones.
This demo is “Module 1”.
It includes:
 4 Illustrator images (Fotolia art into .png files)
 Photoshop art converted to Edge Spritesheet
 3 Edge Animations showing both Responsive Scaling and
Percentage design options.
 Captivate 8 with three screen size designs

4. “The Plan”
Workflow - IL and PS into Edge into Captivate
Responsive Scaling
Percentage
Adding Edge OAM to Captivate
Adjusting Captivate – Exclude and Preview in Browser
Preview with Edge Inspect
Publish
Kirsten’s Topic
Poojas’s Topic

5. Navigation with Advanced Actions
This button will:
• bring you back to the
“investigation” page
• disables the “Talk to the neighbor”
button
• and adds a checkmark

6. Edge Animate into Captivate 8
Create logo in Edge
Publish as OEM file
Insert OEM in Captivate as Web Object

7. Edge Animation Spritesheet
Take images from Illustrator – all the same size with different
stages of blink. Place as smart objects in PS
Photoshop – load script to make spritesheets
http://bit.ly/PSspritesheets
http://bit.ly/EdgeImportSpritesheets
Run script to generate .png and .eas files.
Add OAM File

8. Edge Animation - Percentage
 Text boxes with X and W set to %
 Text boxes pinned to outside edge
 Stage = Width 100%

9. What we talked about
 Workflow overview for responsive design project
 Captivate - Three views allow you to set breakpoints that
target your preferred screen sizes.
 Smartphone view let’s you create a mobile-friendly design
with different positions and altered images.
 Preview with slider to see changes between breakpoints.
 Edge - Percent or Responsive Scaling
 Preview with Edge Inspect live on device
 Publishing

10. Thank You!
Any Questions?
Dr. Pooja Jaisingh
Twitter: @poojajaisingh
http://blogs.adobe.com/captivate/
http://about.me/pooja.jaisingh
Kirsten Rourke
@rourketraining
http://www.KirstenRourke.com
http://about.me/kirstenrourke
Demo File: http://kirstenrourke.com/VegasDemo2014/
Built to be previewed in Chrome