MT MULTIMEDIA TEMPLATE

MT MULTIMEDIA TEMPLATE

This template offer the possibility to quick & easily build a large range of multimedia rich websites (from a small creative portfolio site to a complex company website) without any programming knowledge need.

There are two ways to reconfigure this template:

1. a quick & general reconfiguration through the configuration XML file (where you are able to modify the main parameters – thumbnails dimensions, background colors, pictures, alignment, display mode, players parameters etc…) – this is the file “Config.as” stored in the subfolder “config”. 2. a much deeper reconfiguration using the configuration file (a text file where all the relevant parameters involved in the code are listed & widely documented – including transitions, timings etc…; no programming knowledge necessary); you have to rebuild the swf file using a compiler (Flash CS3 for example).

Main features:

1. XML : was built considering criteria as: easy to edit, small size, coherent & simple structure for a very short learning curve; the galleries are built separately and referred from the maindata XML (or not) if needed – the titles & comments can be redefined (or not) in the maindata XML (the same gallery may be reused for a different purpose).

2. Interface: the interface controls remains accessible at any moment, including the media loading intervals – the website visitor is able to access the menu (navigating to another section of the site), to switch to another language at any moment et.; all interface’s controls (buttons, menus…) are dynamically built in base of the XML file data – no limitations; the sections (pages) menu (in this demo: PORTFOLIO -NEWS-ABOUT-EXPERTIZE-CLIENTS) is built dynamically (XML); the look & feel (colors, transparencies, transitions…) of this Flash application can be freely modified; the buttons graphics are replaceable (maintaining the internal structure and IDs), the spaces between the controls on the layout are managed through the configuration file config/Config.as.

3. Multimedia Player: a custom multimedia player, able to handle all the media file types Flash compatible: 3.a. VIDEOS (HD or not) with full control over the media: PLAY – PAUSE – REPEAT ON /OFF – LOADED INDICATION BAR – SEEK BAR – TIME DISPLAY – SOUND VOLUME – MUTE ON /OFF); some parameters (autostart, deblocking, smoothing, buffer) can be turned on/off or adjusted in the XML ; the videos scale-up can be enabled/disabled through the XML configuration file data/config.xml; the video size (width, height) on the screen can be limited through the the XML configuration file data/config.xml – useful in case of big screen resolution; in case of the demo file the scale-up is enabled & a limitation of 600 pixels is defined for the videos height on the screen; 3.b. FLASH ANIMATION files (SWF) with full control over the media: PLAY – PAUSE – REPEAT ON /OFF – LOADED INDICATION BAR – SEEK BAR – TIME DISPLAY – SOUND VOLUME – MUTE ON /OFF); NOTE : in case of the Flash animations built without the use of the timeline only the sound controls will be available; the Flash animations scale-up can be enabled/disabled through the XML configuration file data/config.xml; the Flash animations size (width, height) on the screen can be limited through the the XML configuration file data/config.xml; in case of the demo file the scale-up is disabled & no limitations are defined for the Flash animations height on the screen; 3.c. AUDIO (mp3) with full control over the media: PLAY – PAUSE – REPEAT ON /OFF – LOADED INDICATION BAR – SEEK BAR – TIME DISPLAY – SOUND VOLUME – MUTE ON /OFF); 3.d. A/V MIX with full control over the media compound: PLAY – PAUSE – REPEAT ON /OFF – LOADED INDICATION BAR – SEEK BAR – TIME DISPLAY – SOUND VOLUME – MUTE ON /OFF); this application offers the possibility to MIX an AUDIO source WITH a VIDEO , SWF or static image source in a very simple manner: providing two paths in the XML file – one for the audio file & another one for the video/swf/image file you want to be displayed within the audio source (the video or swf audio channel will be mute, in order to leave the main audio source to be heard); the engine will maintain the synchronization between the two media files during the play and the seek bar use both; this is a powerful feature – you’ll be able to present on your site, for example, a song with a video, an interactive flash animation or a simple picture in the background, or you are able to present a commented video etc.; 3.e. static images; the “wave effect” triggered when the image is displayed can be turned on/off from the XML configuration file data/config.xml; The configuration XML file data/config.xml manages the general scale-up & size limitations (defined for all the media files). However, the parameters defined (if any) for a specific media type will override the general values. In case of this demo a height limitation of 900 pixels was defined, so the swf files & the static images height can reach a maximum of 900px (the video height is already limited at 600px, as mentioned before). The media will be resized always by maintaining the aspect ratio – smoothing applied too. The autostart (video/audio/swf start immediately the media is loaded, without the user action) is managed by the configuration XML file data/config.xml for each one of the media types (video, swf, audio).

