Create a Slide -In Playlist With Tweening

From KickApps API Reference

Jump to: navigation, search

If you need to have a video player in a spot that's too small to include an exposed playlist, you can use the Tween Property action to slide a playlist over the video screen itself. Read on to learn how.

  1. Begin by opening a widget containing a video player, or start a new widget, select the Players tab, and drag an Advanced Video Player to the stage.
  2. Select the Lists tab from the top panel and drag down a Single Row List.
  3. Drag out a selection area to include the list's header and buttons. Delete these.
  4. Set your list to play in your video player by clicking the Play in.. option in the Content section of the List Properties panel. I also customized mine by making it 420px wide, 80px tall, 4 columns, 4px inner padding and 1px border.
  5. Position the list below the video player and note its Y value. In mine its at Y=355.
  6. Find your list in the Layers section of the Global panel (on the left). In the layers list, click your list component and drag it to the bottom of the layers list. Then find your video player component and drag it all the way to the bottom, beneath your list component.
  7. Now look at the Dimensions section of the same panel. Make sure the height dimension is set to a value that includes everything in your widget from the playbar up-- in other words, not including the playlist (this is how we manage to hide it). The height value for my widget is 355. While you're in this area, make sure to deselect the "Auto size canvas to widgets" option.
  8. Pull down a new button component. I labeled mine "Menu" in the Button Properties panel, and selected "Make button toggleable".
  9. Find your button in the Layers panel and give it a label there too. I called mine "Menu button".
  10. With your button selected, open the Actions panel and click the little blue plus sign to add a new action.
  11. Select the "Toggled On" Event, "Tween Property" Action, select your list component from the Component list, set the Property to "Y", enter "245" for the Value, and ".25" for Duration, indicating that it should take .25 seconds for your list to move from its current position to a y-value of 245.
  12. Click okay.
  13. With the previous action in place, when users click on your button, the list component will slide up in front of the video player. To hide the list, add another action, but this time use the "Toggled off" Event, and set the list's Y property back to its original value, 355.
  14. We're almost done. The list now reveals itself when you click the Menu button the first time, and hides itself when you click it again. However, when the list is revealed, the button's label still reads "Menu". To change it to something more appropriate, we need to add two more actions. The first action will be triggered on the "Toggled On" Event. This time though, use the "Update Property" action, select your button from the list, select the "Label" Property, and fill in a label like "Close".
  15. Finally, we need to ensure that the button's label switches back to "Menu" after the menu is closed. To do that we add one last action on the "Toggled Off" Event. The action is still "Update Property", the Property is still "Label", but now we'll make its value "Menu".

Oila!

If you'd like to import this widget into your App Studio, select Import from the Menu in the App Studio, and paste in the widget source code from the field below.

<script type="text/javascript"> function SelectAll(id) { 

   document.getElementById(id).focus();
   document.getElementById(id).select();

} </script>

