Proposition for FlashEdit plugin - for comment

[benDOTsimkinsATintsoftDOTch]

Having played around with flash objects in the xinha editor, and getting mighty frustrated in the process (Firefox seems to lose the flash object, even if you do a innerHTML=innerHTML), I discovered Geoff Stearns' FlashObject (http://blog.deconcept.com/flashobject/).

To explain briefly, the logic of the flash object is to have a div containing a 'no flash' message, followed by a script which loads the flash dynamically at 'runtime' - the html sent to the browser looks like this :

<div class="FlashOverlay" id="FlashId1" style="height: 100px; width: 100px;"> 
  Sorry, you do not appear to have the flash plugin installed. 
</div>
<script type="text/javascript"> 
  var fo = new FlashObject("http://www.mysite.com/flash.swf", "FlashId1", "100", "100", "6", "#FF6600");
  fo.addParam("quality", "high"); 
  fo.addParam("wmode", "opaque"); 
  fo.addParam("align", "left");
  fo.addParam("play","true");
  fo.addParam("loop","true");
  fo.addParam("menu","false");
  fo.addParam("devicefont","true");
  fo.write("FlashId1"); 
</script> 

Opting for this approach allows me to 1) Handle non-flash (and non-javascript) browsers and 2) Work around the problems with editing flash content in Xinha.

So this plugin doesn't directly edit flash (should I change the name?), but rather the DIV and SCRIPT elements necessary for the FlashObject.js code.

There are a couple of dependencies/hacks, these are detailed at the top of the FlashEdit.js file.

(Only tested so far on IE6 and FF1.5)

I welcome comments/suggestions (especially for removing the hacks).

{I have to submit this before being able to add a file?}

[benDOTsimkinsATintsoftDOT.ch]

Zip of proposed FlashEdit? plugin

[mharrisonline]

Ben,

This is really great. I had always intended to someday make a Flash plugin using Geoff Stearns' Flash Object, but never had time to do much more than think about it. You've found a very practical and powerful way to make it work in Xinha.

I've been using the Flash Object script for some time now at Jones International University, and have been extremely happy with it. I use Flash that takes in the user's session ID to call a Web service our course management system provides for Flash content that validates their session and responds with their name, etc.. Flash object was the best way for me to pass the variables I needed, because it lets me do it completely behind the scene. I've found a few ways to extend the Flash Object script that makes using Flash even easier and more fool-proof for users to add to a page. I'll show them in my next post, maybe flashobject.js could be optimized for Xinha.

For example, I changed the file to automatically get the path to the Flash movie and load it's server location in as a variable, so if XML files, jpgs, other swf files that are in the same directory to be loaded into the embedded Flash movie, the Flash movie knows where it is on the server and doesn't need a hard-coded path to find what it needs (A flash movie always thinks the relative path to anything it needs to load is based upon the location of the HTML page that loads it, rather than location of the swf file). This allows the movie to be reused, localized, or moved without opening it and changing it.

Here are some thoughts:

When I first started using Flash Object I was making the original content of the target div be: "Loading Flash content..." Now, I use something like "You must have Flash version 7 installed in this browser to view the content" with a link to the plugin download. Every time someone told me they couldn't see the Flash, it was always a case of not having the correct plugin, now this makes it fool-proof.

The user will never need to change or even be aware of most of the values for playing the Flash movie. Values you use all the time can be hard-coded into the js file, which is what I did. This simplifies the code on the page.

In some cases, the same Flash movie may be on a page more than once, it could be a video player or text container for example that loads in different content based upon a variable. In that case, it must be possible to manually set an id instead of it simply being based upon the swf file name.

It is possible in PHP to automatically get the height and width of a Flash movie. Perhaps if the plugin was in a PHP environment it could pre-poulate the dimensions.

It could be good to show a "test" preview of the Flash movie in an iframe in the popup. This would also help prevent the posibility that someone enters the wrong path - they would see a thumbnail of the movie before loading it.

