• Olá Visitante, se gosta do forum e pretende contribuir com um donativo para auxiliar nos encargos financeiros inerentes ao alojamento desta plataforma, pode encontrar mais informações sobre os várias formas disponíveis para o fazer no seguinte tópico: leia mais... O seu contributo é importante! Obrigado.

Manual de Flash

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Inserir vídeo em Flash



Inserção e gestão de filmes nos projetos Flash.

Por Ivett Kelemen





Importar vídeo

Uma das novidades de Flash MX é a melhora na importação e gestão das seqüências de vídeos (video-clip). Flash é capaz de manejar os seguintes arquivos:

- .avi
- Quick Time
- .mpeg
- Digital video

É necessário que o computador tenha o Quick Time 4 ou o Director 7 (ou versões posteriores) instalados.

Vamos criar um símbolo, e dentro deste símbolo inserimos uma seqüência de vídeo.
Escolhemos o menu Insert / Create New Symbol (name=ruela, behavior=Movie Clip). Do menu; File escolhemos Import e escolhemos rua.avi. Flash apresenta uma nova janela de diálogo onde podemos ajustar a importação do vídeo.
Flash comprime as seqüências de vídeo com o codex 'Sorenson Spark' o que permite reduzir notavelmente o tamanho do arquivo. Os parâmetros Quality, Keyframe e Scale permitem ajustar este processo.

Deixamos 40 o valor de Quality, e 24 o de Keyframe. Este parâmetro indica a série de fotogramas chave que serão inseridos na seqüência. Colocamos Scale = 70% para reduzir o tamanho do vídeo. A importação pode demorar vários minutos - dependendo do tamanho do vídeo. Antes de inserir definitivamente a seqüência de vídeo, Flash nos informa que este necessita por sua reprodução total um número de fotogramas superior ao que temos atualmente. Portanto, é necessário aumentar o número de fotogramas (neste exemplo: 84).
O procedimento está completo.
Agora vamos ver como podemos aplicar as modificações de símbolos na seqüência de vídeo.
Regressamos ao palco. Inserimos um fotograma chave na posição 84.

Regressamos ao fotograma 1. Selecionamos o Movie Clip, e o movemos ao canto esquerdo, e com o Free Transform
BfreeTransf.jpg
o giramos um pouco. No Properties painel abrimos o menu desdobrável de Color e escolhemos cor = Alpha. Damos um valor de 0%.

Criamos uma interpolação (clicando em um fotograma intermediário), e no Properties painel, menu desdobrável "Tween", escolhemos a opção "Motion"). Clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions o F9), e escrevemos stop(). Dando um clique duplo no vídeo, e clicando no fotograma 84 abrimos o painel Actions (menu Window / Actions o F9), e escrevemos stop(). Assim, não se repete infinitamente o filme.

Provamos o filme (menu Control / Test Movie o Ctrl+Enter)
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Scroll de texto em Flash



Como criar um scroll de texto simples com Flash.

Por Carlos Carmona





Vamos criar um scroll de texto da forma mais simples que há. Já será com você torná-lo esteticamente mais chamativo ou complicá-lo mais.



Abrimos um novo filme de Flash e vamos usar uma única camada. Com a ferramenta de texto Criamos um campo de texto do tamanho que quisermos e lhe daremos as seguintes propriedades:


propiedades.gif


Estas propriedades são: Campo de texto tipo dinâmico, multi-linha para que o texto possa ocupar mais de uma linha, criamos a variável "MeuTexto" que é onde, usando ActionScript, meteremos o texto do scroll. Quanto ao tipo de fonte, tamanho e cor, coloquei uma letra Arial, a 14 px e de cor azul, você pode colocar o que quiser. E por último, temos estes três botões:
botones.gif
O primeiro quer dizer que o texto poderá ser selecionado pelo usuario, o segundo, que o texto lerá o formato HTML, ou seja, poderemos colocar etiquetas de HTML, e o terceiro é que o campo de texto terá uma moldura ao redor.

Agora vamos criar 2 botões, para mover o texto para cima e para baixo. Você pode criar os botões como quiser, para este exemplo, usamos uns dos que vêem na biblioteca de arquivos comuns de Flash MX (janela>biblioteca comuns>botoes>circle buttons>menu):

