Slide de Imagens para sites e cd-roms

Slide Show usando intervalos e menu de acesso rápido,

usando funções e intervalos de funções.

Crescem mais e mais a dúvida de como fazer um arquivo

de slides para mostrar figuras, para apresentações em sites ou

multimídia, então a seguir criaremos um sisteminha desse, usando

e abusando de funções e intervalos com a ação setInterval,

criaremos um campo onde se mostrarão os slides, e um menu de acesso rápido

ao lado esquerdo, com uma rolagem para mostrar todas as fotos.

Preparação do trabalho:

Para esse trabalho precisaremos de algumas imagens, eu decidí

fazer aquí com 28 imagens, mas tanto faz o numero, sería interessante

ser no mínimo 20, então vocês só precisam dessas

imagens e do Flash MX instalado para concluir esse trabalho.

Faremos o seguinte então, vamos importar todas as imagens

para a Biblioteca, clicando em File / Import /Import to library, daí

o processo é simples, pois é só selecionar as imagens na

pasta desejada e clicar em abrir.

Vamos clicar em Insert / New Symbol / Movieclip, e chamar esse

movieclip de Menu Rápido, e dentro dele vamos apertar a tecla F11 para

abrir a biblioteca e vamos chamar todas as miniaturas das imagens para o palco

e formar duas fileiras das miniaturas:

Acima não mostram todas, mas ao total são 25 miniaturas

das imagens que irão aparecer no slide, então nesse movieclip,

vamos criar mais um layer com o nome de botões, nele vamos desenhar um

retangulo que cubra uma dessas imagens, sem seguida vamos seleciona-lo, apertar

a tecla F8 e transforma-lo num botão, após isso, dê um duplo

clique no botão para edita-lo, e de um clique no primeiro frame dele

(UP) e o arraste para o quarto frame (HIT):

Após fazer isso, deveremos colocar os botões encima

de cada imagem, para fazer isso mais fácil, é só duplicar

ele na tela, clicando sobre ele com a tecla ALT apertada e arrastando ele na

tela, deveremos um a um, cobrir todos os thumbs com botões:

Na imagem acima só temos 3 thumbs cobertos, notem que

o botão transparente por cima, deixa a miniatura da imagem meia esverdeada,

repitam até cobrirem todos as miniaturas:

Agora é hora de colocar as ações nesses

botões, no primeiro botão lá decima, da esquerda, vamos

dar um clique nele e colocar a seguinte ação:

on (release) {

_root.slide.parar();

_root.slide.gotoAndStop(2);

}

Isso porque depois criaremos um outro movieclip onde as imagens

serão exibidas em sequencia frame a frame, a partir do segundo frame,

então no botão ao lado, coloquem a ação:

on (release) {

_root.slide.parar();

_root.slide.gotoAndStop(3);

}

Notem que só alterei o numero do frame na ação

gotoAndStop, então sigam essa sequencia até a ultima imagem, sepre

descendo e aplicando as ações da esquerda pra direita.

Ao final de colocar as ações para todos os botões,

vamos criar um novo layer acima de todos, nele daremos o nome de mascara, nele

vamos desenhar um retangulo que deverá ser a area que os botões

aparecerão na tela:

Então depois de desenhado esse quadrado, vamos trancar

esse layer, vamos clicar com o botão direito do mouse e ativar a opção

"Mask":

Então todo esse grupo de botões só aparecerá

dentro desse quadrado que é uma mascara, do que está embaixo,

provavelmente, ela só pegará o primeiro layer debaixo como referencia

da mascara:

Jogue o layer imagens para cima do layer botões para ele

ficar verdinho, e depois jogue para baixo denovo, o resultado será esse:

Ao fazer isso, vocês notarão no palco, que só

aparecerá a parte do movieclip que está dentro da máscara:

Agora vamos fazer uma animação que faça

com que o grupo de imagens e de botões subam, vamos trancar todos os

layers, e destrancar apenas o layer dos botões e o layer das imagens,

cliquem no palco e apertam a tecla Ctrl + A, ele vai selecionar tudo no palco

que estiver destrancado (botões e imagens), então feito isso,

segurem a tecla Shift e com a seta para baixo empurre os dois grupos para baixo

até ficar nessa posição pronta para começar a subir:

Agora selecionem o primeiro frame do layer botões e o

primeiro frame do layer imagens, com os dois selecionados, segurem a tecla ALT

e arrastem os frames do frame 1 para o frame 50 para fazer uam cópia,

no frame 50, cliquem no palco e apertem Ctrl + Alt para selecionar os dois grupos,

agora coloquem os grupos para cima até que a ultima miniatura apareça

abaixo da mascara, depois disso selecione todos os frames do layer botões

e imagens e na barra de propriedades, mudem o Tween para Motion:

Cliquem no layer mascara e depois adicionem um novo layer com

o nome de botões de controle, nele criaremos dois botões que controlarão

a subida e a descida do nosso grupo de imagens, desenhem os botões e

