Criar uma nova capa

A melhor maneira de criar um arquivo de capa SWF é copiar um dos arquivos de capa que vem com o Flash e usá-lo como ponto de partida. Você pode encontrar os arquivos FLA dessas capas na pasta do aplicativo Flash, em Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/. Para disponibilizar seu arquivo de capa SWF finalizado como opção na caixa de diálogo Selecionar capa, coloque-o na pasta Configuration/FLVPlayback Skins/ActionScript 3.0, na pasta do aplicativo Flash ou em uma pasta Configuration/FLVPlayback Skins/ActionScript 3.0 local do usuário.

Como você pode definir a cor da capa independentemente de escolher a capa, não é necessário editar o arquivo FLA para modificar a cor. Se você criar uma capa com uma cor específica e não desejar que ela esteja editável na caixa de diálogo Selecionar capa, defina this.border_mc.colorMe = false; no código ActionScript do arquivo de capa FLA. Para obter informações sobre como definir a cor da capa, consulte Selecionar uma capa previamente criada .

Ao observarmos os arquivos instalados de capa FLA do Flash, pode parecer que algumas coisas no Palco são desnecessárias, mas muitas dessas coisas são colocadas em camadas de guia. Com a visualização ao vivo usando escala 9, você pode visualizar rapidamente qual será a aparência real do arquivo SWF.

As seções seguintes cobrem personalizações e alterações mais complexas nos clipes de filme de SeekBar, BufferingBar e VolumeBar.

Uso do layout de capa

Ao abrir um arquivo de capa FLA do Flash, você encontra os clipes de filme da capa dispostos na Linha do tempo principal. Esses clipes e o código ActionScript que você encontra no mesmo quadro definem como os controles serão dispostos em tempo de execução.

Embora a camada Layout se pareça muito com o modo como a capa parecerá no tempo de execução, o conteúdo dessa camada não estará visível no tempo de execução. Ela só é usada para calcular onde colocar os controles. Os outros controles no Palco são usados em tempo de execução.

Na camada Layout há um alocador de espaço para o componente FLVPlayback chamado video_mc. Todos os outros controles estão dispostos em relação ao video_mc. Se você iniciar com um dos arquivos FLA do Flash e alterar o tamanho dos controles, provavelmente será possível corrigir o layout movendo esses clipes de alocador de espaço.

Cada um dos clipes de alocador de espaço tem um nome de ocorrência específico. Os nomes dos clipes de alocador de espaço são playpause_mc, play_mc, pause_mc, stop_mc, captionToggle_mc, fullScreenToggle_mc, back_mc, bufferingBar_mc, bufferingBarFill_mc, seekBar_mc, seekBarHandle_mc, seekBarProgress_mc, volumeMute_mc, volumeBar_mc e volumeBarHandle_mc. A parte que é novamente colorida quando você seleciona uma cor de capa é chamada de border_mc.

O tipo de clipe usado em um controle não é importante. Em botões, geralmente o clipe de estado normal é usado. Em outros controles, o clipe correspondente é usado, mas só por conveniência. O importante é a localização de x (horizontal) e y (vertical) e a altura e largura do alocador de espaço.

Você também pode ter quantos clipes adicionais desejar, além dos controles padrão. O único requisito desses clipes é que os respectivos símbolos da biblioteca estejam com a opção Exportar para ActionScript marcada na caixa de diálogo Ligação. Os clipes personalizados na camada Layout podem ter qualquer nome de ocorrência que não sejam os nomes de ocorrência reservados listados acima. O nome de ocorrência só é necessário para definir o ActionScript nos clipes para determinar o layout.

O clipe border_mc é especial. Se você definir a propriedade FlvPlayback.skinAutoHide como true, a capa é exibida quando o mouse estiver sobre o clipe border_mc. Isso é importante nas capas que são exibidas fora dos limites do player de vídeo. Para obter informações sobre a propriedade skinAutoHide , consulte Modificar comportamento de capa .

Nos arquivos FLA do Flash, border_mc é usado para o cromo e para a borda ao redor dos botões Avançar e Voltar.

O clipe border_mc também faz parte da capa que tem alfa e cor alterados pelas propriedades skinBackgroundAlpha e skinBackgroundColor . Para permitir cor e alfa personalizáveis, o ActionScript no arquivo de capa FLA deve incluir o seguinte:

border_mc.colorMe = true;

ActionScript e layout de capa

O seguinte código ActionScript se aplica normalmente a todos os controles. Alguns controles têm um ActionScript específico que define comportamento adicional e que é explicado na seção desse controle.

O ActionScript inicial é uma seção extensa que especifica os nomes de classe de cada estado para cada componente. Você pode visualizar todos esses nomes de classe no arquivo SkinOverAll.fla. Por exemplo, nos botões Pausar e Reproduzir, o código é semelhante a:

