sábado, setembro 03, 2005

Compartilhamento de fontes

Um entre muitos recursos poderosos do flash é a capacidade de exibir as fontes originais do seu documento sem que para isto o usuário tenha que instalar na sua máquina estas mesmas fontes. Isto é um mecanismo padrão quando se trata de blocos de texto estáticos, quando trabalhamos com blocos de texto dinâmicos este recurso também é possível, mas temos que anexar as fontes no swf, o que muitas vezes incrementa o arquivo em até mais de 40kb, que para internet é um preço relativamente alto, principalmente se tivermos que anexar tres ou mais fontes. O procedimento para se fazer isto é acessando no painel "Properties" a opção "Character" e aí selecionar os caracteres ou o grupo de caracteres que voce quer incorporar no seu swf. A partir do Flash MX 2004, voce pode selecionar quatro grupos diferentes, são eles: maiúsculas, minúsculas, algarismos e pontuações, ou ainda pode especificar somente os caracteres que voce deseja incorporar no swf digitando diretamente na opção "include these characters". É um procedimento muito simples, mas que como eu disse anteriormente incrementa bastante o tamanho do seu swf. Mas existe uma outra maneira de fazer com que o flash exiba suas fontes em campos de texto dinâmicos com segurança sem que para isto elas estejam incorporadas no arquivo swf, é o recurso de compartilhamento de bibliotecas, que funciona não só para símbolos como MovieClips, Graphics e Botões, funciona também para fontes. Vejamos passo a passo como fazer para que funcione de maneira correta.

Primeiro vamos criar um arquivo que vai servir de biblioteca, é um arquivo sem nenhum gráfico, somente com a fonte ou as fontes na Library. Abra um novo documento flash e salve-o como biblioteca.fla.

Abra o painel "Library" e clique no botão "Options" que fica acima, no lado direito, selecione a opção "New Font", irá aparecer a janela "Font Symbol Properties". No campo "Name" você coloca o nome do símbolo, não o nome da fonte e veremos mais adiante porque não colocar o nome da fonte neste campo. Vamos colocar por exemplo o nome "texto_rolagem" pois faremos um bloco de texto com scroll usando esta fonte.

No campo "Font" voce escolhe a fonte que será usada.

As três opções de estilo que você vê na parte de baixo da janela "Font Symbol Properties" são "bold", "italic" e "alias" e voce deve marcar, caso vá querer utilizar estas opções na exibição do seu texto. Se estas opções não estiverem marcadas e você por acaso queira utilizá-las no seu swf de exibição o texto não aparecerá, então certifique-se de que vai estar marcando as opções que irá querer utilizar.

Vou marcar apenas a opção "Alias" porque se eu quiser utilizar uma máscara no meu bloco de texto dinâmico esta opção precisa estar marcada, ela cria um contorno na fonte e melhora sua legibilidade, evitando o "embaçado", muito comum no flash. Mas você tem que especificar o tamanho do corpo que você vai utilizar para fonte (somente para esta opção), caso contrário, não funciona. Escolherei o corpo 8. Cabe aqui uma pequena observação sobre fontes bitmap: Existe a necessidade de se utilizar tamanhos de corpo iguais a 8 e seus múltiplos (16, 24, 32, etc) para que estas fontes sejam exibidas da maneira como foram concebidas e não unicamente em corpo 8 como se afirma. Feito isso completamos a primeira etapa do trabalho, criamos um símbolo de fonte.

Agora vamos selecionar as opções de vinculação deste símbolo para que ele possa ser compartilhado com outros documentos. Dentro da library clique no símbolo "rolagem_1" que aparece agora como único elemento da sua biblioteca e com o botão direito do mouse selecione a opção "linkage" e se abrirá a janela "linkage properties" vamos marcar as seguintes opções: "export for runtime sharing" ou seja "exportar para tempo de execução", isto quer dizer que você está disponibilizando este símbolo para que ele seja utilizado por outro swf em tempo real. A opção "Export in first frame", deverá aparecer marcada no momento que voce marcar a primeira, se não aparecer marque.

No campo "URL" coloque o caminho e o nome deste swf que voce está fazendo para que ele possa ser acessado pelo outro que irá utilizá-lo como biblioteca. Para simplificar, coloque os dois na mesma pasta, assim basta que voce coloque o nome do swf com extenção. Por exemplo, este documento que estamos criando foi salvo como "biblioteca.fla" então vamos digitar no campo "URL": biblioteca.swf. No campo "identifier" deve aparecer o nome com o qual voce salvou o símbolo no meu caso "rolagem_1".

