Manual de Flash

[helldanger1]

Como se vê no final do bloco de código executamos o método alinhar() do clip. Esta função será definida de um modo parecido com outro protótipo. Com alinhar() o que fazemos é ajustar cada clip dependendo dos ajustes que tivermos passado com setAjuste():

MovieClip.prototype.alinhar = function() {
// se passamos o parâmetro ajuste_width na função
// setAjuste, significa que devo ajustar a largura do clip
// quando escalo novamente a tela
if (this.ajuste_width) {
if (this.ajuste_width.indexOf("%") != -1) {
// se o valor de this.ajuste_width é uma porcentagem
this._width = (_root.largura*parseInt(this.ajuste_width))/100;
} else {
// se o valor de this.ajuste_width for um número de pixels
this._width = this.ajuste_width;
}
}
// o mesmo com o ajuste da altura do clip
if (this.ajuste_height) {
if (this.ajuste_height.indexOf("%") != -1) {
this._height = (_root.altura*parseInt(this.ajuste_height))/100;
} else {
this._height = this.ajuste_height;
}
}
// ajustes de posição dos clips
if (this.ajuste_x == "esquerda") {
this._x = this.x0;
}
if (this.ajuste_x == "direita") {
this._x = Math.round(this.x0+(_root.largura-_root.largura_minima));
}
if (this.ajuste_x == "centralizar") {
this._x = Math.round((_root.largura-this._width)*0.5);
}
if (this.ajuste_y == "acima") {
this._y = this.y0;
}
if (this.ajuste_y == "abaixo") {
this._y = Math.round(this.y0+(_root.altura-_root.altura_minima));
}
if (this.ajuste_y == "centralizar") {
this._y = Math.round((_root.altura-this._height)*0.5);
}
// se o clip tiver um ajuste especial executo sua função ajustar
// que definimos no onClipEvent(load) do clip
if (this.ajustePersonalizado) {
this.ajustar();
}
};

Como se pode ver no final do código, se comprova o valor da propriedade ajustePersonalizado, esta propriedade terá um valor igual a true no caso em que quisermos ajustar o clip de um modo personalizado. Ou seja, se observarem no método setAjuste as opções que temos para ajustar um clip são ajustar à esquerda, à direita ou ao centro no plano horizontal, ajustar acima, abaixo ou ao centro no plano vertical, e definir largura e altura dando um número de pixels ou dando uma porcentagem do Stage. Estas opções são básicas, por isso é muito provável que queiramos ajustar determinados clips de outra forma. Para isso, no onClipEvent(load) ao invés de executar o método setAjuste, o que vamos fazer é atribuir um valor true a sua propriedade ajustePersonalizado, incluir dentro do array clips_ajustaveis e definir sua função ajustar() que é a que lhe ajustará de maneira personalizada. Se aplicar sua imaginação e um pouco de tempo na construção das funções ajustar() poderá ampliar este tutorial e desenvolver sites onde tudo se ajustará ao tamanho da tela de um modo impecável. O código de clip de ajuste personalizado do exemplo é:

onClipEvent (load) {
this.rodapePagina_txt.autosize = "left";
this.x0 = this._x;
this.y0 = this._y;
// como quero ajustar o clip
// adiciono ao array de clips ajustaveis
_root.clips_ajustaveis.push(this);
// este clip vai ter um ajuste personalizado,
// vai estender a largura da caixa de texto
// que tem dentro. Para isso definimos seu
// ajuste dentro da função ajustar
ajustePersonalizado = true;
function ajustar() {
this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this.rodapePagina_txt._width = _root.tira2_mc._x-_root.tira1_mc._x-26;
this._y = _root.altura-this._height-5;
}
}

Em compensação, em um clip que se ajusta segundo os critérios padrão este código seria mais simples:

onClipEvent (load) {
this.setAjuste("direita", "acima", false, false);
}

 

[helldanger1]

Cabeçalho Flash em Wordpress



No seguinte tutorial, veremos como mudar a imagem de cabeçalho de um wordpress por um arquivo .swf de Flash.

Por Aurelio Franco Fernández




