Texto substituição técnicas em Flash
Quarta-feira, 25 junho, 2008A técnica de substituição texto que apresento hoje é, em certos aspectos, muito interessante. Ao contrário da imagem clássica através de CSS para substituir, esta técnica utiliza um flash de modo a substituir os títulos do nosso site. Apesar de ser um pouco mais, porque exige a criação de um filme flash e o uso de Javascript, permite uma série de vantagens não indiferentes:
- Continua está acessibilidade do site usando uma Verdadeira-discreto-Javascript para que os rastreadores e aranhas continuar a ver a página como HTML simples e correta
- Não exige a criação de imagens para o n n títulos. Basta um filme para substituir todos os títulos do nosso site, com economias consideráveis em termos de Download
- Permite-lhe criar títulos simples, mas com letras não utilizadas normalmente na Web
- O texto pode ser prestado em HTML, graças às características do Flash
- O texto é selecionável
- Sendo um flash você pode adicionar interatividade e animação de qualquer espécie
Você vai observar também que este procedimento CSS não são praticamente tomados em consideração!
As ferramentas que nós usamos
Antes de proceder a ver o que temos de usar esta técnica.
- Adobe Flash para criar o filme que vai ocupar o lugar do nosso título
- A biblioteca SWFObject para a inclusão - dinâmico - o filme (discreto)
- A biblioteca prototype.js para automatizar tudo, vou usar exemplos no novo carregador de Biblioteca do Google AJAX API, mas se você quiser você pode incluir prototype.js em seu nome em separado
Além Flash, outros instrumentos são substituíveis por outras funções ou soluções pessoais.
O filme flash
Imagine que você quer fazer um título com um determinado tipo de letra, o que torna desnecessária a CSS, porque o problema é que as fontes não pôde ser instalado na máquina os interesses dos utilizadores e, por isso, não aparecem no final:
Abra o Flash e criar um filme com um tamanho semelhante ao do título que queremos substituir. Como veremos não é importante definir que a dimensão em design-time, isto pode ser alterado posteriormente sem afetar o rendimento das letras. Inserir um objeto Texto:
Clique em "Incorporar" e escolha:
No primeiro quadro simples e desarmar incluir este código:
- / / Obras de qualquer porte
- = StageScaleMode. NO_SCALE ; fase. scaleMode = StageScaleMode. NO_SCALE;
- = StageAlign. TOP_LEFT ; fase. align = StageAlign. TOP_LEFT;
- / / Desenhe no parâmetro conteúdo subiu de Javascript
- this . loaderInfo . parameters . content == null ) ? 'Errore' : this . loaderInfo . parameters . content ; rótulo. htmlText = (this. loaderInfo. parâmetros. teor == null)? "erro": esta. loaderInfo. parâmetros. teor;
E compilar o nosso filme (textreplacement.swf) e, em seguida, passe a marcação HTML, utilizando-visualizar um anteriormente, de modo a maximizar a compatibilidade:
Na seção head código incluem:
O GTA h1 é substituído pelo nosso textreplacement.swf filme, com o content contém a seqüência do título. Em uma situação mais e mais títulos, esta solução torna-se inconveniente, embora seja mais semper "sensacional" a mera substituição via CSS: clique aqui por exemplo (note que o texto seja selecionado).
Os dois tem um título e conteúdo HTML é feita a partir de Flash motor, escrito em vermelho:
- "textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content: 'Titolo <font color="#ff0000">due</font>' } ) ; swfobject. embedSWF ( "textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, (conteúdo: "Título <font color="#ff0000"> dois </ font> ' ));
Para cada título da página, na verdade, você deverá inserir uma linha indicando um Javascript SWFObject o id eo conteúdo do título a ser tratada. Usando prototype.js e entrando em uma classe para interceptar as provas de ser substituído, podemos escrever uma simples função que pode substituir todos os títulos da página com o conteúdo Flash, tendo o benchmark content dall'HTML: clique aqui, por exemplo.
- google. setOnLoadCallback (
- função () (
- ) . each ( $ $ ( 'H1.text de substituição'). Cada (
- element ) { function (elemento) (
- "textreplacement.swf" , element. id , "544" , "50" , "9.0.0" , null , { content: element. innerHTML } ) ; swfobject. embedSWF ( "textreplacement.swf" elemento. id, "544", "50", "9.0.0", null, (conteúdo: elemento. innerHTML));
- )
- );
- )
- );
Neste caso eu usei google.setOnLoadCallback() como usar o Google AJAX API Biblioteca para carregar prototype.js. Eles então interceptada todos TAG h1 classe conjunto com text-replacement Nesse ponto é chamado SWFObject para inserir o item encontrado element.id filme Flash. Note que é usado element.innerHTML para escolher o conteúdo de texto passe a piscar. Isto vai realmente passar o TAG span mas este não é um probelma em conjunto com o texto em filme flash em HTML.
Flash permite também uma variedade de efeitos (runtime) que tornam esta técnica verdadeiramente "nice": clique aqui, por exemplo.
O que eu apresentei é obviamente um exemplo simples! No entanto, o código Javascript e HTML taggature pode ser melhorada e tornar essa técnica verdadeiramente espectaculares. Você pode inserir títulos em animação gráfica ou passados, além de simplesmente usar letras não podem ser utilizados por CSS. Com as devidas modificações podem passar parâmetros adicionais para o nosso filme flash, tornando ainda mais dinâmico: Tamanho da fonte, a posição do texto, as acções a realizar para clicar, etc ... Você também pode criar um conjunto de filmes para diferentes tipos de valores mobiliários a ser substituído, proporcionando uma significativa poupança em termos de baixar o seu tempo!
Deixe um comentário