Much like the way the InsertAnchor plugin displays an icon in the editor for named anchors, you can dress up the way the Flash div looks. If you use this style:

div.flashcontent {
	background: url(/xinha/plugins/FlashEdit/img/ed_flash.gif) no-repeat;
	border: 1px dotted blue;
	background-position: center;
}

The Flash div will then have a visible border and the swf logo in the middle.

If the plugin pastes in a link to the js file, Xinha will safely prevent multiple links from being added. If you put the js file into the plugin's folder for a generic implementation, people can always change your plugin's js file to point elsewhere if they wish.

A problem with using this method in Xinha is that it uses a document.write to add the content, so it would write into the editor with disasterous results. You have created a workaround by using noscript, which depends upon the GetHtml plugin being modified, but also prevents anyone from actually using noscript.

I solved this problem a long time ago by intercepting HTML before it goes into Xinha, (and then processing it back as it submits) to switch javascript to "freezescript," which doesn't execute, and onLoad to "onPlaceholder":

Before existing content loads into Xinha I run it through this filter:

 // stop javascript from executing in the editor, it is changed back at submission
 $text_box=ereg_replace("javascript","freezescript",$text_box);
 $text_box=eregi_replace("<script>","<script language=\"FreezeScript\" type=\"text/freezescript\">",$text_box);


 // workaround until xinha stops removing body events in firefox!!!
 // copy body tag
 
$bodysave=preg_match("/<body[^>]*>/", $text_box, $body);
 
 // stop onLoad events from executing, it is changed back at submission
 $text_box=eregi_replace("onLoad","onPlaceholder",$text_box);

At submission, the HTML goes through this filter:

 // remove javascript freeze
      $text_box=ereg_replace("freezescript","javascript",$text_box);
	  
// replace body tag if it was corrupted
      $text_box=ereg_replace("<body>",$body['0'],$text_box); 
      
 // remove onLoad freeze
      $text_box=eregi_replace("onPlaceholder","onLoad",$text_box);

// remove base href that was added to make images,etc. work
      $text_box=eregi_replace("<base[^>]*href[^<]*>","",$text_box);
// remove visual aid CSS link for styles that only show in the editor
   $text_box=eregi_replace("<link[^>]*visualaids.css[^<]*>","",$text_box);

I'll put together a generic version of my modified flashobject js file and post it here with the simplified code I use to place it on the page, which also loads a lot of information directly into the Flash movie through the js file. I don't know if my simplified code would work in this case, but at worst it might be interesting to someone.

Thanks for developing such a useful plugin!

[mharrisonline]

Example of extended FlashObject?

[mharrisonline]

I uploaded a modified version of Geoff Stearns' Flash object that is different in two ways:

It adds all calls to the FlashObject? function to the body onLoad event to ensure that flashobject.js is fully loaded before the object it contains is executed. The call to write to the content is wrapped into:

addLoadEvent(function() {
		fo.write("flashcontent");
})

It pushes these hidden values to the swf file:

It reveals to the swf file its true locaction on the server, or at least relative to the content page. This makes it possible for the swf file to load in other content in it's directory without hard-coded server locations and names, making localization, portability, and upgrades to the site not require altering the Flash movie. The Flash movie recieves this as _root.path.

The optional values sessionID and custom1 are pushed to the swf file. If there are no JavaScript? variables on the page for these values, they simply have the values="". Custom1 could be the name of the content page, a cookie value, an id or path for external content, etc. These are recieved as _root.sessionID and _root.custom1.

I included in the zip file a new Flash movie that displays these values that it captured from the page.

I thought more about what I said about hard-coding values into the js to minimize the amount of markup on the page, and realized that this was only possible for me because I had predefined my background color and Flash version, choices that will be different for everyone.

So, here is the conclusion of my comments, I think what you have done so far is perfect, I would just avoid using <noscript> and change javascript to "somethingscript" while it is in Xinha, a feature that would probably be in the page that actually loads Xinha.

