Baixar Sem Virus

8 de agosto de 2012

Introdução

JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto, como o NotePad, Write, etc. Porém, existem editores próprios para gerar HTML, tais como HotDog e (mais recomendado) Microsoft FrontPage.
Os parágrafos de lógica do javaScript podem estar "soltos" ou atrelados a ocorrência de eventos.
Os parágrafos soltos são executados na sequência em que aparecem na página (documento) e os atrelados a eventos são executados apenas quando o evento ocorre. Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o fim do set de JavaScript, da seguinte forma:

Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início do documento, através da criação de funções a serem invocadas quando se fizer necessário (normalmente atreladas a eventos).
Se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos . Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas) em sua sintaxe. Portanto, é necessário que seja obedecida a forma de escrever os comandos, de acordo com a forma apresentada ao longo deste manual. Caso seja cometido algum erro de sintaxe quando da escrita de um comando, o JavaScript interpretará, o que seria um comando, como sendo o nome de uma variável.

Operadores Matemáticos

São operadores a serem utilizados em cálculos, referências de indexadores e manuseio de strings.
Ao longo do manual estes operadores serão largamente utilizados, dando, assim, uma noção mais
precisa do seu potencial.

+ - adição de valor e concatenação de strings
- - subtração de valores
* - multiplicação de valores
/ - divisão de valores
% - obtém o resto de uma divisão:
Exemplo:
150 % 13 retornará 7
7 % 3 retornará 1
+= - concatena /adiciona ao string/valor já existente. Ou seja:
x += y é o mesmo que x = x + y
Da mesma forma podem ser utilizados: -= , *= , /= ou %=
Um contador pode ser simplificado utilizando-se:
X++ ou X-- o que equivale as expressões:
X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo.

Operadores Lógicos

São operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. Os comandos condicionais serão vistos mais a frente.

== Igual
!= - Diferente
> - Maior
>= - Maior ou Igual
&< - Menor
<= - Menor ou Igual
&& - E
|| - Ou

Controles Especiais

