Colocar capa em componentes de UI personalizada de reprodução FLV individualmente

Os componentes de UI personalizada de reprodução FLV permitem personalizar a aparência dos controles FLVPlayback em seu arquivo FLA e permitem que você veja os resultados ao visualizar sua página da Web. No entanto, esses componentes não foram projetados para ser dimensionados. Você deve editar o clipe de filme e o respectivo conteúdo para se de um tamanho específico. Por essa razão, normalmente é melhor ter o componente FLVPlayback no Palco no tamanho desejado, com scaleMode definido para exactFit .

Para começar, basta arrastar os componentes de UI personalizada de reprodução FLV desejados, do painel Componentes, colocá-los no lugar onde quiser, no Palco, e dar a eles nomes de ocorrências.

Esses componentes podem funcionar sem nenhum ActionScript. Se você os colocar na mesma Linha do tempo e no mesmo quadro do componente FLVPlayback e não houver nenhuma capa definida no componente, o componente FLVPlayback se conectará a eles automaticamente. Se você tem vários componentes FLVPlayback no Palco ou se o controle personalizado e a ocorrência FLVPlayback não estiverem na mesma Linha do tempo, será necessário o Action.

Assim que os componentes estiverem no Palco, você poderá editá-los como qualquer outro símbolo. Após abrir os componentes, você poderá observar que cada um está configurado de modo um pouco diferente dos demais.

Componentes Button

Os componentes button têm uma estrutura semelhante. Eles incluem BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton e StopButton. A maioria tem um único clipe de filme no Quadro 1 com nome de ocorrência placeholder_mc. Normalmente é uma ocorrência do estado normal do button, mas não necessariamente. No Quadro 2 há quatro clipes de filme no Palco para cada estado de exibição: normal, sobre, abaixo e desativado. (No tempo de execução, o componente nunca vai efetivamente para o Quadro 2; esses clipes de filme são colocados aqui para tornar a edição mais conveniente e para forçá-los a serem carregados no arquivo SWF sem selecionar Exportar, na caixa de seleção Primeiro quadro, da caixa de diálogo Propriedades do símbolo. No entanto, você ainda deve selecionar a opção Exportar para ActionScript.)

Para colocar capa no button, basta editar cada um desses clipes de filme. Você pode alterar o tamanho deles, bem como a aparência.

Alguns ActionScripts normalmente são exibidos no Quadro 1. Você não terá que alterar esse script. Ele pára, simplesmente, o indicador de reprodução do Quadro 1, e especifica que clipes de filme usar e em que estados.

Buttons PlayPauseButton, MuteButton, FullScreenButton e CaptionButton

Os buttons PlayPauseButton, MuteButton, FullScreenButton e CaptionButton são configurados diferentemente dos outros; eles têm apenas um quadro com duas camadas e nenhum script. Nesse quadro há dois buttons, um em cima do outro; no caso de PlayPauseButton, um botão Reproduzir e Pausar; no caso de MuteButton, um botão Mudo ligado e Mute desligado; no caso de FullScreenButton, um button de tela cheia ligada e tela cheia desligada; no caso de CaptionButton, um button legenda ligada e legenda desligada. Para colocar capa nesses buttons, coloque capa em cada um desses dois buttons internos conforme descrito em Colocar capa em componentes de UI personalizada de reprodução FLV individualmente ; não é necessária nenhuma ação adicional.

O CaptionButton é para o componente FLVPlaybackCaptioning e deve ser anexado a esse componente, não ao componente FLVPlayback.

Buttons BackButton e ForwardButton

Os buttons BackButton e ForwardButton também são configurados diferentemente dos outros. No Quadro 2, eles têm clipes de filme extras que você pode usar como um quadro ao redor de um ou dos dois buttons. Esses clipes de filme não são requeridos e não têm recursos especiais; eles são fornecidos apenas por conveniência. Para usá-los, basta arrastá-los para o Palco do painel Biblioteca e colocá-los onde desejar. Se você não os desejar, não os utilize ou exclua-os do painel Biblioteca.

A maioria dos buttons, conforme fornecidos, se baseiam em um conjunto comum de clipes de filme, de modo que você possa alterar a aparência de todos buttons de uma vez. Você pode usar esse recurso ou substituir esses clipes comuns e fazer com que cada button tenha uma aparência diferente.

Componente BufferingBar

O componente de barra de buffer é simples: Ele consiste em uma animação que se torna visível quando o componente entra no estado de buffer e não requer nenhum ActionScript especial para configurá-lo. Por padrão, é uma barra listrada que se move da esquerda para a direita com uma máscara retangular para dar a ela um efeito de poste de barbearia, mas não há nada de especial sobre essa configuração.

