0

We're building the features page for our web product (online investment management service). We'd like to showcase some of the features by displaying short clips of user interactions with that feature (eg. here or here)

What we've found is that most of these interactions are basically screen recordings in mp4 or gif format. So, as bitmap formats, they have a particular resolution, usually relatively low, and they inevitably occupy between 250kb and 2-3 mb, which can add up if you want to have 10 of these on a page. So you have large file size and low quality.

Given that we have the PSDs and the HTML/CSS/JS, is there some way to easily create a vector based animation of some sort instead to replicate the user interaction? Maybe HTML or canvas animation or something? If this animation was described as a vector, we could probably achieve each animation in 20-30kb, creating huge load time savings (we're in India, where people are still on pretty slow connections) AND much better quality (because vector). Unlike real life videos, user interactions with a software product are by default great candidates for vector-based representation no?

Any ideas or solutions? Thanks!

Improve this question
2
  • "If this animation was described as a vector .." It is possible, but that would mean that (1) you cannot record these interactions as the output is a raster device (the screen), so you'd have to recreate and copy it from scratch, but also (2) you'd need to create the entire environment - windows, menus, dialogs and so on - as vectors as well.
    – Jongware
    Commented Jan 14, 2017 at 15:28
  • Thanks to all for your comments. I came across an example on Google Allo's homepage (allo.google.com) Check out the animated SVGs that illustrate each feature as you scroll down the page. Looks like they're created in After Effects using the Bodymovin.js plugin to export to SVG. Since we have the PSDs, I assume it might be fairly straightforward to import the PSDs to After Effects, do a short interaction animation and then export to SVG. Thoughts?
    – SCP
    Commented Jan 17, 2017 at 12:19

2 Answers 2

Reset to default
1

Possibly helpful: How to embed screen capture videos as animated gifs in answers?

There are a number of screen recorders which will create small 10FPS video clips. The mistake most make is trying to create 30FPS when it's not needed.

You would need to build out any PSD to actual, live, functioning screens/pages. Otherwise, you need to get familiar with building animations in Photoshop, although that may take far more time. But you cna render video from Photoshop.

Improve this answer
0

Maybe Camtasia or other pro screen recorder software is the way to go.

On the screen there is not so much things changing simultaneously that good compression were not possible even at full resolution.

Camtasia Player is needed to utilize this compression possiblity, MP4 does not assume that sparse changes between the frames.

Note: capturing the screen as vectors is not possible from the screen, screen is a bitmap.It can be done in the application that is watched or maybe somewhere in the depths of operating system's graphics rendering engine.

That's not a dead end, if yor application is used via web browser. There exists several "Web browser recorders" to save in hi res, what happens on the browser screen. Google: "Record web browsing". You get several hits.

Offtopic: All of them surely are not for teaching but for finding reasons to give a lesson.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.