biblioteca-botones.gif


Como se pode ver, o botão de baixo, está invertido; para os que são muito novatos em flash, digo para que para dar a volta ao botão, embora haja várias maneiras, a mais simples seria selecionar o botão e modificar>transformar>virar verticalmente, e pronto.

Bem, a parte do desenho, (o mais simples possível), já está terminada, agora vamos ver o código que necessitamos. Comecemos pelo código dos botões; selecionamos o botão de cima, clicamos com o botão direito sobre ele e damos a "ações", então, se abrirá o quadro de código, e colocaremos o seguinte:

on (press) {
MeuTexto.scroll -= 1;
}

E no botão de baixo colocaremos:

on (press) {
MeuTexto.scroll += 1;
}

Estes códigos, o que dizem a flash é que quando se pressione o botão, a MeuTexto, que é a variável que criamos para o texto anteriormente, na propriedade scroll que já vem definida em ActionScript, lhe diminuímos (para subir), ou lhe somamos (para baixar), uma unidade ao que já tínhamos.

Por último, nos falta colocar o texto no scroll, selecionamos o primeiro e único fotograma que temos, clicamos com o botão direito sobre ele e vamos à 'ações', e colocamos:

texto-scroll.gif



stop();
MeuTexto = "O texto que quiser.";

O código é muito fácil, simplesmente, colocamos de entrada um stop, por uma razão, cada vez que se leia este fotograma, se executará este código, como só deve se executar uma vez, (do contrário o texto não pararia de se carregar no scroll), colocamos um stop e o filme se deterá. A seguir carregamos o texto colocando na variável MeuTexto que criamos ao criar o campo de texto dinâmico. Atenção com um erro muito bobo que pode dar alguma dor de cabeça para os mais novatos; para carregar o texto, a estrutura é a seguinte: variável = "texto"; como se pode ver, o texto vai entre aspas, de modo que o texto que colocarmos não poderá ter nada entre aspas, ou seja, isto: variavel = "aqui vai o "texto" que quero colocar"; nos daria erro. Neste caso, por ser um texto tão curto se vê fácil, porém o mais lógico é que copiássemos e colássemos o texto, tenha em conta que não pode ter aspas intercaladas. E outra coisa que não pode ter são quebras de linha. São as únicas coisas a ter em conta neste tipo de scroll.


 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Criar um reprodutor de MP3 em Flash




Como criar um reprodutor de mp3 em flash e asp.

Por Tutoriales-flash.com





Neste tutorial vamos aprender a realizar um reprodutor MP3 com Flash, com sua lista de reprodução. Como vamos empregar componentes, vocês verão o fácil que é a programação do exemplo.



COMO FAZÊ-LO.

Vamos depositar os arquivos MP3 em um diretório na raiz do servidor web chamado mp3. Se dispusermos da capacidade para executar alguma tecnologia de servidor como ASP ou PHP, criaremos dinamicamente um arquivo XML com os nomes dos arquivos MP3. Se não tivermos nenhuma destas tecnologias ao nosso alcance o melhor é criar o arquivo XML manualmente e depositá-lo no servidor. De qualquer forma, o XML que administra os dados deverá ter esta estrutura.

<?xml versao='1.0' ?>
<exploracao pasta='mp3'>
<arquivo nome='2_pi_r.mp3' />
<arquivo nome='Brain_Stew.mp3' />
<arquivo nome='Carrera_Rapida.mp3' />
<arquivo nome='Feel_The_Pain.mp3' />
<arquivo </exploracao>

Em nosso exemplo, empregamos ASP, para isso nos baseamos no tutorial Como ler os arquivos que há em uma pasta do servidor com ASP e passá-lo a Flash.

O arquivo que usamos gera esta saída.


inspector-componentes-flash.jpg


Já em Flash, arrastamos quatro componentes ao stage através do painel de componentes. Primeiro, arrastamos um componente MediaPlayback que vai se encarregar da reprodução dos arquivos MP3, lhe colocaremos como nome de instancia controlador. Com o componente selecionado, clicamos na aba parâmetros da barra de propriedades para abrir o Inspetor de componentes. Uma vez aberto, atribuímos os parâmetros como se mostra na figura.

