dcsimg
A Flash Developer Resource Site

Results 1 to 20 of 23

Thread: Building Video thumbnail component

Threaded View

  1. #1
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244

    Building Video thumbnail component

    OK Here's what I'm up to.
    http://bretlanius.com/flash/km7stuff/thumbtest.html
    I've managed to create a component that is a thumbnail for making a table of them as a kind of playlist for a media player.

    It's working so far
    Code:
    /**
    
    * @author Bret Lanius
    
    * @version 0.1
    
    * class Intended for use with Koolmoves 7 Media player component.
    
    * vthumb(imageURL,videoURL,infoText,xSize,Ysize);
    
    */
    
    
    
    package com.bretlanius.ui {
    
        import net.stevensacks.preloaders.CircleSlicePreloader;
        import com.calypso88.Pic;//  doc at http://www.calypso88.com/?page_id=94
        import gs.TweenMax;
        import gs.easing.*;
        import flash.display.*;
        import flash.events.*;
        import flash.geom.*;
        import flash.text.TextField;
        import flash.text.TextFormat;
    	  
    
       public class vthumb extends Sprite
       {
    	   public var vURL:String ;
    	   public var info:String;
    	   public var t:TextField = new TextField();
    	   public var preloader:CircleSlicePreloader = new CircleSlicePreloader();
    	   //var tween:TweenMax = TweenMax.to(t, 0, { alpha:0 } );
          public function vthumb(title:String,imageURL:String,videoURL:String,infoText:String,xSize:Number,ySize:Number):void {//set defaults
    		vURL = videoURL;
    		info = infoText;
             //get image load into image
            		
    		preloader.x = xSize/ 2;
    		preloader.y = ySize/ 2;
    		addChild(preloader);
    		
            var p:Pic = new Pic(imageURL);
    		p.addEventListener(Pic.LOADED, onLoaded);
    		
    		p.alpha = 0;
    		p.scaleX = .4;
    		p.scaleY = 0;
    		addChild(p);
    		
            addEventListener(MouseEvent.ROLL_OVER, showTitle);
    		addEventListener(MouseEvent.ROLL_OUT, hideTitle);
            
            //create Info panel and load text into it
                var tformat:TextFormat = new TextFormat();
    			tformat.size = 12;
    			tformat.align = "center";
    			t.alpha = 0;
    			t.background = true;
    			t.border = true;
                t.multiline = true;
                t.wordWrap = true;
                t.selectable = false;
                t.width = xSize;
    			t.height = ySize;
             t.defaultTextFormat = tformat;   
             t.text = title;
            
            
             addChild(t);
    
          }
    	  public function getURL():String
    	{
    		return vURL;
    	}
    	public function getInfo():String
    	{
    		return info;
    	}
    	public function showTitle(e:MouseEvent):void
    	{
    		//t.alpha = .8;
    		//tween.setDestination("alpha", .8);
    		TweenMax.to(t, 1.5, { alpha:.8 } );
    	}
    	public function hideTitle(e:MouseEvent):void
    	{
    		//t.alpha = 0;
    		//tween.setDestination("alpha", 0);
    		TweenMax.to(t, 1.5, { alpha:0 } );
    	}
    	private function onLoaded(e:Event):void
    	{
    		
    		removeChild(preloader);
    		TweenMax.to(e.currentTarget, 1, {scaleX:.6,scaleY:.6,alpha:1,ease:Bounce.easeOut});
    	}
    	
    	}//end class
    
    }//end Package
    And the code in my test so far it's mostly working fine (NOTE:there is alot of test code in there not doing anything, like the XML loader)
    Code:
     /*
    Video player using XML loaded thumbnails in Scrollpane
    Bret Lanius
    bret@bretlanius.com
    Requires Koolmoves (koolmoves.com)
    
    
    */
    import com.bretlanius.ui.vthumb;
    import km.components.*;
    import km.display.*;
    
    var myXML:XML=new XML();
    var myLoader:URLLoader=new URLLoader();
    myLoader.load(new URLRequest("videos.xml"));
    myLoader.addEventListener(Event.COMPLETE,onComplete);
    
    function onComplete(e:Event):void{
    	//myXML=e.target;
    	trace(e.target.data is XMLList);
    	}
    
    function fn(cell:SimpleTableCell):void {
     cell.content = new vthumb("My Title\nShort test Video","C0030174.jpg","test"+cell.col+"-"+cell.row+".flv","The <b>description</b> of the video Clip goes here",80,160);
     cell.content.addEventListener(MouseEvent.CLICK,click);
     //cell.content.label.text = 'Cell ' + cell.col + ',' + cell.row;
     //ScriptedSkin.applyTo(cell.content);
    }
    
    var table:SimpleTable = new SimpleTable();
    table.onCellCreate = fn;
    table.setSize(330, 330,4,4);
    table.move(20, 20);
    //table.colWidths = [.25, .25, .25, .25];
    //table.rowHeights = [.25, .25, .25, .25];
    table.cellPadding = 0;
    //table.cell(1,0).span(2,1);
    table.update();
    
    addChild(table);
    /*
    var sp:ScrollPane = new ScrollPane();
    ScriptedSkin.applyTo(sp);
    sp.setSize(350,200);
    sp.setContent(table);
    sp.x=30;
    sp.y=30;
    addChild(sp);
    */
    function click(e:MouseEvent){
    	txt1.htmlText=e.currentTarget.getURL();
    	txt1.htmlText+=e.currentTarget.getInfo();
    	}
    
    
    function trace(s:String):void{
    	debug.text+=s+"\n";
    	}
    Now I'm thinking the right thing is to make yet another component that uses this one that is the table already with the end goal would be that you'd create this playlist table of thumbnails add it to your movie and pass it an XML of information that it then creates the table full of thumbnails.

    Anyone have any input?
    Last edited by blanius; 08-01-2009 at 11:33 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center