[mharrisonline]

Okay, I just actually used the plugin and I'm amazed. It actually incrementally creates new ids for each instance of the Flash Object on the page, and it does create a bordered area to show the div. It's really cool.

[benDOTsimkinsATintsoftDOT.ch]

Thanks for your positive (and encouraging) feedback.

1. I haven't the time right now to check out your proposed modification to the flashobject.js - to be honest, in the context where I am using the HTML generated by Xinha, we have a LibUtils.js included in every page, so I just threw the flashobject code in there.

2. With regards to the noscript, I agree, but I couldn't find any better. I was aware of your freezescript, which I read about here (whilst trying to find a flash plugin, as it happens) - but I had a few problems:

- IE doesn't seem to like styling on 'unknown' Tags - so FREEZESCRIPT {display:none} doesn't seem to work

- IE (again) - or maybe Xinha - doesn't even hide known tags properly. I tried using PRE, and it has a VERY strange behaviour - when you click on it, it disappears, but when you click elsewhere, it comes back!

If someone can find me a way round this, I'd be very pleased. Also, I think (but am not sure) that whatever tag we use here would have to be included in GetHTML in any case, otherwise the script gets 'inlined' - maybe not a problem in our case here, but could be elsewhere.

3. For auto-sizing, I am in an asp environment, as it happens (sob). It is also possible (though a bit mucky) to get the flash dimensions in asp, but I ran out of motivation at that point - especially as I wasn't too sure how to manage the dhtml + asp XOR php crossover.

4. The preview is a good idea, though I think that I'll probably settle for implementing it on my 'callout' page (can't be bothered to mess around with the layout of the popup again!)

5. I like your idea for adding the flash icon in the background, a relative path works better for me:

.FlashOverlay{margin:0;border:2px dashed red;font-family:verdana;font-size:8pt;
	background: url(img/ed_flash.gif) no-repeat center}

Thanks again.

[mharrisonline]

Ben,