Os passos a seguir seriam os seguintes:
Definir o tamanho exato que queremos desenhar nosso .swf, logicamente deve de ser o que tenha a imagem do cabeçalho do WP (wordpress) com o objetivo de ocupar o mesmo espaço que ele e não deixar espaços vazios. Para isto, temos que buscar o arquivo que se chama head.jpg, normalmente o teremos nas pasta wp-content/themes(se usarmos algum)/nomedetheme/images/nomevariante(alguns themes têm distintas formas de poder se visualizar e podem vir diferenciadas por pastas), e assim poderemos ver as dimensões que tem.
Uma vez feito o anterior, temos que incrustar o arquivo .swf no lugar onde está tal imagem, e para isso, temos que editar o arquivo header.php, normalmente localizado em wp-content/themes/nomedelthemequeuses. O que temos que fazer é eliminar todo o conteúdo que encontramos entre a etiqueta div id="headerimg" e sua etiqueta de fechamento e substituí-lo pelo código que se vê na imagem, tal código pode ser encontrado em um arquivo de texto para baixar no final do tutorial. Com isso já teríamos o swf no cabeçalho.
Há que ter em conta um pequeno detalhe, que pelo menos para mim foi um contratempo. Se observarem o código da imagem, a referência ao arquivo .swf é relativa, ou seja, não é do tipo http://…. dando a url exata de onde está localizado no servidor, e sim que só põe o nome do arquivo .swf, que deveremos alojar na pasta principal de nosso wordpress. Isto tem uma explicação e há que ter em conta especialmente se usamos botões em swf, como é o caso deste blog para se dirigir às seções principais do mesmo. O caso é que se usarmos a url no lugar da rota relativa, no IE funciona perfeitamente, mas no Firefox, se visualiza corretamente o .swf, porém os botões não funcionam.
Acho que não esqueci de nada, caso não funcione algo, entrem em contato comigo que eu ajudarei no que for possível. Deixo a seguir o link onde se pode baixar o código que se põe no header.php para incrustar o swf.

código para incrustar flash em header.php

Por último comentar que bom, se usarmos animações em tal cabeçalho, me refiro animações de entrada, temos que ter em conta que cada vez que mudarmos a seção, se recarregará esse arquivo, portanto ou as fazemos curtas ou não as fazemos porque pode chegar a ser inclusive incômodo, no meu caso, me limitei a animar só os botões.

 

[helldanger1]

Como ler os arquivos do servidor com ASP e passá-lo a Flash




Neste tutorial vamos explicar como obter o nome e o tamanho em KBytes dos arquivos alojados em determinado diretório do servidor web. Logo, passaremos esta informação a Flash em formato XML.

Por Tutoriales-flash





Esta técnica tem múltiplas aplicações, como por exemplo:
Carregar uma galera de imagens que previamente tenhamos depositado via FTP no servidor.
Mostrar os links de download de um conjunto de arquivos em uma pasta. (NOSSO CASO)
Explorar o conteúdo do disco rígido do servidor web.
Como Flash não pode realizar esta função, necessitamos alguma tecnologia de servidor como PHP, ASP, ColdFusion..., neste tutorial vamos empregar ASP.

COMO FAZÊ-LO.
Primeiro criamos o arquivo explorar.asp que é o que se vai encarregar de mostrar em formato XML a informação dos arquivos, neste exemplo se trata da pasta files situada na raiz de nosso domínio. Nesta pasta estão os arquivos de download que acompanham nossos tutoriais.

Conteúdo de explorar.asp

<%
' tentamos evitar o cache do navegador --------------
Response.Expires=0
Response.CacheControl="private"
' ----------------------------------------------------------------
Response.ContentType="text/XML"
'Criamos o objeto FileSystemObject
Set fso = Server.CreateObject("Scripting.FileSystemObject")
' escolhemos a pasta files atraves da raiz do servidor web
' substituir "/files/" pela que lhes interesse
Set folder = fso.GetFolder(Server.MapPath(("/files/")))
Set files = folder.Files '
' construimos o XML ----------------------------------------
Response.Write("<?xml versao='1.0' ?><exploracao pasta='"+folder.Name+"'>")
For Each file in files
fil=file.Name
Response.write("<arquivo nome='")
Response.write(file.Name)
Response.write("' size='")
Response.write(file.size\1024)
Response.Write("' />")
Next
Response.Write("</exploracao>")
' ----------------------------------------------------------------
Set files = nothing
Set folder = nothing
Set fso = nothing
%>

 

[helldanger1]

Neste código só têm que modificar a linha

Set folder = fso.GetFolder(Server.MapPath(("/files/")))

Onde colocarem a pasta a explorar. Pode-se ver o resultado do documento aqui.

Logo, em nosso filme incluímos este código no primeiro fotograma:

