Difference between revisions of "YTMND Template"

Revision as of 14:16, July 8, 2008

YTMND Site Template in Flash

Draft version 0.08

Overview

This document is the working draft of what will end up being the new template in which all YTMNDs will be displayed and output. It is a work in progress.

The goal is to recreate the current HTML site template into a 100% flash template. This will remedy a large number of problems that plague the current site template as well as removing the dependency for Quicktime or alternatives to play sound. Greater than 99% of the users who visit YTMND currently have Flash version 9 or greater, so harnessing the power and flexibility of Actionscript 3.0 seems ideal.

The current template is in two pieces, an HTML/Javascript version and a HTML/Javascript/Flash version. The non-Flash version is used when the site uses a WAV file, as Flash is incapable of loading external WAV files at run-time.

Current Issues

Global Template Issues

1. Animated GIF lag

   Animated GIFs play at different speeds depending on browser, CPU, presence of zooming text etc. This causes a lot of synching issues.

2. Zooming Text/Image Text

   Zooming text is based on the archaic original code and doesn't have much rhyme or reason. It causes lag on most browsers/computers when using animated gifs. Due to this issue, image text was created, forcing the creation of hundreds of thousands of transparent gifs which are overlayed onto the current site. This means when the algorithm changes, everything needs to be re-created. There are also lots of XSS/UTF problems, using some sort of embedded font in Flash would probably fix this problem, although it isn't clear what the most optimal way to do this would be.

3. Browser Compatibility

   Javascript and more specifically the DOM and DOM events are incredibly finicky across the wide range of browsers currently in use. One of the main issues that effects both versions of the template is actually being able to tell when an image is fully loaded and ready to display. Trying to write code that works across Firefox, IE 6/7, Safari, Opera etc is painful and hard to test or update. Using flash would alleviate a good majority of these problems.

4. Onload issues -- Ads/Tracking Code

   Due to the onload event being called at different times in different browsers, I've hacked onload to run once every asset on the page is actually loaded. This means non-visible ads, tracking code etc has to be loaded before the site will even display. When tracking sites or ad servers are down, this can literally add 30+ seconds of unnecaessary page load time. Additionally, most of the ads that currently run use a cascading system where if the first ad company can't fill an ad space it gets sent to the next ad company and so on until a fill is found, in effect forcing some users to have to look up 5 ad server IPs and waiting for each to respond.

Non-Flash Template Issues

1. Synchronization

   In an HTML setup, assets are shown/played as soon as they are loaded, and when synchronization is required, this requires the end user to refresh the page and view the site using cached assets to achieve the intended effect. In most cases it never fully works perfectly.

2. Sound playing dependancy

   We use a simple server side browser detection mechanism that spits out sound player code depending on the OS/browser. It's not only incredibly unrelaible, but due to the current WAV playing necessity, it's also sometimes completely useless. IE has a proprietary BGSOUND tag that uses media player which functions well for the most part, but on all other browsers we use an OBJECT or EMBED tag. Currently the standard sound player for WAVs on non-Flash YTMNDs is Quicktime. Over the last few years it has become progressively less reliable and functional. At this point, more than 50% of the time, files either don't loop, don't play at all, or don't loop properly (e.g. only part of the sound actually loops after the first time.).

   Beyond that, the majority of first time users don't have the proper setup to play YTMND sounds on non-IE browsers and the Quicktime setup is confusing and intrusive at best for someone who is non-technical. I am assuming this causes a huge bounce rate as most people don't want to install a plugin just to view YTMNDs. This is probably the biggest factor in moving towards a flash solution.

Flash Template Issues

1. Onload issues - losing window focus

   Due to the previously mentioned onload event issues, some browsers don't seem to fire the right events when an end-user visits a YTMND and then tabs to another program or page (e.g. they want to do something else while the YTMND loads). This causes some browsers to never load the assets, or never fire off the Javascript/Flash event which actually displays the YTMND, effectively forcing people to sit at a loading screen when they shouldn't have to.

2. Onload issues

   More or less a duplicate of the above mentioned issue where advertisements and tracking code can cause slight to excessive delay in loading/display of YTMNDs.

3. Browser Compatibility

   Since we use a mix of Javascript and Flash, there still exist a plethora of compatibility issues which are mentioned above.

New Features

The following features are not in any real order.

Realistic Goals

1. Volume Control + Mute

   The ability to raise/lower volume using a control directly on the site, with a flash cookie to save the volume level.

2. Pause

   The ability to pause and resume a YTMND. For animated sites, this will pause both the animation and the sound, for non-animated sites this will merely pause the sound.

3. Restart

   The ability to restart the YTMND using a control directly on the site without having to reload the page.

4. Automatic resynchronization of animation and sound

   An automatic forced re-synchronization of sound and animation every X loops ensures that continual looping won't ruin the site due to lazy synchronization.

5. Loader advertisements

   Finally being able to monetize the sites themselves with a 300x250 ad shown during loading.

6. Asynchronous loading of site assets

   Would allow both image and sound to be loaded at the same time, allowing for much quicker loading speed. Additionally, 100% flash would make the current onload issues (sites failing to start, browser compatibility, waiting for slow ad servers, etc) moot.

7. Semi-finite image placement

   Currently you can only tile or center an image. New options would be to position at top left, top center, top right, middle left, middle center etc.

8. Real seamless looping

   No more gaps between sound loops. MP3s will still have gaps due to issues with the format that are almost insurmountable, but WAV files uploaded seem to be gapless once imported into Flash from all the testing I've done.

Bells and whistles/low-priority features

1. Zooming text options

   Multiple options for shaping and positioning the zooming text. Such as text that blooms from the center or bottom of the page, or text that is rotated etc.

2. Truly finite image placement

   The ability to set a pixel or percentage location of where the image should be positioned for ultimate control.

3. Background image

   When not using a tiled image, allow users to have a background image with another image on top of it, with the option of tiling the background image or placing it like you would a normal image.

4. "Oh shit" button

   An option that would allow the user to hit the Spacebar which would instantly kill the sound and show a "work safe" image of a web page, such as a Google search.

5. Non-flash alternative

   Depending on site options, fall back to a plain HTML/Javascript version of the site if possible. Show a warning message explaining the user is not getting the true YTMND experience as well. Alternatively, just prompt the user to install Flash.

6. Customizable Site Data

   Allow site creators to choose what shows up on the info bar out of all the possible meta data on site profiles.

7. Comment while watching/live comment feed

   An area that would take a small bit of real estate on a site which would show live comment update and allow users to comment on a site while still watching it.

8. Downloadable YTMNDs

   If everything is in Flash, it's possible we could package up all of the assets and site data into a single file and let people download YTMNDs.

9. Timeline slider

   Something I'd mainly want to avoid, but the ability to use a slider control to jump to different spots in an animated? YTMND. This would almost make YTMND into too much of a YouTube clone.

10. Embeddable YTMNDs

    Turn YTMND into a YouTube clone :(