Custom Play Pause and Mute Toggle Buttons

[Patrick Surace]

Hey Everyone,

Made the jump from Flash to GWD (as most of you probably did) and I'm at a loss on only a few small things so far.  Otherwise it's rad!

My project right now is 8 ad units all with video players and they were NOT designed with the default GWD buttons.  How can I go about creating a play button that switches to pause and vice versa, and a mute button that does the same?

I have only been using GWD for 3 days so if it's something that I should "know" because it's simple I apologize I'm up against the wall on time.

Let me know if and when you can!  Thank You,

-Patrick

[bort...@google.com]

Hi Patrick, welcome to GWD!

What you trying to do is definitely possible, I attached an example of a creative that includes a YouTube video component and custom controllers.

Here how you can proceed for recreating the same ad.

From the component menu, drag and drop the YT video component into the stage, after selecting it from the strage, from the Properties panel, under Controls select None from the drop down menu.

Now, create 4 tapAreas on the stage and name them something along the line of the controller you want to implement ie. PlayTapArea, PauseTapArea, ReplayTapArea and ToggleMuteTapArea.

Now select the PlayTapArea, and from the Events panel press the Plus Icon. From the list of possible Target select PlayTapArea, from Event select Mouse->Click, from Action select YouTube->Play after Pause, and finally from Receiver select the name of the youtube video component (if you didn't change it is probably gwd-youtube_1.
You have linked the click on the tap area to the behavior desired.

Do the same for the other 3 tap areas and you have done.

Please let me know how it goes!

Nicola

[Patrick Surace]

Thank you for this, however I don't think it's what I need.  The design calls for a Play button that switches to Pause when playing, and back to Play when paused.  The mute button should function the same.  Also there is NO YOU TUBE involvement, the ad is serving a video from within the DC system and using the standard GWD video component.

If I am out of my mind and wrong, just tell me...and I'll fix it!

-Patrick

[bort...@google.com]

Sure, no worries, you can just replay the YouTubeVideo component with a standard DC Video Component. The only difference is, when selecting the ACTION from the Events pannel, you need to select it from the Video rather than the Youtube dropdown.

Regarding the "hide/show button" animation that you are trying to achieve, that can be done by using another event. The Event would be again based on the click, but this time you want to select from ACTION css-> set style, and as target you should select the button you want to hide/show. Use the css property display: block or display:none to accomplish the change of visibility.

Hope it helps.

[San Khong]

Hi Patrick,

Attached is the file I made based on Nicola's instructions.  For the Mute/Unmute button, I used custom actions to set display.  It should do what you're asking for.  

If you set the video to Autoplay, you will need to change the page loaded event to set the play button to display: none instead of the pause button.  The reason I don't set this display: none at author time (in the CSS panel) because the element will disappear from stage when you do this and you will not be able to move it on stage and might see some unexpected behavior.

Hope it helps.

San