Motion Comic Effect

A lot of the motion effects you see in your example can be created with PowerPoint and Storyline using motion paths. 

Here's a good thread on PowerPoint animation effects that will mostly apply to Storyline: https://community.articulate.com/discussions/articulate-presenter/you-top-10-favorite-ppt-animations-transitions-or-text-effects

To achieve the comic style effect, you have a lot of options.

There are dozens of apps for iOS (and I'm sure for Android) that can stylize photos or illustrations with the comic style. ToonCamera is one of my favorite apps.

You can find plenty of plugins for Photoshop to automate the comic style process. Or, you can do it yourself using basic image techniques.

As for characters, the built-in characters in Storyline give you hundreds of poses and expressions. You can also find multi-pose characters at sites like Elearning Art for a good price.

A few other examples that might help you on your quest:

• A great example built on sound instructional design
• Another one. There are some worthwhile articles that are linked to how it was created, how they hired a comic artist and how it was working with one, etc. 
• And this one is important from the perspective of developing a story. 

So much more out there on scenario based elearning. 

From a character development (visual) there really aren't any shortcuts that will get you close to the example you cited. It will cost in dollars or time (but time is money too). I've had success developing similar projects using GoAnimate (online subscription), CrazyTalk Animator (software), or using photos that have been shot by me or others and convert them to the comic look using Photoshop actions as David mentioned above. The best option I've ever used is working with a comic artist directly. 

Hi Darlene,

My soft spot - comics to tell stories. Softer spot are motion comics! 

Can't echo David and Michael enough here. I'm excited for you about your interest in this genre approach to elearning. From one who had developed a few of these type projects before, the majority of the effort is in the artwork. I built this one a couple years ago - PwP in Action

The tools are not that big of an issue as David and Michael suggested. There are countless tools and apps available today to create the look you want. If you want that pure hand-drawn look/feel where every pose, gesture, expression, apparel, background, etc. are key in telling the story, they you will need to resort to hiring an artist. 

You can achieve the look using a low-budget approach, but building a motion comic or interactive graphic novel is not about the art - it's about the story. You need a good well-written story. In fact, the story should be written similar as if you were writing a screenplay because each panel will need to be described to set the tone, mood, location, etc. Dialog is just part of the project.

With a low-budget and tools like photo conversion apps or plugins for the visuals and PowerPoint and/or Storyline for the development, you're not that far off.

If I could offer one piece of advice, though - focus on the story. The design. All the tools or how to achieve the look are already out there. If you focus on the tools first, you will restrict your story because you're trying to "fit" the story into that tool. Write the story first. Then go find the tools.

Your demo is fantastic Kevin - thanks for letting us sneak a peek!

Hi Christie - thank you so much for the response.  That older thread, in fact, was what inspired me in the first place when I started exploring all the links that members provided.  I just needed more info on the 'how to'.  :)

David - thank you!  I downloaded that ToonCamera app and it is fantastic.  I can now customize the characters and background exactly as I need it!   Great tip and advice - I know I was aware of such apps but for some reason I didn't think of them as an eLearning tool!  I will look at all the other links and suggestions you've provided. 

Thanks Wendy!

Here's another app that converts photos to a "sketchy" look:

Sketch Master

Kevin - thank you for your response - thank you for sharing your project.  And I completely share your views on the importance of the story.  I will be working with a small focus group that I think will bring a lot of value to creating that realistic story that will resonate with the learners.  Thank you for the advice.

You're very welcome! Good luck and would love to hear more about the progress.

Downloaded :)  I think I'm going to be up late playing :)

Sounds like  you're suffering from the "late night creative curse". The only cure is make something!

For sure - I'll definitely be revisiting here throughout development for tips I'm sure.  Actually here's my first question.  I don't have photoshop or Adobe Ilustrator... is there a way to separate a person out from the background - i.e. make into a vector image?   So that I can overlay people onto a background (then create motion paths as suggested).?

There is a feature in PowerPoint that removes the background of an image. It works best if there is a strong contrast between the subject you are wanting to extract from the background as the tool in PPT is not for pro editing.

