in

ASP.NET Weblogs

A Recipe for New Media

AJAX, Flash CS3, and Dynamic Javascript

Well, I've been having some fun with AJAX and Flash CS3.  Here is the scenario:

I had 4 pages that were all the same basically except for a block of text.  Each of these pages had icons indicating short video clips (usually 4 per page).  When you clicked these icons, the screen would grey out and a picture of a flat screen TV would come up over the web page and play the video, you could click on the OK button and the video would stop, the TV go away and the web page would go back to normal.

 How I accomplished this was simply in the execution, but complex in the JavaScript :-)  I simply used the ModalPopupExtender from the AJAX Control Toolkit to grey out the screen and popup the TV (which was simply a picture).  In the middle of the TV, I put a Flash object to play the video.  When you clicked the icon, two events were fired.  The first one showed the Modal Popup, the second event sent a message via Flash's ExternalInterface to the Flash file telling it which video to play.  When you clicked the button to close the Modal window, it sent another message to flash (again via the ExternalInterface in flash) to stop playing the video.  This way, I didn't have to keep recreating / reloading the Flash file, it simply stayed in the page and starting the video was a fast and seemless process, until I tried to use AJAX, that is.

Like I said, the pages were the same except for a block of text and which videos the icons played.  Being that the pages are graphically heavy and take 3-6 seconds to load to begin with, I figured it was a good candidate for AJAX, and it was.  The load time for page changes went down to 1-2 seconds.  I was quite pleased with myself, I clicked one of the icons, and the ModalPopup worked!!  ... but the TV screen was "blank", there was a big hole where the Flash player should have been and Javascript was throwing errors.

 The issue was this:  When you update a block of text via AJAX that has embedded script tags, the script doesn't run.  The way around this is to use the static methods on the ScriptManager class, specifically RegisterClientScriptBlock.  The problem with that is that script that Flash CS3 generates to get around the "Click or press spacebar" message relies on inlining the script in the page.  (Not the whole script, you make a method call to the function that produces the tags, but it does a document.write to insert the result at the point in the webpage where it was called).  So I opened up the Javascript file, found the point in the code where it did the document.write and added a bit of code to replace the innerHTML of a target span (that could be specified as part of the list of parameters to the method).  I then placed a span where I wanted the video to appear.  I could have gotten around this by placing the asp:Panel that made up the TV outside of the UpdatePanel and it would have worked as is, but that would be too easy :-)  Actually, I needed to clear the video between pages (the Audio demos page would end up with the last frame from the previous video showing as the audio demos are audio, not video, and flash has a glitch in it that I could not clear the last frame from the previous video without without running a new video or reloading the page). 

It may not sound like much.  But if you are not used to working with the strangeness that is embedded Javascript and AJAX UpdatePanels (not to mention that Flash itself is a little goofy).  Actually, let me explain that statement.  There is an issue in Flash CS3 where under Internet Explorer, the variable used to reference the Flash object doesn't get assigned (it has to do with the fact that when you create an element with an ID within a form, instead of creating a reference to it in the window object (ie.  window.NewPortfolio), it creates it within the form only (ie. document.forms[0].NewPortfolio)).  In my webpage, the Flash file is called NewPortfolio.swf, so I use an ID of NewPortfolio for the Flash object.  You need to know this ID name because you access the Flash ExternalInterface's methods by simply (in this case) saying NewPortfolio.playVideo([path to swf]), very much like PageMethods in AJAX Extensions.  So if the variable didn't get created in the correct place (on the window object), you get a ton of Javascript errors.  The way around this is right after you make the call to the Javascript that Adobe provides for inserting the Flash object, write a line like this:

NewPortfolio = document.NewPortfolio

And everything goes back to working the way it's supposed to.  (To make matters even more weird, under certain circumstances you have to write "<form></form>" right inside your <form runat="server"> tag to make Flash work right as well.  I've managed to get around that by rewriting some of my HTML (what precisely I did, I can't remember.  That "fix" was several months ago) and as outlined above.  So I think that Adobe should really look at fixing this problem before in the next release of Flash (or maybe it's Microsoft's "problem", I never know who to blame :-)

For more information see:
ScriptManager.RegisterClientScriptBlock
The Oddness of IE / Flash

Comments

 

Ali Eskici said:

isn't there a way in VSEditorUltimate2010 to implement Flash Object without arranging codes by getting from outside?

July 7, 2011 1:26 PM