You would leave the tag as <script, but change the language from JavaScript? to FreezeScript?:

		  div=doDiv(outparam, 'FlashId'+id);
      scr='<script type="text/freezescript" src="/richtext/shared/js/flash.js"></script>\n<script type="text/freezescript">\n' + doScript(outparam, 'FlashId'+id)+'</script>\n';
    	editor.insertHTML(div+scr);
		}
		else { //edit existing movie
		  if(HTMLArea.is_ie) {
		    scr='<script type="text/freezescript" src="/richtext/shared/js/flash.js"></script>\n<script type="text/freezescript">\n' + doScript(outparam, fdiv.id)+'</script>\n';
		    div=doDiv(outparam, fdiv.id);

[mharrisonline]

I found that the addLoadEvent(function() I had added to my copy was causing multiple Flash Objects on the page to all load a single function... so I took it back out.

One thing I noticed is that there is a problem if someone deletes the Flash Object by selecting and deleting the target div. This causes an error because the function for that div is still on the page. It would be solved if the JavaScript? was nested inside the target div. Then, if someone deleted the div, the function would be gone too.

I tried this and it still loaded the Flash as well as before, but the plugin then couldn't edit the object. I figured out how to make it nest the script, but then the plugin wouldn't work. However, when I deleted the div, the script was gone too and the content didn't throw an error.

Is it possible for it to work with the function nested inside the div?

[mharrisonline]

What I mean is, what would I need to change to make the plugin still allow editing the Flash Object if the script was inside the div instead of after it? It creates a working object with no trouble if the script is inside, and the script is deleted if someone deletes the Flash, but the plugin can't find the script when you try to edit.

If the script is after the div, of course, everything works normally.

[benDOTsimkinsATintsoftDOTch]

Sorry, only remember to come back here periodically. Appears I hadn't properly understood for freezescript, sorry, I'll give it a go. To get the plugin to find the script placed inside flash, you would need to modify the FlashEdit.prototype.buttonPress = function(editor) function. I don't have the time right now (big roll-out this morning), but I guess instead of looking for the next node after the div, you'd need to look inside the div for a <script tag - probably regexp? You'd also have to modify the t=fdiv.innerHTML at the same time to not include the script. I will probably have a go at doing what you suggest, but not in the next couple of days...

[benDOTsimkinsATintsoftDOTch]

A new version

[benDOTsimkinsATintsoftDOTch]

I lied.

I found the time - uploaded is a new version with following modifications:

- Removed <script>/<noscript> hack

- Added javascript/freezescript instead

- No longer need to hack GetHtml plugin (but do still need it to protect script contents)

- Modified plugin to look for and insert script inside div.

Tested in Firefox and IE, seems to work ok. Anymore comments welcome.

Might be worth suggesting to Geoff Stearns the idea of putting the script in the div, not sure whether it's of interest to anyone else. It was your idea though, so I'll let you do the honours...

[mharrisonline]

It works great! Now, when a user visually deletes the flash div the associated script is deleted too.

I noticed that if I click outside the editor before or while using the plugin that the new HTML is inserted on the page outside the editor. If you add the line

editor.focusEditor();

after line line 141 of flash-edit.js, just before

editor.insertHTML(div);

the new code always goes into the editor.

[benDOTsimkinsATintsoftDOTch]

Thanks for the tip. I've updated my code appropriately.

So, how do we get this plugged in to Xinha officially?

I suppose to be complete, it would be good to include php and asp pages with example code of how to get flash properties from the film.

[mharrisonline]

I submited ticket 685 to make Xinha javascript safe by implementing the freezescript solution in htmlarea.js. It also adds an optional config value (that could maybe be set by the plugin?) utilityjs that can add a link in the content to flashobject.js. This really needs to happen, and would open the door to an exciting new type of plugin for Xinha that could insert javascript to display RSS feeds, etc. which are currently impossible.

[benDOTsimkinsATintsoftDOTch]

Modification to last function in file - in our setup, several 'contents' created by Xinha can appear on the same page - so my incremental id's don't work at all (doh!). So I've gone for a 'pseudo' GUID approach:

//Need to create 'guid', because incremental ids are not enough - we may have several
// different contents displayed on the same page
function getNextFlashId(editor) 
{
  var idlen=16, id='';
  for(i=1;i<=idlen;i++)
    id+=Math.floor(Math.random() * 16.0).toString(16);
  return id;
}

[blarcheveque@…]

Hi all, I am currently using the cmsTool from weblogic where they integrated xinha editor, I don't know which version but the copyright I found in the license.txt are: Copyright (c) 2003-2004 dynarch.com and Copyright (c) 2002-2003 interactivetools.com, inc.... I would be interesting to integrate the Flash plugin but I can't manage to do it.. is there a tutorial that explain it? I extract the archive into the plugin directory but it didn't sort the problem...

Any suggestion would be welcomed Regards, Benjamin

[mharrisonline]

I submitted a new version of my patch to make it possible to handle content with js at http://xinha.python-hosting.com/ticket/685, and I uploaded a finished htmlarea.js(from tonight's download) that contains the patch.

You should be able to use the plugin with that htmlarea.js file. If your content doesn't already link to the flashobject.js file, add its location to the new config described in the ticket#685 patch, which at least for full page content will add the link for you.

[bsimkinsATintsoftDOTch]

A few updates: 1. Geoff Stearn has been obliged to rename his FlashObject? to SWFObject, for legal reasons. I've not currently done anything about that, but may do so some time soon.

2. If anyone has been trying to contact me at benDOTsimkinsATintsoftDOTch, bad luck, it was a typo - try bsimkinsATintsoftDOTch, sorry!

3. New version available now, with extra dialogue (see Parameters button) to add custom parameters.

[bsimkinsATintsoftDOTch]

Updated version of FlashEdit? plugin, with custom parameters dialogue.

[ray]

Please look at #685 regarding the "freezescript" hack

[nicholasbs]

See mailing list