Website Administrator
delivering administrator solutions for your website...
Website Administrator
delivering administrator solutions for your website...
This article covers how to standardly insert and validate .swf Flash in Xml, xHtml, Html 4 and Html 5.
With the official release of HTML 5 just around the corner, we are going to see that the embed tag is back and is a valid method of placing flash onto our webpage! And of course this changes everything as the new re-release of the embed tag is formally indoctrinated into the hall of revered doc tags. So we'll embed HTML5 first, (it is really very simple) and then object HTML4 and the rest second...
In html5, use of the embed tag is as simple as:
<embed src="MyFlashFile.swf">
or
<embed src="MyFlashFilesFolder/MyFlashFile.swf" type=".swf" play="true" loop="false" quality="high" width="100" Height="100">
Unlike the <object data="MyFlashFile.swf"></object> code, there is no closing tag required and don't forget to make sure you specify your filename (include the path to the file if any) and dimensions to suit your file. Though you don't have to include any parameters at all if you don't want to, but you can. Of course this assumes .swf is a valid mime type to your browser (flash is installed and enabled on the user's computer).
And to be sure you understand exactly where .swf files fit into the scheme of all things apple, it would be very prudent for any Website Administrator to have read and understood resident apple seer Steve Jobs' thought's here: thoughts on flash (apple website). If that hasn't spooked you into understanding CSS and HTML5 a little better or is of no importance to you, then read on as validation awaits!
With advent of Html4, xml and xHtml, validation of flash files could only be achieved using the object tag. Website authors coding at this time witnessed the demise of the "embed" tag leaving many asking "How then can i validate Flash in xml, xhtml and html4?" And this was an interesting question that is posed by a number of netizens coding the wonderful code for websites on the internet. And for fellow Website Administrators out there, I thought i might share some simple, if not elegant, code to implement flash (.swf files) into your website browser with 100 percent strict "xml", "xhtml" and "HTML4" validation.
If you were raised using the embed tag to implement flash and found that it fails validation and are now frantically searching "How do i insert some valid strict flash viewer code into my website so that i can validate my webpage in strict xml, xhtml, html4", then your wait is over, look below... (or for html5, look above)
Copy and paste the following code into your website html. (Be sure to take note of the notes!)
<p>
<object id="MyFileName" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="480">
<param name="movie" value="flash/MyFileName.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash/MyFileName.swf" width="640" height="480">
<!--<![endif]-->
<param name="quality" value="best" />
<param name="bgcolor" value="#000000" />
<param name="wmode" value="opaque" />
<param name="play" value="true" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<param name="allowscriptaccess" value="samedomain" />
<param name="swfversion" value="6.0.65.0" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</p>
notes: (do not include this or the following lines in your code. The Bold text shows the mandatory 'edits')
Firstly, if you are coding in plain HTML, you would remove the "/" at the end of these tags.
edit both values in width="640" and height="480" to match your file's required display window size
edit id="MyFileName" (using your movie name keeps it simple - dont include the .swf here [id is for 'object' scripting]
edit "value" and "data" "flash/MyFileName.swf" where 'flash/' is the path to the folder and MyFileName.swf is your .swf file
edit "bgcolor" = # to suit background eg: "#000000"=black
edit "loop" = 'true' if you want the flash to continuously repeat [alt: 'false']
edit "play" = 'true' to autoplay [alt: 'false' means play the flash using 'right click' option in the full flash menu]
edit "menu" = 'false' is the default menu, you can remove this or any line if not needed [alt: 'true' for full flash menu]
edit modify or delete any of the above standard params (also called attributes and values) or those in this reference guide to valid Macrovision-Adobe FLASH params list link. (Hint: Use a CSS .class in the <p> tag to center your flash if needed).
The website administrator can see that in the above flash player code we test for internet explorer to ensure the file will correctly work regardless if the visitor uses mozilla firefox or ie.
An interesting note is that I had an issue with ie8 not loading the .swf in strict xhtml format until i placed the <title></title> tag as the first item in the <head> section. (I didn't research why this was so, and i checked it several times). But i thought i would mention it if ever you have problems with your .swf not loading and are sure your object code is correct (like the copy/paste code), i would recommend you also check placement and content of your <meta> tags, make sure they are correct in syntax.
It is best to include the exact file Height and Width size to speed up the browser rendering of your page. You should also be aware of which flash version your file needs to operate with. You may need to edit the flash version (swfversion value=) here so that it is fully compatible with what your are serving. We have done away with the call to the adobe flash updater as it is usually unnecessary. However, you should include a link to download flash on your website if you are using the latest flash developer software or think your visitors will not have a newer version
installed on their system to view your file correctly.
If you are looking to "embed" or "object" .flv files into your site using this flash code, you are probably having a hard time finding your answer. To do this, you need to be willing to install, configure and host a .flv player on your website. If not, then you are better off using youtube (or the like) or the really simple solution is to convert your .flv to .swf. Perhaps it is easier for you to convert the video to .swf. You can do this with some video conversion software packages like the excellent freeware program "super-c". (You can get the latest version from our freeware download page).
And if you are set in your thinking to have the .flv to autoplay in your webpage, there are plenty of free flv players you can seek out and install on your website for this purpose, but as we are looking at .swf files in this article, .flv file integration and setup code is outside the scope of this article. I may write that one on another day for you though...
As a Website Administrator, you will find it to your advantage to go back and dig around the beginnings of why flash was developed at all. Also, for a long while, flash had become irrelevant due to its inadvertent hiding of content from search engines. This means the data would not show up in the serps and so it means that a lot of hopeful glory had never been found.
You see, there was another prior error of magnitude which has existed for a number of years by many of Earth's finest creative artists whom have been busily promoting themselves into obscurity with excessive use of flash on their internet websites thinking this was a means of further promoting their hard earned celebrity and instead wound up sharing their artistic allegiance with but a few that happened upon their luckless but brilliantly formulated website. And it is with many thanks to the recent advancement of the google team who have taken the time to open and strip some core data from flash files and exposing and enabling the content inside to be added to their serp listings and to also herald in a brand new golden age for flash.
The beauty of "flash" developed websites is that it enables viewers a multi-platform standardized experience that is independent of any and all the demanded rules to which the rest of us must adhere. Let us go into what might be one day extrapolated as an equivalent to the aboriginal 'dream time' for the plebeians sharing this cyber realm while we conjure perhaps a series of events that helped shape the net. Perhaps for my own edification, or perhaps to simply give you a little history of moments that 'time' has seemingly forgot.
Land locked Pirates in the valleys of Silicon. Back in the day when a soulless black screened crt monitor, having declared your soundblaster had now successfully usurped your irq 7, would then proceed to announce to you an equally enigmatic phrase of "C:\_" complete with it's blinking cursor which in turn (for some) initiated the beginning sequence of a self-induced trance-like state which would oftentimes last for several hours. The days when rumor of a microsoft vision for 'complete global domination of everything software' abounded like other rumored statements of their recent semi-successful attempt in the reverse engineering of an ill-gotten apple developed but xerox pioneered picture desktop, and approximating a time where another imaginary group of visionary boys sat excitedly attempting to envision a future predicated on a civilization where commonplace household technology could possibly include an affordable home based computer which could then be coupled into a massive copper wired web that circumnavigates the globe many times over and which many called a telephony system.
Now, the internet was not a new thing, it had already been around for more nanoseconds than one would even want to try and jam into an earth based calculator. You could already "log on" in Melbourne and again and again seemingly appear as though you had actually "logged on" from any of many wonderfully exotic places in and about the globe and scour many a resourceful website for some exquisite and precious data. You've seen this reference in scores of movies but, what was Avant-garde was the formulation of a program that simple folk could use to share their websites with each other using a graphical interface that would not only show the words, but also pictures and sound too! Imagine having a machine in your lounge room that could call up website pages from the internet that also contained pictures and sound! Now that would be something awesome! A website administrators dream.
These imaginary boys developed a program that took the world by storm and they named it netscape. There were no website browser wars. There really was only netscape, and not until the microsoft release of windows 95 with it's microsoft "internet explorer" only website browser option that was unwittingly enforced upon each new user with each new installation or re-installation of any microsoft operating system thereafter, did the eventual demise of the netscape domination come to an untimely end. Sadly, by simple default as a massive legion of 'point-click dont-get-technical-on-me where's-the-any-key' PC computer users joined the ranks of the "super information highway" juggernaut as it begun it's incessant onslaught into the lives of the many since. And so 'to the boards' went many other aspiring advance of other brilliantly coded browsers that dared enter the front-line from that time of 1995 onward. (Though, luckily, some still decided to code and improve website browsers, and so we do have other options - for those of us smart enough to download these other website browsers, like mozilla for instance, which is really like going back to good ol' netscape in a way).
Now we are left to ponder, is it perhaps because of this age old obsession to "control all software" that formulates part of the reason which calls upon us to abandon the once revered "embed" command? Perhaps an effort to stomp down yet another smoldering remnant of a once almighty Netscape?
You see, part of the development of netscape was the ability for developers to use the "embed" tag to embed special non-standard html code items into the website browser. It came as no surprise that microsoft did not formally acknowledge the tag in their browsers (though did wind up supporting the embed calls) and instead hobby horsed the "object" tag. The embed tag, in spite of being enormously popular and in widespread use for well over a decade, was never formally successfully lobbied and indoctrinated into the standards of quality coding of our day and so, 'finally' some must be saying, it is now "out" which leaves us looking to what microsoft used in it's stead.
And it was this embed tag which salvaged a vision of a separate group of guys who had formulated a wonderful idea of delivering (embedding) a stand alone package with-in the internet browser that would allow the user an independent interactive interface with sound and vision which was both effective in speed and space for the the ever hungry consuming hordes who love the combination of an eyes and ears entertainment package. And so we welcomed flash onto the stage of must have internet software.
And short of telling you to write, host and link your own !doctype declaration, what we have left now is the "object" tag. And i have seen some wonderfully strange attempts which do successfully use it. But here i will offer you the workable, farewell-old-friend 'embed' as we now begin to only use the "object" tag to get our 100 percent xml, xhtml or html4/5 strict validation. So copy and paste the code from the box above and begin anew to code in flash without the fear of writing your self into obscurity any longer.
I hope you have found this page useful and informative.
-Fin