There are LOTS of tutorials online how to do this. A quick search for "how to remove the background from an image in PowerPoint" revealed this top hit:

http://blog.hubspot.com/marketing/how-to-remove-background-image-in-powerpoint-design-ht

Kevin

can you let me know approx how long it took to develop that content - from writing the story to final publish

The PwP in Action comic? Concept to completion was about 9 months. The first 6 months were writing the script, designing the scenes, drawing and preparing all the artwork. Development only took a month or so and then final testing and tweaking to close it out.

We could have done it in half or less time, but the client was new to this type of project. I spent a lot of time educating the process while they re-wrote the script a few times followed by needing approvals every time they changed the script.

Amazing.  I love this community.  Here is what I've created to satisfy that itch - simple layering of photo over background with the voice bubble.  I think I can go to bed now :)  Ignore that I cut off his body... I forgot to zoom out to see the whole image.

There are Free alternatives to Photoshop and Illustrator:
Gimp as an alternative to Photoshop
Inkscape as an alternative to Illustrator

Don't know if this will help completely.

http://www.designcomics.org/

These are: Free comic characters and scenes you can use to develop great
product design.

Thank you! I will check those!

Hey Darlene, you may get stuck trying to mimic 'motion comics' each panel ... I'd be very careful with playing with a well established medium like a comic (if you lack the experience).

What I mean is this: the majority of people have a familiar and established 'user experience' with a comic—and that experience, if the story is compelling, can be a good without the need to shift characters & backgrounds around (which I personally think is a horrible experience).

The 'Healthcare Power Solutions - The Quake Motion Comic' is bad if it simply allows the learner to push play, then sit passively... (that experience also has someone read the comic to me?)

With that said...

Infinite Comics is the direction you may want to consider: https://en.wikipedia.org/wiki/Infinite_Comics

And it can be easily replicated in Articulate Storyline; here's some random guy on YouTube explaining Marvel's Infinite Comics: https://youtu.be/5hmbo51R6oA?t=1m6s

I recommend you watch digital comics pioneer, Mark Waid's talk, "Reinventing Comics and Graphic Novels for Digital - TOC 2013" https://www.youtube.com/watch?v=vPikusZm2As

Infinite Comics was the inspiration of my second iteration of "Broken Co-worker" - my attempt to improve on the original, and to properly take advantage of the digital space.

http://brokencoworker.com/diamond-demo/

What we have—using Articulate Storyline—is the ability to replicate the technical and creative direction of comic powerhouses Marvel & Amazon (Amazon owns Comixology).

Personally, once a story & storyboard is hashed out, and I had a talented comic artist, I'd be able to build a digital comic in a day with Storyline... *okay, maybe two days :P

Have fun,
Ryan

P.S. Second Mr. Thorn's advice: "If I could offer one piece of advice, though - focus on the story. [...] Write the story first. Then go find the tools."

P.P.S. While you write your learning story, if you're envisioning an "Infinite Comics" experience, you can quickly storyboard in Storyline, which will allow you to see & test each panel transitioning in an engaging way ... A bit of a lean development approach.

P.P.P.S. Okay. One last piece of advice: Work backwards from your learning goal, and make it activity-based (like Broken Co-worker). Try to break your story up into scene's where a decision needs to be made. Haji Kamal is the same (an activity-based scenario).

Speaking of which, here's my Haji Kamal Office Space Remix: http://brokencoworker.com/bill-lumbergh-activity/ (this example was made to illustrate the flexibility of the Haji Kamal design/learning mechanic)

/now, i better get back to work...

Thanks you Kevin - I will save it in my 'toolbox'.  It is consistent with the style I'm looking for.

Wow - fabulous insight Ryan!  I am quite familiar with broken co-worker and have seen both versions - it was definitely inspiring for my project.  I like your suggestion of this 'leaner' approach with Infinite comic style and how easy it is in Articulate.  The idea for my project is to just have maybe no more than 30 seconds of story interspersed between content/concept scenes.  So the entire project won't be comic style - short comic scenes will be utilized to enhance the storytelling.  Thank you for taking the time to respond.  I will be sure to share my final project in a couple of months :)