Embora as barras de buffer nos arquivos de capa SWF usem o dimensionamento de 9 fatias, porque precisam ser dimensionadas em tempo de execução, o componente de UI personalizada FLV BufferingBar não usa e não pode usar o dimensionamento de 9 fatias, por ter clipes de filme aninhados. Se você desejar tornar a BufferingBar mais larga ou mais alta, pode ser conveniente alterar o conteúdo dela, em vez de dimensioná-la.

Componentes SeekBar e VolumeBar

Os componentes SeekBar e VolumeBar são semelhantes, embora tenham funções diferentes. Cada um tem indicadores, usam os mesmos mecanismos de controle de indicadores e oferecem suporte a clipes aninhados para controlar progresso e integridade.

Há muitos locais em que o código ActionScript do no componente FLVPlayback considera que o ponto de registro (também ponto de origem ou ponto zero ) de seu componente SeekBar ou VolumeBar esteja no canto superior esquerdo do conteúdo, portanto, é importante manter essa convenção. Do contrário, você pode ter problemas com indicadores e com o progresso e a integridade de clipes de filme.

Embora as barras de busca nos arquivos de capa SWF usem o dimensionamento de 9 fatias porque precisam ser dimensionadas em tempo de execução, o componente de UI personalizada FLV SeekBar não usa e não pode usar o dimensionamento de 9 fatias, por ter clipes de filme aninhados. Se você desejar tornar a SeekBar mais larga ou mais alta, pode ser conveniente alterar o conteúdo dela, em vez de dimensioná-la.

Indicador

Uma ocorrência do clipe de filme de indicador está no Quadro 2. Assim como os componentes BackButton e ForwardButton, o componente nunca vai efetivamente para o Quadro 2; esses clipes de filme são colocados aqui para tornar a edição mais conveniente e como forma de forçá-los a serem carregados no arquivo SWF sem selecionar Exportar, na caixa de seleção Primeiro quadro, da caixa de diálogo Propriedades do símbolo. No entanto, você ainda deve selecionar a opção Exportar para ActionScript.

Você pode perceber que o clipe de filme de indicador tem um retângulo no plano de fundo com alfa definido para 0. Esse retângulo aumenta o tamanho da área de ocorrência da alça, tornando mais fácil segurar sem alterar sua aparência, semelhante ao estado de ocorrência de um botão. Como o indicador é criado dinamicamente em tempo de execução, ele deve ser um clipe de filme e não um botão. Esse retângulo com alfa definido para 0 não é necessário por nenhum outro motivo e, geralmente, você pode substituir o interior do indicador com qualquer imagem que desejar. No entanto, ele funciona melhor para manter o ponto de registro centralizado horizontalmente no meio do clipe de filme de indicador.

O código ActionScript seguinte encontra-se no Quadro 1 do componente SeekBar para gerenciar o indicador: 

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

A chamada para a função stop() é necessária devido ao conteúdo do Quadro 2.

A segunda linha especifica que símbolo usar como indicador, e você não precisará fazer alterações se simplesmente editar a ocorrência de clipe de filme de indicador no Quadro 2. Em tempo de execução, o componente FLVPlayback cria uma ocorrência do clipe de filme especificado no Palco como um irmão da ocorrência do componente Bar, o que significa que eles têm o mesmo clipe de filme pai. Portanto, se sua barra estiver no nível raiz, o identificador também deverá estar nesse nível.

A variável handleLeftMargin determina a localização original do indicador (0%) e a variável handleRightMargin determina onde ela esta no final (100%). Os números fornecem os deslocamentos das extremidades esquerda e direita da barra de controle, com números positivos marcando os limites dentro da barra e números negativos marcando os limites fora da barra. Esses deslocamentos especificam onde o indicador pode ir, com base no respectivo ponto de registro. Se você colocar o ponto de registro no meio do indicador, as extremidades esquerda e direita passarão das margens. O clipe de filme de barra de busca deve ter seu ponto de registro como o canto superior esquerdo do respectivo conteúdo, para funcionar corretamente.

A variável handleY determina a posição y do indicador em relação à ocorrência da barra. Isso tem como base os pontos de registro de cada clipe de filme. O ponto de registro no indicador de amostra está na ponta do triângulo para colocá-lo relativo à parte visível, desconsiderando o retângulo de estado de ocorrência invisível. Além disso, o clipe de filme de barra deve manter seu ponto de registro como o canto superior esquerdo do conteúdo, para funcionar corretamente.

