ControlFreak

LANGUAGES:VB.NET | C#

ASP.NETVERSIONS: 2.x

Add Flash ... and Flare

Grab Attention with a Custom Flasher Control

By Steve C. Orr

Flash animation is a great way to grab people?s attentionamong the endless sea of look-alike Web pages on the Internet. It can presentuseful information, as well as provide functional interactivity. EmbeddingFlash animation within a Web page used to be simple. However, changingstandards such as XHTML and ActiveX Activation have introduced significantcomplications. In this article, you?ll learn all you need to know to play andembed Flash animations within ASP.NET Web pages. Indeed, the custom Flashercontrol detailed in this article makes Flash animation easy again.

Standards Challenges

Adobe?s Web site recommends the HTML syntax shown inFigure 1 to instantiate their Flash player and display a Flash animation. Thesyntax is not pretty, but it works ? sort of. It certainly used to work well,but these days it has issues. For one thing, it violates the HTML standard inseveral different ways. Browsers tend to be forgiving, so for now it stillmostly works. However, every good Web developer should strive for standards-compliantcode. One of the main reasons it?s non-compliant is because the Embed tag iscontained within the Object tag, which is not allowed. However, it works anyway,but only because Internet Explorer (IE) uses the Object tag and ignores theinternal Embed tag, and Mozilla-based browsers do the opposite.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

 codebase="http://download.macromedia.com/pub/shockwave/cabs/

 flash/swflash.cab#version=6,0,40,0"width="550" height="400"

 id="OBJECT1">

<param name="movie"value="myFlashMovie.swf">

<param name="quality" value="high">

<param name="bgcolor" value="#FFFFFF">

<embedsrc="/support/flash/ts/documents/myFlashMovie.swf"

quality="high" bgcolor="#FFFFFF"width="550" height="400"

name="myMovieName" align=""

type="application/x-shockwave-flash" pluginspage=

 "http://www.macromedia.com/go/getflashplayer">

</embed>

</object>

Figure 1: Adobe?s Website recommends this non-standard HTML to play Flash animations in a Web page.

The sad fact is that there is no single HTML orXHTML-compliant syntax that will allow a Flash animation to be played across allbrowsers. Therefore, Web developers are pretty much forced to output one syntaxfor IE users and another syntax for other browser types. That is one messydetail that?s encapsulated by the custom Flasher control included with thisarticle, so you won?t need to worry about it (see end of article for downloaddetails). Essentially, the Flasher control outputs HTML syntax similar to thatshown in Figure 2 for all browsers except IE.

<object

  type='application/x-shockwave-flash'

  data='anim.swf'

  width='550'

  height='400'

  play='true'

  loop='true'

  quality='AutoHigh'

/>

Figure 2: ThisHTML snippet will play a Flash file in all major browsers except InternetExplorer.

Conversely, the HTML in Figure 3 shows the syntax thatworks for IE. If that HTML is pasted into a Web page and references a validFlash animation it will play just fine. However, an annoying message willappear to the user at run time.

<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

 width="550"height="400" id="myMovieName">

 <paramname="movie" value="anim.swf">

 <paramname="quality" value="high">

 <paramname="bgcolor" value="#FFFFFF">

 <paramname="loop" value="true">

</object>

Figure 3: ThisHTML snippet will play a Flash file in Internet Explorer ? but ActiveXActivation will be required by the user upon every page load.

ActiveX Activation

The HTML in Figure 3 worked perfectly in 2005 ? ah, thegood old days. It turns out that a company named Eolas Technologies apparentlyhas a patent on it. Microsoft?s stunning loss of the related lawsuit has hadmajor repercussions for Web developers worldwide. Microsoft was forced todeploy patches for IE that now require the user to click (or press thespacebar) to activate any embedded software, such as ActiveX controls. Nowusers are presented with an annoying activation message for every Web site thatstill uses the old syntax (see Figure 4). It should be noted that the sameissue also exists when trying to embed .NET Windows forms controls.

Figure 4: ActiveX Activation is aburden all Web developers must now deal with so their users don?t have to beannoyed by messages such as this.

To circumvent this problem, the only supported solutions(at the time of this writing) involve instantiating embedded ActiveX controls froman external JavaScript file (see http://www.aspnetpro.com/NewsletterArticle/2006/06/asp200606af_l/asp200606af_l.aspfor more information).

In short, if a Web developer wants standards-compliantcode that plays Flash files in all browsers without requiring users to activateembedded ActiveX controls, there are quite a few hoops to jump through. Allthese issues have been addressed and resolved to drag-and-drop simplicity withthe custom Flasher control described here.

Flasher!

To use the cross-browser compatible Flasher control,download the sample code and add the included Flasher.DLL to your Visual Studio2005 toolbox. Then drag it onto any WebForm and set its FlashFile property toany valid SWF file. That?s it! Run the project and the Flash animation willplay in all browsers without any of the headaches mentioned previously. Ofcourse, you can customize it with various properties, such as those shown inFigure 5.

Figure 5: TheFlasher control provides several useful properties that allow versatileconfiguration.

The ASPX declaration looks like this:

<cc1:Flasher ID="Flasher1" runat="server"

 FlashFile="~/anim.swf"BackColor="red"

 Width="550"Height="400" Loop="false" />

If desired, JavaScript can be added to the page to let theuser or page developer control the animation via client-side code. Thefollowing ASPX page code provides links to let the user start and stop theplayback of the Flash animation:

<div onclick="Flasher1.Play();">Play</div>

<div onclick="Flasher1.Stop();">Stop</div>

So How Does It Work?

Flasher inherits from the System.Web.UI.Control class andextends it with custom rendering functionality and the properties shown inFigure 5. The overridden Render method is shown here:

Protected Overrides Sub Render(ByVal w As HtmlTextWriter)

   If Me.DesignMode ThenExit Sub

   WithContext.Request.Browser

       If.Browser.ToString.ToUpper = "IE" Then

           RenderForIE(w)

       Else

           RenderForAlt(w)

        End If

   End With

End Sub

At design time the Render method displays only aplaceholder, as directed by the first line of code. The rest of the code simplybranches to one run-time rendering routine for Internet Explorer users(RenderForIE) and another rendering routine for all other Web browsers(RenderForAlt).

The utilitarian RenderForAlt method shown in Figure 6essentially uses a StringBuilder object to concatenate a string virtuallyidentical to Figure 2 and renders it to the browser.

Private Sub RenderForAlt(ByVal output As HtmlTextWriter)

  Dim sb As StringBuilder= New StringBuilder

  sb.Append("<objecttype='application/x-shockwave-flash'")

  sb.Append("data='")

  sb.Append(Page.ResolveClientUrl(Me.FlashFile))

  sb.Append("'width='")

  sb.Append(Me.Width.ToString)

  sb.Append("'height='")

  sb.Append(Me.Height.ToString)

  If NotMe.BackColor.IsEmpty Then

      sb.Append("'bgcolor='")

      sb.Append(Color2Hex(Me.BackColor))

  End If

  sb.Append("'play='")

  sb.Append(Me.PlayImmediately.ToString.ToLower)

  sb.Append("'loop='")

  sb.Append(Me.Loop.ToString.ToLower)

  sb.Append("'quality='")

  sb.Append(Me.Quality.ToString)

  sb.Append("' />")

  output.Write(sb.ToString)

End Sub

Figure 6: TheRenderForAlt method takes care of the rendering tasks for all browsers exceptInternet Explorer.

This code is simpler than the IE rendering method becauseother browsers are not currently subjected to the burden of activation (and theextra code required to deal with it effectively).

Private Sub RenderForIE(ByVal output As HtmlTextWriter)

   Dim sb As StringBuilder= New StringBuilder

   sb.Append("CreateIEFlash('")

   sb.Append(Me.ClientID +"_obj")

   sb.Append("','")

   sb.Append(Page.ResolveClientUrl(Me.FlashFile))

   sb.Append("',")

   sb.Append(Me.Width.ToString)

   sb.Append(",")

   sb.Append(Me.Height.ToString)

   sb.Append(",'")

   If NotMe.BackColor.IsEmpty Then

       sb.Append(Color2Hex(Me.BackColor))

   End If

   sb.Append("',")

   sb.Append(Me.PlayImmediately.ToString.ToLower)

   sb.Append(",")

   sb.Append(Me.Loop.ToString.ToLower)

   sb.Append(",'")

   sb.Append(Me.Quality.ToString)

   sb.Append("');")

   output.Write("<scriptlanguage='JavaScript'>")

   output.Write(sb.ToString)

   output.Write("</script>")

End Sub

Figure 7: TheFlasher control?s Internet Explorer rendering method outputs only a single lineof JavaScript, which calls the CreateIEFlash JavaScript function (shown inFigure 8).

ASP.NET 2.0 Embedded Web Resources

The RenderForIE method listed in Figure 7 essentiallyconcatenates together this JavaScript, which is output directly into the page:

CreateIEFlash('Flasher', 'anim.swf',

 550,400,'#FFFFFF', true,true, 'high');

This code calls the custom JavaScript function (namedCreateIEFlash) shown in Figure 8. The CreateIEFlash function essentially usesthe document.write method to dynamically build and output HTML like that shownin Figure 3. To avoid ActiveX Activation, this function must be located in anexternal JavaScript file. Therefore, a reference to the external JavaScriptfile must be added to the page, such as this:

<script language="javascript"src="Flasher.js"></script>

Now, a person could try to remember to add this line toevery page that uses the Flasher control, and a person could try to remember todeploy that JavaScript file to the proper location in every project that usesthe Flasher control. However, it?s far more professional for the control totake care of these details itself.

// JavaScript File (flasher.js)

function CreateIEFlash(ID, Movie, Width, Height, BGC,

Play, Loop, Qual)

{

 varclsid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";

 varcodebase="http://download.macromedia.com/pub/";

 codebase+="shockwave/cabs/flash/swflash.cab";

 codebase+="#version=6,0,40,0";

 document.write('<objectclassid="' + clsid + '" ');

 document.write('codebase="'+ codebase +'" ');

 document.write('width="'+ Width + '"');

 document.write('height="' + Height +'" ');

 document.write('id="'+ ID + '">');

 document.write('<paramname="movie" value="'+ Movie + '"');

 document.write('<paramname="quality" value="'+Qual+'">');

 if (BGC.length>0)

 document.write('<paramname="bgcolor" value="'+ BGC +'>');

 document.write('<paramname="loop" value="' + Loop + '">');

 document.write('<paramname="play" value="'+ Play +'">');

 document.write('</object>');

}

Figure 8: Thisexternal JavaScript function dynamically outputs HTML similar to Figure 3. Thistechnique avoids ActiveX Activation hassles.

Therefore, the JavaScript file has been compiled into thecontrol as an embedded resource. To embed a file inside an assembly, simplydrag the file into the project inside Solution Explorer, then set its BuildAction property to Embedded Resource. To access this resource dynamically fromthe Web (as is about to be done), the file must also be declared. In this case,that?s done at the top of the class file (before the class declaration) withthis design-time attribute:

<Assembly: _

 System.Web.UI.WebResource("ControlFreak.flasher.js",_

 "text/javascript")>

The new WebResource method available in ASP.NET 2.0 makesit possible for controls to manage their own resources to make deployment andmaintenance easier. Its parameter accepts only the control?s namespace(ControlFreak), followed by a dot and then the filename with extension(flasher.js). The code in Figure 9 shows how the embedded JavaScript file isreferenced dynamically at run time.

Protected Overrides Sub OnPreRender(ByVal _

   e As System.EventArgs)

   If Me.DesignMode ThenExit Sub

   WithContext.Request.Browser

       If.Browser.ToString.ToUpper = "IE" Then

         ' Define theresource name and type.

         Dim rstype AsType = Me.GetType

         Dim rsname AsString = "ControlFreak.flasher.js"

         ' Register theclient resource with the page.

         Dim cs AsClientScriptManager = Page.ClientScript

         cs.RegisterClientScriptResource(rstype, rsname)

       End If

   End With

End Sub

Figure 9: ASP.NET2.0 includes the capability for Web controls to manage their own resources,which can greatly simplify deployment and maintenance.

Using this technique, the control?s JavaScript file doesn?tneed to be located in the Web application?s directory structure at all;therefore, you can?t forget to put it there or accidentally put it in the wrongplace. Instead, it?s automatically retrieved from the control at run time. TheRegisterClientScriptResource function makes this happen by building a URL thatreferences the embedded resource through an automatically managed HTTP Handler.The resulting HTML script tag looks like this:

<scriptsrc="/FlasherTest/WebResource.axd?d=t0e7oX8lfjsk..."

 type="text/javascript"></script>

Fun with Hexadecimals

Adobe?s Flash control requires its background color be setvia RGB Hexadecimal values only. Color names are not supported. Therefore, Ipatched together a utility function to translate the Flasher control?sBackgroundColor property to just such a Hexadecimal value. This function isshown in Figure 10. You may have noticed it being called from the RenderForIEand RenderForAlt methods.

Public Function Color2Hex(ByVal clr As Color) As String

   Dim HexR, HexB, HexG AsString

   Try

       'Get Red Hex

       HexR = Hex(clr.R)

       If Len(HexR) < 2Then HexR = "0" & HexR

       'Get Green Hex

       HexG = Hex(clr.G)

       If Len(HexG) < 2Then HexG = "0" & HexG

       'Get Blue Hex

       HexB = Hex(clr.B)

       If Len(HexB) < 2Then HexB = "0" & HexB

   Catch ex As Exception

       Return ""

   End Try

   Return "#"& HexR & HexG & HexB 'Output complete hex

End Function

Figure 10: TheColor2Hex function converts a color object into an RGB Hexadecimal value becausethat?s what Adobe?s Flash player requires.

This function extracts the Red, Green, and Blue (RGB) valuesfrom the Color object, then converts them in turn to hexadecimal values. Thenthe final line recombines them into a familiar string color value, such asthis:

#FF0099

Wrap Up

Using the ASP.NET 2.0 WebResources techniques (shown here)and the GetWebResources method (not shown here), you can easily embed scripts,images, icons, strings, and other items on which a Web control might depend. Webcontrols can now control their own dependencies, thereby easing deployment andmaintenance chores (see Figure 11).

Figure 11: The Flasher control playsFlash animations consistently across all major browsers so you don?t have toworry about development annoyances, such as ActiveX Activation or varyingbrowser support.

The Flasher control makes playing Flash animations easyagain. Now you can generate standards-compliant output that works in allbrowsers, and avoid user annoyances such as ActiveX Activation.

The source code forthe Flasher control is available for download (in both VB and C#).

Steve C. Orr is anMCSD and a Microsoft MVP in ASP.NET. He?s been developing software solutionsfor leading companies in the Seattlearea for more than a decade. When he?s not busy designing software systems orwriting about them, he can often be found loitering at local user groups andhabitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.netor e-mail him at mailto:Steve@Orr.net.