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.

Recently I’ve made a small research and found many JavaScript classes that include dynamically flash in HTML pages. Most of them were easy to use and offered reasonable compatibility with different user agents and platforms. That’s great, but as a javascript developer I need to know also what’s behind the scene. How they work and how easy for modification and upgrade they are. When a client comes and say “I need this feature” or “can you support also this browser…”- he does not care what great-open-source-class I use- he just needs the thing done and I need to be able to make it.

Here comes the tricky part…

I took the uncompressed version of one popular class- swfobject 2.1 and I was surprised- it was 23KB! Well I know that these days 23K  are nothing for the web bandwidth but if you gonna maintain the code- they are a lot.  Isn’t it all about checking if there is Flash Player present and if yes just replace the innerHTML of some DIV- sounds  not so complex to require 700+ lines of code. I said- that’s ok the volume is not important if the code is simple and understandable. I scrolled down the code and I saw the file is ending with:

                }
            }
        }
    };
}();

Well, this simple complexity test just adds more concerns… what is this complex logic that requires such nesting? Besides what is the point you declare a function just to execute it on creation- can’t you just write the code, or if you want to be more structured- use static class for example.

And the final blow was the conditional parsing/line 88/ for detecting the OS in Internet explorer. Come on we’re not here to show how great programmers we are we just need to replace the innerHTML of a DIV.

Its not that I don’t appreciate the work done by the guys- they are great and I’d like to thank them for sharing it with others, but it’s just not my vision how it should be done.

So I thought to myself- there must be a simpler way… I don’t need complex event management, onDomContentLoaded handling or dynamic DOM elements manipulations- they are all out of scope of flash inclusion class and besides I already have them in the API’s core/I will introduce it in another post/.

I created my own class nearly 9 times smaller and doing exactly what is needed- include flash content  into html page.

When I have time I will write some documentation but it is so simple that I think the usage examples should be enough. If not, one can always take a look at the code . Here they are:

Usage: http://blog.aip-solutions.com/wp-content/uploads/2009/02/dl.swf.htm Actually this was my class test page used in its creation,  so don’t take into account the visual.

Source: http://blog.aip-solutions.com/wp-content/uploads/2009/02/dl.swf.js

Hope will be useful to you…

Cheers,

Peter