topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-js-flow.cfg / cfg

setup flow player 


  
  <!-- 
          This is Flowplayer standalone demo. The fastest way to get started. 
          You can freely copy things on your site. All demos can be found from: 
          
          http://flowplayer.org/demos/
  	
  	Enjoy!
  -->

script(s) 


  
  <script type="text/javascript" src="lib-flow-example-files-flowplayer-3.js"></script>

style(s) 


  <link rel="stylesheet" type="text/css" href="lib-flow-example-files-standalone.css">

player container 

 
  </head><body><a id="splash" href="http://blip.tv/file/get/N8inpasadena-Flowers457.flv" style="width: 700px; height: 378px; display: block;">
          
          <!-- nested splash image -->
          <img src="lib-flow-example-files-helloworld.jpg" alt="Canvas background demo"> 
  </a>

script / loadplayer 


  
  <script>
  f("splash", "swf/flowplayer-3.1.0.swf",  {
  
          plugins:  {

controlbar settings


                  controls:  {
                          backgroundGradient: 'none',
                          backgroundColor: 'transparent',
                          all:false,
                          scrubber:true,
                          mute: true,
                          height:40
                  },

content plugin settings


                  content: {
                          url: 'swf/flowplayer.content-3.1.0.swf',
                          width:260, height:200, top:20, left: 20,
                          backgroundGradient:'none',
                          borderRadius:30,
                          padding: 15,                        
                          body: {fontSize:20},
                          html: 'This time you have a large canvas to play with.' + 
                                  'Remember that you can use powerfull positioning and animation possibilities'
                  }
          },

canvas background


          canvas: {
                  backgroundImage: 'url(@soutine.jpg)'
          },
          
          // screen positioning inside "Hello world" screen.
          screen: {                
                  width:387, height:231, top:55, right:77
          },

animation example for content plugin


          clip: {
                  onCuepoint: [5000, function() {
                          var plugin = this.getPlugin("content");
                          
                          plugin.setHtml("").animate({height:40, width: 450}, 2000, function()  {
                          
                                  // here animation is finished
                                  this.css("padding", 7);
                                   this.setHtml("Just <b>THINK</b> about all the possibilities");
                          })
                  }]
          }
          
  });
  </script>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.