Portanto, por exemplo, com esses limites, se a barra de controle está definida em (100, 100) e tem 100 pixels de largura, o indicador pode variar horizontalmente de 102 a 198 e permanecer verticalmente em 111. Se você alterar handleLeftMargin e handleRightMargin para -2 e handleY para -11, o indicador pode variar horizontalmente de 98 a 202 e permanecer verticalmente em 89.

Progresso e integridade de clipes de filme

O componente SeekBar tem um clipe de filme progress e o VolumeBar tem um clipe de filme fullness , mas, na prática, qualquer SeekBar ou VolumeBar pode ter um, nenhum ou ambos os clipes de filme. Em termos de estrutura, eles são os mesmos e se comportam de maneira semelhante, mas controlam valores diferentes. O clipe de filme de progresso é preenchido conforme o download do arquivo FLV (que é útil somente em um download HTTP, porque ele está sempre completo, se estiver transmitindo em fluxo contínuo de FMS), e o clipe de filme de integridade é preenchido à medida que o indicador se move da esquerda para a direita.

O componente FLVPlayback localiza essas ocorrências de clipe de filme procurando por um nome de ocorrência específico, portanto, sua ocorrência de clipe de filme de progresso deve ter seu clipe de filme de barra como pai e ter o nome de ocorrência progress_mc. A ocorrência de clipe de filme de integridade deve ter o nome de ocorrência fullness_mc.

Você pode definir os clipes de filme de progresso e integridade com ou sem a ocorrência de clipe de filme fill_mc aninhada internamente. O clipe de filme fullness_mc da VolumeBar mostra o método com o clipe de filme fill_mc, e o clipe de filme progress_mc da SeekBar mostra o método sem o clipe de filme fill_mc.

O método com o clipe de filme fill_mc aninhado internamente é útil quando se deseja um preenchimento que não pode ser dimensionado sem distorcer a aparência.

No clipe de filme fullness_mc da VolumeBar, a ocorrência do clipe de filme fill_mc está com máscara. Você também pode colocar máscara nela quando criar o clipe de filme ou uma máscara será criada dinamicamente em tempo de execução. Se você colocar máscara nela com um clipe de filme, nomeie a ocorrência mask_mc e configure-a de forma que fill_mc seja exibido como seria se o percentual fosse 100%. Se você não colocar máscara em fill_mc, a máscara criada dinamicamente será retangular e terá o mesmo tamanho que fill_mc em 100%.

O clipe de filme fill_mc com a máscara é revelado de uma das duas maneiras, dependendo de fill_mc.slideReveal ser true ou false .

Se fill_mc.slideReveal for true , fill_mc se move da esquerda para a direita para expô-lo através da máscara. Em 0%, ele está inteiramente para a esquerda, portanto, nenhuma parte é mostrada através da máscara. Conforme o percentual aumenta, ele se move para a esquerda até 100%, de volta onde foi criado no Palco.

Se fill_mc.slideReveal for false ou indefinido (o comportamento padrão), a máscara será redimensionada da esquerda para a direita para revelar mais de fill_mc. Quando ele está em 0%, a máscara será dimensionada horizontalmente para 05 e, conforme o percentual aumenta, a scaleX aumenta até 100% e revela completamente fill_mc. Não é necessariamente scaleX = 100 porque mask_mc pode ter sido dimensionado quando foi criado.

O método sem fill_mc é mais simples do que o método com fill_mc, mas ele distorce o preenchimento horizontalmente. Se você não desejar essa distorção, deverá usar fill_mc. O progress_mc da SeekBar ilustra esse método.

O clipe de filme de progresso ou integridade é dimensionado horizontalmente, com base no percentual. Em 0%, a scaleX da ocorrência é definida como 0, tornando-a invisível. Conforme o percentual cresce, a scaleX é ajustada até 100%, o clipe fica com o mesmo tamanho que tinha no Palco, quando foi criado. Mais uma vez, não é necessariamente scaleX = 100, porque a ocorrência de clipe pode ter sido dimensionada quando foi criada.

Conecte os componentes da UI personalizada de reprodução FLV

Se você colocar os componentes da UI na mesma linha do tempo e quadro do componente FLVPlayback e não tiver definido a propriedade skin , o FLVPlayback se conectará automaticamente a eles sem necessidade de nenhum ActionScript.