XML.prototype.ignoreWhite = true;
meuXML = new XML();
meuXML.onLoad = verArquivos;
function verArquivos(ok) {
pastaEscolhida = this.firstChild.attributes.pasta;
if (ok) {
var files = this.firstChild.childNodes;
for (var k = 0; files[k]; k++) {
arquivos.addItem(files[k].attributes.nome+" - "+files[k].attributes.size+" KBytes", files[k].attributes.nome);
}
} else {
//falha no carregamento /> }
}
function clicLista(component) {
getURL("/files/"+component.getSelectedItem().data, "_self");
}

Na primeira linha,
XML.prototype.ignoreWhite = true;
Dizemos a Flash, que ignore os espaços em branco e as tabulações no momento de analisar qualquer XML que carreguemos.

Depois, definimos o objeto XML que vai receber os dados do arquivo ASP e a função verArquivos. Esta função vai percorrer o XML e vai adicionar um elemento ao listBox por cada arquivo que houver na pasta a explorar.

A função clicLista é a que se executa quando selecionamos um elemento do listBox, em nosso caso, lança o download do arquivo selecionado.

Por último falta o código do botão, que é o que carrega os dados XML, o código é:

on (release) {
//evitamos carregar o XML mais de uma vez
if (!meuXML.loaded) {
meuXML.load("/asp/explorar.asp");
}
}

 

[helldanger1]

Carregamento de clips externos em Flash.




A classe MovieClipLoader
A classe MovieClipLoader nos permite gerenciar de um modo excelente o carregamento de filme.

Por Tutoriales-flash





Até o aparecimento desta classe (em Flash MX 2004), o carregamento de arquivos externos (swf ou jpeg) era um processo muito limitado e com escassas possibilidades de controle.

Antes a única opção era executar a sentença loadMovie ou loadMovieNum e havia que recorrer a chatos loops para comprovar o carregamento completo do arquivo externo.

Agora com o uso da classe MovieClipLoader, Flash se encarregará de comprovar o carregamento e executará as ações que lhe indicarmos quando o clip estiver disponível. Ademais, poderemos executar código em distintos momentos do processo. Ou seja, quando se iniciar o carregamento podemos executar ações, durante o progresso do carregamento, também, e como comentamos, quando finalizar a transferência também! Passamos a ter tudo sob controle!

.

 

[helldanger1]

Distorcer clips com ActionScript



Em Flash as transformações básicas que podemos aplicar a um clip são mudar a posição, a rotação e a escala.

Por Tutoriales-flash





Entretanto, se queremos distorcer um clip de filme veremos que com as ferramentas que nos proporciona Flash não poderemos fazê-lo diretamente.

Neste documento iremos facilitar uma maneira de distorcer um clip de filme em tempo de execução com ActionScript. Na verdade o clip original permanecerá inalterável, o que faremos será criar outro clip com a distorção aplicada e ocultar o primeiro. O processo se baseará na classe bitmapData de ActionScript. A classe bitmapData nos permite armazenar e manipular os pixels que compõe um clip.

COMO FAZÊ-LO.

A distorção se fará segundo este esquema onde cada bloco representa uma coluna de pixels:

Decomporemos a representação gráfica do clip original em filas ou colunas segundo seja a distorção horizontal ou vertical. Depois modificaremos as dimensões destes segmentos e se gerará a aparência de distorção. Vamos explicar só a distorção vertical, já que a distorção horizontal é praticamente igual e as diferenças no código são mínimas como se poderá comprovar mais adiante.

O primeiro passo consiste em armazenar em um objeto bitmapData os pixels do clip a distorcer. Chamaremos de bitmap_1. Depois vamos criar um clip vazio que conterá o clip com a distorção aplicada. Seu identificador será conteiner. Para criar a distorção vamos descompor a rede de pixels do objeto bitmap_1 em suas colunas, de modo que ficará dentro do clip contêiner uma série clips de um pixel de largura e a mesma altura que o original. Para copiar estes pixels, nos apoiamos em outros objetos bitmapData, que se correspondem com o identificador bitmap_temp que há dentro do loop no código.

// importamos as classes necessárias
import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
MovieClip.prototype.distorcerV = function(distorcao:Number) {
var largura:Number = Math.round(this._width);
var altura:Number = Math.round(this._height);
var transparent:Boolean = true;
var fillColor:Number = 0x00000000;
// objeto bitmapData onde armazenamos a info do clip a distorcer
var bitmap_1:BitmapData = new BitmapData(largura, altura, transparent, fillColor);
bitmap_1.draw(this);
this._visible = false;
distorcido_mc.removeMovieClip();
// clip onde criaremos a distorção
var conteiner:MovieClip = this._parent.createEmptyMovieClip("distorcido_mc", this._parent.getNextHighestDepth(), {_x:this._x, _y:this._y});
conteiner._x = this._x;
conteiner._y = this._y;
for (var k:Number = 1; k<largura; k++) {
var clip_temp:MovieClip = conteiner.createEmptyMovieClip("clip"+k, conteiner.getNextHighestDepth(), {_x:k, _y:0});
clip_temp._x = k;
var bitmap_temp:BitmapData = new BitmapData(1, altura);
bitmap_temp.copyPixels(bitmap_1,new Rectangle(k, 0, k, alto),new Point(0, 0));
clip_temp.attachBitmap(bitmap_temp,clip_temp.getNextHighestDepth(),"auto",true);
clip_temp._yscale = ((k/(alto-1))*(100-distorcao))+distorcao;
clip_temp._y = (altura-clip_temp._height)*0.5;
}

// liberamos memória
bitmap_1.dispose();
};

Para distorcer um clip simplesmente há que chamar ao seu método distorcerV(distorcao). O valor do parâmetro distorção deve estar entre 0 e 100 senão os resultados são imprevisíveis (pode-se provar de todos modos). Um exemplo seria:

meuClip.distorcerV(70);

Facilitamos o código em uns arquivos .as de modo que para empregá-los você terá duas opções:
Copiar o código do .as dentro de nosso filme.
Usar um #include para dispor de suas funções.
Com esta base o interessante é provar novas formas de distorção ou inclusive combinar várias distorções.
Nesta imagem se aplicou uma distorção horizontal e logo outra vertical para conseguir um efeito de perspectiva.

Download dos arquivos .as: distorsion.zip

 

[helldanger1]

Tutorial para fazer um livro de visitas com Flash e ASP
Neste tutorial iremos ensinar a fazer um livro de visitas simples com ASP, Flash e sem necessidade de banco de dados.

Por Tutoriales-flash


Para evitar o uso do banco de dados vamos armazenar os comentários dos visitantes em um arquivo de texto plano em formato XML.

O mecanismo do livro é muito simples, adicionamos os comentários sequencialmente em um arquivo de texto existente em nosso servidor. Para mostrar todos os comentários, se lê o arquivo e se carregam os dados no filme swf.

COMO FAZÊ-LO.

O arquivo que armazena os comentários, que em nosso caso se chama livro.txt, terá este formato:

<visita data='27/12/2006 12:31:11'>
<autor>Usuario%201</autor>
<comentario>Este%20es%20un%20comentario%20de%20prueba%2E%20%BFse%20ve%20bien%3F</comentario>
</visita>
<visita data='27/12/2006 12:31:37'>
<autor>Usuario%202</autor>
<comentario>Este%20es%20otro%20comentario%20de%20prova%2E%20Pois%20s%ED%2C%20se%20ve%20bem%2E</comentario>
</visita>

Como se pode ver, se parece a um documento XML, porém lhe faltam dois elementos imprescindíveis em todo XML: A declaração do tipo de documento e o nó principal que contém ao resto de nós. Mais adiante veremos o porquê deste formato incompleto.

Para editar este arquivo livro.txt cada vez que se inclui um comentário novo, usamos o objeto FileSystemObject de ASP já que Flash por si só não pode fazê-lo. Ademais terá que estar habilitada a permissão de escritura no diretório que o contenha. Com este arquivo add_comentarios.asp realizamos a operação.

<%
On Error Resume Next
' Criamos o objeto FileSystemObject chamado fs
Set fs=Server.CreateObject("Scripting.FileSystemObject")
' Abrimos o arquivo para modificá-lo e nos posicionamos ao final
' do arquivo, por isso o 2o argumento é 8, se fosse 1 se abriria
' em modo só leitura
Set f=fs.OpenTextFile(Server.MapPath("/livro_visitas/livro.txt"), 8)
' Inserimos os dados enviados desde Flash
f.WriteLine("<visita data='"& Now &"'>")
f.Write("<autor>")
f.Write(Trim(Request("autor")))
f.WriteLine("</autor>")
f.Write("<comentario>")
f.Write(Trim(Request("comentario")))
f.WriteLine("</comentario>")
f.WriteLine("</visita>")
' Fechamos e eliminamos os objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
' se Err=0 tudo foi bem, este valor é devolvido
' a flash para confirmar a operação
Response.write("error="&Err)
%>

Se observarem, se adiciona a data do servidor no momento do comentário, o autor e o comentário em si.

 

[helldanger1]

Para ler o arquivo com os comentários usamos o arquivo comentarios.asp.

<%
Response.ContentType="text/xml"
' Abro o arquivo para lê-lo
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("/livro_visitas/livro.txt"), 1)
' Adiciono a declaração de documento e abro o nó principal
Response.write("<?xml version='1.0' encoding='ISO-8859-1' ?><visitas>")
Response.Write(f.ReadAll)
' fecho o nó principal, com o que já tenho
' um XML bem formado
Response.write("</visitas>")
' Fechamos e eliminamos os objetos usados
f.Close
Set f=Nothing
Set fs=Nothing
%>

