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.

terça-feira, julho 05, 2005

Flash — Objeto loadVars

Carregar textos ou informações externas é uma das grandes qualidades do flash, podemos ler txts externos ou mesmo fazer integração com bancos de dados através de linguagens como php, asp ou cfm.
O recurso disponível para isso no flash é um objeto chamado "loadVars". De utilização extremamente simples, pode receber, enviar ou receber e enviar dados externamente. Este tutorial irá apenas explicar o funcionamento básico do objeto, que seria receber dados de um arquivo txt externo. Imagine a atualização de informações podendo ser feita sem que você tenha que alterar o fla, apenas atualizando um arquivo de txt, muito prático não?
Deixemos para um outra ocasião algumas utilizações mais complexas como leitura e alimentação de bancos de dados integrando flash e php, por exemplo.
Então vamos às explicações.
O código que segue abaixo está comentado a cada ação, portanto num arquivo novo de flash cole estas ações no primeiro frame:

var lv:LoadVars = new LoadVars();
/*criado o objeto LoadVars*/
lv.onLoad = function(ok) {
/*uma função que é executada no evento "onLoad" para o carregamento dos dados externos*/
createTextField("msg_txt", getNextHighestDepth(), 10, 10, 100, 300);
/*Criamos um textField para exibir o conteúdo do arquivo externo*/
msg_txt.multiline = true;
msg_txt.wordWrap = true;
/*e determinamos para ele alguams propriedades*/
if (ok) {
/*Uma condicional para verificar se o arquivo foi carregado*/
msg_txt.text = lv.texto;
/*caso o arquivo tenha sido carregado o bloco de texto criado irá exibir o conteúdo
da variável que existe no arquivo externo, o objeto loadVars identifica variáveis através do caractere "&" seguido do
nome da variável e um sinal de "=" que é atribuição e não igualdade, ou seja no seu txt, php, asp ou cfm você deve declarar as
variáveis desta maneira, por exemplo, no nosso caso o txt externo fica assim:
&texto=Entre o sim e o não existe um vão &texto2=Ser ou não ser, eis a questão.
E aí note que voce determina que o bloco de texto vai exibir a variável dizendo:
msg_txt.text = lv.texto
A variável "texto" foi "incorporada" pelo objeto loadVars e você pode determinar que ela vá para onde quiser,
inclusive para blocos de texto que não estejam na mesma timeline, basta endereçar corretamente.
*/
msg_txt.text += newline+lv.texto2;
/*Podemos receber mais de uma variável pelo mesmo objeto, como vemos aqui
o mesmo bloco de texto também pode exibir mais de uma variável
*/
} else {
msg_txt.text = "Ocorreu uma falha ao carregar o arquivo.";
/*Caso o arquivo não tenha sido carregado o bloco
de texto exibe a informação de falha*/
}
};
lv.load("texto_externo.txt");
/*
Aqui dizemos ao objeto LoadVars o endereço do arquivo externo
*/


Um último detalhe, abra o bloco de notas e digite:

texto=Entre o sim e o não existe um vão.&texto2=Ser ou não ser, eis a questão.

Salve como "texto_externo.txt", sem as aspas, claro.

Como eu disse as variáveis são declaradas pelo "&" mais o nome da variável seguida do sinal de atribuição "=" e recomendo que salve o seu texto pelo bloco de notas, por exemplo, usando a codificação "utf-8" que você seleciona no momento de salvar o arquivo, isto evita problemas com acentuação no texto carregado em qualquer plataforma.

Espero que tenha ficado claro.

explore

Inicio este blog para postar por ele endereços e comentários sobre experiências com flash, minhas e outras que ue ache interessantes e mais exporadicamente publicar alguns artigos ou tutoriais. A primeira postagem é esta experiência com desenho dinâmico usando métodos attachMovie, basicamente. Veja e comente:
explore

P.S. O arquivo está disponível para download, aberto o link, clique com o botão direito do mouse e selecione a opção para baixar o arquivo.
Abraços,
Avanzi