Embetter
Introduction
“Embetter” the word comes from “embed”, which is the tag used to embed swf files into html pages. Since the framework is all about stacking one clip on top another into a master clip, I thought I should call the framework an “embedder”. However, that sounds too common, thus “embetter”. At least I thought it sounds better than “embedder”.
Embetter is basically a technique of developing a Flash site by dividing it into many smaller components that can take in FlashVars, work by itself and/or talk to each other using dispatch events. You can use the facade pattern for the listeners in the different components or just put the listeners in one of the classes that the component use. (Obviously you need to determine the event name first).
I have used this technique a lot but found it especially helpful in my most recent one where:
1. The project is much bigger than any other that I have done before.
2. There are many developers involved in different offices.
3. Not all or the wireframes were finalized when we started.
4. There are hybrid pages (html and Flash), where some of the components need to be able to work standalone, and at the same time it also needs to be able to work inside of an all Flash page.
5. There might be a occational promotional extra swf that might need to be put once in a while. (so using this technique you just have to edit xml and not compile the whole thing)
Features and Usage
1. You can pass in variables (like flashvars) in 3 ways. Through queryString, flashvars, and variable through the xml.
2. embetter.swf takes in a flashvar named “configXml” which is the path to the config.xml (you can name it anything) with all the clips information you want loaded.
* Structure of the xml file *
<?xml version=”1.0″?>
<config>
<clip>
<name>clip1View</name>
<depth>1</depth>
<xpos>0:w</xpos>
<ypos>0:n</ypos>
<priority>1</priority>
<loadedEvent><![CDATA[Clip1_loaded]]></loadedEvent>
<flashvars><![CDATA[flashvar1]]></flashvars>
<vars>
<var1><![CDATA[sukabumi]]></var1>
</vars>
<swf>clip1.swf</swf>
</clip>
</config>
* Tags exlpaination *
<config> - This is the root tag. (You actually need it to be named <config>)
<clip> - You can have as many <clip> as you want.
<name> - The name of the movieclip when it is attached to the embedder. (Does not matter if you have 2 with the same name because I also added a count to prevent 2 exactly the same name)
<depth> - The depth of the clip so you have control of which component to show below or on top of which ones. (This one have to be unique. I did not do an error check here)
<xpos> - x position of the clip component. It is in the form of “number:w” or “number:e” or “number:c”. The character “w, e, or c” is to tell if it is relative to the west, east or center of the screen. (Because some sites is autosize to fill the screen)
<ypos> - y position of the clip component. It is in the form of “number:n” or “number:s” or “number:c”. The character “n, s, or c” is to tell if it is relative to the north, south or center of the screen. (Because some sites is autosize to fill the screen)
<priority> (Optional)- Loading order of clip component. (Optional and will default to the order seen in the xml order)
<loadedEvent> (Optional)- This is an event broadcasted from the clip component. Typically used if the clip component has to load additional assets.
<flashvars> (Optional) - One of the 3 ways to pass in variable to flash. <flashvars> in this case means you have to give the value from flashvars in the html page. The values here (comma separated if more than 1) is just telling embetter to look for these values from flashvars in the html page. The reason for having this is because if you have multiple pages that share the same config.xml but with a slight variation, then you might want to use this method as a way to pass in variable.
<vars> and a sub tag (in this case <var1>) goes hand in hand (Optional) - One of the 3 ways to pass in variable to flash. Using this one means that you don’t have to pass it through flashvars in the html page since the value is already given here. Typical use is if the config.xml is just used by 1 page and does not need to have any variation.
<swf> - This is the full path to the swf file.
3. embetter.js is used if you want to pass in queryString. The flashvars NEEDS to be called “queryString” (because that is the name I pick) and to get the queryString from the url just do getQueryString()
4. To use the variables passed in, use this method. cap.embetter.modal.EmbetterModal.getInstance().getValue(”variableName”). Reason is I delete the variables from the timeline.
5. Embetter dispatch an event called “Embetter_done” when all clip componets have been loaded.
Samples and Source Code
Souce code and samples that covers pretty much all the basics can be downloaded here.
Additional Thoughts
The original version has a preloader on it. I took this one out because from personal experience different projects needs to do preloading differently. So will leave that implementation open unless you have suggestions.
Comments and Questions
Please email me at temua@hotmail.com if you have any comments or questions or inputs. I hope somebody out there would find this useful.