sIFR2.0rc3 - FLASH 替换文字代码

First off, let me apologize that simpler instructions are not available yet. They will be released with the official sIFR 2.0 release shortly. In the meantime, here is enough to get you started with sIFR. This can take anywhere from 5 minutes to 30 minutes to implement depending on your comfort level with CSS. INSTRUCTIONS: 1. Design your site normally and set all headlines in CSS-styled browser text. 2. Decide which styles you'd like to replace with sIFR text and which font(s) you will use. 3. Open up sifr.fla in Flash MX or Flash MX 2004 (preferred) and double-click the invisible textbox in the middle of the stage. Pull up the "Window > Properties" palette in Flash if it's not already up on your screen. Select which font you'd like to use from the dropdown menu. For TrueType fonts, you may also use the "I" and "B" buttons to create bold or italic font files. The standard sifr.fla file contains most of the english characters that you'd generally use, but if you'd like to embed additional characters or languages, click the "Character" button and select more characters from there. Choose "File > Export" and export your file with the name of "[fontname].swf". *** NOTE: Both "customize_me.as" and "dont_customize_me.as" must be in the same folder as sifr.fla when you export. Flash sucks the code from these files in and inserts it into your .swfs. You do not need to upload the .as files to your web server. 4. Apply the styles in sIFR-print.css to your own print CSS file. 5. Apply the styles in sIFR-screen.css to your own screen CSS file. You will most certainly have to tweak the styles in this stylesheet in order to match your sIFR font metrics to your browser test metrics. More on this later. 6. Add a call to sifr.js on all of your pages. 7. Set up your replace statement(s) either at the end of your HTML files (right before the closing body tag), or at the end of sifr.js. Here is a sample group of replace statements: <script language="Javascript" type="text/javascript"> //<![CDATA[ if(typeof sIFR == "function"){ sIFR.replaceElement("h1", "/vandenkeere.swf", "#000000", "#000000", "#999999", null, 20, 0, 20, 0, "textalign=center&offsetTop=6", null); sIFR.replaceElement("h5#pullquote", "/vandenkeere.swf", "#000000", "#000000", "#FFFFFF", "#FFFFFF", 0, 0, 0, 0); sIFR.replaceElement("h2", "/tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0); sIFR.replaceElement("h4.subhead", "/tradegothic.swf", "#660000", null, null, null, 0, 0, 0, 0); sIFR.replaceElement("h3.sidebox","/tradegothic.swf","#000000", "#000000", "#DCDCDC", "#DCDCDC", 0, 0, 0, 0); sIFR.replaceElement("h3", "/tradegothic.swf", "#000000", null, null, null, 0, 0, 0, 0); }; //]]> </script> And here is what all of the parameters do: sIFR.replaceElement(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode); sSelector = CSS selector you'd like to replace (e.g. 'h1.main' or 'h2' or '#main h3') sColor = text color (e.g. '#000000'... black is the default) sLinkColor = link color (e.g. '#0000CC'... same color as text is the default) sHoverColor = link color on hover (e.g. '#00CC00'... same color as linkcolor is the default) sBgColor = color of background (e.g. '#CCCCCC'... if you are using transparency, this will be the fallback background color for browsers which don't support transparency... white is the default) nPadding parameters = enter 0 in here unless you specifically have padding assigned to the element in CSS PADDING MUST MATCH *EXACTLY* TO YOUR CSS... THESE ARE NOT NUMBERS TO TRIFLE WITH sFlashVars = this is a special parameter which lets you pass other things into Flash. Examples include: textalign=center (horizontally centers text) offsetLeft=5 (pushes text 5 pixels to the right) offsetTop=5 (pushes text 5 pixels down) underline=true (adds underline to links on hover) --- Example syntax for extra parameters (& delimited): --- --- 'textalign=center&offsetTop=2&offsetLeft=4' --- sCase = 'upper' or 'lower' transforms text to upper or lower case... this param is optional and goes at the end sWmode = this parameter is not needed unless you want the background of the Flash movie to be transparent (not recommended) or if you are stacking other DHTML elements above sIFR... if you need transparency, enter 'transparent' (which will also enable stacking)... if you only need stacking, enter 'opaque'... otherwise omit this parameter *** NOTE: As of RC3, you can also set up your replace statements using "named arguments" which allow you to omit all parameters you aren't using and also use parameters in any order you please. Following is an example of the syntax: <script language="Javascript" type="text/javascript"> //<![CDATA[ if(typeof sIFR == "function"){ sIFR.replaceElement("h1", "/vandenkeere.swf", named({sColor : "#000", sCase : "upper"})); }; //]]> </script> 8. You are now pretty much done except for "tuning" your fonts. Everything about implementing sIFR is quite easy, except tuning your fonts can be a bit tricky. What "tuning" does is it adjusts the sizing/spacing of your browser text a split-second before it is replaced by sIFR text. This is necessary because if your browser text font is very wide and your sIFR text font is very narrow, a different amount of words will fit on one line and therefore a different amount of space will be created. Ideally, you'd like these two values to match closely. So here's what you do: Let's say you are only replacing H1's. Create a style in your screen stylesheet like so: .sIFR-hasFlash h1 { visibility: hidden; } This is your "decoy" style. It will never be seen by users but it will fine-tune the text a split-second before it is replaced. Okay, now pull up your HTML page and take note of exactly how much horizontal space your sIFR text takes up. Now, temporarily change the required Flash version at the top of the sifr.js file from 6 to 60. Now, pull up your HTML page again and your normal browser text should show up. Note how much horizontal space your browser text is taking up. The difference between this space and the sIFR text space is what you want to equalize. Play around with letter-spacing and/or font-size values in your normal H1 style until you get a match. If you can't match it exactly, make the browser text a bit narrower than the sIFR text. Now, cut those letter-spacing and font-size values from your normal H1 style, paste them into your decoy style, change your required Flash version back to 6 and you're done! 9. That's it!