A resposta deste arquivo é um XML bem construído que se pode ver aqui. A razão de salvar o arquivo livro.txt em formato incompleto é que se facilita sua atualização de novos comentários. Com cada comentário novo simplesmente temos que adicionar ao final os novos dados e esquecermos.

Neste ponto, vamos a Flash para ver o código ActionScript necessário que vai no primeiro fotograma:

// ajustes iniciais -----------------------------------
System.useCodepage = true;
// evitamos problemas com os nós em branco
XML.prototype.ignoreWhite = true;
_global.style.setStyle("fontSize", 10);
visitas_txt.htmlText = true;
// impedimos o uso dos caracteres < e >
// que podem dar problemas
autor_txt.restrict = "^<>";
comentario_txt.restrict = "^<>";
// fim ajustes iniciais -------------------------------
// estilos CSS para os comentários
var my_styles:TextField.StyleSheet = new TextField.StyleSheet();
my_styles.setStyle("autor", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"11px", color:"#99CC00"});
my_styles.setStyle("data", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#006699"});
my_styles.setStyle("comentario", {fontFamily:"Tahoma, Arial,Helvetica,sans-serif", fontSize:"10px", color:"#666666"});
visitas_txt.styleSheet = my_styles;
// objeto LoadVars para enviar comentarios
// e comprovar a operação
var visitas_lv:LoadVars = new LoadVars();
visitas_lv.onLoad = function() {
if (this.error == 0) {
comentarios_xml.load("/asp/comentarios.asp");
} else {
visitas_txt.text = "Erro escrevendo comentário.";
}
};
// objeto XML que carrega os comentários
var comentarios_xml:XML = new XML();
comentarios_xml.onLoad = carregarComentarios;
function carregarComentarios() {
visitas_txt.text = "";
var array_temp:Array = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de comentarios
titulo_lb.text = array_temp.length+" comentarios";
// preencho o textArea com os comentarios
array_temp.reverse();
for (var k:Number = 0; array_temp[k]; k++) {
var autor:String = unescape(array_temp[k].firstChild.firstChild.toString());
var comentario:String = unescape(array_temp[k].lastChild.firstChild.toString());
visitas_txt.text += "<p><autor>Autor: <b>"+autor+"</b></autor></p>";
visitas_txt.text += "<p><fecha>"+array_temp[k].attributes.data+"</data></p>";
visitas_txt.text += "<p><comentario>"+comentario+"</comentario></p>";
visitas_txt.text += "<p></p>";
}
}
}
// função para mandar um comentário, comprovo que o autor
// tenha pelo menos 3 caracteres e o comentário 1
function enviarComentario() {
if (autor_txt.text.length>=3 && comentario_txt.text.length>=1) {
visitas_lv.autor = escape(autor_txt.text);
visitas_lv.comentario = escape(comentario_txt.text);
visitas_lv.sendAndLoad("/asp/add_comentario.asp", visitas_lv, "POST");
}
}
// defino a função que se executará o clicar no botão
botao_enviar.addEventListener("click", enviarComentario);
// carrego os comentários sem intervenção do usuário
// ao entrar na página
comentarios_xml.load("/asp/comentarios.asp");

