-
Frame Rate troubles
Hi everyone, I happen to have a confusing question, and need some advice.
I am currently trying to make a mock up of an html 5 site to show as a video to the developers.
I using After Effects to show our developers how things would move and animate.The problem is that I can’t seem to get the right animation that is as clean as most animation on html 5 sites. Please see reference (https://www.sobe.com/#!/home/product) look at when you use the arrows on the site and how they animate so fast, and all the other animations. Let’s just say that I want to create a motion graphic video that has the same speed of those animations, for this mock-up site.
I was able to bump up the frame rate up to 90 fps and it gives the same effect on my animations, however I need the movie to have the end result of 29.97 fps.
However when I render the movie at 90 fps and bring it back into after effects, hoping that if I re-render it at 29.97 that it would fix this problem, but it doesn’t.
I think I’m going about it the wrong way by increasing the frame rate, but I want to have it animate as quick as that site does into my movie file.
Thanks and I apologize if this doesn’t make any sense.
-
5 Replies
-
[Robert Paige] ” am currently trying to make a mock up of an html 5 site to show as a video to the developers. using After Effects to show our developers how things would move and animate. The problem is that I can’t seem to get the right animation that is as clean as most animation on html 5 sites… I was able to bump up the frame rate up to 90 fps and it gives the same effect on my animations, however I need the movie to have the end result of 29.97 fps. However when I render the movie at 90 fps and bring it back into after effects, hoping that if I re-render it at 29.97 that it would fix this problem, but it doesn’t
You are right to increase the frame rate, but you need to keep the increased frame rate for delivery, too.
HTML5’s “frame rate” could be as fast as the monitor’s refresh rate, which is likely 60 Hz. It’s simply not possible to get the same smooth high-motion look from 29.97 fps video — the temporal resolution just isn’t there.
You can produce your content at 720p60 to get both video standards compliance and the high frame rate necessary for the motion you’re looking for.
1080p60 may be an option, too, depending on your system.
For computer playback only, you can choose an arbitrary resolution at 60 fps, though increasing both frame rate and frame size increase your system requirements for smooth playback.
Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog – What I’m thinking when my workstation’s thinking
Creative Cow Forum Host: Live & Stage Events -
Walter, thank you being able to understand what I am trying to do.
I appreciate it, here’s the problem though, I need to upload it to Vimeo or Youtube which can only accept 29.97 or 30 fps, any ideas?
Thanks again!
-
[Robert Paige] “I appreciate it, here’s the problem though, I need to upload it to Vimeo or Youtube which can only accept 29.97 or 30 fps, any ideas?”
Nope. Asking for more fluidity in a lower frame rate is like asking for HD’s sharpness in standard definition.
Maybe the COW’s reels.creativecow.net video hosting service offers 60p video? I don’t know.
Otherwise, you might consider sending the video file via email or a service like YouSendIt (or hosting it on your own web site) so that it won’t be re-encoded at a lower frame rate.
Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog – What I’m thinking when my workstation’s thinking
Creative Cow Forum Host: Live & Stage Events -
It may seem obvious, but do make sure you have motion blur switched on to create the illusion of fluidity in the action, if you haven’t already. I’ve had similar graphics work come into production houses before that the producers complained weren’t smooth and it ws just a matter of adding some motion blur.
-
Motion blur is a good solution in general, but may not be appropriate for this specific problem — the HTML5 version this is meant to pre-visualize will not likely have motion blur.
Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog – What I’m thinking when my workstation’s thinking
Creative Cow Forum Host: Live & Stage Events
Reply to this Discussion! Login or Sign Up