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.htm / htm

setup flow player -- http://flowplayer.org 


  
  <!-- 
   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.