4. Multilanguage support: multiple languages (no limitations) can be defined in the configuration XML file data/config.xml – each language is defined by an id and a tag; the user is be able to switch from a language to another on the fly, while navigating; NOTE : if you don’t want to use the Multilanguage support there is no need to define a single language; more, you’re not constrained to provide an alternative translated text for each text item – when no such text alternative is found in the data XML file(s), the engine reverts on the the text provided for the default language (the first language defined). Two languages (English & Romanian) were defined in case of this demo.

5. Logo & Background: 5.a. A path to a logo resource (picture or swf file) can be mentioned in the file data/maindata.xml – the application will resize the log if necessary in order to fit well; a logotype & a wordmark can be mentioned in the file data/maindata.xml too; 5.b. data/config.xml can define a general background resource (a picture or a Flash animation); individual backgrounds (for each section/page of the site) can be defined in data/,aindata.xml (details in RMT _xml_tags.pdf); the configuration XML file data/config.xml manages the mode all backgrounds are displayed (normal, stretched or tiled) and, in case of the normal mode, the align mode (BC, BL, BR, CC, CL, CR, TC, TL, TR – where B = bottom, C = center, T = top, L = left, R = right); in case of this demo, a general background is defined (a small swf displayed in normal mode & aligned bottom-center BC); 5.c. the XML configuration file data/config.xml can define a background color too (beneath the background image if any); in case of this demo a black color is defined.

6. Layout: this application allow a full control over the layout – size/limitations of the media currently displayed on the screen (as described before in the multimedia player section), but also a full control over the media position (and dimensions) on the screen – an align mode parameter (identically to the case of the background image) & margins (bottom, left, right, top) can be defined in the configuration XML data/config.xml; the spaces between various controls & text units are, also, under control in the configuration text file config/Config.as, where all the parameters are listed; This, combined with the abilities to display the background in various ways, lead to an absolute control over the layout. The layout will resize with the browser window. The full screen feature is implemented too.

7. Slideshow: a slideshow engine is implemented for a multimedia presentation; the slideshow parameters (such as the time interval & the slideshow start/stop) are under the user control while visiting the website; the maximum timer value (in seconds), the initial timer value and the autostart parameter are adjustable through the configuration XML file data/config.xml.

8. News page(s): this application offers the ability to build one or more “news” sections in an effortless manner – the news are built exactly like the galleries (but a “news” page is displayed differently, as shown in this demo); the difference is that in the file data/maindata.xml the keyword “news” (enclosed in “type” tags) must be mentioned for the respective gallery referral; media files may be attached also (for each “news” title you may want to present a video, an audio recording, an interactive swf, a static image or an A/V MIX – a video with a separate recorded commentary, for example); it is possible to organize the “news” upon categories; it is possible to combine “news” with common galleries in the same section (page) of the site; no limitations regarding the number of articles This demo present a “news” section with two “news” categories: “Latest News” and “Past Month Events”.

