Replace images and HTML text with Flash | Tutorial sIFR 3 and swfIR
sIFR (text - holders)
Web designers have many limitations, browsers, resolution, meeting the standards, accessibility, and only use sources of system. For this last for some time that there is a solution, this is sIFR that sites like the magnificent Critrerion using long and undoubtedly improve the template. It is important that bajéis the latest version since it has been solved for example the operation of the relays when they used a color for the rollover.
The titles of the articles in this blog, of pqpq.es and justtellmewhy.com used sIFR 3.
Download latest version of sIFR:
http://novemberborn.net/sifr3/beta2 (currently version 3 you can get all the information in this wiki).
This is a gallery with more examples of the use of sIFR 3:
http://wiki.novemberborn.net/sifr3/Examples
What it does is to use Flash and Javascript technology to render a text with the source that we include in a Flash movie hosted on the server. The process is as follows:
- Loads the XHTML
- Through a javascript function is checked whether or not installed the Flash player, if not will be watching the XHTML source of the normal system.
- If you're looking for the elements are installed, are measured and setting up the swf needed to place them instead of the text.
Benefits:
It is affordable, lightweight, fast and consistent.
Notes:
- It could be that on the text that you have to replace any fund you want to keep. Not all browsers are compatible with Flash transparent addition to consume more this parameter.
- The menu changes.
- In the links you lose the ability to click with the middle mouse button or CTRL + Click to open in a new window or tab.
Plugin for Wordpress
You can add it to any site but if you are using Wordpress might be easier to install this plugin, but warn that it is not the latest version:
Custom Font Download Wordpress plugin
As lively as uploading and any plugin, remember to rename the folder before you upload only custom_fonts.
You can choose from a variety of sources that already come with the plugin:
'A Charming Font'
'Allstar'
'Arno Pro'
'Beautiful Ink'
'Creaminal'
'Cretino'
'Flowerchild'
'Hirosh'
'Luna Bar'
'Rounded Cent'
'Sonderfistad'
"Tondo"
'Trade Gothic'
'Type Knight'
'Van Den Keere'
'Vivaldi'
Once activated you are going to Design (Design)> Custom Fonts where rules apply (blocks) to assign one source or another as the CSS selector and the pages where they appear.
If, for example what they need is to change the nature of the titles of the posts, surely you can put as selector or h1 and h2 ready.
But if you want another source you need to do is create the swf file with the font you want and you must have installed on your computer. If you do it as explained on the website of the plugin will not be able to add the glyphs with tildes, recalled that the sources that come with sIFR do not include the glyphs, characters with accents, or the No N or sign to open interrogation ¿
Download http://novemberborn.net/sifr3/beta2
Este. Zip contains everything you need, documentation and examples to set it on any site including Wordpress, without the need for the plugin.
- Flash open the file in the folder sifr.fla Flash
- Double-click the movieclip "holder" of the library
- Eliminates the text to take less, if you want to use Bold or Italic inserted 1 single character.
- Properties change the font.
- Clicking Properties and Mainstreaming add the glyphs with tildes, the ñ and those who need it.
- Public swf with these options
Once created such futuraligth.swf should upload this folder:
wp-content/plugins/custom_fonts/sifr/fonts /
So you can use it from Design> Custom fonts edit the file "custom_fonts.php," you'll see a list of the sources described above, or to add your own adds as many lines as sources as follows:
$ cf_fonts [] = 'New Font Name'; Advanced Options
If you can do it without plugin always have more choices, you can use the extension for Dreamweaver or follow these steps:
- Connects to your files <head> sifr.js, sIFR-print.css and sIFR-screen.css
- Edit the file in the folder js sifr.js and includes a function call for replacing the text with the selector you want:
var name = (/ / you can put any name to the variable src: 'tufuente.swf' / / Put the path to your file created in the previous step ); SIFR.activate (name); sIFR.replace (name, ( selector: 'h1', css: [ 'a (text-decoration: none;)', 'a: link (color: # 000000;)', 'a: hover (color: # E2A42B;)'] ));
This is the code that replaces h1 corresponding to the titles of articles on this blog. We ask that if anyone has any problems leave me a comment with the configuration of your computer and browser.
Remember that the latest version fixes many bugs while still in Beta, you can even add filters to your Flash text
swfIR (pictures)
With the same technology has been developed swfIR (swf Image Replacement), but something like sIFR for images, in this case the download is only 3 files, a zip of 11.89 KB:
- 1 txt with instructions
- 1 javascript that flames from the head
- 1 swf which also must stay in your server
<script src="swfir.js" type="text/javascript"></script>
Finally add the javascript command within window.onload, you can change all these parameters as specific CSS selectors or by using the img tag for all images:
- border-radius
- border-width
- border-color
- shadow-offset
- shadow-angle
- shadow-alpha
- shadow-blur
- x-shadow-blur
- shadow-and-blur
- shadow-strength
- shadow-color
- shadow-quality
- inner shadow -
- shadow-knockout
- shadow-hide
- rotate
- Overflow
- link
- Elasticity
Published: May 26, 2008 | 07:17 am
Categories: Accessibility, CSS, Design, Web Design, Flash, Transportation, Types, Utilities, Wordpress, blogs, goal, pqpq, tutorials
Keywords: Accessibility, CSS, Web Design, Flash, javascript, open-source, pqpq, sIFR, swfir
13 Comments Add your own comment
1. Alejandro | Published on May 26, 2008 at 16:09
Thank you very much for mentioning my plug-in as much detail here. I would put a link on your page so that this Españoles can read documentation so wonderful.
Soon be ready version 3 plugin, which uses sIFR 3. I'm waiting for Mark Wubbo (The main developer) just check the latest beta ...
Only one thing in the package from sources that included with the plugin I had in mind the subject of accents, and most of them if they have accents and child support, I think we can all except Tondo ...
In short, a great post, and thank you very much.
Alejandro
2. Ceslava | Published on May 26, 2008 at 22:57
Hi Alexander,
Firstly congratulations on your work, I am sure that your plugin will be a success, because you speak Spanish when you make the upgrade as you can put it in this language.
For sources, before talking about what I installed it on my blog test, in http://www.pqpq.es with the Trade Gothic and as I recall it did not contain tildes, please confírmamelo what are all the characters for Spanish ( tildes uppercase and lowercase letters, N and N and the sign of open question?) If there are sources compatible update the post to give the correct information.
Thank you very much for the link and follow your job to see that plugin with sIFR 3
A greeting
3. Claudio | Published June 4, 2008 at 22:46
Hi I have a problem I am trying to create my source, I do everything to the letter and add my source, so good when I try to upload it to the localhost but my servidro does not work, the rest from sources that are already incorporated work well except mine on the server, any solution?
4. Claudio | Published June 4, 2008 at 22:55
ja, forget it off and activate the plugin and worked, greetings
5. Ceslava | Published June 4, 2008 at 22:57
Hello Claudio,
Well, almost that you would do ...
A greeting.
6. Claudio | Published June 4, 2008 at 23:14
hey I am still here, and until I feel sorry for such consultation, but there are way to remove the substance? I get a little scared to get moverle to scripts.
Congratulations for the course is very useful plugin
7. Ceslava | Posted on June 5, 2008 at 08:25
Hello again Claudio,
Edit the file in the folder flash> Options.as
In it you can configure the properties of the source of the swf that is generated, for example, or how the opacity of merger:
http://wiki.novemberborn.net/sifr3/Flash + Configuration
Although I think you need to do is make it transparent to the flash must use javascript:
wmode (String)
Specifies the window mode of the Flash movie. When the movie will be transparent transparent. When opaque elements can be displayed on top of the movie. If transparency is not supported wmode will be set to opaque and the background color specified in the CSS will be used. Therefore, it is important to always specify a background color!
transparent (Boolean)
Equivalent to wmode: 'transparent', if set to true.
http://wiki.novemberborn.net/sifr3/JavaScript + Methods
The plugin not I developed myself, I've published as an aid in the event of did not want to install it manually.
A greeting
8. Claudio | Posted on June 5, 2008 at 17:23
thank you very much for your help.
greetings from Mexico =)
cforms contact form by delicious: days
Published on July 22, 2008 at 23:14
[...] Some of which are not sources or web system to convert each holder of an image or use sIFR, which serves as a reference and inspiration for editorial design but hard to [...]
Published on September 8, 2008 at 19:53
[...] Despite the limitations that web designers in terms of typography, unless you use Flash or sIFR3 ever arise more sites that help make a good choice for our CSS, here [...]
Published on October 17, 2008 at 22:50
[...] You can play with it with CSS as you since you returned only a number, I used sIFR 3 moment because as ye see that I'm still changing the design moments in my [...]
Published on October 21, 2008 at 19:40
[...] The Helvetica Neue as are the owners of this blog but without sIFR3, only CSS, that is that if you see with this kind, if not Helvetica and if not [...]
Published on October 28, 2008 at 10:51
[...] Used in Web forms that are not sources of system we can use sIFR3 in anieto2k find another method based on javascript, without Flash, [...]