aip solutions developer’s blog

I’ll try to describe the creation process of dl.swf- a small class for publishing flash in html page.

A great overview for the concepts and common solutions of this problem can be found at: Embed Flash or Die Trying
Btw, nice title too… I will start from there, so reading the above is a good idea. Also my previos post on this topic can help /Include flash content in html page/.

So the task was: make simple, flexible, easy to use, easy to maintain and browser/platform compatible class for including flash into html page. Not bad… Did I mention 2 days time-frame /1 research and 1 implementation/? Will be fun for sure…

Everything begins with the usability. We have 2 scenarios:
1. Should be possible to include Flash at a certain point in the body. The code should be something like:

<div><script type="text/javascript">dl.swf()</script></div>

2. Sometimes is better to replace the content of an element, so for example if there is no flash player alternate content will be present:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">dl.swf("containerId")</script>

Looks simple enough but in case we need multiple instances we should register them. If the instances are created by a Factory method, then the Id will be generated automatically, but when there is communication between JS and AS is better to set it up manually. So no escape- Id parameter is necessary- will be the first argument passed to the constructor.

The other thing that bothers me is that all the logic is executed in the constructor- not much object oriented, eh… Frankly I don’t care /OOP was not part of the requirements :)/, the problem is that this approach, although simple, somehow shuts the door for future extension and in-between processing, so decided- the final replace will be done by a separate method- write(); Let see what we have:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">
var myObj=dl.swf("flashId")
myObj.write("containerId")
</script>

In case the constructor returns the object/little nasty js trick/ will be much shorter:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">
dl.swf("flashId").write("containerId")
</script>

or flexibility when there are no multiple instances and you don’t replace content in another element, then the Id will be auto-generated and the writing method will not need a parameter.

<div><script type="text/javascript">dl.swf().write()</script></div>

Still simple enough, yet much more flexible.

Then probably we need to adjust some parameters of the html object or pass variables to the .swf itself. Since it is not possible to predict the number of these parameters we can pass them as associate arrays. Unfortunately in Javascript there is no easy way to create associate arrays/they support Alpha calculus though ;)/- something like [key1=>val1,key2=>val2] would have been great, but we have to use objects {key1:val1,key2:val2} - at the end its the same. Our example code should be like:

<div id="containerId">Alternate Content</div>
<script type="text/javascript">
dl.swf("flashId",{par1:val2,par2:val2},{swfvar1:val1,swfvar2:val2}).write("containerId")
</script>

Most of the times there is no need for passing parameters to the .swf and I can preset the most common paratemeters of the html object, so the array parameters should not be required. Again we’re back to:

<script type="text/javascript">dl.swf().write()</script>

Not complex at all, but at the end of the day the class should be used primarily by designers. They seem to be scared of all these dots and brackets/not to mention anonymous objects as parameters/- so a simple function will be perfect for them. Let it be! Also they are used to pass certain parameters to it. No problem- I will take them from swfObject …

<script type="text/javascript">dlswf("path/movie.swf","movie_id","333","333","7","#777")</script>

Enough for the usage. Next is the implementation…

peter.