Empregamos escape() e unescape() para assegurarmos que não haja problemas com os caracteres empregados no nome de autor e os comentários.

Vocês podem baixar este mesmo exemplo e ver como funciona: livro.zip

 

[helldanger1]

Open Flash Chart



Uma ferramenta gratuita para fazer gráficos em Flash. Permite gráficos diversos, como gráficos de barras, de linhas, de pizza, etc.

Por Miguel Angel Alvarez - Tradução de JML






Vamos falar de um componente Flash muito interessante para a criação de gráficos de representação de dados. Trata-se de Open Flash Chart, uma ferramenta de código livre, gratuita e livre de uso.

Com Open Flash Chart você poderá criar gráficos em sua página web com facilidade e sem necessidade de ter Flash instalado em seu computador. Nos gráficos poderá carregar os dados que desejar e escolher entre vários tipos de gráficos, as cores, etc. Uma vez publicados os gráficos em seu website, todos os visitantes que tiverem instalado o plugin de Flash poderão vê-los, o que é quase a totalidade do tráfego que poderá receber em sua página.

É um projeto muito completo, que não só permite criar variados modelos de gráficos, como ademais tem diversos tipos de usos e tem bibliotecas para utilizar e integrar o sistema de gráficos Flash com o carregamento de dados em diversos linguagens de programação web como PHP, .NET, Perl, Java, Python, Rubi e Google WebToolkit.

