Difference between revisions of "YTMND Template"

Latest revision as of 08:31, April 19, 2012

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 syncing 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 overlaid 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 unnecessary 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 dependency

   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 unreliable, 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 plug-in 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 gap-less once imported into Flash from all the testing I've done.

9. Real fullscreen viewing.

   Flash allows for 100% of the screen real-estate to be used, which would enable truly fullscreen YTMNDs.

10. Smart back button

    When a user visits a YTMND from ytmnd.com a button will allow them to go back to the page they were just viewing with a single click, when visiting from elsewhere, it will take them to the front page.

Bells/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 Space-bar 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. Download-able 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. Time-line 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 :(

11. Opening Sound/Image

    In many cases, users end up using long MP3s to achieve a sound that plays an opening and then a very long repeating loop. The issue here is that while the effect is achieved, it ends up losing sync and effect after each loop. One way to avoid this would be to allow users to upload a sound and image that get played a single time and then the regular sound/image would be looped infinitely afterwards. This would allow for "extended remix" type sites that loop endlessly without gaps.

12. Image maps

    Click-able pixel or percentage areas which allow users to link various parts of a YTMND to other YTMND pages.

Dependencies

1. Asset conversion

   All WAV files need to be converted to SWF or some other Flash-consumable format that doesn't add padding. All animated GIFs need to be turned into Flash MovieClips.

2. Ad system

   As far as I know, Flash can not display embedded HTML/Javascript which is what most ads are. This means the ads have to consist of either an image file or a Flash MovieClip. A simple ad system would need to be built to handle tracking views/clicks etc for this.

Concerns

1. Moderation panel

   This would invalidate a large amount of work I did creating the site moderation mini-panel. I'd need to figure out some way to reincorporate it into the new site template. Possible solutions are an iframe/normal frame, a pop-up or some sort of side bar or FireFox extension type dealy.

2. Asset conversion

   Asset to Flash conversion is a pretty big ordeal due to the millions of files that need to be altered.

   Currently using PHPTurbine, I can convert WAVs and GIFs to SWFs fairly well, but it is unclear if the resulting SWF is in a format we really want. I need to learn more Flash before I can figure out if this is a major problem or not.

   Another issue is that the conversion is picky about WAV files that aren't of a standard frequency (11kHz, 22kHz, 44kHz, etc) and this means some sites may need to be disabled or require an extra layer of conversion using sox or some other sound tool.

   Additionally, the space saving is somewhat minimal using ADPCM compression (as MP3 compression isn't currently available in PHPTurbine if you want seamless looping).

3. Animated GIFs

   Conversion/Run-time loading

   Animated GIFs either need to be converted to SWFs/MovieClips before run-time or need to be loaded in at run-time and converted into a MovieClip internally. While there is open source AS3 code to compile and recompile GIFs, I haven't sufficiently tested it out.

   Additionally, frame-timing is very important so whichever method is used to import GIFs needs to keep the timing identical.

   Tiling

   Again due to my lack of Flash experience I don't know the best way to tile an animation. I am concerned that tiling a great deal of MovieClips across an entire screen will cause extreme lag and loss of sync.

4. Ad Blocking/XSS

   The data package that is sent to the the YTMND loader will have ad data in it. It would not be hard to bypass/alter this client side to avoid having to look at ads. I think the best way to do this is include a hash of the data using a secret or changing salt to verify the data has not been altered in any way.

5. Zooming text

   I'm not sure if I will encounter the same problems we see with lag due to large amounts of transparent background text on top of animations, but if not we can ditch the image text stuff.

6. Scaling/resizing

   Again due to my lack of Flash experience, I don't know how to handle browser re-sizes on-the-fly, and I'm not sure how to set it up so stuff scales properly. This would be important for embeddable YTMNDs. --edit: StageScaleMode.NO_BORDER

7. Votebar

   Much of the functionality of the votebar would need to be rewritten in Flash. This isn't a huge concern as it would probably end up being better and actionscript is very similar to Javascript.

Pseudo Code

Current

Non-Flash

1. Spit out pure HTML with full links to image and sound file.
2. If Zooming text:

   Spit out javascript to do zooming text:

   Else if image text:

   Show Image text at top left corner with highest z-index.

   Else:

   Do nothing.

3. Show image and use simple object/embed/bgsound for sound based on browser.
4. Loop infinitely.

Flash

1. Spit out a javascript object with all parameters, URLs to assets etc.
2. If Zooming text:

   Spit out javascript array with text.

   Else if image text:

   Spit out image, but with a css hidden tag.

   Else:

   Show a blank image text gif. (Not positive why I do this, probably lazy javascript).

3. Wait for onload()
4. Use Flash-JS interface to tell Flash to start loading the sound, once it's finished:
5. Flash uses JS interface to start loop which waits until image is loaded:
6. Use JS to show image, use flash to start playing sound.
7. Loop infinitely.

New Flash

1. Spit out a simple HTML page with a TITLE tag and Flash embed containing the full move.
2. Pass a data package to the Flash containing all options, advertising information, user information etc.

   Either as a massive query string, javascript array (possible problems) or a URL to an XML file.

3. Verify data package, load and display advertisement and status info.
4. Load all available assets, build zooming text if necessary in the background.
5. Figure out scaling/sizing information
6. Display image(s), start sound, show controls.
7. Loop, check for re-size and if necessary do steps 5 and 6.

TODO/Time-line/Launch Features

TBD.

Initial launch features

TBD.

Stable launch/first update features

TBD.

Long-term/future update features

TBD.

Notes/Misc

Compression

Currently converting WAV to SWF does not compress, meaning there is no savings on file size. It may be possible to pre-gzip WAV SWFs to save a great deal on bandwidth costs, load times, etc.

MochiAds

MochiAds is a company that does exclusive flash ads, may be worth a look. I think they also provide code that helps avoid ad disabling/decompiling etc.

Required UI Elements

• Advertisement
• Load status
• controls -
• image display
• info bar -
• moderation box -

Template Events/Hooks

* on browser ready
* on advertisement click?
* on asset load
* on browser resize
* on loop start
* on loop end