|
Combining Multiple Scripts
You may have noticed that a lot of the scripts include the same external JavaScript files to create their effects. This is no accident. Using external files allows the browser to cache common code thus making viewing your page quicker, plus it also allows you to combine any of the effects. Now, not all effects might look good together, Fireworks & Snowflakes, Bubbles & Snowflakes. But certain effects may look good together. In this example we are going to combine Fireworks & Pinwheel. If we look a the help files we see that Fireworks is installed like this.... <!-- *** BEGIN CUT - Start Code *** -->
<!-- (* Another free JavaScript © from JavaScript-FX.com *) --> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Layer.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Browser.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Fireworks.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"> <!-- function JSFX_StartEffects() { JSFX.FireWorkDisplay(15); } //--> </SCRIPT> <!-- *** END CUT - End Code *** --> and Pinwheel is installed like this
<!-- *** BEGIN CUT - Start Code *** -->
<!-- (* Another free JavaScript © from JavaScript-FX.com *) --> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Layer.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Mouse.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Pinwheel.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"> <!-- function JSFX_StartEffects() { JSFX.Pinwheel(); } //--> </SCRIPT> <!-- *** END CUT - End Code *** --> If you notice, Both scripts use "javascript/JSFX_Layer.js" and both scripts have a function JSFX_StartEffects(). To combine scripts all you have to do is combine the external JavaScript SCRIPT tags (ensuring you do not duplicate any files) and put all the JSFX.Effect() Calls in the JSFX_StartEffects() function. To combine Fireworks & Pinwheel we would create a file as follows. <!-- *** BEGIN CUT - Start Code *** --> <!-- (* Another free JavaScript © from JavaScript-FX.com *) --> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Layer.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Browser.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Mouse.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Fireworks.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" SRC="javascript/JSFX_Pinwheel.js"></SCRIPT> <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"> <!-- function JSFX_StartEffects() { JSFX.FireWorkDisplay(5); JSFX.Pinwheel(); } //--> </SCRIPT> <!-- *** END CUT - End Code *** --> Now, the order of the files is important. The files
JSFX_Layer
JSFX_Browser JSFX_Mouse should always be first. All other code can be included in any order. For the function JSFX_StartEffects(), all that is required is that you combine the code from each of the separate demo's into one function. It does not matter the order in which these are placed. One word of caution... Be aware of your visitors. They may not have a superfast computer like you so limit the number of FX you combine, or at least warn the user beforehand. In our example above we reduced the number of fireworks to 5 to reduce the strain on the CPU. If you follow the rules set out here then you should end up with something like this..... |