Podemos encontrar Open Flash Chart em Open Flash Chart - Home

No momento de escrever este artigo está em fase de desenvolvimento a nova versão do produto, Open Flash Chart 2, que tem diversas melhoras, porém principalmente se trata de uma mudança no esquema de desenvolvimento, que segundo o autor, é muito mais robusto e permite uma melhor organização do código e o crescimento do projeto. Podemos encontrar a nova versão em: Open Flash Chart - Home

O mais destacável para os desenvolvedores que pretendam utilizar a segunda versão de Open Flash Chart é que o carregamento de dados se realiza por JSON, uma notação especial de Javascript para a definição de objetos.

Para fazer umas provas do sistema, embora a segunda versão do projeto esteja em fase Beta, em CriarWeb.com achamos que seria melhor ver a segunda versão. Segundo dia o autor ademais, a versão 1 já não seguirá sendo atualizada.

 

[helldanger1]

Utilizar Open Flash Chart

A criação de gráficos em Flash pode ser feito de uma maneira bastante rápida, ao menos os primeiros exemplos que oferecem. Para isso, será necessário que baixemos o sistema através da zona de Download da página de Open Flash Chart. Com isso, obteremos um arquivo zip que temos que descomprimir em nosso disco rígido.

Dentro veremos uma estrutura de diretórios que tem muitos códigos e componentes, embora não caiba se assustar, porque para os exemplos mais simples não faz falta utilizar mais que um arquivo, que é a o filme Flash (arquivo open-flash-chart.swf) que há na raiz do pacote comprimido. Esse filme ou animação Flash é o que tem o código para gerar por Flash o gráfico. Logo, teremos que configurá-lo com um arquivo JSON para lhe indicar os dados que se desejam mostrar.

Para incluir em uma página web o filme Flash temos que utilizar um código como este:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="600"
height="300" id="graph-2" align="middle">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="open-flash-chart.swf" />
<param name="quality" value="high" />
<embed
src="open-flash-chart.swf"
quality="high"
bgcolor="#FFFFFF"
width="600"
height="300"
name="open-flash-chart"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

Este código foi extraído do tutorial 1 da criação de gráficos Flash que têm na própria página do projeto. É um código normal para incluir um filme Flash em uma página web.

Pois bem, para que isto funcione você tem que ter em conta uma série de coisas que veremos a seguir.

1) Tem que ter a animação Flash (arquivo open-flash-chart.swf) no mesmo diretório onde está o arquivo com o código HTML anterior. Poderia mudar o arquivo swf ao lugar que desejar, porém então terá que atualizar a rota a este arquivo no código HTML anterior. Observe que a rota ao arquivo está em dois lugares do código anterior, em uma etiqueta PARAM e em um atributo da etiqueta embed src="open-flash-chart.swf".

2) Tem que criar o código JSON para o carregamento de dados do gráfico e colocá-lo no lugar correto, com o nome de arquivo "data.json". Segundo a documentação de Open Flash Chart parece que se busca este arquivo de dados em vários lugares esse arquivo json, por exemplo, na raiz do domínio, porém, segundo as provas que fiz em criarweb .com, não me funcionou assim. Logo, veremos um exemplo deste código e uma maneira de localizá-lo para que funcione o exemplo, se é que não queremos colocá-lo na raiz do domínio.

