KEN AWAMURA (130 pts)

SYDNEY GANHO (60 pts)

MANGOOST (80 pts)

DEN IVANOV (260 pts)

GABRIEL SPORCH (53 pts)

DAAFY (55 pts)

NETO LEAL (116 pts)

IRAPUAN MARTINEZ (45 pts)

ALEXANDRE PORTO (1281 pts)

JONAS GALVEZ (521 pts)

DAUTON JANOTA (255 pts)

GÉRIO (93 pts)
Treinamento PontoFlash de Flash e ActionScript

Como instanciar movieclips duplicados (Duplicate Movieclip)?

Como fazer um preloader móvel, que corre atrás do mouse?

Tem algum truque para diminuir o tamanho do meu site?

Como que eu faço um texto tremer no Flash?

Como fazer um preloader bem simples?

Como faço para contar o tempo de duração de uma corrida num labirinto?

Como alterar a cor de um movieclip no mouseOver via actionscript?

Preciso remover todas as arrays que tenho em um movieclip?

Quero imprimir o conteúdo de um campo de texto e não somente a parte que está na tela.

Como posso rotacionar algum objeto?

Posso criar um link dentro de uma caixa de texto?

Como posso fazer com que um objeto do flash possa ser movido pela pessoa que esta vendo a página?

Preciso rodar um AVI no flash com controladores: PLAY, PAUSE, STOP.

Quero alterar a ordem de movimentação da tecla tab num formulário.
Clica nuaicon - Photoshop 6

Menu Popup

Integrando o Flash com Tecnologias Externas.

Criando um Editor HTML com o MM Flash

Plugins variados para seu trabalho em design

Looping.

Separar mensagens das listas das pessoais, usando o Outlook

Primeiros passos - Camadas e outras coisas

Linha que segue o mouse.

Download de arquivos com a classe File Reference

Duplicate Movieclip.

Clique Direito
Gravar dados

Lacraia

Caleidoscópio

Ondas

Spiral

Texto html

Triangulos

Drag limitado

Drag txt

Multiple text efects

Giratoria

Old film countdown
HOME | TUTORIAIS
Componente Slideshow
por Helen Triolo

Introdução

Este tutorial inclui um componente simples de Slideshow, que pode ser arrastado e utilizado em qualquer filme Flash para carregar, em seqüência, um conjunto de imagens JPGS e exibi-las com transições fade-in entre os slides. Eu queria alguma coisa na qual pudesse especificar quais JPGS usar, a duração da exibição de cada slide, quanto tempo a transição entre os slides deveria durar, em qual profundidade o Slideshow seria carregado e se a exibição deveria entrar em loop ou parar ao chegar ao último slide.

Para isso, cada uma das seguintes propriedades deverá ser fornecida ao componente Slideshow:

1 - slides_arr, Conjunto contendo as urls das jpg/swfs a serem carregadas
2 - slideDepth, Unidade (número inteiro) especificando a profundidade para iniciar o carregamento dos slides (incrementada a cada slide exibido)
3 - fps, Unidade especificando a relação de quadros por segundo do filme de modo que o setInterval possa ser emulado
4 - nFrames, Unidade especificando o número de quadros necessários para manter cada slide visível
5 - alphaIncr, Número especificando a mudança do alfa por quadro
6 - repeat, Especificação booleana determinando se o Slideshow deve entrar em loop

Eu poderia, como alternativa, ter especificado o período de tempo de espera ao invés do número de quadros e o tempo global para os fade-ins ao invés da quantidade estabelecida para o alfa para aplicar em cada quadro, e, então, ou utilizar setInterval, ou calcular o número certo de quadros para um loop no onEnterFrame. Neste exemplo, usei um setInterval para carregar, que executa cada milisegundo 1000/fps (uma vez por quadro, embora não precise realmente ser isto), e um onEnterFrame para as transições, porque este requer poucos cálculos.

Também quis que meu componente Slideshow me dissesse:

1 - quando cada slide foi carregado (no caso de querer que meu filme principal indique isso),
2 - quando todos os slides foram carregados (assim eu posso começar o Slideshow imediatamente, alternadamente, ou esperar alguma animação de introdução terminar e então começar o Slideshow), e
3 - quando todos os slides tenham sido mostrados (assim o filme principal pode fazer, em seguida, qualquer coisa que necessite).

