SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    1 Thread(s)

    Prototype 1.5.1 Optimization Help SWF writer.

    This class works - I could use help optimizing it (see comment text). It writes a Shockwave object into the dom to bypass IE 7's stupid (must click on object to use it) "feature" (Microsoft needs to be flogged - $10 says they'll make IE 8 incompatible with Flash somehow to push forward their crappy silverlight project).

    Code:
    /**
     * Shockwave tag parser
     * @version 1
     * @license MIT
     * @author Michael Lloyd Morris
     */
    var	SWF: {
    	defaultParams: {
    		src: null,
    		quality: 'high',
    		bgcolor: '#ffffff',
    		width: null,
    		height: null,
    		align: 'middle',
    		allowScriptAccess: 'sameDomain',
    		allowFullScreen: 'false',
    		type: 'application/x-shockwave-flash', 
    		pluginspage: 'http://www.macromedia.com/go/getflashplayer',
    		play: 'true',
    		loop: 'true',
    		scale: 'showall',
    		wmode: 'window',
    		devicefont: 'false',
    		name: null,
    		menu: 'true',
    		movie: null,
    		id: null,
    		flashvars: null
    	},
    			
    	/*
    	 * Parse a shockwave tag into an object or embed tag.
    	 */
    	parse: function( obj ) {
    		
    		// There has got to be a better way to do this...
    		var objParams = {
    				width: obj.readAttribute('width'),
    				height: obj.readAttribute('height'),
    				src: obj.readAttribute('src'),
    				quality: obj.readAttribute('quality'),
    				pluginspage: obj.readAttribute('pluginspage'),
    				align: obj.readAttribute('align'),
    				play: obj.readAttribute('play'),
    				loop: obj.readAttribute('loop'),
    				scale: obj.readAttribute('scale'),
    				wmode: obj.readAttribute('wmode'),
    				devicefont: obj.readAttribute('devicefont'),
    				bgcolor: obj.readAttribute('bgcolor'),
    				name: obj.readAttribute('name'),
    				menu: obj.readAttribute('menu'),
    				type: obj.readAttribute('type'),
    				allowFullScreen: obj.readAttribute('allowFullScreen'),
    				allowScriptAccess: obj.readAttribute('allowScriptAccess'),
    				movie: obj.readAttribute('movie'),
    				id: obj.readAttribute('id'),
    				flashvars: obj.readAttribute('flashvars')
    			}
    			
    		var params = {
    				width: (objParams.width == null) ? this.defaultParams.width : objParams.width,
    				height: (objParams.height == null) ? this.defaultParams.height : objParams.height,
    				src: (objParams.src == null) ? this.defaultParams.src : objParams.src,
    				quality: (objParams.quality == null) ? this.defaultParams.quality : objParams.quality,
    				pluginspage: (objParams.pluginspage == null) ? this.defaultParams.pluginspage : objParams.pluginspage,
    				align: (objParams.align == null) ? this.defaultParams.align : objParams.align,
    				play: (objParams.play == null) ? this.defaultParams.play : objParams.play,
    				loop: (objParams.loop == null) ? this.defaultParams.loop : objParams.loop,
    				scale: (objParams.scale == null) ? this.defaultParams.scale : objParams.scale,
    				wmode: (objParams.wmode == null) ? this.defaultParams.wmode : objParams.wmode,
    				devicefont: (objParams.devicefont == null) ? this.defaultParams.devicefont : objParams.devicefont,
    				bgcolor: (objParams.bgcolor == null) ? this.defaultParams.bgcolor : objParams.bgcolor,
    				name: (objParams.name == null) ? this.defaultParams.name : objParams.name,
    				menu: (objParams.menu == null) ? this.defaultParams.menu : objParams.menu,
    				type: (objParams.type == null) ? this.defaultParams.type : objParams.type,
    				allowFullScreen: (objParams.allowFullScreen == null) ? this.defaultParams.allowFullScreen : objParams.allowFullScreen,
    				allowScriptAccess: (objParams.allowScriptAccess == null) ? this.defaultParams.allowScriptAccess : objParams.allowScriptAccess,
    				movie: (objParams.movie == null) ? this.defaultParams.movie : objParams.movie,
    				id: (objParams.id == null) ? this.defaultParams.id : objParams.id,
    				flashvars: (objParams.flashvars == null) ? this.defaultParams.flashvars : objParams.flashvars
    			}	
    
    		if (params.src == null)
    		{
    			return;
    		}
    		
    		var paramHash = $H(params);
    		
    		// IE Flash
    		if (typeof(window.ActiveX) =='object')
    		{
    			var output = '<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" ';
    			var ieParams = '';
    			
    			var keys = paramHash.keys();
    			
    			for (var i=0; i<keys.length; i++)
    			{
    				if ( paramHash[keys[i]] != null && 
    					keys[i] != 'width' && 
    					keys[i] != 'height' && 
    					keys[i] != 'id' && 
    					keys[i] != 'align')
    				{
    					ieParams += '<param name="' + keys[i] + '" value="' + paramHash[keys[i]] + '" />';
    				}
    				else if ( paramHash[keys[i]] != null)
    				{
    					output += keys[i] + '="' + paramHash[keys[i]] + '" ';
    				}
    				
    				output += '>' + ieParams + '</object>';
    			}
    		}
    		else // Everyone else's Flash.
    		{
    			var output = '<embed ';
    			var keys = paramHash.keys();
    			
    			for (var i=0; i<keys.length; i++)
    			{
    				if ( paramHash[keys[i]] != null )
    				{
    					output += keys[i] + '="' + paramHash[keys[i]] + '" ';
    				}
    			}
    
    			output += ' />';
    		}
    		obj.replace( output );
    	}
    
    }
    
    // Register the observer.
    Event.observe(window, 'load', function(){
    	$$('swf').each(function(s) { 
    		SWF.parse(s); 
    	});
    });
    With this class in hand you can make create shockwave files with a swf tag like so

    HTML Code:
    <swf src="flash.swf" height="100" width="300"></swf>
    The empty tag (<swf src="flash.swf" />) also works IF there is only one shockwave file in the div - it fails if there are multiple flash objects in the same div. Hence..

    HTML Code:
    <div>
    	<swf src="flash.swf" />
    </div>
    <div>
    	<swf src="flash.swf" />
    </div>
    works, but...

    HTML Code:
    <div>
    	<swf src="flash.swf" />
    	<swf src="flash.swf" />
    </div>
    Doesn't. Odd. If anyone discovers why I'd be interested in knowing.

    The above code licensed under the MIT license and requires prototype 1.5.1+ to operate.

    Tested against Firefox Mac, IE 7, Opera 9 (Mac) and Safari (Mac).

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There may well be a better way of doing that, by looping through an array of the attributes involved.

    Code Javascript:
    // There is a better way to do the other code...
    var attrs = ['width', 'height', 'src', 'quality', 'pluginspage', 'align', 'play', 'loop', 'scale', 'wmode', 'devicefont', 'bgcolor', 'name', 'menu', 'type', 'allowFullScreen', 'allowScriptAccess', 'movie', 'id', 'flashvars'];
    var objParams = {};
    attrs.each(function (attr) {
        objParams[attr] = obj.readAttribute(attr);
    });
    var params = {};
    attrs.each(function (attr) {
        params[attr] = (objParams[attr] == null) ? this.defaultParams[attr] : objParams[attr];
    });
    Last edited by paul_wilkins; Jan 9, 2008 at 23:12. Reason: correction: added flashvars to array


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •