ControlFreak
LANGUAGES: VB.NET | C#
ASP.NET VERSIONS: 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 attention among the endless sea of look-alike Web pages on the Internet. It can present useful information, as well as provide functional interactivity. Embedding Flash animation within a Web page used to be simple. However, changing standards such as XHTML and ActiveX Activation have introduced significant complications. In this article, you ll learn all you need to know to play and embed Flash animations within ASP.NET Web pages. Indeed, the custom Flasher control detailed in this article makes Flash animation easy again.
Standards Challenges
Adobe s Web site recommends the HTML syntax shown in Figure 1 to instantiate their Flash player and display a Flash animation. The syntax 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 in several different ways. Browsers tend to be forgiving, so for now it still mostly works. However, every good Web developer should strive for standards-compliant code. One of the main reasons it s non-compliant is because the Embed tag is contained within the Object tag, which is not allowed. However, it works anyway, but only because Internet Explorer (IE) uses the Object tag and ignores the internal Embed tag, and Mozilla-based browsers do the opposite.
Figure 1: Adobe s Web site recommends this non-standard HTML to play Flash animations in a Web page.
The sad fact is that there is no single HTML or XHTML-compliant syntax that will allow a Flash animation to be played across all browsers. Therefore, Web developers are pretty much forced to output one syntax for IE users and another syntax for other browser types. That is one messy detail that s encapsulated by the custom Flasher control included with this article, so you won t need to worry about it (see end of article for download details). Essentially, the Flasher control outputs HTML syntax similar to that shown in Figure 2 for all browsers except IE.
So How Does It Work?
Flasher inherits from the System.Web.UI.Control class and extends it with custom rendering functionality and the properties shown in Figure 5. The overridden Render method is shown here:
Protected Overrides Sub Render(ByVal w As HtmlTextWriter)
If Me.DesignMode Then Exit Sub
With Context.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 a placeholder, as directed by the first line of code. The rest of the code simply branches 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 6 essentially uses a StringBuilder object to concatenate a string virtually identical to Figure 2 and renders it to the browser.
Private Sub RenderForAlt(ByVal output As HtmlTextWriter)
Dim sb As StringBuilder = New StringBuilder
sb.Append(" 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 Not
Me.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: The
RenderForAlt method takes care of the rendering tasks for all browsers except
Internet Explorer. This code is simpler than the IE rendering method because
other browsers are not currently subjected to the burden of activation (and the
extra 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 Not
Me.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("") End Sub Figure 7: The
Flasher control s Internet Explorer rendering method outputs only a single line
of JavaScript, which calls the CreateIEFlash JavaScript function (shown in
Figure 8). The RenderForIE method listed in Figure 7 essentially
concatenates 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 (named
CreateIEFlash) shown in Figure 8. The CreateIEFlash function essentially uses
the document.write method to dynamically build and output HTML like that shown
in Figure 3. To avoid ActiveX Activation, this function must be located in an
external JavaScript file. Therefore, a reference to the external JavaScript
file must be added to the page, such as this: Now, a person could try to remember to add this line to
every page that uses the Flasher control, and a person could try to remember to
deploy that JavaScript file to the proper location in every project that uses
the Flasher control. However, it s far more professional for the control to
take care of these details itself. // JavaScript File (flasher.js) function CreateIEFlash(ID, Movie, Width, Height, BGC, Play, Loop, Qual) { var
clsid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"; var
codebase="http://download.macromedia.com/pub/"; codebase+="shockwave/cabs/flash/swflash.cab"; codebase+="#version=6,0,40,0"; document.write(' document.write('codebase="'+ codebase +
'" '); document.write('width="'+ Width + '"
'); document.write('height="' + Height +
'" '); document.write('id="'
+ ID + '">'); document.write('
document.write(''); if (BGC.length>0) document.write(''); document.write(''); document.write(' } Figure 8: This
external JavaScript function dynamically outputs HTML similar to Figure 3. This
technique avoids ActiveX Activation hassles. Therefore, the JavaScript file has been compiled into the
control as an embedded resource. To embed a file inside an assembly, simply
drag the file into the project inside Solution Explorer, then set its Build
Action property to Embedded Resource. To access this resource dynamically from
the 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) with
this design-time attribute: System.Web.UI.WebResource("ControlFreak.flasher.js",
_ "text/javascript")> The new WebResource method available in ASP.NET 2.0 makes
it possible for controls to manage their own resources to make deployment and
maintenance 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 is
referenced dynamically at run time. Protected Overrides Sub OnPreRender(ByVal _ e As System.EventArgs) If Me.DesignMode Then
Exit Sub With
Context.Request.Browser If
.Browser.ToString.ToUpper = "IE" Then ' Define the
resource name and type. Dim rstype As
Type = Me.GetType Dim rsname As
String = "ControlFreak.flasher.js" ' Register the
client resource with the page. Dim cs As
ClientScriptManager = Page.ClientScript cs.RegisterClientScriptResource(rstype, rsname) End If End With End Sub Figure 9: ASP.NET
2.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 t
need 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 wrong
place. Instead, it s automatically retrieved from the control at run time. The
RegisterClientScriptResource function makes this happen by building a URL that
references the embedded resource through an automatically managed HTTP Handler.
The resulting HTML script tag looks like this: Adobe s Flash control requires its background color be set
via RGB Hexadecimal values only. Color names are not supported. Therefore, I
patched together a utility function to translate the Flasher control s
BackgroundColor property to just such a Hexadecimal value. This function is
shown in Figure 10. You may have noticed it being called from the RenderForIE
and RenderForAlt methods. Public Function Color2Hex(ByVal clr As Color) As String Dim HexR, HexB, HexG As
String Try 'Get Red Hex HexR = Hex(clr.R) If Len(HexR) < 2
Then HexR = "0" & HexR 'Get Green Hex HexG = Hex(clr.G) If Len(HexG) < 2
Then HexG = "0" & HexG 'Get Blue Hex HexB = Hex(clr.B) If Len(HexB) < 2
Then HexB = "0" & HexB Catch ex As Exception Return "" End Try Return "#"
& HexR & HexG & HexB 'Output complete hex End Function Figure 10: The
Color2Hex function converts a color object into an RGB Hexadecimal value because
that s what Adobe s Flash player requires. This function extracts the Red, Green, and Blue (RGB) values
from the Color object, then converts them in turn to hexadecimal values. Then
the final line recombines them into a familiar string color value, such as
this: #FF0099 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. Web
controls can now control their own dependencies, thereby easing deployment and
maintenance chores (see Figure 11). The Flasher control makes playing Flash animations easy
again. Now you can generate standards-compliant output that works in all
browsers, and avoid user annoyances such as ActiveX Activation. The source code for
the Flasher control is available for download (in both VB and C#). Steve C. Orr is an
MCSD and a Microsoft MVP in ASP.NET. He s been developing software solutions
for leading companies in the Seattle
area for more than a decade. When he s not busy designing software systems or
writing about them, he can often be found loitering at local user groups and
habitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net
or e-mail him at mailto:[email protected]. ASP.NET 2.0 Embedded Web Resources
Fun with Hexadecimals
Wrap Up
Figure 11: The Flasher control plays
Flash animations consistently across all major browsers so you don t have to
worry about development annoyances, such as ActiveX Activation or varying
browser support.