Depois posicionamos no stage um componente do tipo lista e lhe colocamos como nome de instancia temas_list.

Este componente irá conter a lista de canções de nosso reprodutor MP3 e nos permitirá mudar de tema ao clicar sobre seus elementos.

Os outros dois componentes que nos restam são dois do tipo Label, que nos indicarão o título da canção que se está reproduzindo e o número de temas na lista. Seus respectivos nomes de instancia são titulo_lb e quantidade_lb.

A seguir apresentamos o código comentado que vai na linha de tempo principal, que ademais é o único de todo o filme, exceto umas pequenas linhas associadas ao componente lista.

// código em linha de tempo principal
// ajustes iniciais
System.useCodepage = true;
// evitamos problemas com os nodes em branco
XML.prototype.ignoreWhite = true;
// defino um estilo global para os componentes
_global.style.setStyle("fontSize", 10);
// neste array armazenarei as canções
var array_temp:Array = new Array();
// objeto XML que carrega a lista de arquivos
var lista_xml:XML = new XML();
lista_xml.onLoad = carregarLista;
// ponho o conteúdo do XML
// no componente lista
function carregarLista():Void {
array_temp = this.firstChild.childNodes;
if (!isNaN(array_temp.length)) {
// numero de temas
titulo_lb.text = array_temp.length+" temas";
// preencho a lista
for (var k:Number = 0; array_temp[k]; k++) {
temas_list.addItem(array_temp[k].attributes.nome);
}
// carrega a primeira canção
carregarMP3(0);
}
}
// com esta função carrego o mp3 dentro do
// componente mediaplayback
function carregarMP3(indice:Number):Void {
controlador.setMedia("/mp3/"+array_temp[indice].attributes.nome, "MP3");
controlador.play(0);
}
// rotinas para passar à seguinte canção
// quando termine a atual
var listenerObject:Object = new Object();
listenerObject.complete = function(eventObj:Object) {
_root.tema_actual++;
if (_root.tema_actual>=array_temp.length) {
_root.tema_actual = 0;
}
carregarMP3(_root.tema_actual);
};
controlador.addEventListener("complete", listenerObject);
// carrego a lista de reprodução
lista_xml.load("/asp/verLista.asp");
// esta linha seria do tipo
// lista_xml.load("minhaLista.xml");
// se emprego um arquivo de texto
// plano com formato XML


Agora só falta o código associado ao componente lista.

on (change) {
_root.carregarMP3(this.selectedIndex);
}

Pode-se baixar este mesmo exemplo e ver como funciona: mp3player.zip, contém todos os arquivos necessários para executá-lo em um servidor ASP exceto os próprios MP3, que ocupam vários megas.

 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
Filmes Flash que se adaptam ao tamanho da janela



Como criar filmes Flash que se adaptem ao tamanho da janela do navegador.

Por Tutoriales-flash


Um dos dilemas que se apresentam a um web designer quando começa um projeto em Flash é o tamanho do filme. Normalmente se define um tamanho objetivo e se trabalha em base a essas dimensões, o problema costuma surgir quando se visualiza o swf em tela que têm uma resolução diferente.

Nunca lhe aconteceu isto? Você desenha uma web com resolução fixa, a 800 x 600px. por exemplo, e quando o cliente vê as primeiras telas com uma resolução de 1024 x 768 ou inclusive de 1280 x 1024 px. (cada vez mais freqüente devido ao boom dos TFT de 17'') se queixa porque considera que há uma área importante da tela sem utilizar. Chegados a esta situação se apresentam duas alternativas:

Alternativa 1. Convencemos a nosso cliente de que o tamanho é o adequado, lhe aconselhamos sobre a necessidade de não saturar a tela, falamos das bondades de usar claros na composição, dizemos que tecnicamente é a única opção, blá, blá, blá.

Alternativa 2. Desenhamos um website adaptável à resolução da tela (sempre haverá um tamanho mínimo). Se não souber como fazê-lo, neste tutorial explicaremos nossa maneira de fazê-lo, que certamente não é a única.

A web iVi CONCEPT ::: Diseño Web Profesional Madrid, Diseño Web Madrid, Diseño Multimedia Madrid está desenvolvida empregando o sistema que vamos mostrar neste tutorial.