Se você tiver vários componentes FLVPlayback no Palco ou se o controle personalizado e o FLVPlayback não estiverem na mesma Linha do tempo, você deve escrever um código ActionScript para conectar os componentes da UI personalizada à ocorrência do componente FLVPlayback. Primeiramente, você deve atribuir um nome para a ocorrência FLVPlayback e, em seguida, usar o ActionScript para atribuir as ocorrências de componente da UI personalizada de reprodução FLV às propriedades de FLVPlayback correspondentes. No exemplo seguinte, a ocorrência FLVPlayback é my_FLVPlybk, os nomes de propriedade de FLVPlayback seguem os pontos (.) e as ocorrências de controle da UI personalizada de reprodução FLV ficam à direita dos sinais de igual (=): 

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar;

As etapas a seguir criam controles personalizados de StopButton, PlayPauseButton, MuteButton e SeekBar:

  1. Arraste o componente FLVPlayback para o Palco e dê a ele o nome de ocorrência my_FLVPlybk .

  2. Defina o parâmetro source por meio do Inspetor de componentes para http://www.helpexamples.com/flash/video/cuepoints.flv .

  3. Defina o parâmetro Skin para Nenhum.

  4. Arraste StopButton, PlayPauseButton e MuteButton para o Palco e coloque-os sobre a ocorrência FLVPlayback, empilhando-os verticalmente à esquerda. Dê um nome de ocorrência a cada botão no Inspetor de propriedades (como my_stopbttn , my_plypausbttn e my_mutebttn ).

  5. No painel Biblioteca, abra a pasta Capas FLVPlayback e, em seguida, abra a pasta SquareButton, abaixo dela.

  6. Selecione o clipe de filme SquareBgDown e clique duas vezes nele para abri-lo no Palco.

  7. Clique com o botão direito (Windows) ou Ctrl+clique (Macintosh), selecione Todos, no menu, e exclua o símbolo.

  8. Selecione a ferramenta Oval, desenhe uma forma oval no mesmo local e defina o preenchimento como azul ( #0033FF ).

  9. No Inspetor de propriedades, defina a largura (W:) como 40 e a altura (H:) como 20 . Defina a coordenada x (X:) como 0,0 e a coordenada y (Y:) como 0,0 .

  10. Repita as etapas 6 a 8 para SquareBgNormal, mas altere o preenchimento para amarelo ( #FFFF00 ).

  11. Repita as etapas 6 a 8 para SquareBgOver, mas altere o preenchimento para verde ( #006600 ).

  12. Edite os clipes de filme de vários ícones de símbolo nos botões (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon e StopIcon). Você pode encontrar esses clipes de filme no painel Biblioteca, em FLV Playback Skins/ Label Button/Assets, onde Label é o nome do botão, como Reproduzir, Pausar e assim por diante. Siga estas etapas para cada um:

    1. Selecione a opção Selecionar todos.

    2. Altere a cor para vermelho ( #FF0000 ).

    3. Dimensione em 300%.

    4. Altere o valor X: local do conteúdo para 7.0 para alterar o posicionamento horizontal do ícone em cada estado de botão.

      Nota: Alterando o local dessa maneira, você evita abrir cada estado de botão e mover o ícone da ocorrência de clipe de filme.

  13. Clique na seta Voltar, azul, acima da Linha do tempo, para retornar à Cena 1 do Quadro 1.

  14. Arraste o componente SeekBar para o Palco e coloque-o no canto inferior direito da ocorrência FLVPlayback.

  15. No painel Biblioteca, clique duas vezes na SeekBar para abri-la no Palco.

  16. Dimensione-a para 400%.

  17. Selecione o contorno e defina a cor como vermelho ( #FF0000 ).

  18. Clique duas vezes em SeekBarProgress na pasta FLVPlayback Skins/Seek Bar e defina a cor como amarelo ( #FFFF00 ).

  19. Clique duas vezes em SeekBarHandle, na pasta FLVPlayback Skins/Seek Bar, e defina a cor como vermelho ( #FF0000 ).

  20. Clique na seta Voltar, azul, acima da Linha do tempo, para retornar à Cena 1 do Quadro 1.

  21. Selecione a ocorrência SeekBar no Palco e dê a ela o nome de ocorrência my_seekbar .

  22. No painel Ações do Quadro 1 da Linha do tempo, adicione uma instrução import às classes de vídeo e atribua os nomes de botão e barra de busca às propriedades FLVPlayback correspondentes, conforme mostrado no seguinte exemplo: 

    import fl.video.*; 
my_FLVPlybk.stopButton = my_stopbttn; 
my_FLVPlybk.playPauseButton = my_plypausbttn; 
my_FLVPlybk.muteButton = my_mutebttn; 
my_FLVPlybk.seekBar = my_seekbar;

  23. Pressione Control+Enter para testar o filme.