This is to document some of the process and time to mock up and recreate/reskin the flash video player module created for Prestonwood Metro/Young Singles and Global Advance for use with other clients that may want it for their site.

Depending on the client's site layout, to mockup and skin a photoshop concept of how the video player module would integrate into a new site or existing site would take about 45 min - 1.5 hrs. 

The most recent version and base template mock up should begin with the Global Advanced version (project number A6952) as it has the most up to date functionality and animation. This would involve keeping the main layout relatively unchanged and simply reskinning the look of the video player container, background, frame, thumbnails, etc., and slightly adjusting the size of the overall player and elements if necessary. It would save the build time CONSIDERABLY if the sizes and positions of the video and thumbnails were left unchanged.

Depending on how different the design mockup is from the Global Advance video module template (template found in ITWebProduction folder on the Artserv drive under Flash Templates within the Movie Gallery folder), and depending on if this is an addition to an existing site or part of a buildout to a new site, to create a functional flash video module would take about 3-5 hrs. Any additional functionality other than what it currently does (frames stay still and image thumbnails move across when clicked, can only play .flv videos within the module, entries can be links instead of video but only can be clicked in center position, client must upload small thumbnail, large thumbnail, and video to exact specifications) will increase build time and will probably increase cost to client.

To build out the flash module, set up page content with a new content region that includes the following items:

<content name="Flash Header" flashfile="newMoviegallery.swf" count="dyn" mincount="3" maxcount="0">
      <item name="Video File" type="file" />
      <item name="Video Image (490x275)" type="image|490:275" />
      <item name="Image Thumbnail (257x144)" type="image|257:144" />
      <item name="Link" type="link" />
      <item name="Check to use link" type="checkbox" />
</content>

Adjust the size dimensions in this to match the sizes of the thumbnails in the mockup. This page content gives the client the ability to change the thumbnail images, the video, and an optional link to use in place of a video. They do not have to use a video if they have a link and do not have to set a link if they have a video. If the checkbox is checked, the flash will set the center image to be a link instead of a video, otherwise it will default to use the video.

Within the flash file, we have to resize and reposition all 5 main static thumbnail images in the main movie player, resize and reposition the large motion tween movieclip and the two small motion tween movieclips, resize and reposition the video player and all the movie playback elements such as the progress bar, close button, mute, and play/pause, resize and reposition all button hit areas, restyle and colorize the play button and left and right arrows if needed, change/add any other image elements and backgrounds, and test/tweak the player to make sure it functions well and is smooth.

After everything is created, delete the placeholder image from the movieclip called Container in the library before publishing so we don't get a flash of the default image before the file can load the client thumbnails.