<input id="widget_source" type="text" cols="60" value="{"widgetHost":"http://affiliate.kickapps.com%5C%22,%5C%22cs_rwid%5C%22:%5C%22null%5C%22,%5C%22ssoRegisterUrl%5C%22:%5C%22%5C%22,%5C%22feedAkHost%5C%22:%5C%22http://serve.a-feed.com%5C%22,%5C%22adBuyOut%5C%22:true,%5C%22widgetJson%5C%22:{%5C%22children&quot;:[{"filePath":"VideoPlayerComponentMain.swf","index":0,"properties":{"actions":{"mediaPaused":[["KickButtonMain64323179462","toggleVisible",false,"on","0"],["KickButtonMain69514674682","toggleVisible",false,"off","0"]],"mediaPlaying":[["KickButtonMain64323179462","toggleVisible",false,"off","0"],["KickButtonMain69514674682","toggleVisible",false,"on","0"]],"mediaStart":"KickImageLoaderMain94457379702","toggleVisible",false,"off","0"},"width":420,"autoPlay":false,"videoAspectRatio":"4:3","x":0,"scrubber":"KickScrubberMain64311651762","y":25,"autoAdvance":false,"adData":{},"volumeControl":"KickVolumeControlMain6434384965","id":"VideoPlayerComponentMain6431194696"}},{"filePath":"KickSuperListMain.swf","index":1,"properties":{"mediaURL":"http://serve.a-feed.com/service/getFeed.kickAction?feedId=323338&as=30483%5C%22,%5C%22cellBorderThickness%5C%22:1,%5C%22rowCount%5C%22:1,%5C%22x%5C%22:0,%5C%22selectionColor%5C%22:16777164,%5C%22playlistPlayer%5C%22:%5C%22VideoPlayerComponentMain6431194696%5C%22,%5C%22columnCount%5C%22:4,%5C%22cellDisplayType%5C%22:%5C%22IMAGE AND TITLE","selectionEnabled":true,"direction":"horizontal_carousel","y":355,"width":420,"cellInnerPadding":4,"id":"KickSuperListMain9371550036","cellBorderColor":6710886,"height":80}},{"filePath":"KickButtonMain.swf","index":2,"properties":{"width":420,"backgroundImage":"","fontAlign":"left","overFontColor":16777215,"x":0,"fillAlpha":[1,1],"y":325,"selectedFontAlign":"left","actions":{},"fillColor":[0,3355443],"id":"KickButtonMain6963429360","cornerRadius":0,"downFontColor":16777215,"gradientRotation":270,"downFontAlign":"left","fontColor":16777215,"selectedFontColor":16777215,"borderThickness":0,"overFontAlign":"left","label":"","borderColor":[0,0],"height":30}},{"filePath":"KickScrubberMain.swf","index":3,"properties":{"x":145,"loadProgressBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/scrub_load.png%5C%22,%5C%22y%5C%22:334,%5C%22handleCornerRadius%5C%22:3,%5C%22cornerRadius%5C%22:0,%5C%22backgroundFills&quot;:[3355443,3355443],"handleWidth":9,"loadProgressFills":[3355443,3355443],"handleFills":[15413828,15413828],"backgroundBorderColors":[6710886,6710886],"handleBorderColors":[6710886,6710886],"playProgressBorderColors":[6710886,6710886],"handleBackgroundImage":"","loadProgressAlphas":[0,1],"handleBorderThickness":0,"height":12,"loadProgressBorderColors":[6710886,6710886],"playProgressGradientRotation":0,"width":110,"playProgressBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/scrub_play.png%5C%22,%5C%22playProgressBorderThickness%5C%22:1,%5C%22backgroundBorderThickness%5C%22:1,%5C%22loadProgressBorderThickness%5C%22:1,%5C%22backgroundGradientRotation%5C%22:242,%5C%22handleHeight%5C%22:15,%5C%22id%5C%22:%5C%22KickScrubberMain64311651762%5C%22,%5C%22loadProgressGradientRotation%5C%22:0,%5C%22playProgressFills&quot;:[3355443,53687091]}},{"filePath":"KickButtonMain.swf","index":4,"properties":{"overBorderThickness":1,"width":27,"toggle":true,"borderColor":[6710886,6710886],"x":9,"downBorderThickness":1,"selectedBorderThickness":1,"y":330,"downBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/play_down.gif%5C%22,%5C%22cornerRadius&quot;:[0,0,0,0],"actions":{"click":[["VideoPlayerComponentMain6431194696","togglePlay",false,"on"],["KickButtonMain69514674682","toggleVisible",false,"on"],["KickButtonMain64323179462","toggleVisible",false,"off"]]},"backgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/play_up.gif%5C%22,%5C%22label%5C%22:%5C%22%5C%22,%5C%22id%5C%22:%5C%22KickButtonMain64323179462%5C%22,%5C%22overBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/play_down.gif%5C%22,%5C%22selectedBorderColor&quot;:[6710886,6710886],"selectedBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/play_down.gif%5C%22,%5C%22height%5C%22:20}},{%5C%22filePath%5C%22:%5C%22KickButtonMain.swf%5C%22,%5C%22index%5C%22:5,%5C%22properties%5C%22:{%5C%22width%5C%22:27,%5C%22x%5C%22:9,%5C%22cornerRadius&quot;:[0,0,0,0],"y":330,"visible":false,"id":"KickButtonMain69514674682","borderColor":[6710886,6710886],"backgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/pause_up.gif%5C%22,%5C%22label%5C%22:%5C%22%5C%22,%5C%22downBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/pause_down.gif%5C%22,%5C%22overBackgroundImage%5C%22:&quot;http://creative.kickstatic.com/corpsite/3/vidplayer/custom/pause_down.gif%5C%22,%5C%22actions%5C%22:{%5C%22click&quot;:[["VideoPlayerComponentMain6431194696","togglePlay",false,"off"],["KickButtonMain64323179462","toggleVisible",false,"on"],["KickButtonMain69514674682","toggleVisible",false,"off"]]},"selectedBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/pause_down.gif%5C%22,%5C%22height%5C%22:20}},{%5C%22filePath%5C%22:%5C%22KickButtonMain.swf%5C%22,%5C%22index%5C%22:6,%5C%22properties%5C%22:{%5C%22selectedCornerRadius&quot;:[0,0,0,0],"overBorderThickness":1,"width":27,"cornerRadius":[0,0,0,0],"borderColor":[6710886,6710886],"x":73,"downBorderThickness":1,"selectedBorderThickness":1,"y":330,"downBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/forward_down.gif%5C%22,%5C%22fillAlpha&quot;:[1,1],"actions":{"click":"VideoPlayerComponentMain6431194696","changeSelection",false,false},"gradientRotation":0,"label":"","id":"KickButtonMain6433075257","overBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/forward_down.gif%5C%22,%5C%22backgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/forward_up.gif%5C%22,%5C%22selectedBackgroundImage%5C%22:%5C%22%5C%22,%5C%22height%5C%22:20}},{%5C%22filePath%5C%22:%5C%22KickButtonMain.swf%5C%22,%5C%22index%5C%22:7,%5C%22properties%5C%22:{%5C%22selectedCornerRadius&quot;:[0,0,0,0],"overBorderThickness":1,"width":27,"borderColor":[6710886,6710886],"x":41,"downBorderThickness":1,"selectedBorderThickness":1,"y":330,"downBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/back_down.gif%5C%22,%5C%22cornerRadius&quot;:[0,0,0,0],"actions":{"click":"VideoPlayerComponentMain6431194696","changeSelection",false,true},"backgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/back_up.gif%5C%22,%5C%22label%5C%22:%5C%22%5C%22,%5C%22id%5C%22:%5C%22KickButtonMain64326759002%5C%22,%5C%22overBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/back_down.gif%5C%22,%5C%22selectedBorderColor&quot;:[6710886,6710886],"selectedBackgroundImage":"","height":20}},{"filePath":"KickTextAreaMain.swf","index":8,"properties":{"actions":{},"width":41,"x":103,"fontColor":13421772,"text":["VideoPlayerComponentMain6431194696","mediaTime",null],"y":329,"fontSize":11,"selectable":false,"id":"KickTextAreaMain64334910622","height":16}},{"filePath":"KickTextAreaMain.swf","index":9,"properties":{"actions":{},"width":39,"x":258,"fontColor":13421772,"text":["VideoPlayerComponentMain6431194696","mediaDuration",null],"y":329,"fontSize":11,"id":"KickTextAreaMain7024116890","height":18}},{"filePath":"KickButtonMain.swf","index":10,"properties":{"overBorderThickness":1,"width":27,"actions":{"click":"KickVolumeControlMain6434384965","toggleVisible",false,"toggle"},"x":384,"downBorderThickness":1,"selectedBorderThickness":1,"y":330,"id":"KickButtonMain64345694992","cornerRadius":[0,0,0,0],"backgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/volume_up.gif%5C%22,%5C%22label%5C%22:%5C%22%5C%22,%5C%22downBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/volume_down.gif%5C%22,%5C%22overBackgroundImage%5C%22:&quot;http://creative.kickstatic.com/corpsite/3/vidplayer/custom/volume_down.gif%5C%22,%5C%22borderColor&quot;:[6710886,6710886],"selectedBackgroundImage":"","height":20}},{"filePath":"KickVolumeControlMain.swf","index":11,"properties":{"width":90,"backgroundBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/vol_control.png%5C%22,%5C%22handleBorderThickness%5C%22:0,%5C%22x%5C%22:320,%5C%22cornerRadius%5C%22:6,%5C%22y%5C%22:301,%5C%22playProgressBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/vol_scrub_test.png%5C%22,%5C%22visible%5C%22:false,%5C%22handleCornerRadius%5C%22:3,%5C%22height%5C%22:20,%5C%22handleHeight%5C%22:15,%5C%22backgroundFills&quot;:[13224393,13224393],"handleWidth":9,"handleFills":[15413828,15413828],"playProgressFills":[13224393,13224393],"id":"KickVolumeControlMain6434384965"}},{"filePath":"KickButtonMain.swf","index":12,"properties":{"actions":{"toggledOn":[[["KickButtonMain9371730315"],"updateProperty",false,"label","Close"],[["KickSuperListMain9371550036"],"tweenProperty",false,"y","245","",".25",""]],"toggledOff":[[["KickButtonMain9371730315"],"updateProperty",false,"label","Menu"],[["KickSuperListMain9371550036"],"tweenProperty",false,"y","355","",".25",""]]},"width":77,"label":"Menu","x":297,"y":330,"toggle":true,"id":"KickButtonMain9371730315","height":20}},{"filePath":"KickButtonMain.swf","index":13,"properties":{"width":420,"fontColor":13421772,"fontAlign":"left","overFontColor":13421772,"x":0,"cornerRadius":[0,0,0,0],"y":0,"selectedFontAlign":"left","fillColor":[0,0],"id":"KickButtonMain9637895539","borderColor":[6710886,3355443],"downFontColor":13421772,"downFontAlign":"left","selectedFontColor":13421772,"borderThickness":0,"overFontAlign":"left","label":["VideoPlayerComponentMain6431194696","title",true],"actions":{"click":[[["VideoPlayerComponentMain6431194696"],"openSelectedItemURL",false]]},"height":25}},{"filePath":"KickButtonMain.swf","index":14,"properties":{"overBorderThickness":1,"width":27,"actions":{"click":["syndicate"]},"x":348,"downBorderThickness":1,"selectedBorderThickness":1,"y":7,"id":"KickButtonMain6434132476","cornerRadius":[0,0,0,0],"backgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/embed_up.gif%5C%22,%5C%22label%5C%22:%5C%22%5C%22,%5C%22downBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/bp/embed_down.jpg%5C%22,%5C%22overBackgroundImage%5C%22:&quot;http://creative.kickstatic.com/corpsite/3/vidplayer/custom/embed_down.gif%5C%22,%5C%22borderColor&quot;:[6710886,6710886],"selectedBackgroundImage":"","height":20}},{"filePath":"KickButtonMain.swf","index":15,"properties":{"overBorderThickness":1,"width":27,"borderColor":[6710886,6710886],"x":382,"downBorderThickness":1,"selectedBorderThickness":1,"y":7,"downBackgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/fullscreen_down.gif%5C%22,%5C%22cornerRadius&quot;:[0,0,0,0],"actions":{"click":"VideoPlayerComponentMain6431194696","toggleFullScreen",false,"toggle"},"backgroundImage":"http://creative.kickstatic.com/corpsite/3/vidplayer/custom/fullscreen_up.gif%5C%22,%5C%22label%5C%22:%5C%22%5C%22,%5C%22id%5C%22:%5C%22KickButtonMain64336773032%5C%22,%5C%22overBackgroundImage%5C%22:%5C%22http://creative.kickstatic.com/corpsite/3/vidplayer/custom/fullscreen_down.gif%5C%22,%5C%22selectedBorderColor&quot;:[6710886,6710886],"selectedBackgroundImage":"","height":20}}],"properties":{"widgetLabels":{"KickTextAreaMain9371549321":"Text Area 3","KickButtonMain9641637741":"Button 1","KickButtonMain64326759002":"Previous button","KickImageLoaderMain93715493322":"Image Loader 2","KickTextAreaMain9641835140":"Text Area 2","KickTextAreaMain9641863310":"Text Area 6","KickTextAreaMain9918949350":"Text Area 10","VideoPlayerComponentMain6431194696":"Video Player","KickImageLoaderMain99189500032":"Image Loader 5","KickButtonMain64345694992":"Volume button","KickTextAreaMain9641910751":"Text Area 8","KickImageLoaderMain94457379702":"Image Loader 1","KickButtonMain6963429360":"Buttonbar","KickImageLoaderMain99189500012":"Image Loader 4","KickTextAreaMain9637853678":"Text Area 5","KickSuperListMain9371550036":"Menu","KickButtonMain6434132476":"Embed button","KickButtonMain9919080252":"Button 3","KickButtonMain64323179462":"Play button","KickTextAreaMain9641811509":"Text Area 1","KickTextAreaMain9919080261":"Text Area 11","KickTextAreaMain7024116890":"Total time","KickButtonMain9637885518":"Button 10","KickButtonMain69514674682":"Pause button","KickTextAreaMain64334910622":"Time elapsed","KickTextAreaMain9918949338":"Text Area 9","KickImageLoaderMain9371549334":"Image Loader 3","KickSuperListMain9918949360":"List 1","KickButtonMain99189492902":"Button 2","KickButtonMain64336773032":"fullscreen button","KickVolumeControlMain6434384965":"Volume Control 1","KickButtonMain9371549310":"Button 9","KickSuperListMain9919080283":"List 2","KickImageLoaderMain9919080274":"Image Loader 7","KickScrubberMain64311651762":"Scrubber 1","KickTextAreaMain9641886791":"Text Area 7","KickButtonMain9637895539":"header button","KickTextAreaMain9919080271":"Text Area 12","KickButtonMain6433075257":"Next button","KickImageLoaderMain99190802722":"Image Loader 6","KickTextAreaMain9371549331":"Text Area 4","KickButtonMain9371730315":"Menu button"},"wmode":"window","omnitureAutoTrackClicks":false,"externalName":"slide-in playlist menu","windowTarget":"_self","omniturePlayerName":"","width":420,"autoResizeCanvas":false,"omnitureTrackSeconds":0,"affiliateGaAccount":"","revision":36,"varsToAppendToLinks":"","affiliateOmnitureAccount":"","omnitureDc":"","omnitureTrackMilestones":"10,50,90","omnitureVisitorNamespace":"","height":355}},"ssoLoginUrl":"","cs_wid":"null","widgetAkHost":"http://serve.a-widget.com%5C%22}"> <button type="button" onclick="javascript:(SelectAll('widget_source'))"></button>Select all


Questions? Comments? Head over to the message boards and post to the Creating Widgets forum.

Retrieved from "http://www.kickdeveloper.com/api/index.php/Create_a_Slide_-In_Playlist_With_Tweening"