1 person found this helpful
I think you should try to rely on the new Spark components as much as possible. VideoPlayer has a skinPart called playPauseButton. If you hook up to this skin part, it will do exactly what you want. However, it's typed as a Spark ToggleButton--not a LinkButton. What I would do is use the playPauseButton and skin that button to look exactly how you want. Taking a peek at the VideoPlayerSkin and the VideoPlayerPlayPauseButtonSkin that we ship with Gumbo will help out a lot here.
As per progress bar, in our skin, we have a scrubbar, which is similar to what you want, but it allows the user to move around the playhead as well. So, there's no progress bar component built-in, but you could either build out anew skin part, similar to the scrubbar, and hooked it up to the bytesLoadedChange event, or you could probably reskin the scrubbar and leave out the thumb and playedArea (just leave in the loadedRangeArea and the track). Though I'm not positive that would work as part of the code might make some assumptions about a track and a thumb being present. If you were to file a bug report on it, I could probably look into fixing up those spots where we don't need to make those assumptions in the scrubbar.
I think relying on the current videoplayerskin and modifying that will get you a long way in this process, and I hope these ideas help with that.
hey ryan... thanks for responding, so fast... i really appretiate it!
i did the following, i used the togglebutton, and i skinned it, to what i needed... it works almost exacly to what i need it to, except when press the button and then rollover the button, it displays different text...
for example, at first the button will say pause, and when you click the button it says play, but when you rollovere the button again it says pause, and when you rolloff it says play again... is tehre anyway for it to not do that??
the code i have now is...
<s:VideoElement id="videoElement" autoPlay="true" width="700" height="350" />
<s:ToggleButton id="toggle" color="#ffffff" click="playButtonClick()"
height="350" left="50" top="350"/>
<s:ScrubBar id="scrub" />
and the skin is
<?xml version="1.0" encoding="utf-8"?>
xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">
<!-- Place non-visual elements (e.g., services, value objects) here -->
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
<s:RichText fontSize="18" fontFamily="dinB" color="0x4769C4" text="Pause"
how do i tie the scrubBar into the video?? lol
and ive been working on trying to skin the scrubBar.. but no luck so far...:( i need to get rid of the pointing thing from the scrubbar and replace it with just a Cursor looking element which will perform the same thing as the "point" on the scrub bar...
hope im making sence
Thank you soo much ryan...
1 person found this helpful
Instead of text.upAndSelected="Play", you need to do it in all of the "selected states". In the default playPauseButton skin, we do this through assigning stateGroups, so something like:
<s:State name="upAndSelected" stateGroups="selectedStates"/>
<s:State name="overAndSelected" stateGroups="selectedStates"/>
<s:State name="downAndSelected" stateGroups="selectedStates"/>
<s:State name="disabledAndSelected" stateGroups="selectedStates"/>
As for ScrubBar, it's just another video part in the videoplayer skin. For starts, just add:
<s:ScrubBar id="scrubBar" width="100%" liveDragging="true"
In to your skin.
Then, look at those skins and modify it to be your own.
hey ryan... thank you, that worked like a charm... now i know a little more about grouping states
and i havent found much info on the scrubbar skinning... from what i understand so far... almost everyelement in a given component is skinnable, i just dont know how to change the thumb on the scrubbar... i dont need to do the full screen, because im not going to have a full screen option on there...
oh and also, i have a button in the skin... if i press that button i need a function to be called in the parent actionscript file
the videoPlayer is in a file called vistaTroubleshooting.mxml (this is a component) so the code in here looks somehting like
<script source="vistaAction.as" />
<videoPlayer id="videoPlayer" skinclass="myskinclass".... />
i basically nerd to call a function inside my vistaAction from mySkinClass.mxml when the button is pressed...
any help is greatly appretiated!!