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

lib-flow-example-canvas.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html><head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  
  <!-- 
          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!
  -->
  
  <!-- DOCTYPE is always recommended. see: http://www.quirksmode.org/css/quirksmode.html -->
   
  
  <!-- flowplayer scripts should be loaded from your servers NOT from static.flowplayer.org  -->
  
  <script type="text/javascript" src="lib-flow-example-files-flowplayer-3.js"></script>
  
    
  <!-- some styling for the standalone page. this line can (or must) be removed -->
  <link rel="stylesheet" type="text/css" href="lib-flow-example-files-standalone.css">
  
  <!-- large 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>
  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>
  </body></html>
[] 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 20/2/2008

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.