salvem como botões colocando um embaixo do outro conforme a figura abaixo:

No botão que tem a seta pra subir, vamos colocar a seguinte

ação:

on (rollOver) {

subida = setInterval(subir, 100);

}

on(rollOut){

clearInterval(subida);

}

E no botão da Seta para descer, vamos colocar a seguinte

ação:

on (rollOver) {

descida = setInterval(descer, 100);

}

on(rollOut){

clearInterval(descida);

}

Por fim, vamos criar mais um layer com o nome ações

e vamos dar a seguinte ação no primeiro frame desse layer:

stop();

function descer(){

nextFrame();

}

function subir(){

prevFrame();

}

Detalhando o código:

No frame criamos duas funções, a função

subir faz o movieclip avançar um frame com a ação nextFrame();

e a função descer, faz o movieclip voltar um frame com a ação

prevFrame();, então com essas funções teremos controle

sobre esse movieclip que sobe e desce nosso grupo de miniaturas de imagens.

No botão que faz ele descer, chamaremos a função

por intervalos, então quando passar o mouse encima do botão, ele

executará a função que faz o movieclip avançar os

frames com intervalo de 100 milisegundos:

descida = setInterval(descer, 100); <<= Esse código

criou um intervalo para a função descer, e demos o nome para esse

intervalo de descida, então para parar esse intervalo, teremos que usar

a ação clearInterval chamando pelo nome que demos ao intervalo

(descida), então no rollOut ( ao tirar o mouse decima do botão)

retiramos o intervalo com a ação:

clearInterval(descida);

A velocidade desse scroll é controlada pelo numero do

setInterval, se aumentar ele aumenta o tepo de espera entre um intervalo e outro,

portanto ficará mais lento, se quiser mais rápido, basta diminuir

o valor do intervalo, por exemplo de 100 para 20.

Dica:

Quanto maior for o numero de frames desse movieclip, melhor ficará

a animação, pois a rolagem para fica e pra maixo ficará

com menos cortes, experimentem usar frames maiores que 50, como 100, ou 150

por exemplo, aquí coloquei 50, pra não ocupar muito a tela com

as imagens dos tutoriais.

A função de subida é igual a da descida,

portanto a mesma explicação pra uma, serve para a outra, se vocês

voltarem para o palco principal e testarem seu filme, ele já estará

funcionando o scroll como este exemplo abaixo:

Voltando para o palco principal, vamos criar mais um layer com

o nome "slide", nele vamos clicar em Insert / New Symbol/ Movieclip

e vamos criar um movieclip com nome de slider.

Depois de clicar em OK, entraremos na timeline do movieclip slide,

voltem para a timeline principal e arrastem esse movieclip slide para o palco,

com ele no palco, dêm um duplo clique nele, para voltar para a timeline

dele, a diferença é que desse modo dará pra ver o palco

por baixo, vamos clicar no segundo frame dessemovieclip, e nesse segundo frame

vamos inserir a primeira imagem correspondente a primeira miniatura do menu:

Vamos usar as linhas guia para colocar o resto das imagens, sempre

respeitando a ordemem que elas aparecem no menu em miniaturas, frame a frame,

é só clicar no próximo frame e apertar a tecla F7 para

criar um frame em branco e arrastar a imagem da biblioteca para o palco, até

o fim das imagens:

Agora vamos criar um novo layer com o nome "Ações"

e vamos colocar nele a seguitne ação:

stop();

function slideshow(){

_root.funcionar = false;

nextFrame();

}

if (_currentFrame == 1) {

comecar = setInterval(slideshow, 2000);

}

function parar(){

clearInterval(comecar);

_root.funcionar = true

}

Detalhando o código:

O que criamos foi uma ação stop(); para o movieclip

não começar reproduzindo, e criamos uma função:

function slideshow(){ <= criamos uma função

com o "nome slideshow"

_root.funcionar = false; <= altera a variavel criada no _root com o nome

de funcionar, que estava com o valor true

nextFrame(); <= faz o movieclip adiantar um frame

}

Criamos essa variavel _root.funcionar, porque essa ação

é a que faz o movieclip reproduzir, então como pra frente criaremos

um botão para fazer ela funcionar, teremos que saber se ela já

está funcionando ou não para não duplicar a função

e acontecer um BUG, então no botão, ele só vai começar

a função se a variavel funcionar estiver em true, ou seja, se

ela estiver parada, pronta pra voltar a funcionar.

if (_currentFrame == 1) { <= criamos uma condição

dizendo que se o frame atual do movieclip for o frame 1 …

comecar = setInterval(slideshow, 2000); <= ele vai criar uma identificação

para o intervalo da função slideshow, para ela se repetir a cada

2 segundos

}

Então quer dizer que ao carregar o movieclip, ele vai

entrar na função slideshow e a cada 2 segundos ( 2000 milésimos

de segundo) ele vai adiantar um frame.