Assim, o Slideshow deve estar habilitado como um broadcaster (transmissor de mensagens) e transmitir mensagens para cada um desses eventos. Fiz isto utilizando estes métodos de transmissão incorporados:

1 - ASBroadcaster.initialize(b_obj), que configura o b_obj como transmissor
2 - b_obj.addListener(l_obj), que configura o l_obj para receber as transmissões do b_obj
3 - b_obj.broadcastMessage("routineName", parameters), que transmite uma mensagem que todos os receptores irão "ouvir" e que pode agir nos que tiverem uma função l_obj.routineName(parameters) configurada.

O componente Slideshow

O Slideshow é simplesmente um movieclip na biblioteca. Ele contém um código (no frame 1) que define a classe do Slideshow. Este código é colocado entre as instruções #initclip e #endinitclip e assim ele estará disponível tão logo o movieclip Slideshow seja anexado.

Definir a classe Slideshow

Esta é a função construtora para a classe Slideshow. Eu também configurei o Slideshow como um transmissor usando o ASBroadcaster incorporado no Flash MX, e iniciei o carregamento das jpgs com uma chamada para loadInSeq. Estas coisas devem ser feitas apropriadamente em uma rotina init separada, mas, porque eu sempre quero que elas sejam feitas quando um Slideshow é criado - e para simplificação do código - , eu as incluo no construtor.

Slideshow = function() {
   ASBroadcaster.initialize(this);
   this.loadInSeq(0);
}

Fazer a classe Slideshow herdar da classe MovieClip

Isto é feito em todos os componentes que são para funcionar como movieclips, de modo que todas as propriedades e métodos da classe MovieClip estarão disponíveis para a nova classe.

Slideshow.prototype = new MovieClip ();

Definir o método que permitirá as jpgs serem carregadas seqüencialmente

O método loadInSeq toma um parâmetro, i, que especifica o índice de slides_arr que contém o slide a ser carregado em seguida. Quando esse slide tiver sido completamente carregado (seu _width > 0), o método é chamado novamente com i+1. Outra coisa que acontece quando um slide tiver sido completamente carregado é que uma mensagem é enviada para sinalizar isto, de tal modo que qualquer outro objeto que for inscrito como receptor do objeto Slideshow pode agir de acordo. Quando todos os slides tiverem sido carregados, outra mensagem é transmitida.

Slideshow.prototype.loadInSeq = function(i) {
   var slide = this.createEmptyMovieClip("slide" + i, this.slideDepth++);
   // hide all slides loading on top of first one
   if (i > 0) slide._alpha = 0;
   slide.loadMovie(this.slides_arr[i]);
   checkLoadedID = setInterval(function(i, mc) {
   if (mc["slide" + i]._width > 0) {
      mc.broadcastMessage("onSlideLoaded", i);
      clearInterval(checkLoadedID);
      // start next one loading (if not last)
      if (i < mc.slides_arr.length-1) {
         mc.loadInSeq(i + 1);
      } else {
         mc.broadcastMessage("onAllSlidesLoaded");
      }
   }
   }, 1000/this.fps, i, this);
};

Definir o método que vai iniciar o show

Este método assume que o primeiro slide está sendo exibido correntemente e o mantém no lugar por nFrames (número de quadros) antes de começar a transição para o próximo slide.

Slideshow.prototype.beginTransitions = function() {
   var holdTimeMs = 1000 * this.nFrames / this.fps;
   holdID = setInterval(function(mc) {
      mc.activateInSeq(0);
      clearInterval(holdID);
   }, holdTimeMs, this);
};

Definir o método que fará a transição em fade-in e, ao mesmo tempo, mantê-lo no lugar

Neste método, i é primeiro incrementado (++i) para obter o próximo slide a ser mostrado. Este slide é colocado sobre o slide corrente, com o método swapDepths e seu alfa é configurado para 0. Então em cada execução de quadro, o alfa do slide do topo é incrementado pela quantidade especificada na propriedade alphaIncr. Quando isto for > 95, um novo loop onEnterFrame começa, o que mantém o slide corrente em exibição por nFrames quadros, e então começa uma nova transição para o próximo slide.

Observe que, se você quiser que alguma coisa aconteça durante a transição dos slides (como, por exemplo, um indicador de qual slide está sendo mostrado), você poderá adicionar uma mensagem a ser enviada para este código.