Feitos estes procedimentos publique seu documento. Você verá que nada aparece é apenas uma tela em branco, mas se voce for no menu View e selecionar a opção "bandwidth profiler" o arquivo tem um tamanho, que é tem também as informações que voce anexou � library quando criou o símbolo de fonte.

Agora vamos ao nosso documento com gráficos.

Crie um novo documento flash e salve como fonte_link.fla.

Abra o painel Library. Agora no menu File selecione a opção Import>>Open External Library e selecione o documento "biblioteca.fla", voce verá que vai aparecer o painel Library do documento que voce selecionoue lá estará o símbolo de fonte que nós criamos, arraste o símbolo "rolagem_1" da Library biblioteca.fla para a library fonte_link.fla. Feche a library biblioteca.fla. Agora vamos ao library font_link.fla e marcar algumas opções. Clique como botão doreito do mouse no símbolo "rolagem_1" e selecione a opção "properties", certifique-se de que as opções estão iguais �s do símbolo que voce criou no documento "biblioteca.fla". O nome deve ser "rolagem_1" a fonte deve ser a mesma e as opções de estilo também, por padrão deve estar tudo igualzinho, se não estiver marque ou digite e de ok.

Segundo passo, clicando novamente no símbolo com o botão direito do mouse selecione a opção "linkage" deverá aparecer o mesmo "identifier" mas note que nas opções abaixo o que aparece selecionado é "import for runtime sharing" e o URL já é o nome do arquivo biblioteca.swf.

Quase tudo está pronto, agora vamos criar nosso bloco de texto dinâmico e aplicar este símbolo de fonte nele. Crie um bloco de texto dinâmico e dê a ele o nome de instância de "bloco_txt".

Agora quando voce for selecionar a fonte para ele, repare que no painel properties, onde voce escolhe a fonte aparecerá o nome de fonte "rolagem_1*" (por isso não escolhemos o nome da fonte como identifier do símbolo quando o criamos no arquivo biblioteca) selecione esta opção e marque a opção "alias text" (é o botãozinho em forma de A dividido), lembre-se de que marcamos a opção Alias nas propriedades do símbolo.

Vamos ainda importar um txt externo e exibir nesta caixa de texto fazendo um scroll.

Abra o bloco de notas e na primeira linha digite:



texto=



depois deste sinal de atribuição digite ou cole o seu texto e salve como "texto_externo.txt" escolhendo a codificação utf-8 nas opções de codificação na hora de salvar.



Voltando ao flash e ao documento font_link.fla, crie dois botões e instancie de "sobe_texto" e "desce_texto" e coloque no stage junto da caixa de texto que voce instanciou de bloco, eles serão os comandos de scroll.

No primeiro frame da timeline principal cole este Action:



lv = new LoadVars();/*cria um objeto LoadVars*/



lv.onLoad = function(carregando) {

if (carregando) {

bloco_txt.text = lv.texto;

} else {

bloco_txt.text = "Falha ao carregar texto externo";

}

};/*cria uma função de carregamento do texto externo e define que o TextField "bloco_txt" vai exibir a variável "texto" criada no txt externo*/



lv.load("texto_externo.txt");/*carrega o txt exteno*/



sobe_texto.onRollOver = function() {

onEnterFrame = function () {

bloco_txt.scroll++;

};

};

sobe_texto.onRollOut = function() {

onEnterFrame = null;

};

desce_texto.onRollOver = function() {

onEnterFrame = function () {

bloco_txt.scroll--;

};

};

desce_texto.onRollOut = function() {

onEnterFrame = null;

};

/*ações para os botões com eventos EnterFrame para fazer o scroll no bloco de texto*/



Se voce quiser pode criar uma máscara para limitar a área do campo de texto que vai aparecer, para quem já passou por isso, um bloco de texto dinâmico, só podia ser mascarado quando as fontes estavam embutidas e consequentemente com a leitura meio complicada devido ao "embaçamento" que embutir as fontes causa.

Espero que tenham gostado.

Um comentário:

philgonzo76922678 disse...

i thought your blog was cool and i think you may like this cool Website. now just Click Here