function parar(){<= cria uma função com o nome

de "para" para parar a função slideShow

clearInterval(comecar); <= termina o intervalo que criamos com o ID "comecar"

_root.funcionar = true; <= a variavel funcionar passa agora a ser true, deixando

assim disponivel a função slideshow

}

Agora que fizemos tudo isso, é hora de criar os botões

para voltar uma imagem, parar o slide, recomeçar e adiantar uma imagem,

então criem um novo layer com o nome de "botões" e criem

quatro botões no palco e os posicionem abaixo das imagens, eles serão

inserido no segundo frame:

Então no botão para voltar, colocaremos a seguinte

ação:

on (release) { // ao soltar o botão

if (_currentFrame >= 3) { // Se o frame for maior ou igual a 3

parar(); //Chame a função parar, para parar o slide

prevFrame();// Volte para o frame anterior

}

}

A condição chamada "se o frame for maior ou

igual a tres", é porque a função só deve fucnionar

do frame 3 em diante, pois como as imagens começam no frame 2, o frame

3 só volta pro frame 2, então se no frame 2 a gente voltar, será

para um quadro em branco, então porisso coloquei só pra funcionar

a partir do frame 3.

No botão play, vamos colocar a seguinte ação:

on (release) { // ao soltar o botão

if (_root.funcionar == true) { // Se a variavel funcionar for true

comecar = setInterval(slideshow, 2000); // inicie o intervalo da função

slideshow

}

}

No botão parar, vamos colocar a seguitne ação:

on (release) { // Ao soltar o botão

parar(); // Chame a função parar

}

E finalmente no botão avançar, colocaremos a seguinte

ação:

on (release) { // Ao soltar o botão

parar(); // chama a função para parar o slide

nextFrame(); // Vá para o próximo frame

}

Agora para concluir nosso trabalho, vamos voltar para a timeline

principal e vamos dar um clique nesse movieclip, e dar o nome de instancia para

ele de "slide" sem aspas, isso é para funcionar o comando dado

nos botões do menu rápido:

Relembrando:

Nos botões do menu rapido, usamos a seguinte ação:

on (release) {

_root.slide.parar();

_root.slide.gotoAndStop(2);

}

Então essa ação faz com que o movieclip

slide vá para o frame 2 e pare, e chame a função parar

que tb está no movieclip slide. agora então vocês entendem

o porque que essas ações foram colocadas nos botões.

Então se testarmos nosso filme agora, o nosso resultado

deverá ser esse:

Espero que tenham gostado.

Até a próxima !!!

Gustavo Henrique Carneirinho

Escrito por Gustavo on março 19, 2004. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

22 respostas a Slide de Imagens para sites e cd-roms

  1. não consegui fazer.

  2. pode me passa o arquivo fla.
    agradeço.

  3. Ola seus exeplos não estão aparecendo.
    Teria como me passar o Arquivo fla.

    Abraço.

    vinicius@brothersbsb.com.br

  4. Pode me passar o Fla..

    vlw..

    Abraço.

  5. É sempre interessante ao postar um tutorial extenso como este, colocar também os fontes.

  6. Por favor vc pode me passar o fla?

    leonardomenitti@yahoo.com.br

    Obrigado

  7. Não consegui fazer se alguém tiver o FLA eu agradeço.

    At,

    Alecsandro

  8. Não consegui fazer… Dá errado apartir de colocar a ação no botão… Me encaminha o arquivo .Fla… Tenho interesse em desenvolver o album.

  9. Muito legal esse tutorial =D

    consegui fazer aki e ficou bom, mas

    como faço para colocar as imagens em loop no player~?

    valeu

  10. Olá,

    Também gostaria que alguém me enviasse o FLA…tive o mesmo probleminha que os demais.

    Até….

  11. aquivo fla. por favor

  12. eu consegui fazer a apresentação mas o menu rapido não aparece vc poderia me dar alguma dica ou postar suas imagen denovo que não estão aparecendo

  13. Muito bom! consegui fazer tudo…deu um probleminha mas já resolvi….

  14. Tive problemas para inserir as fonçoes nos botoes
    tem como alguem me enviar o arquivo .fla

    fico no aguardo abraços a todos

  15. Olá,

    Também gostaria que alguém me enviasse o FLA…tive o mesmo probleminha que os demais.

  16. não consegui fazer, pode me passar o arquivo fla.
    agradeço.

  17. vc pode me passar o arquivo fla.

  18. Bruno Eduardo Montibeller

    Muito Bom Cara, Valeu!

  19. naum consigo fazer um slide para envia para minha amiga no orkut parece que a pagina naum carrega
    como eu faço aguardo respostas

  20. Olá Gustavo,
    Não consegui fazer… Você pode me enviar o arquivo .fla

    Grata,

  21. Poderia me passar o fla?
    Obrigado

  22. Excelente. Certinho. Para quem tiver perdido só faltou informar q tem q arrastar o movie clip Menu Rápido da biblioteca para o palco em uma nova camada.
    Vlw Autor, Muito bom.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>