9. Texts: all text are dynamically supplied by the data XML files (data/maindata.xml & the galleries); all texts displayed are html formatted; you are free to use the html tags Flash recognize (please visit Adobe website for an exhaustive list: http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001459.htm ) in order to provide your texts with links, lists, titles, subtitles, highlighted fragments of text etc., with various fonts, colors, font sizes, letter spacing, text decoration, leading etc.; this Flash application provides eight predefined styles but you are free to modify those styles, delete or add more styles (colors, fonts, sizes…) through the configuration text file config/Config.as . This application is able to display the text in two different manners: a normal display mode (the text is displayed as it is) & a “jagged” display mode (a break is inserted every end of proposition; this will lead to a jagged display effect); this behavior is configurable through the configuration text file config/Config.as for each one of the text units. For your convenience the html formatted text will be inserted in the data XML files (data/maindata.xml & the galleries) as it is, with the html tags (no CDATA necessary) – you may want to do so in case of a short piece of text – or, in case of the content – usually a large piece of text, the text can be stored in an external text file (providing the path to this text file in data/maindata.xml); those two solutions can be combined – the two text sources will be joined together. Two free fonts were embedded in the Flash file by default: FranKleinBook.ttf (freely available for download: http://www.dafont.com/franklein.font ) and Sansumi-Regular (freely available for download: http://www.dafont.com/sansumi.font ). More fonts can be embedded; in case of this demo, the text is configured to auto-hide itself after a time interval mentioned in the configuration XML file data/config.xml.

10. Galleries: unlimited number of items in a gallery & unlimited number o galleries; you are free to put together videos, Flash animations, audio & static images in the same gallery with no restrictions regarding the media types – no need to create rigid dedicated galleries (such as “VIDEOS”, “PHOTOS” etc.); all galleries & site sections (pages) can be defined following more natural criteria; parameters such as thumbnails dimensions, for example, will be controlled by the configuration XML file data/config.xml – there is no need to resize the thumbnails in case their height/width defined in data/config.xml changes; more specific parameters (such as transparencies, transitions, speed etc.) can be adjusted in the configuration text file config/Config.as ; You are free to not provide thumbnails for the media files (the engine will use the media file itself if no thumbnail was found) but it’s a very good practice to make those thumbnails because this will save the user bandwidth, time & processor cycles. Anyway, more important is that it is no need to provide a path to the thumbnails in the XML gallery file if simple rules are followed regarding the thumbnail’s file name and location – the engine will automatically search for multiple paths & file names obtained by combining the media file name itself with preset prefixes, subfolder name (those prefixes & names are defined in the configuration text file config/Config.as & can be modified) & compatible file extensions (jpg, gif, png, swf) – an example in _readme/file_description.pdf; in case of this demo all thumbnails were easily created (using a free thumbnails maker) & stored in the predefined thumbnails subfolder (__thumbnails) for each gallery using the media file name followed by the extension jpg. Nevertheless, if you want to use a certain picture as thumbnail for a certain media file, having a different name, just enclose the correct path in “thumb” tag in the gallery’s XML file and the application will use this thumbnail. For video & audio files, if no thumbnail are found, a default thumbnail will be used (this default thumbnail can be replaced with a different one you may want). Media files residing on a different domain can be accessed (cross-domain) in accordance with the Flash security model – for example, media residing on a domain with public access or a domain with a cross-domain policy file allowing the access from your domain can be displayed by this application (more details provided by Adobe Flash documentation).

11. Contact form: a standard contact form is provided within this template (a swf file built separately & loaded at runtime; server PHP 4 + support needed); if you need a customized contact form you are free to modify this one that came within the template or to use a different one, custom made – in such case a path to the swf file containing the form must be mentioned in the configuration XML file data/config.xml.

12. Exceptions are handled: the exceptions (missing files, wrong paths… are handled by this application in a coherent manner.

The software package includes:

- all code sources (the fla & classes as files); the two fla files (the preloader index.fla & the application multimedia.fla) are saved in two versions: to be opened with Flash CS3 (located in the root of this project) & to be opened with Flash 8 (located in the subfolder Flash; please notice that Flash 8 will be unable to deal with the full-screen feature without modifications to the Stage intrinsic class; - all graphic resources imported in the fla file; - all the XML files used for the preview demo; - fla source & the swf file of the contact form; - background swf file; - mailer.php file for the contact form; - html page which embeds the swf file (including swfobject.js file); - documentation: _readme/file_description.pdf, _readme/file_xml_tags.pdf .

This project uses Caurina Tweener under the MIT License: http://code.google.com/p/tweener/ This project uses SWFObject 2.0 under the MIT License: http://code.google.com/p/swfobject/