如何向视频播放器按钮组件添加类似按钮的行为？

Background

背景

I'm trying to create a simple "universal" media player which presents the same user interface (or as similar as possible) for video and audio playback. Unfortunately, FLVPlayback seems not to be able to handle audio files as far as I can tell, so I'm using a Sound and SoundChannel.

我正在尝试创建一个简单的“通用”媒体播放器，它为视频和音频播放提供相同的用户界面（或尽可能相似）。不幸的是，就我所知，FLVPlayback似乎无法处理音频文件，因此我使用的是Sound和SoundChannel。

My video playback is handled using an FLVPlayback component which is "wired" to standard controls on-the-fly when needed. What I want to do is wire them to the Sound / SoundChannel when I'm playing a sound so that the same UI widgets work in both cases. I'd like to avoid building all my components from scratch because the FLVPlayback component does a lot of nice stuff "for free" but it's starting to look tricky.

我的视频播放使用FLVPlayback组件处理，该组件在需要时即时“连接”到标准控件。我想要做的是在播放声音时将它们连接到Sound / SoundChannel，以便在两种情况下都可以使用相同的UI小部件。我想避免从头开始构建我的所有组件，因为FLVPlayback组件“免费”做了很多好东西，但它开始看起来很棘手。

Gorey Stuff

Gorey Stuff

The standard PlayPauseButton is a MovieClip with two layers, one containing the Play button (and with the instance name play_mc) and the containing the Pause button (pause_mc). Inside one of these is a movie with some code like this:

标准的PlayPauseButton是一个有两层的MovieClip，一个包含Play按钮（实例名称为play_mc），另一个包含Pause按钮（pause_mc）。其中一个是一部电影，其代码如下：

stop();
this.upLinkageID = "PauseButtonNormal";
this.overLinkageID = "PauseButtonOver";
this.downLinkageID = "PauseButtonDown";
this.disabledLinkageID = "PauseButtonDisabled";

The movie has two frames.

电影有两帧。

On the first frame is a single movieclip with the instance name placeholder_mc.

第一帧是一个动画片段，实例名称为placeholder_mc。

On the second frame are instances of the button states, but they have no instance name (which would make things easier). They are, however, instances of a library object with the name listed above.

在第二帧是按钮状态的实例，但它们没有实例名称（这会使事情变得更容易）。但是，它们是具有上面列出的名称的库对象的实例。

What I'd like to do is write a function that when passed one of these buttons (pause_mc, say) it adds button-like behavior to it automagically. The bit I cannot figure out from Adobe's "documentation" is, how do I use the information embedded in the movie clip code to swap the contents of placeholder_mc with the thing I want.

我想要做的是编写一个函数，当传递其中一个按钮（例如，pause_mc）时，它会自动添加类似按钮的行为。我无法从Adobe的“文档”中弄清楚的是，如何使用影片剪辑代码中嵌入的信息将placeholder_mc的内容与我想要的东西交换。

tl;dr

TL;博士

In essence I just need to implement the function set_instance so that the code below changes the button's visible state as expected:

本质上我只需要实现函数set_instance，以便下面的代码按预期更改按钮的可见状态：

var my_button:MovieClip = pause_mc;
my_button.addEventListener( MouseEvent.MOUSE_OVER, function( e:Event ){
  set_instance( my_button.placeholder_mc, my_button.overLinkageID );
} );

2 个解决方案

#1

I tried to get this working using the PlayPauseButton component today. It seems that Adobe doesn't openly make the hooks we are looking for available to us :P.

我今天尝试使用PlayPauseButton组件来解决这个问题。似乎Adobe没有公开地为我们提供我们正在寻找的钩子：P。

The solution I came up with was to use the Button UI Component and re-skin it to look like the PlayPauseButton.

我想出的解决方案是使用Button UI Component并将其重新设置为PlayPauseButton。

You can dig the individual button states out of the two movie clips (play and pause) contained within the PlayPauseButton component, give them instance names, and then use those to set the appropriate skin properties of the button using the setStyle() method. Make sure you also resize the button to 23x23 to avoid stretching.

您可以从PlayPauseButton组件中包含的两个影片剪辑（播放和暂停）中挖掘单个按钮状态，为它们提供实例名称，然后使用这些来设置按钮的相应外观属性（使用setStyle（）方法）。确保您还将按钮的大小调整为23x23，以避免拉伸。

#2

I usually just make a button and then assign movie clips or some display object as a skin using:

我通常只是制作一个按钮，然后使用以下方法将影片剪辑或某些显示对象指定为皮肤：

var myButton:Button = new Button();
myButton.setStyle('upSkin', new PlaySkin());
myButton.setStyle('selectedUpSkin', new PauseSkin());

Then, all your button states will be automatically taken care of by Flash. For a PlayPause button, you can set the "toggle" property of the button to "true" and then every time you click it, the button will switch from the selected skin to the up skin and back again.

然后，Flash将自动处理所有按钮状态。对于PlayPause按钮，您可以将按钮的“切换”属性设置为“true”，然后每次单击它时，按钮将从所选皮肤切换到向上皮肤并再次返回。

#1