Difference between revisions of "Help:Guide to Synchronization"
Alphasuede (Talk | contribs) (I am not sure if this a good place to put this information. I added an essay about the problems with the GIF standard relating to YTMND syncronozation as well as thoughts on replacement technologies.) |
|||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
Synchronization, or '''sync''' is the matching of ''images'' with ''audio'' to improve the impact of both. It is a vital part of many YTMND, but what seems like a simple task can actually be quite difficult. The purpose of this guide is to not only instruct on the basic idea of sync, but to also share the tips and tricks that can only come with experience. | Synchronization, or '''sync''' is the matching of ''images'' with ''audio'' to improve the impact of both. It is a vital part of many YTMND, but what seems like a simple task can actually be quite difficult. The purpose of this guide is to not only instruct on the basic idea of sync, but to also share the tips and tricks that can only come with experience. | ||
| − | ==The | + | ==The Building Blocks== |
Any sync'ed YTMND will require the use of a '''gif''', an '''mp3''' and the [[Flash_Preloader|'''Flash Preloader''']]. | Any sync'ed YTMND will require the use of a '''gif''', an '''mp3''' and the [[Flash_Preloader|'''Flash Preloader''']]. | ||
| Line 7: | Line 7: | ||
:This guide won't be covering gif creation (will link it when someone makes the page for it), but the ''MAXIMUM'' file size that you want your animated gif to be is 3mb. | :This guide won't be covering gif creation (will link it when someone makes the page for it), but the ''MAXIMUM'' file size that you want your animated gif to be is 3mb. | ||
| − | + | ;The Mp3 | |
| − | + | :The sound file has to be in mp3 format because the [[Flash_Preloader|flash preloader]] does not yet recognize a wav. While this is disadvantageous due to the short pause the mp3 codec adds to the end of an mp3 file, we'll just have to live with it until Syncan wraps the the .wav support for the preloader. | |
| − | + | ;The Flash Preloader | |
| − | ; | + | :As easy to use as clicking a checkbox. Check the wiki for the preloader if you seem to be too retarded to handle that. |
| − | : | + | |
| − | + | ==The Tools== | |
| − | + | You are going to, of course, need an image and a sound editor. Which one doesn't matter as long as you can edit the time each frame of your gif is on screen. | |
| − | + | ==The Process== | |
| − | + | The process that leads to sync is an easy, if not tedious, one. | |
| + | ===Upload=== | ||
| + | First, go to the site creation screen. If you are on the site creation screen that has everything listen on one page, that is NOT the one you want. From that page, click the "create a site" button again and you should wind up [http://ytmnd.com/sites/manage/create on '''this page''']. | ||
| − | + | Lie while agreeing to those terms, fill out the title and such then upload your image and audio. | |
| − | + | ||
| − | + | === Preview=== | |
| − | + | '''AFTER''' selecting to use the flash preloader with a 0 delay, select "preview" to see your site. This is what the world will see when you post your site. On the first try, the sync will be roughly NOWHERE NEAR what you want. But that's ok, just close the preview window, and hit the "previous" button to go back to the image/audio upload screen. Go back to your image editor to change the timing on your image. Once the next version of your GIF is ready, re-upload the new, slightly improved sync version of the image. | |
| − | + | The problem with this sort of editing is if you're not organized when changing the timing of your gif over and over, eventually it can become a complete mess. | |
| − | + | ||
| − | + | === Getting it Right (''anchor points'')=== | |
| − | + | The actual strategy for this varies from user to user, so I'll just share what works best for me. | |
| + | #Listen closely to your audio. Pick out "major sound events" like action sounds (gunshot, fall sound, etc) and, with a person's voice, make sure the hard sounds match up (hard sounds in the word cardboard for example are "'''C'''ar'''DB'''oar'''D'''") or anything else that gets your attention. Consider these your "'''''anchor points'''''" in your audio. | ||
| + | #For every "'''''anchor point'''''" in your audio, find the image in your GIF that matches that sound (the image of the gun firing, the positions of the guy's mouth as he makes the C, RD, and D sounds). | ||
| + | #Start in the beginning of your GIF, and change the timing of the first images leading up to your first '''''anchor point'''''. Once the audio and video have their first anchor points meeting, move onto the second anchor point. <br>'''''IMPORTANT''''': Be careful not to change timing in the beginning of the gif without realizing that it alters the timing for the later anchor points. It seems obvious, but when you get into sync'ing, you can overlook this. | ||
| + | #Just work your way further and further along the '''''anchor points''' until you've matched them all up. | ||
| − | + | ==== EXAMPLE==== | |
| − | : | + | We'll use [http://goodmanfeedingtime.ytmnd.com/ Gooodman Feeds] as our example. |
| + | *In the audio, the ''major sound events'' are (in order): | ||
| + | **The Roar | ||
| + | **The Bird | ||
| + | **Over The Line | ||
| + | *[http://ytmnd.com/users/davedevil16/ davedevil16] matched up the head bursting through the mud to the roar, the bird to the bird, and Goodman's open piehole to the word "LINE" | ||
| + | *So first he uploaded his rough image and audio, then Preview'ed it. | ||
| + | *He went back and changed the image timing so the head pops out as soon as the roar starts. | ||
| + | *Upload the new image, fine tune the timing until it matched up just right. | ||
| + | *Once the roar/head happen at the same time, sync'ing up the bird was next. Then the "over the line". | ||
| − | + | That's almost it, except for one important part. | |
| − | + | ||
| − | + | ==Looping== | |
| − | + | Getting your image to loop properly is an easy enough step, usually only requiring minor shortening/lengthening at the end of the image and/or audio. As a general rule, I try to make sure my shorter YTMND's don't loose sync while repeating for at least 8 loops. With the longer ones, 3 or 4 times is fine. | |
| − | + | Just consider how many times you sit and watch the same YTMND loop for half a dozen times, and how disappointing when the audio and video desync after the very first run through. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | [[ | + | ==Vital Tips== |
| + | These two tips will save a lot of time and frustration on your part, so pay attention. | ||
| + | |||
| + | First, using the preloader can do a funny thing. Basically, on some loads, it will play the first frame of your animation while the audio is loading. It usually isn't noticeable, but if you have a single frame holding for a second at the beginning of your animation, it can throw the entire thing off. Fortunately the solution is a simple one. Duplicate your first frame, and set the first of the two to play for .07 seconds. Thats it. | ||
| + | |||
| + | Secondly is the fact that when RELOADING elements, it can slightly change your timing from what it is the first time you loaded the audio and image. The solution for this one is simple too (for Firefox users). In Firefox, go to Tools, then Clear Private Data. Select the Cache and click ok. Now it will load both image and audio fresh for that "first time load" feeling all over again. (Note: you can change it in the preferences so JUST cache is selected when you go to clear private data. Otherwise you have to uncheck those other boxes each time (or repeatedly delete your history, etc) | ||
| + | |||
| + | ==The problem of reliable playback of GIFs - A short opinion by [http://ytmnd.com/users/Alphasuede Alphasuede]== | ||
| + | |||
| + | Let me begin this section with a quote from the GIF89a specification: "Animation - The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way." | ||
| + | |||
| + | If frame timings were independent of the time required for decompressing and rendering of each frame of the animation, GIF animations that sync on one machine would sync on every machine regardless of the performance of the computer. However, this is not the case with animated GIFs. Furthermore, different browsers have different behaviors when it is unable to keep up with the frame rate of the animation. | ||
| + | Most browsers have a minimal frame delay that it accepts. If the frame delay is below the minimum, the browser will rewrite the frame delay. Given the shortcomings of the GIF89a standard, reliable syncronozation of a YTMND is truly an extraordinary acomplishment requiring specialized skill. | ||
| + | |||
| + | There was a push to create a better animation standard called animated pngs or APNG that would address many of the shortcomings of the GIF89a standards. Quoting from the APNG_Specification: "[APNG] Frame timings should be independent of the time required for decoding and display of each frame, so that animations will run at the same rate regardless of the performance of the decoder implementation." | ||
| + | |||
| + | Unfortunately for YTMND users, this specification was rejected. Looking to the future, the best thing that could happen is either wide support for APNGs or for the GIF standard to be updated to have an animation's playback rate be independent of the of the decoder implemenation. Either technologies would create a solution to the sync problem while maintain the general flavor of YTMND. | ||
| + | |||
| + | Contribution by [http://ytmnd.com/users/Alphasuede Alphasuede] | ||
| + | |||
| + | ==Final Word== | ||
| + | This is just my approach. I encourage everyone to add to it (and maybe clean up my poor focus for me) with their own personal technique. If anyone has any suggestions but don't want to wiki edit, just [http://www.ytmnd.com/users/MrStump send me a YTMND message]. | ||
| + | =====Credits===== | ||
| + | Originally posted by [[User:MrStump|MrStump]].<br> | ||
| + | If you contribute, be sure to leave your mark. | ||
| + | |||
| + | [[Category:Tutorials|Guide to Synchronization]] | ||
Latest revision as of 01:54, June 15, 2009
Synchronization, or sync is the matching of images with audio to improve the impact of both. It is a vital part of many YTMND, but what seems like a simple task can actually be quite difficult. The purpose of this guide is to not only instruct on the basic idea of sync, but to also share the tips and tricks that can only come with experience.
Contents
The Building Blocks
Any sync'ed YTMND will require the use of a gif, an mp3 and the Flash Preloader.
- The Gif
- This guide won't be covering gif creation (will link it when someone makes the page for it), but the MAXIMUM file size that you want your animated gif to be is 3mb.
- The Mp3
- The sound file has to be in mp3 format because the flash preloader does not yet recognize a wav. While this is disadvantageous due to the short pause the mp3 codec adds to the end of an mp3 file, we'll just have to live with it until Syncan wraps the the .wav support for the preloader.
- The Flash Preloader
- As easy to use as clicking a checkbox. Check the wiki for the preloader if you seem to be too retarded to handle that.
The Tools
You are going to, of course, need an image and a sound editor. Which one doesn't matter as long as you can edit the time each frame of your gif is on screen.
The Process
The process that leads to sync is an easy, if not tedious, one.
Upload
First, go to the site creation screen. If you are on the site creation screen that has everything listen on one page, that is NOT the one you want. From that page, click the "create a site" button again and you should wind up on this page.
Lie while agreeing to those terms, fill out the title and such then upload your image and audio.
Preview
AFTER selecting to use the flash preloader with a 0 delay, select "preview" to see your site. This is what the world will see when you post your site. On the first try, the sync will be roughly NOWHERE NEAR what you want. But that's ok, just close the preview window, and hit the "previous" button to go back to the image/audio upload screen. Go back to your image editor to change the timing on your image. Once the next version of your GIF is ready, re-upload the new, slightly improved sync version of the image.
The problem with this sort of editing is if you're not organized when changing the timing of your gif over and over, eventually it can become a complete mess.
Getting it Right (anchor points)
The actual strategy for this varies from user to user, so I'll just share what works best for me.
- Listen closely to your audio. Pick out "major sound events" like action sounds (gunshot, fall sound, etc) and, with a person's voice, make sure the hard sounds match up (hard sounds in the word cardboard for example are "CarDBoarD") or anything else that gets your attention. Consider these your "anchor points" in your audio.
- For every "anchor point" in your audio, find the image in your GIF that matches that sound (the image of the gun firing, the positions of the guy's mouth as he makes the C, RD, and D sounds).
- Start in the beginning of your GIF, and change the timing of the first images leading up to your first anchor point. Once the audio and video have their first anchor points meeting, move onto the second anchor point.
IMPORTANT: Be careful not to change timing in the beginning of the gif without realizing that it alters the timing for the later anchor points. It seems obvious, but when you get into sync'ing, you can overlook this. - Just work your way further and further along the anchor points until you've matched them all up.
EXAMPLE
We'll use Gooodman Feeds as our example.
- In the audio, the major sound events are (in order):
- The Roar
- The Bird
- Over The Line
- davedevil16 matched up the head bursting through the mud to the roar, the bird to the bird, and Goodman's open piehole to the word "LINE"
- So first he uploaded his rough image and audio, then Preview'ed it.
- He went back and changed the image timing so the head pops out as soon as the roar starts.
- Upload the new image, fine tune the timing until it matched up just right.
- Once the roar/head happen at the same time, sync'ing up the bird was next. Then the "over the line".
That's almost it, except for one important part.
Looping
Getting your image to loop properly is an easy enough step, usually only requiring minor shortening/lengthening at the end of the image and/or audio. As a general rule, I try to make sure my shorter YTMND's don't loose sync while repeating for at least 8 loops. With the longer ones, 3 or 4 times is fine.
Just consider how many times you sit and watch the same YTMND loop for half a dozen times, and how disappointing when the audio and video desync after the very first run through.
Vital Tips
These two tips will save a lot of time and frustration on your part, so pay attention.
First, using the preloader can do a funny thing. Basically, on some loads, it will play the first frame of your animation while the audio is loading. It usually isn't noticeable, but if you have a single frame holding for a second at the beginning of your animation, it can throw the entire thing off. Fortunately the solution is a simple one. Duplicate your first frame, and set the first of the two to play for .07 seconds. Thats it.
Secondly is the fact that when RELOADING elements, it can slightly change your timing from what it is the first time you loaded the audio and image. The solution for this one is simple too (for Firefox users). In Firefox, go to Tools, then Clear Private Data. Select the Cache and click ok. Now it will load both image and audio fresh for that "first time load" feeling all over again. (Note: you can change it in the preferences so JUST cache is selected when you go to clear private data. Otherwise you have to uncheck those other boxes each time (or repeatedly delete your history, etc)
The problem of reliable playback of GIFs - A short opinion by Alphasuede
Let me begin this section with a quote from the GIF89a specification: "Animation - The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way."
If frame timings were independent of the time required for decompressing and rendering of each frame of the animation, GIF animations that sync on one machine would sync on every machine regardless of the performance of the computer. However, this is not the case with animated GIFs. Furthermore, different browsers have different behaviors when it is unable to keep up with the frame rate of the animation. Most browsers have a minimal frame delay that it accepts. If the frame delay is below the minimum, the browser will rewrite the frame delay. Given the shortcomings of the GIF89a standard, reliable syncronozation of a YTMND is truly an extraordinary acomplishment requiring specialized skill.
There was a push to create a better animation standard called animated pngs or APNG that would address many of the shortcomings of the GIF89a standards. Quoting from the APNG_Specification: "[APNG] Frame timings should be independent of the time required for decoding and display of each frame, so that animations will run at the same rate regardless of the performance of the decoder implementation."
Unfortunately for YTMND users, this specification was rejected. Looking to the future, the best thing that could happen is either wide support for APNGs or for the GIF standard to be updated to have an animation's playback rate be independent of the of the decoder implemenation. Either technologies would create a solution to the sync problem while maintain the general flavor of YTMND.
Contribution by Alphasuede
Final Word
This is just my approach. I encourage everyone to add to it (and maybe clean up my poor focus for me) with their own personal technique. If anyone has any suggestions but don't want to wiki edit, just send me a YTMND message.
Credits
Originally posted by MrStump.
If you contribute, be sure to leave your mark.