COMO FAZER.
Mesmo querendo que os conteúdos do filme se adaptem ao tamanho da janela do navegador, devemos definir uma largura e uma altura mínima para organizar e desenhar a composição. Trabalharemos com estas dimensões e planejaremos o ajuste para resoluções maiores. Em nosso exemplo vamos trabalhar com um filme de 600 x 400px. e lhe atribuiremos comportamentos aos elementos que se executarão quando se detecte uma mudança na área disponível para mostrar o filme, ou seja, desenhamos o filme pensando em como se deve reajustar para diferentes tamanhos. Todos os elementos ajustáveis têm que ser do tipo movieclip e devem ter sua origem em sua esquina superior esquerda. Se tivermos botões e caixas, serão colocados dentro de um movieclip.

Temos que incluir o swf no html com umas dimensões de 100% de largura e 100% de altura, além de indicar na linha de tempo principal que não queremos que se escale novamente, mas sim que se ajuste à esquina superior esquerda. No primeiro frame escreveremos:

Stage.scaleMode = "noScale";
Stage.align = "TL";

Se fizermos isto, quando aumentarmos ou diminuirmos o tamanho da janela, estaremos fazendo o próprio com o tamanho do Stage. Todo o mecanismo do tutorial se baseia neste tamanho do Stage.

A seguir definimos as dimensões mínimas:

largura_minima = 600;
altura_minima = 400;

Para armazenar os clips que têm que se ajustar (que serão todos menos os que se ajustam acima à esquerda) iremos criar um array ou matriz:

clips_ajustaveis = new Array();

Definimos o objeto detector de eventos que vai detectar a mudança de tamanho e o associamos ao Stage para detectar as mudanças:

myListener = new Object();
Stage.addListener(myListener);
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
A função rec é a que se executará cada vez que detectarmos uma mudança no tamanho do Stage:

myListener.onResize = rec;
function rec() {
altura = Stage.height;
if (altura<altura_minima) {
altura = altura_minima;
}
largura = Stage.width;
if (largura<largura_minima) {
largura = larugra_minima;
}
for (var g = 0; clips_ajustaveis[g]; g++) {
clips_ajustaveis[g].alinhar();
}
}

Esta função obtém em primeiro lugar o novo tamanho do Stage, o compara com as dimensões mínimas e se for menor atribui o valor mínimo. Depois executa o método alinhar() para cada um dos elementos do array clips_ajustaveis que são os clips. Com isto o que fazemos é ajustar cada clip da maneira que tivermos dito. E como dissemos? Agora veremos...

Para continuar vamos definir dois métodos ou funções para todos os movieclips mediante protótipos, os protótipos nos permitem adicionar métodos a classes inteiras sem ter que fazê-lo individualmente, já publicaremos um tutorial falando sobre eles. O primeiro método que implementaremos será setAjuste(ajuste_x, ajuste_y, ajuste_width, ajuste_height), através do qual vamos indicar como queremos que se ajuste cada clip.

// Os valores para ajuste_x são "esquerda", "direita" e "centralizar"
// Os valores para ajuste_y são "acima", "abaixo" e "centralizar"
// Os valores para ajuste_width são false, um número de pixels
// de largura ou a porcentagem da largura do clip com respeito à cena
// O mesmo se aplica para ajuste_height com a altura
MovieClip.prototype.setAjuste = function(ajuste_x, ajuste_y, ajuste_width, ajuste_height) {
this.ajuste_x = ajuste_x;
this.ajuste_y = ajuste_y;
this.ajuste_width = ajuste_width;
this.ajuste_height = ajuste_height;
// armazeno a posição e o tamanho
// iniciais dos clips ajustáveis
this.x0 = this._x;
this.y0 = this._y;
this.w0 = this._width;
this.h0 = this._height;
this.ajustePersonalizado = false;
// armazeno o clip no array
clips_ajustaveis.push(this);
this.alinhar();
};
 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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:

demo_distor.gif


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.


distor2.jpg



Download dos arquivos .as: distorsion.zip


 

helldanger1

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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".

propiedades_munieca.jpg


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

GForum VIP
Entrou
Ago 1, 2007
Mensagens
29,631
Gostos Recebidos
1
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:

vista_final_munieca.jpg



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



acciones_fotogramas.gif



 
Topo