Slideshow.prototype.activateInSeq = function(i) {
   if (++i < this.slides_arr.length) {
      this["slide" + i]._alpha = 0;
      this["slide" + i].swapDepths(this.slideDepth++);
      this.onEnterFrame = function() {
      if (this["slide" + i]._alpha >= 95) {
         var counter = this.nFrames;
         this.onEnterFrame = function() {
            if (!counter--) {
               delete this.onEnterFrame;
               this.activateInSeq(i);
            }
         };
      } else {
            this["slide" + i]._alpha += this.alphaIncr;
         }
      };
   } else {
      if (this.repeat) this.activateInSeq(-1);
      else this.broadcastMessage("onShowOver");
   }
};

Fazer do movieclip Slideshow um objeto da classe Slideshow

Object.registerClass("slideshow", Slideshow);

O filme principal

O filme principal simplesmente constrói o conjunto de fotografias e cores, anexa o componente Slideshow, especificando cada um de seus parâmetros, e então utiliza rotinas para manejar quaisquer mensagens enviadas, às quais ele deseje responder. Aqui está o código:

Construa os conjuntos para definir fotografias e cores

pic_arr = ["flower_pink.jpg", "flower_yellow.jpg", "flower_purple.jpg", "flower_red.jpg", "flower_orange.jpg"];
color_arr = [0xf75eb0, 0xf6f818, 0xbb57c8, 0xdf1734, 0xfe9809];

Anexe o Slideshow, nomeie-o e passe os parâmetros que ele necessita

Neste código, anexei o movieclip Slideshow para o blank_mc (em uma camada sob a moldura que quero mostrar em volta dos slides) e lhe dei o nome de instância de uuShow. Especifiquei que o quero colocado em (0, 0), invisível durante o carregamento, filme com taxa que quadros de 12 fps, número de quadros para manter cada slide sendo exibido igual a 24, mudança de alfa a cada 10 quadros, iniciar a uma profundidade de 50 (nenhuma boa razão para isso; trata-se de uma sobra da minha versão original, na qual anexei o Slideshow para _root ao invés de um mc em branco), e slideshow em loop.

blank_mc.attachMovie("slideshow", "uuShow", 1, {
   _x:0, _y:0, _visible:false, fps:12, nFrames:24, alphaIncr:10,
   slides_arr:pic_arr, slideDepth:50, repeat:true}
);

Configurar os receptores (listener) e funções para manipular eventos objetivos da recepção

// tell blank_mc to listen for events broadcast by uuShow
blank_mc.uuShow.addListener(blank_mc);

Uma vez que o blank_mc é um receptor para o uuShow, ele pode ter rotinas para manejar qualquer dos eventos de transmissão do uuShow's que desejarmos que ele maneje. Neste filme, quis dar algum tipo de indicação de quando um slide foi carregado. Assim, criei 5 pontos pretos no filme que se tornam na cor associada com o slide quando este é carregado. (Se você clicar Refresh e olhar para os pontos na parte inferior à direita do filme, vai ver com que rapidez o slide está sendo carregado - bem rápido, provavelmente - , desde que eles já estão em seu cache agora e não tem que começar com uma figura muito grande). Este código configura a rotina onSlideLoaded do blank_mc para fazer isto:

blank_mc.onSlideLoaded = function(i) {
   (new Color(this._parent["dot"+i+"_mc"])).setRGB(color_arr[i]);
};

Uma vez que todos os slides tenham sido carregados, quero tornar a exibição visível e começa-la com uma chamada para beginTransitions.

blank_mc.onAllSlidesLoaded = function() {
   this.uuShow._visible = true;
   this.uuShow.beginTransitions();
};

Existe também uma rotina em comentário para o onShowOver, que será ativada caso repetir seja configurado para falso nos parâmetros passados para o uuShow. Existem outras linhas em comentário no filme que, se não forem tomadas somente como comentário, rastrearão o carregamento e o progresso da exibição de cada slide na janela de saída. Para usar o componente em outro filme, basta arrastá-lo da biblioteca deste filme para seu outro filme, apagá-lo do palco, e construir seu próprio código para anexar ao Slideshow (com o attachMovie, como acima) e manipular cada um dos eventos (configurando seu próprio blank_mc.onSlideLoaded, blank_mc.onAllSlidesLoaded, e/ou configurando, como necessário, as rotinas blank_mc.onShowOver, e substituir o blank_mc com tudo que você quiser anexar ao Slideshow).

Baixe aqui o exemplo do tutorial
Tradução: Sérgio Ramalho



Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
0 comentário