3) Importante: o exemplo tampouco se visualizará corretamente se não colocar os arquivos em um servidor web. Ou seja, tem que publicá-los em seu espaço de hospedagem que tiver em Internet e não em seu computador local. Ou se tiver um servidor web configurado em seu computador, deve colocá-lo em algum diretório de publicação e acessar ao exemplo passando ao servidor web. Isto é porque o Flash adquire por http o arquivo JSON, por meio de Ajax, o que só funciona se estiver em um servidor web e acessar à página através de http.

 

[helldanger1]

Arquivo JSON de carregamento de dados do gráfico Flash

O arquivo JSON deve ser criado para indicar ao filme Flash quais são os dados que se tem que mostrar. Este arquivo se escreve com uma sintaxe especial, na linguagem Javascript. Não se assuste porque a sintaxe é simples de ler, entender, editar segundo suas necessidades, já que JSON é uma notação entendível pelas pessoas.

De qualquer forma, o próprio Open Flash Chart tem uma série de bibliotecas em diferentes linguagens, como comentei antes neste artigo de CriarWeb.com, para gerar jogos de dados em sintaxe JSON, por isso você não teria porque conhecer nada sobre JSON para utilizar este componente.

Um arquivo JSON que podemos utilizar de exemplo tem esta forma:

{
"title":{
"text": "Gráfica de prueba - DesarrolloWeb.com",
"style": "{font-size: 20px; color:#999900; text-align: center;}"
},

"y_legend":{
"text": "Gráfica creada con Open Flash Chart",
"style": "{color: #99cc33; font-size: 12px;}"
},

"elements":[
{
"type": "line",
"alpha": 0.5,
"colour": "#0000cc",
"text": "Páginas vistas",
"values" : [14,12,14,9,10,12,15,12,13]
},
{
"type": "line",
"alpha": 0.5,
"colour": "#660033",
"text": "Paginas vistas 2",
"values" : [9,7,8,10,12,14,13,10,11]
}
],

"x_axis":{
"stroke":2,
"colour":"#d000d0",
"grid_colour":"#00ff00"
},

"y_axis":{
"stroke": 4,
"tick_length": 3,
"colour": "#9933ff",
"grid_colour": "#0000ff",
"offset": 0,
"max": 20
}
} Tirei isso do tutorial que oferecem na página do produto e só adaptei umas poucas coisas para personalizá-lo e de passo conhecer algumas das funcionalidades deste módulo.

Agora só teríamos que indicar o lugar onde está o arquivo com os dados. Para isso, a forma mais simples é através da URL.

Coloque simplesmente o arquivo JSON no mesmo diretório que colocou tanto a página web com o código HTML para invocar ao Flash, como o próprio filme, com nome "data.json". Sendo assim, pois terá nesse diretório 3 arquivos.
O arquivo HTML com o código para incluir o filme Flash
O arquivo da animação Flash: open-flash-chart.swf
O arquivo com os dados JSON: data.json
Agora acesse a essa página indicando na URL o nome do arquivo JSON:

http://www.seudominio.com/rota_de_seu_arquivo_html.html?ofc=data.json

 

[helldanger1]

Vestir a uma boneca em Flash




Pequena aplicação concreta em flash para realizar uma boneca de recortes.

Por Susana Ríos Suanes





A idéia e as imagens foram tiradas daqui:

Un sitio para el recuerdo

E foi usada na seguinte mostra que quero que vejam para que tenham uma idéia clara do que pretendemos fazer.

Uma lojinha que se chama "Sol"

Nesta loja há em FLASH um provador de roupa que é que faremos aqui.

O resto é PHP e um banco de dados MySql.

Comecemos em forma ordenada:

1) Ter uma idéia clara do que queremos fazer. Neste caso o melhor é entrar à lojinha "Sol" e brincar um pouco em vestir e trocar as distintas roupas e botas à boneca. Verão que a ação sempre está nos botões que são as roupinhas da vitrine. Na vitrine, clique sobre a roupinha para vestir e o mesmo clique para tirar. Resumindo o funcionamento da aplicação, com exemplos:

Ao abrir, a boneca só em malha e as roupinhas (botões) na vitrine.
Clique no botão (conjunto amarelo), e vestimos com o conjunto amarelo.
Clique no botão (agasalho), e agregamos agasalho à boneca.
Clique no botão (conjunto amarelo), a boneca fica só com o agasalho.

2) Criar em nosso computador uma nova pasta que podemos chamar provador.

3) Conseguir as imagens necessárias. Como nosso propósito é Flash e não o domínio do tratamento de imagens, elas já estão prontas. Porém, qualquer coisa que quiserem perguntar a este respeito, responderei por e-mail com muito prazer. Na página http://www.delphi.todouy.com/flash/probador/imagenes.html encontrarão todas as que necessitam.

 