this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled"; 
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown"; 
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal"; 
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver"; 
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled"; 
this.playButtonDownState = "fl.video.skin.PlayButtonDown"; 
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal"; 
this.playButtonOverState = "fl.video.skin.PlayButtonOver";

Os nomes de classe não têm arquivos de classe externos reais, eles são apenas especificados na caixa de diálogo Ligação para todos os clipes de filme na biblioteca.

No componente ActionScript 2.0, havia clipes de filme no Palco que, na realidade, eram usados em tempo de execução. No componente ActionScript 3.0, esses clipes de filme ainda estão no arquivo FLA, mas apenas para tornar a edição conveniente. Agora, eles estão todos nas camadas de guia e não são exportados. Todos os ativos de capas na biblioteca estão definidos para exportar no primeiro quadro. Eles são criados dinamicamente com um código como este, por exemplo:

new fl.video.skin.PauseButtonDisabled();

Depois dessa seção está o código ActionScript, que define largura e altura mínimas da capa. A caixa de diálogo Selecionar capa mostra esses valores e eles são usados em tempo de execução para impedir que a capa seja dimensionada abaixo do tamanho mínimo. Se você não deseja especificar um tamanho mínimo, deixe como indefinido ou menor ou igual a zero.

// minimum width and height of video recommended to use this skin, 
// leave as undefined or <= 0 if there is no minimum 
this.minWidth = 270; 
this.minHeight = 60;

Cada alocador de espaço pode ter as seguintes propriedades aplicadas:

Propriedade

Descrição

anchorLeft

Booleano. Posiciona o controle em relação ao lado esquerdo da ocorrência FLVPlayback. Assume true como padrão, a menos que anchorRight esteja definido explicitamente como true e ele então assume false como padrão..

anchorRight

Booleano. Posiciona o controle em relação ao lado direito da ocorrência FLVPlayback. Assume false como padrão.

anchorBottom

Booleano. Posiciona o controle em relação à parte inferior da ocorrência FLVPlayback. Assume true como padrão, a menos que anchorTop esteja definido explicitamente como true e ele então assume false como padrão.

anchorTop

Booleano. Posiciona o controle em relação à parte superior da ocorrência FLVPlayback. Assume false como padrão.

Se as propriedades anchorLeft e anchorRight forem true , o controle é dimensionado horizontalmente em tempo de execução. Se as propriedades anchorTop e anchorBottom forem true , o controle é dimensionado verticalmente em tempo de execução.

Para observar os efeitos dessas propriedades, veja como elas são usadas nas capas do Flash. Os controles BufferingBar e SeekBar são os únicos que dimensionam, e eles são dispostos um em cima do outro e têm as propriedades anchorLeft e anchorRight definidas como true . Todos os controles à esquerda da BufferingBar e SeekBar têm anchorLeft definido como true e todos os controles à direita têm anchorRight definido como true . Todos os controles têm anchorBottom definido como true .

Você pode tentar editar os clipes de filme na camada Layout para fazer uma capa onde os controles estão situados, na parte superior, em vez de na parte inferior. Você só precisa mover os controles para cima, em relação a video_mc , e definir anchorTop igual a true em todos os controles.

Barra de buffer

A barra de buffer tem dois clipes de filme: bufferingBar_mc e bufferingBarFill_mc. Cada posição do clipe no Palco em relação a outro clipe é importante, pois esse posicionamento relativo é mantido. A barra de buffer usa dois clipes, distintos porque o componente dimensiona bufferingBar_mc, mas não bufferingBarFill_mc.

O clipe bufferingBar_mc tem dimensionamento de 9 fatias aplicado, portanto, as bordas não serão distorcidas quando ele for dimensionado. O clipe bufferingBarFill_mc é extremamente largo, de modo que seja sempre largo o suficiente sem precisar ser dimensionado. Ele é mascarado automaticamente em tempo de execução para mostrar somente a parte acima do bufferingBar_mc esticado. Por padrão, as dimensões exatas da máscara manterão uma margem à esquerda e à direita na bufferingBar_mc, com base na diferença entre as posições x (horizontal) de bufferingBar_mc e bufferingBarFill_mc. Você pode personalizar a posição com o código ActionScript.

Se sua barra de buffer não precisar ser dimensionada ou não usar o dimensionamento de 9 fatias, você pode defini-la como o componente BufferingBar da UI personalizada de reprodução FLV. Para obter mais informações, consulte Componente BufferingBar .

A barra de buffer tem as seguintes propriedades adicionais:

Propriedade

Descrição

fill_mc:MovieClip

Especifica o nome de ocorrência do preenchimento da barra de buffer. Assume o padrão bufferingBarFill_mc.

Barra de busca e barra de volume