\b - backspace
\f - form feed
\n - new line caracters
\r - carriage return
\t - tab characters
// - Linha de comentário
/*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentário.

Os delimitadores naturais para uma string são " ou '. Caso seja necessário a utilização destes caracteres como parte da string, utilize \ precedendo " ou '.

Ex. alert ("Cuidado com o uso de \" ou \' em uma string")

Controles Condicionais

São comandos que condicionam a execução de uma certa tarefa à veracidade ou não de uma
determinada condição, ou enquanto determinada condição for verdadeira.
São eles:

Comando IF

if (condição) { ação para condição satisfeita }
[ else
{ ação para condição não satisfeita } ]

Ex.
if (Idade < 18)
{Categoria = "Menor" }
else
{Categoria = "Maior"}

Comando FOR

for ( [inicialização/criação de variável de controle ;]
[condição ;]
[incremento da variável de controle] ) { ação }

Ex.
for (x = 0 ; x <= 10 ; x++)
{alert ("X igual a " + x) }

ComandoWHILE

Executa uma ação enquanto determinada condição for verdadeira.

while (condição) { ação }

Ex.
var contador = 10
while (contador > 1)
{ contador-- }

Move condicional

receptor = ( (condição) ? verdadeiro : falso)

Ex.
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

OBS:
Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a
condição principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma
ação (se determinada condição ocorrer) mas volta para o loop.
Diretivas/condições entre [ ] significam que são opcionais.

Eventos

São fatos que ocorrem durante a execução do sistema, a partir dos quais o programador pode
definir ações a serem realizadas pelo programa.
Abaixo apresentamos a lista dos eventos possíveis, indicando os momentos em que os mesmos
podem ocorrer, bem como, os objetos passíveis de sua ocorrência.

onload - Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento.

onunload - Ocorre na descarga (saída) do documento. Também só ocorre no BODY.

onchange - Ocorre quando o objeto perde o focus e houve mudança de conteúdo.
válido para os objetos Text, Select e Textarea.

onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudança.
válido para os objetos Text, Select e Textarea.

onfocus - Ocorre quando o objeto recebe o focus.
válido para os objetos Text, Select e Textarea.

onclick - Ocorre quando o objeto recebe um Click do Mouse.
válido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.

onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto.
válido apenas para Link.

onselect - Ocorre quando o objeto é selecionado.
válido para os objetos Text e Textarea.

onsubmit - Ocorre quando um botão tipo Submit recebe um click do mouse.
válido apenas para o Form.

Criando Variáveis

A variável é criada automaticamente, pela simples associação de valores a mesma.

Ex. NovaVariavel = "Jose"

Foi criada a variável de nome NovaVariavel que, passou a conter a string Jose.

As variáveis podem ser Locais ou Globais. As variáveis que são criadas dentro de uma função são Locais e referenciáveis apenas dentro da função. As variáveis criadas fora de funções são Globais, podendo serem referenciadas em qualquer parte do documento.

Desta forma, variáveis que precisam ser referenciadas por várias funções ou em outra parte do documento, precisam ser definidas como globais.

Embora não seja recomendável, em uma função, pode ser definida uma variável local com o mesmo nome de uma variável global. Para isso utiliza-se o método de definição var.

Ex. Variável Global : MinhaVariavel = ""
Variável Local : var MinhaVariavel = ""

Escrevendo no Documento

O JavaScript permite que o programador escreva linhas dentro de uma página (documento),
através do método write. As linhas escritas desta forma, podem conter textos, expressões
JavaScript e comandos Html. As linhas escritas através deste método aparecerão no ponto
da tela onde o comando for inserido.

Ex:

A idéia do exemplo acima é escrever duas linhas. Entretanto o método write não insere mudança de linha, o que provocará o aparecimento de apenas uma linha com os dois textos emendados.
Para evitar este tipo de ocorrência, existe o método writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando não surtiu efeito,obtendo-se o mesmo resultado do método write. A solução encontrada para esta situação foi a utilização do comando de mudança de parágrafo da linguagem Html.

Ex:

Isto resolve a questão da mudança de linha, porém, vai gerar uma linha em branco, entre cada linha, por se tratar de mudança de parágrafo. Caso não seja desejado a existência da linha em branco, a alternativa é utilizar o comando Html
que apenas muda de linha.

Ex:

Mensagens

Existem três formas de comunicação com o usuário através de mensagens.

Apenas Observação:

alert ( mensagem )

Ex.
alert ("Certifique-se de que as informações estão corretas")

Mensagem que retorna confirmação de OK ou CANCELAR:

confirm (mensagem)

Ex.
if (confirm ("Algo está errado...devo continuar??"))
{ alert("Continuando") }
else
{ alert("Parando") }

Recebe mensagem via caixa de texto Input:

Receptor = prompt ("Minha mensagem", "Meu texto")

Onde:
Receptor é o campo que vai receber a informação digitada pelo usuário
Minha mensagem é a mensagem que vai aparecer como Label da caixa de input
Meu texto é um texto, opcional, que aparecerá na linha de digitação do usuário

Ex.
Entrada = prompt("Informe uma expressão matemática", "")
Resultado = eval(Entrada)
document.write("O resultado é = " + Resultado)

Criando Funções

Uma função é um set de instruções, que só devem ser executadas quando a função for acionada.

A sintaxe geral é a seguinte:

function NomeFunção (Parâmetros)
{ Ação }

Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor de idade, recebendo como parâmetro a sua idade.

function Idade (Anos) {
if (Anos > 17)
{ alert ("Maior de Idade") }
else
{ alert ("menor de Idade") }
}

Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja informada a idade e, a cada informação, a função seja acionada.

Observe-se que o parâmetro passado (quando ocorre o evento "onchange") foi o conteúdo da caixa de texto "Tempo" (propriedade "value") e que, na função, chamamos de "Anos". Ou seja, não existe co-relação entre o nome da variável passada e a variável de recepção na função. Apenas o conteúdo é passado.

Funções Intrínsecas

São funções embutidas na própria linguagem. A sintaxe geral é a seguinte:

Result = função (informação a ser processada)

- eval = Calcula o conteúdo da string
- parseInt - Transforma string em inteiro
- parseFloat - Transforma string em número com ponto flutuante
- date() - Retorna a data e a hora (veja o capítulo manipulando datas)

ex1: Result = eval ( " (10 * 20) + 2 - 8")

ex2: Result = eval (string)

No primeiro exemplo Result seria igual a 194. No segundo, depende do conteúdo da string, que também pode ser o conteúdo (value) de uma caixa de texto.

- Funções tipicamente Matemáticas:

Math.abs(número) - retorna o valor absoluto do número (ponto flutuante)
Math.ceil(número) - retorna o próximo valor inteiro maior que o número
Math.floor(número) - retorna o próximo valor inteiro menor que o número
Math.round(número) - retorna o valor inteiro, arredondado, do número
Math.pow(base, expoente) - retorna o cálculo do exponencial
Math.max(número1, número2) - retorna o maior número dos dois fornecidos
Math.min(número1, número2) - retorna o menor número dos dois fornecidos
Math.sqrt(número) - retorna a raiz quadrada do número
Math.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)
Math.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)
Math.sin(número) - retorna o seno de um número (anglo em radianos)
Math.asin(número) - retorna o arco seno de um número (em radianos)
Math.cos(número) - retorna o cosseno de um número (anglo em radianos)
Math.acos(número) - retorna o arco cosseno de um número (em radianos)
Math.tan(número) - retorna a tangente de um número (anglo em radianos)
Math.atan(número) - retorna o arco tangente de um número (em radianos)
Math.pi retorna o valor de PI (aproximadamente 3.14159)
Math.log(número) - retorna o logarítmo de um número
Math.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)
Math.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)
Math.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)
Math.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)
Math.LOG10E - retorna a base do logarítmo de 10 (aproximadamente 0.434)

Observação: Em todas as funções, quando apresentamos a expressão "(número)", na verdade queremos
nos referir a um argumento que será processado pela função e que poderá ser: um número,
uma variável ou o conteúdo de um objeto (propriedade value).

Criando Novas Instâncias

Através do operador new podem ser criadas novas instâncias a objetos já existentes, mudando o
seu conteúdo, porém, mantendo suas propriedades.

A sintaxe geral é a seguinte:

NovoObjeto = new ObjetoExistente (parâmetros)

Ex1.
MinhaData = new Date ()

MinhaData passou a ser um objeto tipo Date, com o mesmo conteúdo existente em Date
(data e hora atual)

Ex2:
MinhaData = new Date(1996, 05, 27)

MinhaData passou a ser um objeto tipo Date, porém, com o conteúdo de uma nova data.

Ex3:
Suponha a existência do seguinte objeto chamado Empresas
function Empresas (Emp, Nfunc, Prod)
{ this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod }

Podemos criar novas instâncias, usando a mesma estrutura, da seguinte forma:

Elogica = new Empresas("Elogica", "120", "Serviços")
Pitaco = new Empresas("Pitaco", "35", "Software")
Corisco = new Empresas("Corisco", "42", "Conectividade")

Assim, a variável Elogica.Nfunc terá o seu conteúdo igual a 120

Manipulando Arrays

O JavaScript não tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays é necessário a criação de um objeto com a propriedade de criação de um array.

No exemplo abaixo, criaremos um objeto tipo array de tamanho variável e com a função de "limpar" o conteúdo das variáveis cada vez que uma nova instância seja criada a partir dele.

function CriaArray (n) {
this.length = n
for (var i = 1 ; i <= n ; i++)
{ this[i] = "" } }

Agora podemos criar novas instâncias do objeto "CriaArray" e alimentá-los com os dados necessários.

NomeDia = new CriaArray(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Terça"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sábado"

Atividade = new CriaArray(5)
Atividade[0] = "Analista"
Atividade[1] = "Programador"
Atividade[2] = "Operador"
Atividade[3] = "Conferente"
Atividade[4] = "Digitador"

Agora poderemos obter os dados diretamente dos arrays.

DiaSemana = NomeDia[4]
Ocupação = Atividade[1]

DiaSemana passaria a conter Quinta e Ocupação conteria Programador.

Outra forma de se trabalhar com arrays é criar novas instâncias dentro do próprio objeto do
array, o que proporciona o mesmo efeito de se trabalhar com matriz. Isso pode ser feito da
seguinte forma:

function Empresas (Emp, Nfunc, Prod) {
this.Emp = Emp
this.Nfunc = Nfunc
this.Prod = Prod }

TabEmp = new Empresas(3)
TabEmp[1] = new Empresas("Elogica", "120", "Serviços")
TabEmp[2] = new Empresas("Pitaco", "35", "Software")
TabEmp[3] = new Empresas("Corisco", "42", "Conectividade")

Assim, poderemos obter a atividade da empresa número 3, cuja resposta seria Conectividade, da seguinte forma:

Atividade = TabEmp[3].Prod

Obs:
É importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores podem ser referências ao conteúdo de variáveis.

Manipulando String's

O JavaScript é bastante poderoso no manuseio de String´s, fornecendo ao programador uma total
flexibilidade em seu manuseio.
Abaixo apresentamos os métodos disponíveis para manuseio de string´s.

string.length - retorna o tamanho da string (quantidade de bytes)

string.charAt(posição) - retorna o caracter da posição especificada (inicia em 0)

string.indexOf("string") - retorna o número da posição onde começa a primeira "string"

string.lastindexOf("string") - retorna o número da posição onde começa a última "string"

string.substring(index1, index2) - retorna o conteúdo da string que corresponde ao intervalo especificado. Começando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2.

Ex.
Todo = "Elogica"
Parte = Todo.substring(1, 4)

(A variável Parte receberá a palavra log)

string.toUpperCase() - Transforma o conteúdo da string para maiúsculo (Caixa Alta)

string.toLowerCase() - Transforma o conteúdo da string para minúsculo (Caixa Baixa)

escape ("string") - retorna o valor ASCII da string (vem precedido de %)

unscape("string") - retorna o caracter a partir de um valor ASCII (precedido de %)

Manipulando Datas

Existe apenas uma função para que se possa obter a data e a hora. É a função Date(). Esta função devolve data e hora no formato:Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano

Ex.
Fri May 24 16:58:02 1996

Para se obter os dados separadamente, existem os seguintes métodos:

getDate() - Obtém o dia do mês (numérico de 1 a 31)
getDay() - Obtém o dia da semana (0 a 6)
getMonth() - Obtém o mês (numérico de 0 a 11)
getYear() - Obtém o ano
getHours() - Obtém a hora (numérico de 0 a 23)
getMinutes() - Obtém os minutos (numérico de 0 a 59)
getSeconds() - Obtém os segundos (numérico de 0 a 59)

No exemplo abaixo obteremos o dia da semana. Para tal, utilizaremos a variável DataToda
para armazenar data/hora e a variável DiaHoje para armazenar o número do dia da semana.

DataToda = new Date()
DiaHoje = DataToda.getDay()

Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e
utilizar a variável DiaHoje como indexador.

function CriaTab (n) {
this.length = n
for (var x = 1 ; x<= n ; x++)
{ this[x] = "" } }

NomeDia = new CriaTab(7)
NomeDia[0] = "Domingo"
NomeDia[1] = "Segunda"
NomeDia [2] = "Terça"
NomeDia[3] = "Quarta"
NomeDia[4] = "Quinta"
NomeDia[5] = "Sexta"
NomeDia[6] = "Sábado"

DiaSemana = NomeDia[DiaHoje]

Para criar uma variável tipo Date com o conteúdo informado pela aplicação, existe o método
set. Assim, temos os seguintes métodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds.
Seguindo o exemplo acima, para mudar o mês para novembro, teríamos:

DataToda.setMonth(10)

Exemplos adicionais serão encontrados no capítulo "Usando Timer e Date".

Interagindo com o Usuário

A interação com o usuário se dá através de objetos para entrada de dados (textos), marcação de opções (radio, checkbox e combo), botões e link's para outras páginas.

Conceitualmente, os objetos são divididos em: Input, Textarea e Select.

O objeto Input divide-se (propriedade Type) em:

construção destes objetos é feita pela linguagem HTML (HiperText Mark-up Language). Portanto, é aconselhável que sejam criados utilizando-se ferramentas de geração de páginas HTML, como o HotDog ou, mais recomendado, FrontPage.

Objeto Input TEXT

É o principal objeto para entrada de dados.
Suas principais propriedades são: type, size, maxlength, name e value.
type=text : Especifica um campo para entrada de dados normal
size : Especifica o tamanho do campo na tela.
maxlength : Especifica a quantidade máxima de caracteres permitidos.
name : Especifica o nome do objeto
value : Armazena o conteúdo do campo.
Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.
Ex:

Objeto Input PASSWORD

É o objeto para entrada de Senhas de acesso (password). Os dados digitados neste objeto são criptografados e, só são interpretados (vistos) pelo "server", por razões de segurança.
Suas principais propriedades são: type, size, maxlength, name e value.
type=password : Especifica um campo para entrada de senha. Os dados digitados são substituidos (na tela) por "*".
size : Especifica o tamanho do campo na tela.
maxlength : Especifica a quantidade máxima de caracteres permitidos.
name : Especifica o nome do objeto
value : Armazena o conteúdo digitado no campo.
Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.
Ex:

Objeto Input HIDDEN

É um objeto semelhante ao input text, porém, invisível para o usuário. Este objeto deve ser utilizado para passar informações ao "server" (quando o formulário for submetido) sem que o usuário tome conhecimento. Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Armazena o conteúdo do objeto
Ex:

Objeto Input CHECKBOX

São objetos que permitem ao usuário ligar ou desligar uma determinada opção.
Suas principais propriedades são: name, value e checked.
name : Especifica o nome do objeto
value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked).
Casoseja omitido, será enviado o valor default "on" .
Esta propriedade também serve para ativar comandos lógicos, testando-se a condição
de "checked".
checked : Especifica que o objeto inicialmente estará ligado
O único evento associado a este objeto é onclick.
Ex:
No exemplo abaixo, criaremos um objeto input.text e três objetos checkbox. O primeiro checkbox, quando ativado, transformará o texto em caracteres minúsculos. O segundo checkbox, quando ativado, transformará o texto em caracteres maiúsculos. O terceiro checkbox, quando ativado, dará um aviso do conteúdo que será recebido pelo "server" caso o formulário seja submetido para este.

Minusculoonclick="if (this.checked)
{ AltMinusc() } ">
Maiusculoonclick="if (this.checked)
{ AltMaiusc() } ">
Demo valoronclick="if (Opt3.checked)
{alert ('Server recebera = ' + Opt3.value) } ">

Existe ainda uma outra forma de manipular este objeto, em forma de array, que é a seguinte: form.elements[index].propriedade. Esta não é uma boa forma porque o index é único dentro de um formulário, exigindo muito cuidado quando se acrescenta ou se deleta um objeto, pois, neste caso, haverá um natural deslocamento do index, podendo comprometer a lógica.

Objeto Input RADIO

São objetos que permitem ao usuário a escolha de apenas uma alternativa, diante de uma série de opções.
Suas principais propriedades são: name, value e checked.
name : Especifica o nome do objeto. Para caracterizar uma mesma série de opções, todos os objetos desta série têm que ter o mesmo "name".
value : Especifica o valor que será enviado ao "server" se o objeto estiver ligado (checked). Caso seja omitido, será enviado o valor default "on" . Esta propriedade também serve para
ativar comandos lógicos, testando-se a condição de "checked".
checked : Especifica que o objeto inicialmente estará ligado
Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opções existentes na lista
Objeto.[index].value : retorna o texto (value) associado a cada opção
Objeto.[index].checked : retorna verdadeiro ou falso
O único evento associado a este objeto é onclick.
Ex. No exemplo abaixo temos dois set's de objetos radio. O primeiro tem o objetivo de mudar a cor de fundo do documento atual. O segundo tem o objetivo levar informações ao "server".
Radio

onclick="document.bgColor='green'"> Fundo Verde
onclick="document.bgColor='blueviolet'"> Fundo Violeta
onclick="document.bgColor='#FFFF00'"> Fundo Amarelo

Solteiro
Casado
Tico Tico

Objeto Input BUTTON

Este objeto tem por finalidade criar um botão ao qual se possa atrelar operações lógicas, a serem executadas quando o mesmo receber um click.
Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecerá sobre o botão
O único evento associado a este objeto é onclick.
Ex.

Click no Botao onclick="alert ('Voce digitou: ' + TstButton.Teste.value)">

Objeto Input RESET

Este objeto é um botão que tem por finalidade, única, limpar os campos digitados pelo usuário, restaurando o conteúdo do formulário para os valores iniciais.
É recomendável a utilização deste objeto, para facilitar o usuário a limpar suas informações, uma vez que a utilização da opção "reload" do "browser" (que seria uma forma) não perde as infromações digitadas.
Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecerá sobre o botão
O único evento associado a este objeto é onclick.
Ex.

Objeto Input SUBMIT

Este objeto é um botão que tem por finalidade submeter (enviar) o conteúdo dos objetos do formulário ao "server". O formulário será submetido à URL especificada na propriedade "action" do formulário.
Suas propriedades são: name e value.
name : Especifica o nome do objeto.
value : Especifica o nome que aparecerá sobre o botão
O único evento associado a este objeto é onclick. Embora se possa atrelar lógica a este evento, não se pode evitar que o formulário seja submetido, portanto, não é aconselhavel o seu uso. Mais seguro e mais útil é a utilização da propriedade onSubmit do formulário. Este permite que se atrele lógica e decida-se pela submissão ou não.
Ex.

No exemplo acima, o formulário está sendo submetido a URL "10.0.5.2" (que é o endereço IP
de um "Server"). Este servidor está rodando o "Microsoft Internet Information Server". Estamos
enviando os dados a um "OLE", que está no subdiretório "scripts", chamado "isapielo.dll", que tem
por objetivo fazer a conecção com aplicações escritas em VB. A aplicação VB que está sendo
chamada, é um OLE de nome "vbloja" no qual estamos acionando a classe "loja" e o método
"action".
A aplicação VB, deste exemplo, fará apenas a devolução dos dados recebidos pelo Server.

Objeto TEXTAREA

É um objeto para entrada de dados em um campo de múltiplas linhas. Suas principais propriedades são: name, rows e cols.
name : Especifica o nome do objeto
rows : Especifica a quantidade de linhas que aparecerão na tela
cols : Especifica a quantidade de caracteres que aparecerão em cada linha
value : Acessa o conteúdo do campo via programação.
Os eventos associados a este objeto são: onchange, onblur, onfocus e onselect.
Ex:

Objeto SELECT

É um objeto para entrada de opções, onde o usuário, a partir de uma lista de alternativas, seleciona uma ou mais opções.
Suas principais propriedades são: name, size, value e multiple.
name : Especifica o nome do objeto
size : Especifica a quantidade de opções que aparecerão na tela simultaneamente
value : Associa um valor ou string para cada opção (opcional)
multiple : Especifica a condição de múltipla escolha (usando-se a tecla Ctrl)
Para utilização deste objeto é importante o conhecimento de outras propriedades associadas:
Objeto.length : Retorna a quantidade de opções existentes na lista
Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].text : retorna o texto externo associado a cada opção Objeto.options[index].value : retorna o texto interno (value) associado a cada opção Objeto.options[index].selected : retorna verdadeiro ou falso
Os eventos associados a este objeto são: onchange, onblur e onfocus.
Ex1:
Neste exemplo é importante observar os seguintes aspectos:
a) A lista permite apenas uma seleção
b) A quarta opção aparecerá inicialmente selecionada (propriedade "selected")
c) Não utilizamos a propriedade "value". Assim, a propriedade "text" e a propriedade "value"
passam a ter o mesmo valor, ou seja, o valor externo que aparece na tela.
.

Objeto Select

Ex2:
Neste exemplo é importante observar os seguintes aspectos:
a) A lista permite múltiplas seleções
b) Utilizamos a propriedade "value". Assim as propriedades "text" e "value"
têm valores diferentes: text retornará Escolha 1 a Escolha 4 e value
retornará List1 a List4.
c) O parâmetro passado, quando da ocorrência do evento onblur, foi this.
Esta diretiva significa que estamos passando este objeto.
.

Objeto Select2

Focando um Objeto

Este método permite que o cursor seja ativado em um determinado objeto (focado). Isso pode ser feito na carga do documento, a partir da ocorrência de um evento ou mesmo dentro de uma função.
Observe que até agora o usuário tinha que dar um "Click" para focar o objeto desejado.
De forma semelhante existe o método "Select". Este método marca o conteúdo do objeto com uma tarja roxa, permitindo ao usuário, em caso de substituição do conteúdo do campo, não ter que deletar o conteúdo anterior, pois, com este método, a deleção se dá de forma automática quando da digitação do novo conteúdo.
Os métodos "Focus" e "Select" podem ser utilizados nos seguintes objetos:
password, select, text e textarea
No exemplo abaixo, utilizaremos o evento onload para setar o focus para o primeiro objeto do formulário e os métodos focus e select para, na rotina de crítica dos dados, focar o objeto que contiver erro de preenchimento.
Ex.

Usando Time e Date

É um método que permite a programação para que uma determinada ação só ocorra após o transcurso de um determinado tempo.
Variável = setTimeout ("ação", tempo)
Onde:
Variável é uma variável apenas para controle do timer
ação é a ação que se quer realizar.
tempo é o tempo de espera para que a ação ocorra, em milisegundos.
Obs:
É importante observar que a ação só ocorrerá uma vez. Para que a ação volte a ocorrer, será necessário repetir o comando dentro da ação, obtendo-se, assim, um LOOP.
Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte método:
clearTimeout (Variável)
Onde:
Variável é o nome da variável de controle do timer.

Abaixo encontra-se um exemplo de um formulário que apresenta a data e hora atual, atualizando os dados a cada um segundo, tendo dois botões de rádio que tem a função de ativar e desativar a atualização dos dados. Apresenta também, fora do formulário, a data contendo dia e mês por extenso.
.

Escrevendo Textos Rolantes

Observe o rodapé desta página.... existe uma mensagem que está sempre rolando.
Na verdade, o texto não está rolando como dá a impressão. O que ocorre é a troca do conteúdo
a cada um segundo. Para fazer isto escrevemos uma função que, a cada segundo, desloca o texto
em um caracter. Ou seja: elimina o primeiro caracter, deslocando o texto, e insere um novo caracter no final do texto. Quando o novo texto é exibido obtemos o efeito apresentado.

No exemplo abaixo apresentamos o código necessário para criar textos rolantes. Os textos serão
apresentados na área de status (rodapé) da página bem como em uma caixa de texto de um formulário.
Inicialmente definimos as variáveis a serem utilizadas pela função e preenchemos com "brancos"
a variável que conterá o texto a ser exibido, para que o texto comece a ser exibido a partir do
canto direito da caixa.
No momento em que o documento é carregado, utilizamos o evento onload para ativar a função
que fará a apresentação dos textos.
Ex:

Abrindo Novas Janelas

Neste capítulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo o documento principal.

É importante não confundir esta forma de abrir janelas com a divisão da tela em várias partes, ou mesmo com a chamada de outras páginas. Para que não existam dúvidas, explicaremos um pouco sobre estes dois outros métodos.
A divisão de uma tela em várias janelas contendo documentos diferentes é feita através do objeto FRAME do Html. Neste caso, a tela inteira é considerada como um FrameSet e cada parte em que ela for dividida é considerada como um Frame. Cada Frame é definido dentro do FrameSet através da especificação dos parâmetros: % da tela na vertical (cols), % da tela na horizontal (rows) e nome de cada frame. Uma vez criado o FrameSet poderemos abrir documentos distintos em cada Frame. Para fazer isto, acrescente ao link do documento a diretiva target=nome do frame.
Ex.

Isto fará com que o arquivo html Eventos.htm seja aberto dentro do frame de nome Principal
A simples chamade de outras telas (documentos) é feita através do link para o documento desejado.
Ex.

Isto fará com que o arquivo html Eventos.htm seja aberto em substituição a tela existente.
Bem, voltemos ao nosso caso que é a abertura de janelas sobre um documento. Isto é feito através de comandos JavaScript, que permitem: Abrir uma janela, Abrir um documento dentro desta janela, Escrever o conteúdo da janela, Fechar a janela e Fechar o documento.

Abrindo a Janela
A sintaxe geral deste método é a seguinte:
Variavel = window.open ("Url", "Nome da janela", "Opções")
Onde:
Variavel - Nome que será atribuido como propriedade da janela.
Url - Endereço Internet onde a janela será aberta. Normalmente voce estará utilizando a sua
própria Url, neste caso, preencha com "".
Nome da Janela - É o nome que aparecerá no top da janela (Título)
Opções - São as opções que definem as características da janela, quais sejam:

toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.
location - Abre a barra de location do browse
directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.
status - Abre uma barra de status no rodapé da janela
scrollbar - Abre barras de rolamento vertical e horizontal
menubar - Cria uma barra de menu tipo "File", "Edit", etc.
resizable - Permite ao usuário redimencionar a janela
width - Especifica a largura da janela, em pixels
height - Especifica a altura da janela, em pixels

Todas as opções (exceto width e height) são boleanas e podem ser setadas de duas formas. Exemplo: "toolbar" ou "toolbar=1") são a mesma coisa. Se nada for especificado, entende-se que todas as opções estão ligadas; Caso seja especificada qualquer opção, será entendido que estão ligadas apenas as opções informadas.
As opções devem ser informadas separadas por vírgula, sem espaço entre elas.
Abrindo um Documento
Para abrir um documento dentro da janela, deve ser utilizado o seguinte método:
Variavel.document.open()
Onde "Variavel" é o nome da variável associada ao método window.open
Escrevendo no Documento
Para escrever a tela no documento, deve ser utilizado o seguinte método:
Variavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.")
Fechando a Janela
Para fechar a janela, utilize o seguinte método:
Variavel.document.write ("window.close()")
Fechando o Documento
Para fechar o documento, utilize o seguinte método:
Variavel.document.close ()
A seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usuário escolherá uma opção (Elógica ou Recife) e dará um Click em um botão (Nova Janela). Neste momento será aberta uma nova janela que conterá a foto escolhida pelo usuário e um botão que,
ao receber o Click, fechará a janela.
Normalmente, qualquer href ou src dentro de uma página, por padrão, acessa o arquivo ou a imagem no mesmo diretório onde está a página atual, a menos que seja especificado um novo caminho (Path).
No caso de abertura de uma nova janela, através do método window.open, as versões mais antigas dos browses não conseguem "ver" o Path, sendo necessária a completa informação do caminho (path) onde o arquivo ou imagem estão armazenados, em todas as chamadas dos comandos Html href ou src. Observe que na função estamos utilizando dois novos métodos:
navigator.appVersion para verificarmos a versão do browse que esta sendo utilizado document.location. para obtermos o Path da localização do arquivo Html que está correntemente em uso.
No exemplo abaixo estamos, inicialmente, identificando a versão do browse.Caso seja antiga, para não escrevermos todo o caminho a cada chamada e ainda, considerando que os arquivos chamados estão no mesmo diretório da página atual, estamos obtendo o Path do arquivo atual e eliminando o nome do arquivo que está na última referencia do Path. Quando fizermos a chamada das imagens (comando src) só será necessário a concatenação do nome do arquivo chamado com a raiz do path que, no exemplo, armazenamos na variável de nome Local.

Escolha a foto a ser apresentada na nova janela:

Read more »

		CHUVA
FUMAÇA		EXPRESSÕES
BOLA		CHAMAS
EXERCÍCIO 1 - INTERPOLAÇÃO – OBJETO 1 – Desenhe uma bola > clique na ferramenta seta > clique duas vezes na bola para selecionar contorno e preenchimento. 2 – Com a bola toda selecionada, tecle F8 ou com o botão direito do mouse escolha converter em símbolo > na caixa de diálogo escolha > nome: bola > gráfico 3 – Selecione a linha do tempo 50 > insira um quadro-chave (tecle F6) ou menu inserir > quadro-chave 4 – Mova a bola/símbolo para outro lugar > selecione na linha do tempo quadro 1 5 – Com o botão direito do mouse > escolha CRIAR INTERPOLAÇÃO DE MOVIMENTO 6 – Teste sua animação > através do controlador ou Crtl+enter EXERCÍCIO 2 - INTERPOLAÇÃO COM POLÍGONOS 1 – Desenhe um quadrado > selecione contorno e delete 2 – Selecione a linha de tempo 15 > insira um quadro-chave (F6) 3 – Clique na ferramenta ímã > tem que ficar ativada 4 – Desenhe um triângulo com a ferramenta linha sobre o quadrado e pinte de outra cor com a ferramenta tinteiro > delete o contorno do triangulo > Agora delete as partes restantes do quadrado 5 – Selecione a linha de tempo 30 > F6 (quadro chave) 6 – Desative a ferramenta ímã 7 – Desenhe uma bola sobre o triângulo > delete o contorno > pinte de uma cor diferente das demais > e delete as partes que sobram do triangulo 8 – Agora, usando a tecla shift selecione a linha de tempo > do quadro 1 ao 29 9 – Usando o inspetor de propriedades, abaixo da linha de tempo selecione interpolação de forma > e mesclar > distributivo 11 – Teste sua animação pelo controlador ou Crtl+enter EXERCÍCIO 3 - INTERPOLAÇÃO COM TEXTO 1 – Com a ferramenta TEXTO > fonte Arial black > tamanho 32 > cor roxa > digite seu nome > centralize no palco 2 – Selecione o texto com a ferramenta seta > e converta em símbolo (F8 ou botão direito do mouse) > nome: texto > gráfico 3 – Selecione a linha de tempo 50 > insira um quadro-chave (F6 ) 4 - Selecione agora a linha de tempo 1 > selecione o texto > menu modificar > dimensionar e girar: REDIMENSIONAR 20% - ROTAÇÃO: 0 5 – Selecione a linha de tempo 1 > com o botão direito do mouse > criar interpolação de movimento. 6 – Teste sua animação pelo controlador ou Crtl+enter EXERCÍCIO 4 - INTERPOLAÇÃO COM TEXTO 2 1 – Com a ferramenta TEXTO > fonte Arial black > tamanho 32 > cor VERMELHA > digite FLASH MX > centralize no palco 2 – Selecione o texto com a ferramenta seta > e converta em símbolo (F8 ou botão direito do mouse) > nome: texto > gráfico 3 – Selecione a linha de tempo 50 > insira um quadro-chave (F6 ) 4 - Selecione agora a linha de tempo 1 > selecione o texto > inspetor de propriedades > Cor > brilho > 80% 5 – Selecione a linha de tempo 1 > com o botão direito do mouse > criar interpolação de movimento. 6 – Teste sua animação pelo controlador ou Crtl+enter EXERCÍCIO 5 - ANIMANDO FORMAS E CORES Arquivos necessários neste exercício> clique > macaco.wmf - mulher.wmf 1 – Abra um novo arquivo 2 - Menu inserir > novo símbolo > escolha: clipe de filme > nome: metamorfose 3 – Importar o arquivo (Crtl+R) > macaco.wmf > abrir > centralizar no palco (crtl+K) 4 – Selecione o quadro 1 > criar interpolação de movimento 5 – Selecione o quadro 25 > no quadro 26 > inserir quadro estático (F5) 6 – No painel de propriedades > escolha: interpolação forma > > atenuação: 0 > mesclagem: angular 7 – Selecione o quadro 26 > inserir > quadro em branco > neste quadro > importar (CrtlR) > arquivo > mulher.wmf > abrir > centralizar a figura no palco (Crtl+K) 8 – Para criar a animação, precisamos desmembrar as figuras. Então no quadro 26 > selecione a figura > menu modificar > desmembrar (Crtl+B) 9 – No quadro 1 > selecione a figura > menu modificar > desmembrar (Crtl+B) 10 – Volte para a cena 1 > insira um quadro (F5) no quadro 50 11 – Abrir a biblioteca > insira uma instância deste símbolo no palco > Crl+L ou F11 > clique no símbolo > arraste para o palco 12 – Teste sua animação EXERCÍCIO 6 - MÁSCARAS - RETÂNGULO E FUNDO 1 – Abra um arquivo novo com 500 X 450, fundo branco. 2 – Desenhe um retângulo sem contorno e aplique um preenchimento gradiente linear que vá do azul para cor mostarda 3 – Insira um quadro (F5) na linha do tempo 40 4 - Selecione tudo e agrupe (menu > modificar > agrupar ou Crtl+G) 5 – Centralizar no palco (Crtl+K) e nomear a camada como PADRON 1 6 – Selecione o agrupamento e copie (Crtl+C) 7 – Insira uma nova camada acima e renomeie como PADRON 2 8 – Oculte a camada PADRON 1 (clique no olho) e selecione a linha 1 de tempo na camada PADRON 2 e cole a figura copiada (Crtl+V) 9 – Mantenha a figura selecionada > centralize no palco (Crtl+K) e vá ao menu modificar > transformar > inverter horizontalmente 10 – Oculte a camada PADRON 2 e insira nova camada acima e dê o nome de TEXTO 11 – NESTA CAMADA USE AS RÉGUAS/GUIAS para direcionar o texto na área do retângulo (menu exibir, réguas e use as guias) > digite SEU NOME > arial black > 18 e arraste para o lado esquerdo do palco > Dê F8 e crie um símbolo gráfico de nome texto 12 – Insira um quadro-chave na linha tempo 40 13 - arraste o texto para o lado direito do palco > selecione a linha de tempo 1 > criar interpolação de movimento 14 – Mantendo selecionada a linha de tempo 1 desta camada > clique na camada TEXTO > botão direito do mouse > escolha MÁSCARA. 15 – Exiba todas as camadas e teste sua animação (Crtl+enter) VARIAÇÃO DO EXERCÍCIO - FUNDO COM DESENHOS: 1 – Abra um arquivo novo com 320 X 240 > fundo preto. 2 – Com a ferramenta pincel > faça vários desenhos com cores e tamanhos diferentes na área de trabalho mais ou menos como está abaixo: 3 – Selecione a linha do tempo 40 e insira um quadro > F5 4 – Nomeie esta camada como DESENHOS > e insira uma nova camada acima, nome: TEXTO 5 – Ocultar a camada DESENHOS 6 – Volte para a camada TEXTO e digite seu nome > Arial Black > 32 7 – Selecione o texto > F8 para converter em símbolo > gráfico > nome: texto 8 - Mova o texto para a parte superior à esquerda no palco>insira um quadro-chave (F6) na linha de tempo 10 9 - Mova o texto para a parte superior à direita 9 – Insira outro quadro-chave(F6) na linha do tempo 20 e mova o texto para a parte inferior do palco à esq. 10 –Insira um quadro-chave na linha do tempo 30 e mova o texto para parte inferior à direta do palco 11 –Insira outro quadro-chave na linha do tempo 40 e mova o texto para a parte superior à esquerda 12 –Agora selecione a linha do tempo 1 até 40 > criar interpolação de movimento (direito do mouse) 13 –Clique novamente no olho no painel camadas > camada DESENHOS > exiba a camada 14 –Clique na camada TEXTO > direito do mouse > escolha MÁSCARA. Teste a animação (Crtl+enter) EXERCÍCIO 7 - INTERPOLAÇÃO: FORMAS/TEXTO 1 - Digite a palavra: WEB 2 - Selecione o item criado > menu modificar > desmembrar 2 vezes. Pinte com um gradiente à sua escolha. 3 - Clique no quadro 15 e vá em inserir quadros-Chave (ou tecle F6) 4 - Apague o item e faça outro no lugar 5 - Vá novamente em > menu modificar > desmembrar 2 vezes 6 - Clique sobre o quadro 1 e lá na janela propriedades, abaixo do palco > selecione forma em Interpolação 7 - Teste sua animação! EXERCÍCIO 8 - ANIMAÇÃO - BOLA GIRANDO 1. Primeiramente selecione a ferramenta Oval e depois defina em cores de preenchimento como sem preenchimento e desenhe um círculo perfeito no palco (use a tecla shift). 2. Feito isso, iremos selecionar a ferramenta linha e traçar duas linhas no círculo. Se você não conseguir fazer a linha certinha dentro do círculo, não se preocupe, no Flash sempre que você cruza linhas, elas serão partidas em dois segmentos distintos, ou seja, você pode com este recurso eliminar rebarbas. Verifique as imagens abaixo: 3. Agora iremos clicar na ferramenta Balde de tinta e pinte cada parte de uma cor. 4. Até agora só preparamos o objeto para começarmos a fazer a nossa animação. Feito isso, com a ferramenta seta preta selecionada selecione todo o círculo. Como na imagem abaixo: 5. Veja a imagem final como deve ficar. Se ficar cheio de pontilhadinhos significa que você selecionou todo o objeto corretamente. 6. Com o objeto selecionado transforme-o em símbolo. Pressione no teclado (F8). Irá abrir uma janela. Selecione gráfico e defina um nome qualquer a este símbolo e pressione OK. Repare que fica uma borda ao redor do seu objeto. 7. Agora na linha do tempo, escolha um número qualquer, neste caso escolhi o quadro 20, mas poderia ser qualquer um. Pressione F6 para criar um quadro chave. Obs: Quanto mais quadros você escolhe, mas lenta fica animação. 8. Clique na ferramenta seta preta e arraste para a direita o círculo. Veja a imagem abaixo. 9. Na linha do tempo clique com o lado direito do mouse em qualquer parte no intervalo entre o quadro 1 e 20 > Selecione propriedades. Defina Interpolação de movimento. 10. Neste painel defina as seguintes propriedades conforme a imagem abaixo: interpolação de movimento - sentido horário - tempo 5 11. Pronto a interpolação de movimento já está pronta. Pressione CTRL+ENTER para testar seu filme. EXERCÍCIO 9 - FORMA: POLÍGONO E REFERÊNCIA 1 – Abra um arquivo novo com 500 X 400, fundo branco. 2 – Desenhe um quadrado, pinte com cor à sua escolha , selecione com a ferramenta seleção )seta preta) e delete o contorno 3 – Selecione a linha do tempo 30 e insira um quadro-chave (F6) 4 – Desative a ferramenta ímã 5 - Desenhe uma bola sobre o quadrado > selecione as partes que “sobram” do quadrado que está embaixo e o contorno da bola e delete 6 – Selecione a linha de tempo de 1 até 29 e escolha no inspetor de propriedades > interpolar > forma > distributiva 7 – Selecione a linha de tempo 1 > menu modificar > forma > adicionar dica de forma (será exibida uma bola com a letra A) 8 – Arraste o A para uma extremidade do quadrado > clique sobre A > botão direito do mouse > referência > será exibida uma bola com a letra B. 9 – Arraste o B para outra extremidade do quadrado > repita as instruções mencionadas no item 8. Faça isso nos três cantos do quadrado: C > D 10 – Agora selecione a linha de tempo 30 > será exibida uma bola também com uma letra no meio do circulo > arraste também para as extremidades quantas referências quiser 11 – Teste sua animação > Crtl+enter EXERCÍCIO 10 - EFEITO COM FOTO E FORMA Etapa 1 -Utilizaremos a imagem abaixo para fazer essa lição: acesse o arquivo > moça de biquini Etapa 2 - Crie um novo documento flash e definir a largura de 360 pixels e a altura a 390 pixels. Selecione qualquer cor como cor de fundo. Defina a taxa para 28 e clique em OK. Etapa 3 - Escolha agora, arquivo> Importar> (tecla de atalho: Ctrl + R) e importar a foto para o palco. Etapa 4 - Centralizar a imagem no palco e colocar o zoom em 60%Etapa 5 - Dê um clique duplo agora na camada 1 com a ferramenta seleção (V), renomeie para foto.Após isso, clique no quadro 25 e pressione tecla F5 para criar um quadro estático. Etapa 6 - Crie agora uma nova camada acima da camada foto com nome de forma. Etapa 7 - Selecione a camada e com a ferramenta Retângulo escolha qualquer cor de preenchimento e desenhe um retângulo acima da foto com 360px X 26px. Delete o contorno. Veja abaixo! Etapa 8 - Clique agora no quadro 5 da camada forma e pressione F6-chave. Depois disso, usando a ferramenta seleção (V), altere o retângulo para a forma como mostrado na foto: Agora clique no intervalo entre os quadros 1 e 5, selecione um quadro > no painel propriedades > interpolação: forma > atenuação: o > mesclagem > distributiva Etapa 9 - Após isso, clique no quadro 10, pressione F6 e altere a forma como é mostrado na figura abaixo! Agora clique no intervalo entre os quadros 5 e 10, selecione um quadro > no painel propriedades nterpolação: forma > atenuação: o > mesclagem > distributiva Etapa 10 - Clique agora em quadro 15, pressionar F6-chave e altere para este o formato: Agora clique no intervalo entre os quadros 10 e 15, selecione um quadro > no painel propriedades: interpolação: forma > atenuação: o > mesclagem > distributiva Etapa 11 - Clique agora no quadro 20 e pressione F6-chave. Em seguida, altere para este formato: Agora clique no intervalo entre os quadros 15 e 20, selecione um quadro > no painel propriedades: nterpolação: forma > atenuação: o > mesclagem > distributiva Etapa 12 - Clique agora no quadro 25 e pressione F6-chave. Em seguida, fazer esse formato: Agora clique no intervalo entre os quadros 20 e 25, selecione um quadro > no painel propriedades: nterpolação: forma > atenuação: o > mesclagem > distributiva Etapa 13 - Clique agora nos quadros 90 das camadas de forma e de foto e pressione tecla F5 - das duas camadas > use Crtl). Etapa 15 - Selecione agora a camada forma e converta para uma máscara clicando com o botão direito e selecionando máscara forma Máscara > Teste seu filme! EXERCÍCIO 11 - EFEITO MÁSCARA COM BITMAP (clique para abrir a imagem) 1 – Abra um arquivo novo com 228 X 101, fundo branco e importe a imagem DIAMANTES para o palco. Se necessário, redimensione a imagem e centralize no palco. 2 – Com a imagem selecionada > F8 e transforme em símbolo gráfico > nome: foto 3 – Nomeie a camada para FOTO 4 – Insira um quadro-chave na linha de tempo 60 5 – Com a imagem selecionada > menu modificar transformar > dimensionar e girar > REDIMENSIONAR: 60 > ROTAÇÃO: 0 6 – Selecione a linha de tempo1 > criar interpolação de movimento 7 - Insira uma camada acima e nomeie para retângulo 8 – Desenhe um retângulo que ocupe 90% da tela e pinte de qualquer cor 9 – Clique na camada retângulo e como o botão direito/mouse > escolha máscara 10 –Crtl+enter p/visualizar a animação (Crtl+F4 p/retornar ao palco) EXERCÍCIO 12 - MÁSCARA: BITMAP E TEXTO 1 – Abra um arquivo novo com 500 X 400, fundo branco. 2 – Digite o texto DATA COMPUTADORES > arial Black > pinte de um tom dourado > Selecione o texto e centralize no palco (Crtl+K). Insira um quadro estático (F5) no quadro 50. 3 – Copie o texto (CRtl+C) > nomeie essa camada como TEXTO 4 – Selecione a linha de tempo 50 e insira um quadro (F5) > oculte a camada TEXTO 1 5 – Insira uma camada acima e nomeie para TEXTO 2. Nesta camada cole o texto copiado (Crtl+V) > centralize no palco (Crtl+K) > pinte de uma cor amarela mais clara 6 – Oculte a camada TEXTO 2 e insira uma camada nova acima e nomeie para OVAL 7 – Desenhe uma bola oval que seja do tamanho de uma letra do texto aproximadamente > selecione a bola > dê F8 (converter em símbolo) > escolha: gráfico > nome: OVAL 8 - Agora exiba as camadas TEXTO 1 e TEXTO 2 9 – Arraste o símbolo oval para o início do texto e insira um quadro-chave na linha de tempo 50 da camada OVAL 10 – Arraste o símbolo oval para o final do texto > clique entre a linha do tempo 1 e 50 e > criar interpolação de movimento 11 –Clique na camada oval > direito do mouse > escolha > MÁSCARA 12 – Agora clique no palco e altere o fundo para preto. Teste sua animação (Crtl+enter). EXERCÍCIO 13 - FORMA – TEXTO E BITMAP (clique para abrir a imagem) 1 – Abra um arquivo novo e importe a imagem para o palco > abri imagem > computador. Centralize-a no palco. 2 – Com a imagem selecionada, use o menu MODIFICAR>DESMEMBRAR (ou Crtl+B) para transformar a imagem em bitmap. 3 – Insira um quadro-chave na linha de tempo 50 e retire a seleção da imagem. 4 – Digite sobre a imagem: DATA – arial black, 48 e pinte de uma cor em contraste com a imagem 5 – Clique na imagem e delete 6 – Agora selecione o texto e use o menu MODIFICAR>DESMEMBRAR (ou Crtl+B) 2 vezes, para transformar o texto em bitmap. 7 – Selecione a linha do tempo do quadro 1 até 49 8 – Escolha no inspetor de propriedades a opção interpolação > forma > angular 9 – Crtl+Enter para visualizar a animação (Crtl+F4 para retornar ao palco) EXERCÍCIO 14 - ÁRVORE DE NATAL – símbolo de clipe de filme (clique para abrir a imagem) 1 – Abra um novo arquivo para o Flash e importe um clip-art de uma árvore de natal parecida com esta (sem as bolinhas), que ocupe 90% da área do palco. Se necessário, use a ferramenta transformação livre para redimensionar o objeto. Centralize-o no palco. Arquivo de imagem > clique para acessar imagem> árvore de natal 2 – Através do menu inserir > novo símbolo para criar um símbolo 3 – Nome: bolinhas – clipe de filme 4 – Agora estamos dentro do editor do símbolo. No palco, desenhe um bolinha (círculo perfeito - use shift) - TAMANHO DO CÍRCULO > 18 X 18 px 4 – Selecione o contorne e delete. Centralize no palco (Crtl+K) 5 – Selecione a linha de tempo 2 > F6 (inserir quadro-chave) > com a ferramenta balde de tinta pinte a bolinha com gradiente verde. 6 – Selecione a linha de tempo 5 > F6 (inserir quadro-chave) > pinte a bolinha com gradiente vermelho 7 – Selecione a linha de tempo 7 > F6 (inserir quadro-chave) > pinte a bolinha com gradiente azul 8 – Selecione a linha de tempo 9 > F6 (inserir quadro-chave) > pinte a bolinha com gradiente cinza 9 – Selecione a linha de tempo 11 > > F6 (inserir quadro-chave) > pinte a bolinha com gradiente amarelo 10 – Selecione a linha de tempo 13 > > F6 (inserir quadro-chave) > pinte a bolinha com gradiente laranja ou dourado 11 – Volte para edição da Cena 1 clicando no link no palco. 12 – Arraste o clipe de filme Bolinha da biblioteca (tecle F11 para exibir a biblioteca ou menu janela > Biblioteca) . Arraste várias bolinhas e vá posicionando na árvore de natal no placo na cena 1. 13 – Agora selecione a linha de tempo 40 > F5 (inserir quadro estático) 14 – Crtl+enter para testar sua animação. EXERCÍCIO 15 - Guias de movimento 1- Primeiramente nomeie nossa camada1 para mapa. Dê dois cliques na camada1 para nomeá-la .2- Agora ative a ferramenta linha e desenhe o mapa. 3- Insira uma nova camada e renomeie para bola. 4- Ative a ferramenta Oval e desenhe um círculo bem pequeno no palco. 5- Selecione o círculo e pressione a tecla F8 para transformá-lo em um gráfico. Nomeie este gráfico para círculo. 6- Feito isso, clique com o lado direito do mouse na camada bola e selecione adicionar guia de movimento. 7- Agora na camada que foi criada Guia Bola desenhe a linha que servirá de guia para nosso círculo. Para isso ative a ferramenta lápis. Não se esqueça de selecionar a camada Guia Bola. OBS: Não confunda com a camada bola. 8- Agora iremos selecionar na linha do tempo o quadro 20 e criaremos um quadro chave para as 3 camadas pressionando a tecla (F6). Selecione a ferramenta seta preta e no quadro 20 clique e arraste para baixo até selecionar as 3 camadas de uma vez. 9- Feito isso selecione o quadro 1 da camada bola e arraste o círculo que você desenhou para o início da linha guia. 10- Repare que quando você arrasta para o início da linha guia a bolinha gruda na linha. Isso acontece porque o imã esta ativado, caso não aconteça isso, ative o imã na caixa de ferramentas. 11- Agora selecione o quadro 20 da camada bola e arraste a bolinha que você desenhou para o final da linha guia. 12- Para concluir animação, clique com o lado direito do mouse em qualquer parte da linha do tempo entre o quadro 1 e 20 da camada BOLA e selecione criar interpolação de movimento. 13- Teste sua animação – CTRL + ENTER 14- Construa outra animação com guia de movimento com um carrinho de compras ou um clip art de um carro por exemplo. Acesse as imagens: carrinho de compras - carro vermelho EXERCÍCIO 16 - EDITANDO UM SÍMBOLO – animação tela de computador 2 (clique para abrir a imagem) 1 – Abra um arquivo novo com 300 X 300, fundo branco. 2 – Importe a imagem> clique aqui > computador (ou qualquer clip-art) e centralize-o no palco (Crtl+K) 3 – Com a imagem selecionada > menu modificar > desmembrar (ou Crtl+B) para transformar a imagem em bitmap 4 – Selecione a ferramenta varinha mágica (clique na ferramenta laço e abaixo da caixa de ferramentas temos a opção da varinha mágica e suas propriedades) > clique na varinha da direita e digite: LIMIAR 10 > SUAVIZAÇÃO: normal 5 – Volte para a varinha da esquerda, a primeira varinha mágica e clique sobre a tela do computador. Caso ela não selecione toda a tela, volte à segunda varinha e aumente o limiar para 20 e assim sucessivamente até que selecione toda a tela do computador. 6 – Tecle F8 e transforme a tela (que está selecionada com a varinha) e converta em símbolo de clipe de filem > NOME: tela micro 7 – Agora, com o símbolo selecionado, clique duas vezes sobre o desenho da tela > desta forma estaremos no modo de edição do símbolo 8 – Insira um quadro-chave na linha de tempo 2 e pinte de outra cor 9 – Insira outro quadro-chave na linha de tempo 3 e pinte de outra cor 10 Insira um quadro-chave na linha de tempo 4 e pinte de outra cor 11 Agora retorne para edição da CENA 1 > clique em cena 1 logo abaixo do painel da linha do tempo 12 Agora selecione a linha do tempo 50 > insira um quadro estático (F5) 13 Teste sua animação (Crtl+enter) EXERCÍCIO 17 - LÍRIOS SURGINDO – BANNER ANIMADO Etapa 1 - encontrar as imagens abaixo > clicando aqui > lírio 1 - lírio 2 Etapa 2 - Crie um novo documento flash e defina largura do seu documento de 420 pixels e a altura de 280 pixels (como as dimensões da imagem). Selecione qualquer cor como cor de fundo. Defina seu filme com uma taxa de 32 e clique em OK.Etapa 3 - Importe (Ctrl + R) a primeira imagem para o palco. Enquanto a imagem ainda está selecionada, centralize-a no palco (Crtl+K)Etapa 4 - Agora, enquanto a imagem ainda está selecionada, pressione F8 (Converter para Símbolo) para converter esta imagem em um símbolo de clipe de filme> nome: imagem_mcEtapa 5 - Clique agora no quadro 60 e pressione F6-chave. Etapa 6 - Depois, vá para o painel propriedades abaixo do palco. À direita, você verá o menu COR > Selecione Alfa e coloque em baixo para 0%. Etapa 7 - Clique com o botão direito em qualquer ponto da área cinzenta entre os quadros 1 e 60 na linha de tempo e escolha Criar interpolação de movimento a partir do menu que aparece. Etapa 8 -Dê um clique duplo sobre camada 1 e renomeie para image1. Depois disso, criar uma nova camada acima da camada 1 e *nome > image2. Etapa 9* - Clique no quadro 60 da camada 2 e pressionar F6-chave. Depois disso, enquanto ainda estiver no quadro 60 da camada 2, importe (Ctrl + R) a segunda imagem. Enquanto a imagem está ainda selecionada, pressione F8 (Converter para Símbolo) para converter esta segunda imagem em um símbolo de clipe de filme> *nome: image2_mc* Etapa 10 - Colocar a segunda imagem sobre a posição, como é mostrado na figura abaixo! Etapa 11 - Clique agora no quadro 100 de camada 2 e tecle F6-chave. Etapa 12 - Voltar agora o quadro 60 e repita o passo 6 > clique uma vez sobre a imagem para selecionar > > painel propriedades abaixo do palco > menu COR > escolha alfa e coloque em baixo para 0%. Etapa 13 - Clique com o botão direito em qualquer ponto da área cinzenta entre os quadros 60 e 100 e escolha criar interpolação de movimento a partir do menu que aparece. Etapa 14 - Voltar agora a imagem 1, clique no quadro 100 e pressione tecla F5 (inserir quadro estático). Agora teste seu filme!! EXERCÍCIO 18 - BANNER - DESENHO MOÇA Etapa 1: Localize a imagem abaixo> clique aqui > desenho moça Etapa 2 :Crie um novo documento flash. Largura do seu documento de 160 pixels e a altura de 240 pixels. Selecione qualquer cor como cor de fundo. Defina seu filme coma taxa para 26 e clique em OK. Etapa 3 : Escolha agora Arquivo> Importar> selecione a imagem e clique em abrir (Crtl+R) Etapa 4 :Centralize a imagem no palco (Crtl+K). Depois disso, enquanto a imagem ainda está selecionada, pressione F8 (Converter para Símbolo) para converter esta imagem em um símbolo de clipe de filme. Etapa 5 : Com a Ferramenta de Seleção (V) dê um duplo clique sobre camada 1 e renomeie para foto. Etapa 6 : Clique agora em frame 30 e 50 e pressione F6-chave. Etapa 7 : Voltar agora para o primeiro quadro, ferramenta seta (V) e clique uma vez sobre a imagem para a selecionar. Depois, vá para o painel Propriedades abaixo do palco. À direita, você verá o menu COR. Selecione TONALIDADE e fazer as adaptações do seguinte modo: Faça isso também no quadro 30. Etapa 8: Clique com o botão direito em qualquer lugar em que passou a área cinzenta entre 30 e frame 50 sobre a a linha do tempo e escolha Criar interpolação de movimento a partir do menu que aparece. Etapa 9: Crie agora uma nova camada acima da camada foto e dê o nome de MÁSCARA. Etapa 10 : Selecione agora máscara camada, e com a Ferramenta Retângulo (R) desenhar um retângulo com 200 x 250 px e colocá-la abaixo da foto. Etapa 11: Selecione agora quadro 30 da camada máscara e pressione F6-chave. Etapa 12 : Agora, enquanto ainda estiver no frame 30, mover o retângulo sobre a imagem. Veja a foto abaixo! Etapa 13 : Voltar agora de novo sobre o primeiro frame. Após isso, vá para o painel propriedades abaixo do palco. No lado esquerdo, você verá uma Interpolação no menu. Selecione forma sobre ele. Etapa 14 : Selecione agora camada MÁSCARA e converta para uma máscara clicando com o botão direito e selecionando máscara. EXERCÍCIO 19 - CRIANDO BOTÕES 1 OBS: para adicionar uma ação > clique no sinal de + no painel ações e escolha a ação correspondente 1 - Vamos simular um botão que remeta para a seção de contato de um site. Comecemos, então, criando retângulo qualquer e escrevendo sobre ele Contato. 2 - Em seguida, clique sobre a figura, segure e arraste o mouse por sobre ela para que, assim, selecionemos o retângulo e o texto. 3 - Agora vamos transformar isso em um botão propriamente dito: clique com o botão direito do mouse e, em seguida, F8 > Converter em Símbolo. 4 - Feito isso, selecione a opção Botão da janela que se abriu e nomeie o botão > vamos chamá-lo de botão tutorial. Clique em OK. 5 - Já criamos um botão, agora vamos editá-lo. Para isso, dê um duplo clique sobre ele para entrarmos na área de edição de botões. 6 - Até então só temos funcionando o quadro Para cima. Para colocar os demais em funcionamento, selecione todos com o mouse e tecle F6 (quadros-chave). Assim, teremos a mesma imagem repetida em todos os quadros. 7 - Agora vamos trabalhar o quadro Sobre. Clique nele para que possamos editá-lo. 8 - Vamos alterar o texto para a frase Fale com a gente. Assim, quando passarmos o mouse sobre o botão escrito Contato, ele mostrará esta segunda fase. 9 - Vamos editar o quadro Para baixo. Selecione-o clicando sobre ele. 10 - Copie e cole o texto que escrevemos no quadro Sobre e altere a cor do retângulo. Vamos colocar um tom de cinza. Essa é a cara que nosso botão terá quando for pressionado. 11 - Como, no passo 6, copiamos o quadro inicial para todos os outros, já temos um área de atuação definida e não precisamos alterar nada aqui. 12 - O próximo passo é clicar duas vezes do lado de fora do botão para sair de sua área de edição. 13 - Determine o que o botão deve fazer. Neste caso, fingiremos que existe uma área de contato já pronta e que ele deverá nos remeter para lá. Clique com o botão direito sobre o botão e, em seguida, em Ações. 14 - Na janela ações, clique em controle do filme > 2 vezes em > go to 15 - A seção que se abriu é onde definimos a seção e o quadro para o botão deve remeter. Para isso, basta digitar o número do quadro em questão. Vamos digitar 10 só para servir de teste. 16 - Nosso botão está pronto. Vamos testá-lo teclando Crtl+enter. Passe o mouse sobre ele, clique e veja como funciona. EXERCÍCIO 20 - CRIANDO BOTÕES 2 1 – Abra um novo arquivo > Inserir > Novo símbolo > botão > NOME: botao1 > 2 – Desenhe uma bola azul > 48 X 48 > gradiente azul2 – Clique duas vezes sobre a bola para selecionar polígono e contorno> Crtl+D ou editar > duplicar para duplicar a bola > com as setas do teclado, arraste a bola duplicada para o lado totalmente3 – Com a bola selecionada > Modificar > Transformar > girar e rotacionar: Escala: 90 – Rotação: 0 4 – Com as setas do teclado arraste a cópia da bola para o meio da primeira bola > selecione as duas bolas > Crtl+G ou modificar>agrupar para agrupar as duas bolas, tornando-as um só polígono > Selecione o botão > Crtl+K para centralizar no palco 5 - Digite em branco e arial Black no botão a palavra ENTRE > tamanho 12 ou 14 e coloque no meio do agrupamento dos polígonos. 6 – Selecione na linha do tempo os estágios SÔBRE/PARA BAIXO/ ÁREA> F6 ou inserir quadros-chaves (nos três estágios do botão) 7 –Selecione na linha de tempo só o estágio SOBRE > (botão tem que está selecionado): > modificar > transformar > girar e rotacionar > Escala: 120 – Rotação: 0 8 – Agora, selecione só a palavra ENTRE > com a ferramenta texto > troque a cor do texto para amarelo 9 – Selecione na linha de tempo o estágio PARA BAIXO > modificar > transformar > girar e redimensionar: Escala: 80 – Rotação: 0 10 – Selecione a palavra ENTRE > com a ferramenta texto > altere a cor do texto para verde. 11 – Deixe o estágio ÁREA como está, ou seja, igual ao estado PARA CIMA 12 – Crtl+Enter para testar a animação > passe o mouse sobre o botão. EXERCÍCIO 21 - PEQUENO BANNER ANIMADO Etapa 1 Primeiro de tudo, localize as imagens para este exercício: foto 1 - foto 2 - foto 3 Etapa 2 Abra um novo documento Flash, selecionando Arquivo> Novo> clicando em ok. Definir as dimensões de seu filme flash com 430 por 200 pixels e definir a velocidade (quadros por segundos) a 32 fps. Selecione branco como cor de fundo e clique em OK. Etapa 3 Selecione Arquivo> Importar> Importar para biblioteca. Encontre as três fotos (photo1, photo2 e photo3) e shift-clique para selecionar todas elas. Em seguida, clique em Abrir. Se você agora abrir a biblioteca (tecla Ctrl + L ou F11) você vai ver as três fotos que foram importadas. Etapa 4 Com a Ferramenta de Seleção (V), e usando o "arrastar e soltar" passe a primeira foto da biblioteca para o palco. Etapa 5 Com a foto ainda selecionada, centralize-a no palco (Crtl+K). Depois disso, com a foto ainda selecionada, pressione F8 (Converter para Símbolo) para converter em um clipe de filme > NOME: foto1 Etapa 6 Dê um clique duplo agora a camada 1 > renomeie para foto1. Após isso, clique no frame 15 e 30 e pressione F6-chave. Ainda no quadro 30, com Ferramenta de Seleção (V) clique na foto para selecioná-la > vá para o painel propriedades, à direita, você verá o menu COR. > Selecione Opções sobre o mesmo, clique no botão Configurações > avançadas > abre um painel > definir as seguintes opções: Faça isso também para o primeiro quadro. Etapa 7 Clique com o botão direito em qualquer ponto da área cinzenta entre os quadros 1 e 15 e 15 e 30 na linha do tempo, e escolha > criar interpolação de movimento. Etapa 8 Criar uma nova camada acima da camada foto1 com o nome de foto2. Etapa 9 Clique no quadro 25 da camada 2 e pressione F6-chave. Após isso, com a Ferramenta de Seleção (V), e usando o "arrastar e soltar", passar à segunda foto da biblioteca para o palco. Etapa 10 Repita o passo 5 > alinhar, menu modificar e converta em símbolo clipe de filme > NOME: foto 2 Etapa 11 Clique agora nos quadros 40 e 55 e pressione F6-chave. Etapa 12 Selecione o quadro 55, repita o passo 6 (propriedades > cor). Faça isso também para o quadro 25. Etapa 13: Clique com o botão direito em qualquer ponto da área cinzenta entre 25 e 40 e quadro 40 e 55 na linha de tempo e escolha Criar interpolação de movimento a partir do menu que aparece. Etapa 14 Criar uma nova camada acima da camada foto2 com o nome de foto3. Etapa 15 Clique no quadro 50 nessa camada e pressione F6-chave. Após isso, com a ferramenta de Seleção (V), e usando o "arrastar e soltar", passar a terceira foto da biblioteca para o palco. Etapa 16 Repita o passo 5 (alinhar, menu modificar e converta em símbolo clipe de filme > NOME: foto 3 Etapa 17 Clique agora nos quadros 65 e 75 nesta camada e pressione F6-chave. Etapa 18 Selecione o quadro 75, repita o passo 6 (propriedades > cor). Faça isso também para o quadro 50. Etapa 19 Clique com o botão direito em qualquer ponto da área cinzenta entre 50 e 65 e entre os quadros 65 e 75 na linha de tempo e escolha Criar interpolação de movimento a partir do menu que aparece. Ctrl+enter > testar o filme!! todos >arquivos de som/vídeos/botões - (zipados) EXERCÍCIO 22 - ADICIONANDO SONS EM BOTÕES 1 – Abra o arquivo > clique e acesse o arquivo> navegando_som_botoes.fla 2 – Clique 2 vezes no botão PRINCIPAL para editá-lo > insira uma nova camada > renomeie para SOM. 3 – Nesta camada crie um quadro-chave (F6) no estado para baixo > importe para a biblioteca o arquivo > acesse > 4 – Arraste o som da biblioteca para o botão PRINCIPAL e retorne para a cena 1 5 – Teste o efeito > crtl+enter 6 – Repita o procedimento com todos os botões: PÁGINA 1 – PAGINA 2 – PÁGINA 3 Teste seu filme > Crtl+enter > clique nos botões. EXERCÍCIO 23 - ADICIONANDO SOM EM UMA ANIMAÇÃO 1 – Abra o arquivo > clique e acesse o arquivo> animação_som01.fla 2 – Importe para a biblioteca o arquivo de som > som01.wav 3 – Clique duas vezes no clipe de filme do palco para editá-lo 4 – No editor de símbolo do clipe > insira nova camada > renomeie para SOM 5 – Nesta camada > insira um quadro-chave (F6) no quadro 13 (momento em que a bola toca no chão) 6 – Arraste o símbolo do som para o palco > na linha de tempo SOM aparece um sinal preto referente ao arquivo do som 7 – Volte para a cena 1 > insira um quadro estático no quadro 2 (F5) 8 – Teste sua animação EXERCÍCIO 24 - ADICIONANDO ARQUIVOS DE VÍDEO 1 – Abra um novo arquivo na flash > configure: 350 X 260 > fundo: azul claro 2 – Menu arquivo > importar para a biblioteca > acesse o arquivo> aqualung.wmv. Na caixa de diálogo de importação do filme > marque: sincronizar vídeo e importar áudio 3 – Abra o biblioteca (Crtl+L) > arraste o filme para o palco > centralize-o 4 – Insira uma nova camada > insira um quadro chave no último quadro da animação 5 – Neste último quadro > abra o painel ações (F9) > clique 2 vezes na ação > controle do filme > stop. 6 - Teste seu filme. EXERCÍCIO 25 – MÚSICA CONTÍNUA 1 – Abra o arquivo > clique aqui> musica2.fla 2 – Temos um clipe de filme pronto – sem som 3 – Importe para a biblioteca o arquivo de som > loop02.wav 4 – Menu arquivo > importar para biblioteca >no palco dê um duplo clique no clipe de filme para editarmos o símbolo 5 – Crie uma nova camada > nome > som 6 – Com a camada som selecionada > Abra a biblioteca > Crtl+L > e arraste o som para o palco 7 – Clique na linha de tempo da camada som > no painel de propriedades > digite 1.000 em repetir 8 – Volte para a cena 1 > teste seu filme EXERCÍCIO 26 – MÚSICA CONTÍNUA Primeiro temos q encontrar um som em mp3, existem vários sites q disponibilizam.. se vc tiver algum no próprio computador.. pode usa-lo , copie ele para o DESKTOP e renomeie ele para musica . ficara assim "musica.mp3" 1.abra o flash e crie um arquivo novo (CTRL+N). iremos usar somente action script na linha de tempo principal, então selecione o primeiro quadro chave e pressione a tecla (F9) para abrir a janela de actions. vamos usar o seguinte código. (obs eu coloco a action em img, para forcar voces a escreverem mesmo hehehe, assim fica mais fácil para vcs pegarem o jeito) http://www.tutorzone.com.br/flash/mus1.gif 2. salve seu arquivo no mesmo lugar onde voce colocou o "musica.mp3", no meu caso que esta no desktop, salvei meu flash la tbm. De um CTRL+ENTER , e vc ouvira a musica tocando, pronto sua musica esta sendo carregada dinamicamente. 3. agora iremos criar um botao para parar a musica e outro para voltar a tocar. no palco, crie 2 textos , um escrito "PLAY" e o outro escrito "STOP" , (ambos sem aspas). http://www.tutorzone.com.br/flash/mus2.jpg (obs no meu caso usei a fonte INDIGO JOKER, mas pode ser qq uma) 4.vamos criar um retângulo do tamanho da palavra "PLAY", selecionar e tranformá-lo em botão (F8), distanciando ele http://www.tutorzone.com.br/flash/mus2.jpgde botao_bt 5. agora nosso retângulo esta sobrepondo nossa palavra... vamos transformar esse botão em um botão invisível, para isso de dois cliques nele, vc entrara na edição do botão, e a time line agora eh diferente, existe agora 4 opcões que são: OPEN = normal OVER = quando o mouse tiver em cima DOWN = quando vc clicar com o mouse em cima HIT = área do botão vamos clicar no quadro chave onde esta "UP" e iremos arrastar ate o quadro "HIT". http://www.tutorzone.com.br/flash/mus3.jpg depois disso de 2 clique em qualquer área do palco para voltar ao palco principal, e repare que nosso botão agora esta azul, o que indica que ele não aparecera no nosso filme, copie ele (CTRL+C) e cole (CTRL+V), arraste esse novo botão para cimahttp://www.tutorzone.com.br/flash/mus5.jpg do stop, ficara assim: 6. selecione o botão que esta em cima do "STOP", pressione (F9) para abrir a janela de action e coloque a seguinte action script: http://www.tutorzone.com.br/flash/mus6.jpg 7. selecione o botão que esta em cima da palavra "PLAY" e coloque a seguinte action: http://www.tutorzone.com.br/flash/mus7.jpg e pronto teste seu filme CTRL+ENTER , e teste os botões o play toca e o stop para (ohhhhhh) RESULTADO FINAL: http://img.photobucket.com/albums/v723/spiderlinux/musica.swf *obs, como não fiz um carregador para a musica ela demora um pouco para iniciar, mas depois de carregada, ela toca numa boa

Baixar Sem Virus

Cursos de Informática Grátis www.megainforcursos.com

Utilidades

Blogger news

Categorias

Arquivos do Blog

Os melhores Cursos Interativos você encontra na Mega Infor Cursos

Mega Infor Cursos

Sistema Interativo para Escolas

Lançamento 2012 Curso de Word Office completo!

Conheça nosso Sistema Interativo