With Dr. Pooja Jaisingh and Kirsten Rourke

Adobe Learning Summit 2014

Create Responsive Animations with

Edge Animate 2014 & Adobe

Captivate 8

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.

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

“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

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

Edge Animate into Captivate 8

Create logo in Edge

Publish as OEM file

Insert OEM in Captivate as Web Object

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

Edge Animation - Percentage

Text boxes with X and W set to %

Text boxes pinned to outside edge

Stage = Width 100%

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

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.comhttp://about.me/kirstenrourke

Demo File: http://kirstenrourke.com/VegasDemo2014/

Built to be previewed in Chrome