MUZAK (45 pts)

BÁRBARA TOSTES (64 pts)

RICARDO TAKAHASHI (180 pts)

LUI FERNANDO (151 pts)

ZECA BALA (45 pts)

DENIS CARAVALHO (85 pts)

IRAPUAN MARTINEZ (45 pts)

ILVA RUDEV (90 pts)

JOTA LAGO (40 pts)

ALEXANDRE PORTO (1281 pts)

RICARDO TEIXEIRA (40 pts)

EDUARDO CARREGA (150 pts)
Treinamento PontoFlash de Flash e ActionScript

Preciso de um exemplo de um efeito de vibração?

Como mudar a cor de uma imagem dinamicamente via ActionScript?

Os arquivos do Flash vão para o cache do browser?

Como colocar links em campo de texto estáticos (static text)?

Como fazer um rastro (mouse trial), mas que as cópias ainda variassem o alpha.

Como fazer com que a seqüência dos campos sejam seguidos ao se pressionar a tecla TAB?

Como movimento e diminuo o tamanho de um texto em uma animação?

Como faço para ter um efeito Lupa

Como se faz para colocar um .gif seguindo o mouse?

Alguém pode me indicar algum programa ou alguma forma de converter arquivos MIDI em WAVE?

Alguém conhece alguma maneira de mostrar dentro do flash uma imagem que está em outro provedor?

Como fazer uma animação com um texto sendo digitado?

Tamanho de banners

Como controlar uma cena com um botão dentro do Movieclip?
Jogo da Forca

Looping.

Desenhando interativamente no Flash 5

Flash Intro - Aspectos Básicos do MX

Interpolação de movimento

Como arredondar os cantos de uma foto no Fireworks.

RIA, Macromedia Flex e Laszlo Presentation Server

Flash Studio Pro: Dando poderes ao Flash

CD Record (um player com clips arrastáveis).

Animação com TextFields Dinâmicos

Objeto Color

Objeto Movieclip - Endereçamento (segunda parte)
Menu popop de pastas 2

Lens flare

Lights many 2

Scroll over F5

Texturedtriangle

Magnetismo

Tocha 2

Drag Image

Pintar2

Rater2

Hidden menu

Combobox com interação em ASP
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