A barra de busca também tem dois clipes de filme: seekBar_mc e seekBarProgess_mc. Cada posição do clipe na camada Layout em relação a outro clipe é importante, pois esse posicionamento relativo é mantido. Embora os dois clipes sejam dimensionados, o seekBarProgress_mc não pode ser aninhado dentro de seekBar_mc porque este último usa dimensionamento de 9 fatias, que não funciona bem com clipes de filme aninhados.

O clipe seekBar_mc tem dimensionamento de 9 fatias aplicado, portanto, as bordas não serão distorcidas quando ele for dimensionado. O clipe seekBarProgress_mc também é dimensionado, mas sem distorcer. Ele não usa dimensionamento de 9 fatias por ser um preenchimento, que fica bem quando distorcido.

O clipe seekBarProgress_mc funciona sem um fill_mc, de modo muito semelhante como funciona o clipe progress_mc em componentes da UI personalizada de reprodução FLV. Em outras palavras, ele não é mascarado e é dimensionado horizontalmente. As dimensões exatas do seekBarProgress_mc em 100% são definidas pelas margens esquerda e direita no clipe seekBarProgress_mc. Essas dimensões são, por padrão, iguais e baseadas na diferença entre as posições x (horizontal) de seekBar_mc e seekBarProgress_mc. Você pode personalizar as dimensões com o ActionScript no clipe de filme de barra de busca, conforme mostrado no seguinte exemplo:

this.seekBar_mc.progressLeftMargin = 2; 
this.seekBar_mc.progressRightMargin = 2; 
this.seekBar_mc.progressY = 11; 
this.seekBar_mc.fullnessLeftMargin = 2; 
this.seekBar_mc.fullnessRightMargin = 2; 
this.seekBar_mc.fullnessY = 11;

Você pode colocar esse código na Linha do tempo do clipe de filme SeekBar ou colocá-lo com o outro código ActionScript na Linha do tempo principal. Se você personalizar com código em vez de modificar o layout, o preenchimento não precisa estar no Palco. Ele só precisa estar na biblioteca, definido para exportação para o ActionScript no Quadro 1 com nome de classe correto.

Como ocorre com o componente SeekBar da UI personalizada de reprodução FLV, é possível criar um clipe de filme de integridade para a barra de busca. Se a barra de busca não precisa ser dimensionada ou se é dimensionada mas não usa dimensionamento de 9 fatias, você pode configurar progress_mc ou fullness_mc usando qualquer um dos métodos usados em componentes da UI personalizada de reprodução FLV. Para obter mais informações, consulte Progresso e integridade de clipes de filme .

Como a barra de volume nas capas do Flash não é dimensionada, ela é construída da mesma maneira que o componente VolumeBar da UI personalizada de reprodução FLV. Para obter mais informações, consulte os Componentes SeekBar e VolumeBar . A exceção é que o indicador é implementado de maneira diferente.

Indicadores de Seekbar e VolumeBar

Os indicadores de SeekBar e VolumeBar são colocados na camada Layout próximo à barra. Por padrão, os valores de margem esquerda, margem direita e eixo y são definidos pelas respectivas posições em relação ao clipe de filme da barra. A margem esquerda é definida pela diferença entre a localização de x (horizontal) do indicador e a localização x (horizontal) da barra e a margem direita é igual à margem esquerda. Você pode personalizar esses valores por meio do ActionScript no clipe de filme SeekBar ou VolumeBar. O exemplo seguinte é o mesmo código ActionScript usado em componentes da UI personalizada de reprodução FLV:

this.seekBar_mc.handleLeftMargin = 2; 
this.seekBar_mc.handleRightMargin = 2; 
this.seekBar_mc.handleY = 11;

Você pode colocar esse código na Linha do tempo do clipe de filme SeekBar ou colocá-lo com o outro código ActionScript na Linha do tempo principal. Se você personalizar com código em vez de modificar o layout, o indicador não precisará estar no Palco. Ele só precisa estar na biblioteca, definido para exportação para o ActionScript no Quadro 1 com nome de classe correto.

Além dessas propriedades, os indicadores são clipes de filme simples, configurados da mesma maneira que nos componentes da UI personalizada de reprodução FLV. Ambos têm planos de fundo retangulares com a propriedade alpha definida como 0. Estão presentes apenas para aumentar a região de ocorrência e não são necessários.

Clipes de segundo e primeiro planos

Os clipes de filme chrome_mc e forwardBackBorder_mc são implementados como clipes de segundo plano.

Dos clipes de filme ForwardBackBorder, ForwardBorder e BackBorder no Palco e o alocador de espaço dos botões Avançar e Voltar, o único que não é uma camada de guia é o ForwardBackBorder. Ele só está nas capas que efetivamente usam os botões Avançar e Voltar.

O único requisito desses clipes é que eles precisam ser exportados para o ActionScript no Quadro 1 da biblioteca.