Web-app product demonstration

Hello,

First - Thanks for this great resource and community.

I'm looking to show off a web app in a stylish way. A perfect example of what I am looking to replicate is a demonstration video of productivity manager "Producteev." You can view it here.



Any idea how this accomplished? Are they simply using screen-recording software and make jump cuts?

Any help or nudge in the right direction is very much appreciated!

ScreenFlow does this, probably better than anything else out there.

Ben,

Thanks for your response!

I should have been more specific, so forgive me.

I know Producteev may have used Motion or After Effects to some degree, but was wondering if they created their video using screenshots or screen-recordings. Obviously there's a lot more at work then just a screen recording, if so.

I'm just looking for a method/workflow of creating something similar. Have you seen FCP.co user Deyson's social media package template for Motion?

Screenflow is awesome and I am a user.

Create the graphics and animations in Motion. Since Screenflow will zoom and give you mouse cursor control that nothing else will, I usually do all my editing inside of it. I record my voiceover in FCPX. Then take that audio file, as my timing guide, into Motion to create my graphics and animations. Then into Screenflow to do my screen capture and editing with my VO audio file and Motion graphic/animation files. I try to keep it as simple as I can.

You won't get quite the same result using Screenflow that are on display in the Producteev video. They are clearly rebuilding their user interface elements as structured objects in a motion graphic app (Motion, AE) and animating them. The zooms in a screen capture app would show pixel scaling artefacts.

"The zooms in a screen capture app would show pixel scaling artefacts."

Not really true. And that's the thing about Screenflow, it can zoom in a great deal without pixelating. The mouse cursor is a sprite you can turn on/off, change, etc. I've been using Screenflow for years to create software training videos. It records screens in a very unique, powerful, flexible way. I can zoom in a great deal and not have any pixilation at all.

As for the mobile apps screens, not sure what they're using, but it could work the same. I have an associate who's done training videos for iPads, and gets really zoomed in on his captures with stunning clarity. I think he's using Screenflow getting screen capture movies running on a Mac, with the iOS app running in the dev interface.

BenB wrote: "The zooms in a screen capture app would show pixel scaling artefacts."

Not really true. And that's the thing about Screenflow, it can zoom in a great deal without pixelating. The mouse cursor is a sprite you can turn on/off, change, etc. I've been using Screenflow for years to create software training videos. It records screens in a very unique, powerful, flexible way. I can zoom in a great deal and not have any pixilation at all.

As for the mobile apps screens, not sure what they're using, but it could work the same. I have an associate who's done training videos for iPads, and gets really zoomed in on his captures with stunning clarity. I think he's using Screenflow getting screen capture movies running on a Mac, with the iOS app running in the dev interface.

Sorry, but you are incorrect. Did you look at the Producteev video? The on-screen text and screen elements are dynamically antialiasing as it scales. They're vectors. There is no way this was captured with Screenflow or any other screen capture application. While Screenflow admittedly does a nice job smoothly upscaling pre-rendered on-screen elements for zoom-ins, there is no way for it to do what is on display in the sample video. It's still upscaling elements that are anti-aliased at their native pixel resolution. All it can do is work with the already rendered screen elements and scale them up as cleanly as it can. Screeflow (or similar) will get you close. And it will treat the cursor itself as an independent sprite that you can replace. And if you use a custom cursor image, that will get re-antialiased independently of the zoom in Screen Recording Action. But to say that there are not pixel scaling artefacts is incorrect.

Thanks for the input, both of you.

I think I'll try the Screenflow route, since I am not experienced enough to build those sort of graphics.

Ben,
When you say create the graphics and animations in motion, are you referring to say, a vector website (in this case) and inserting the Screenflow content onto it?

Those of us who produce software training videos for a living on a daily basis use, is to set the screen size in Screenflow to 720HD. Then you're actually working with a shrunk down version of your software screen capture. This allows for some really nice zooms without horrible aliasing.

When I say graphics and animations, I'm not the screen capture itself.