[helldanger1]

Com o botão direito do mouse, clique sobre cada imagem e "Salvar imagem como.."

Salve na Pasta que criou o fundo .png e os nove futuros botõezinhos b1.png, b2.png,...b9.png...

E os nove futuros clips c1.png, c2.png,.... c3.png . Se alterar a extensão .png por .bmp ou .jpg as imagens sairão com o fundo celeste e não transparente como necessitamos.

4) Abrimos o Flash e criamos a aplicação: Arquivo->, Novo->, Documento de Flash.

Nossa aplicação terá um só frame(fotograma) e duas camadas na linha do tempo.

Até agora, temos somente uma camada que nomearemos fundo.

Importamos a imagem do fundo desde a mesma Pasta.

Arquivo-> Importar-> Importar a biblioteca. E já teremos a imagem na biblioteca.

Se a biblioteca estiver fechada, a abrimos com Control L e trazemos o fundo.png à cena.

Em propriedades vemos que as dimensões dessa imagem são 402 x 500. Se a imagem for fazer parte de outra página como no caso da "lojinha Sol" o cenário deve ser dimensionado 402 x 500 tal como o fundo.

E ajustadas as posições do fundo.png no painel Propriedades à zero tanto "x" como "y".

Salvamos o fla que também podemos chamar provador.fla e se pode provar com Control Enter .

5) Colocamos o cadeado na primeira camada e criamos a segunda onde vai tudo que falta.

6) Importar à biblioteca o resto das imagens (todos os botõezinhos e clips), que por enquanto ainda nem são botões, nem clips, e sim imagens "mapa de bits".

7) Primeiro, vamos provar com b1 e c1. Arrastamos a b1 desde a biblioteca ao cenário e o transformamos em botão com o nome botao1. E trazemos a c1 e o transformamos em clip de filme com o nome clip1. Localizamos a botao1 na vitrine e a clip1 no lugar exato para que fique bem à bonequinha.

Importante: Em um papel, deve ir anotando a localização exata de cada clip. No meu caso:
clip1, x 238, y 160

8) As ações correspondentes:

Clip1, vai estar aí, porém não queremos que se veja. Para isto escrevemos a ação no frame 1, (o único frame que teremos na linha do tempo).

setProperty("clip1", _visible, false);

No botao1 escrevemos a ação para vestir e tirar essa blusinha azul que é clip1.

on(press){
if(clip1._visible==false){
setProperty("clip1", _visible, true);
}else{
setProperty("clip1", _visible, false);
}
}

O frame nomeia a clip1, e botao1 nomeia a clip1, em suas ações, que não funcionarão se se esquecer de selecionar clip1, para no Panel de Propriedades escrever seu nome em Nome de Instância.

9) Agora salve e prove, e se tudo funcionou como esperamos, repita a ação para cada um dos artigos da vitrine. Levará pouco tempo usando Edit, Copiar e Colar, ajustando correções para cada caso. Claro que para saber o lugar exato aonde vai cada peça, terá que tirar a anterior. Afinal terá que colocá-las todas empilhadas e por isso dizia que se deve anotar as localizações de cada clip.

10) Para que não se esqueça de nada, comece com os botões. Transforme a b1.png no botao1, localize na vitrine e escreva a ação.

Agora há que transformar a b2.png no clip botao2 e localizá-los na vitrine. Copie a ação de botao1 e cole como ação de botao2. Depois corrija mudando no que colou, "clip1" por "clip2".
Fazendo assim até que tenha os nove botões, localizados na vitrine e com a ação referida ao clique com seu mesmo número.

 

[helldanger1]

11)Os botões estão prontos e na vitrine. Continue com os clips que vestirão a boneca.
De cada c1.png, c2.png, etc. crie um clip de filme com os nomes clip1, clip2, etc. e o localize vestindo a boneca para anotar a posição exata nas coordenadas x, y, que correspondem, e o exclua do cenário para que fique na biblioteca e a boneca fique somente com a roupinha de malha para provar o próximo clip e anotar suas coordenadas. Por enquanto isso é tudo!

12) Criar o botão dos clips, cada um segundo a anotação. E atenção: não se esqueça de colocar a cada um, seu nome no painel de propriedades.

Ficará assim:

13) Completar a ação do frame para que torne o botão inteiro invisível: