dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 23

Thread: Building Video thumbnail component

  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.

  2. #2
    Junior Member
    Join Date
    Aug 2009
    Posts
    1
    This is an interesting discussion. thank you for sharing
    demande simulation pret personnel en ligne -

    Pret personnel en ligne et de comparer les meilleurs taux afin de... La demande de pręt personnel en

    ligne
    demande simulation pret personnel en ligne

  3. #3
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    No interest eh? I was thinking this could be the first part for several components like a scrolling video menu and such. Just trying to think about how to make it flexible without making it too complicated. For example it really should allow setting the size and scale the loaded thumbnail as needed.

  4. #4
    Senior Member etuom's Avatar
    Join Date
    Sep 2006
    Location
    Minnesota
    Posts
    193
    No interest eh?
    Well, I for one am interested but I am still learning how to write variables and functions. As I was looking through the components I had thought something like this could be done ( I was thinking of image galleries) but this is far beyond where I am at. Regardless, I am quite interested how this develops even though I don't have much to offer. BTW, what is the lower ScrollPane for?
    Last edited by etuom; 08-03-2009 at 05:42 PM.

  5. #5
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    The scrollpane if you uncomment it moves the simpletable into a scroll pane. Just trying things. For creating components I'm finding using FlashDevelop as my editor really helps as it has code hinting and for example if you import my vthumb component into another new component it will code hint functions from within my component. I just edit it there save it and compile everything within KM...

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

    Components

    Well I'm just learning this myself. But here's what I know so far...

    To create a component you need to do it in an external Actionscript file,
    The first thing to understand is the basic structure of an external component

    PHP Code:
    package com.bretlanius.ui
    {
        
        
    /**
        * ...
        * @author DefaultUser (Tools -> Custom Arguments...)
        */
        
    public class  myNewClass extends Sprite
        
    {
            public function 
    myNewClass(x:number,y:number){
                      
    //stuff to do when class is created.
                     
    }
        }
        

    Notice the whole thing is wrapped in a "package" this must be named the same as the path that it is saved in. In this case it would be com/bretlanius/ui/myNewClass.as

    Then we define the class and it must "extend" an existing class so that it can inherit the methods (functions) and properties of the extended class. In my case I'm extending Sprite as that seem to have what I needed but you could extend movieclip if you need for example timeline functions like enterframe etc.

    Then you MUST define what is called the constructor function it is always named the same as the class. This is run when the component is created. So in the vthumb example it declares what variables I want sent. You can also set defaults here as well I believe if you want any to be optional.

    After that you just create methods and properties as you would in KM except you declare public or private depending on if you want the function (method) to be callable from outside the component.

    I hope that clears it up a little. Look of this class with this in mind and see if that doesn't clear things up at all. Keep in mind this is an experimental class and some stuff is not used or is hard coded where it would not be in a final class.

  7. #7
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Ok here's a little sample of where this is more fully working... It's only the vthumb component. I'm still tinkering around with it but this is a fairly full test of most of the ideas.

    http://bretlanius.com/thumbtest.html

    (note I may very well pull this down after awhile)

  8. #8
    Senior Member etuom's Avatar
    Join Date
    Sep 2006
    Location
    Minnesota
    Posts
    193
    Pretty slick! Are you still going to keep after the other one?

    As to your previous comments, they address some issues that I have run into as I continue to go through the book ActionScript 3.0 by Derrick Ypenburg. So as not to derail this thread I am going to start a new one which takes up this topic. I'll provide a link on this post when ready. Hope to see you there!

    Eric

    Here is the Link http://board.flashkit.com/board/showthread.php?t=800084 Bret could you look at this example that I think relates to what you are talking about?
    Last edited by etuom; 08-04-2009 at 01:25 AM.

  9. #9
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    OK so I now have my XMLthumbs component working... It uses the thumbnail component and so to create the kind of media player I wanted you just drop a mediaplayer on the stage and name it mp1 add an HTML textfield as txt1 then the only code you need is
    PHP Code:
    /*
    Video player using XML loaded thumbnails in Scrollpane
    Bret Lanius
    bret@bretlanius.com
    Requires Koolmoves (koolmoves.com)
    Requires com.bretlanius.ui.vthumbs.as

    */
    import com.bretlanius.ui.XMLthumbs;

    var 
    table:XMLthumbs;
    var 
    myXML:XML=new XML();
    var 
    myLoader:URLLoader=new URLLoader();

    myLoader.load(new URLRequest("videos.xml"));
    myLoader.addEventListener(Event.COMPLETE,onComplete);
    mp1.addEventListener("playlistSet",playlistset);

    function 
    playlistset(e:Event){
        
    txt1.htmlText=table.getInfo();
        }
    function 
    onComplete(e:Event):void{
        
    myXML=new XML(e.target.data);
        
    table=new XMLthumbs(myXML,360,80,80,true,mp1);
        
    addChild(table);
        } 
    Of course you also need the xml file in the following format:
    Code:
     <?xml version="1.0" ?> 
    <rootTag>
      <video>
         <name>My video name 1</name> 
         <path>myvideo.flv</path> 
         <description>Full description</description> 
         <thumb>myvideothumbnail.jpg</thumb> 
      </video>
    </rootTag>

  10. #10
    Senior Member etuom's Avatar
    Join Date
    Sep 2006
    Location
    Minnesota
    Posts
    193
    Hi Bret! Haven't had a lot of time lately to post but could you describe what is going on in this line. (and what other choices you might have here)?



    Code:
    table=new XMLthumbs(myXML,360,80,80,true,mp1);
    Thanks, E

  11. #11
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Hi Eric sure... That line creates an instance of my component. Which is a simpletable filled with my video thumbnails, so the line breaks down as
    The component is called XMLthumbs

    So I create an object named table that is a new instance of XMLthumbs and pass it the paramaters of myXML which is the xml data that I've loaded, then I send 360 which is the width I'd like the table, then 80,80 are the thumbnail dimensions , an true that I want it in a scroll pane, and mp1 is the name of the mediaplayer to set the playlist to the click thumbnail's video.

    Does that clear it up?

    I'm still tweeking a bit but will post the code soon. I can send you what I have now if you'd like to play with it.

  12. #12
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    I'm looking at some code for generating thumbnails from an FLV on the server...

  13. #13
    Senior Member etuom's Avatar
    Join Date
    Sep 2006
    Location
    Minnesota
    Posts
    193
    Hey Bret, a few questions,

    Do the thumbnails load in the table across the width and then continue loading below the previous ones until complete?

    I can see why you would want the ability to scroll but what happens if the boolean is false? Do the thumbs load until complete even though you might have some you wont see, or do they stop, or not load at all?

    How do you produce the thumbs from video?


    Yeah I would be interested to see how you set all this up. But BEWARE! I might pester you with lots of questions. Then again, that might be a good thing.

  14. #14
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Here's the class, note it requires the vthumb class as well.
    So it looks at the XML and sees how many thumbs and using the width of the thumbs and the width of the table calculates how many will fit in a row then I divide the total by that many and figure how many rows I need. It will create as many rows as needed, this is why the scroll pane option, so it there are alot of rows you could end up with a really long table, currently the scroll pane height is a fixed size of what should be 3 rows high plus a smidge.

    As for creating thumbnails, I'm still working on that. I've found some PHP code that does it on the server. I imagine I'd do this as part of an upload process, this is the next thing I want to work on... A simple way to add/delete videos from my database with the goal of being part of a larger content system for my future site.

    I really need to pretty this up still, also I'm not happy with the player skins as the ones I like don't have the fullscreen button... I've done my own skins before so should be able to port one of them over to the new version.


    PHP Code:
    /**
        * ...
        * @author Bret Lanius

        * @version 0.1
        */
    package com.bretlanius.ui
    {
        
        
    import flash.display.Sprite;
        
    import com.bretlanius.ui.vthumb;
        
    import flash.events.MouseEvent;
        
    import km.components.*;
        
    import km.display.*;
        
    import km.skins.*;
        
            
        public class 
    XMLthumbs extends Sprite 
        
    {    
                
    //--------------------------------------
            //  GLOBAL VARIABLES
            //--------------------------------------
            
    var theXML:XML;
            var 
    tableWidth:Number;
            var 
    player:MediaPlayer;
            var 
    idx:Number 0;
            
            
    //--------------------------------------
            //  CONSTRUCTOR
            //--------------------------------------
            
    public function XMLthumbs (myXML:XMLwidth:Numbert_height:Numbert_width:Numberscroll:Boolean,mp:MediaPlayer)
            {
                
    theXML myXML;
                
    tableWidth width;
                
    player mp;
                var 
    totalThumbs:Number myXML.video.length();
                var 
    table1 = new SimpleTable();
                
    table1.onCellCreate fn;
                
    maxCols Math.ceil(width t_width);
                var 
    totalRows:Number =Math.ceil(totalThumbs/maxCols);
                var 
    totalCols:Number Math.ceil(totalThumbs totalRows);
                
    trace (widtht_height*totalRowst_widthtotalRowstotalCols);
                
    table1.setSize(widtht_height totalRows,totalCols,totalRows);
                
    table1.cellPadding 1;
                
    table1.update();
                
    addChild(table1);
                
                    if (
    scroll)
                    {
                        var 
    sp:ScrollPane = new ScrollPane();
                        
    ScriptedSkin.applyTo(sp);
                        
    sp.setSize(width+20,t_height*3);
                        
    sp.setContent(table1);
                        
    addChild(sp)
                    }
                
            }
                
                
            
            
    //--------------------------------------
            //  PRIVATE VARIABLES
            //--------------------------------------
            
            //--------------------------------------
            // GETTER / SETTERS
            //--------------------------------------
            
    public function getInfo():String {
                return 
    info;
                
    trace ("in class:"+info);
            }
            
    //--------------------------------------
              //  PUBLIC METHODS
              //--------------------------------------
            
            //--------------------------------------
              //  EVENT HANDLERS
              //--------------------------------------
            
    private function click(e:MouseEvent):void {
                
    video=e.currentTarget.getURL();
                
    info=e.currentTarget.getInfo();
                
    title=e.currentTarget.getTitle();
                
    pl='<playlist pause="false"><item label="';
                
    pl += title;
                
    pl += '"><video src="';
                
    pl += video;
                
    pl += '" /></item></playlist>';
                
    player.setXMLPlaylist(pl);

            }
            
    //--------------------------------------
            //  PRIVATE & PROTECTED INSTANCE METHODS
            //--------------------------------------
            
            
    private function fn(cell:SimpleTableCell) {
                if (
    idx theXML.video.length()) {
                    
    cell.content = new vthumb(theXML.video.name[idx],theXML.video.thumb[idx],theXML.video.path[idx],theXML.video.description[idx],80,80);
                    
    idx++;
                    
    cell.content.addEventListener(MouseEvent.CLICK,click);
                }
            }
            
        }
    //class


  15. #15
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Man, I'm glad you asked, while looking at things again I found a few problems to fix.

  16. #16
    Senior Member etuom's Avatar
    Join Date
    Sep 2006
    Location
    Minnesota
    Posts
    193
    Ok, I feel a little lost here. I have your two classes saved at com/bretlanius/ui, the preloader class and the pic class saved at thier respectice folders. I have an XML file in my project folder coded as you have given. The XML of course doesn't have anything to show but I can produce a scroll pane with one thumbnail that doesn't show the bottom border. Still, I'm encouraged considering I don't have a clue yet. So while you are working things out I'll study up on your classes to get up to speed. I'll be tied up with some other things so it might be awhile before I can proceed much further. I read the board regularly so I'll see anything you post. Later, E.

  17. #17
    Senior Member etuom's Avatar
    Join Date
    Sep 2006
    Location
    Minnesota
    Posts
    193
    Just wanted to add on the subject of skins.

    Have you considered the feasibility of making a skin that encompassed the entire component, media player and all? If that could be done and be user friendly I think it would be icing on the cake. Probably way down the road though. Just a thought.

  18. #18
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Hey Eric, I did use a couple of other classes for all this. One is the TweenMax/TweenLite classes and a simple preloader and the PIC class for loading the images... The preloader and the PIC class I have links to them in my class, the tweenMax should be on everyone's class path as it's so useful so do a search for it and play with it.

    I'll include my classes here so you can play with the current versions. I probably am done with it so far as the version I'm sharing here and others are welcome to change/adapt it I would love to see what someone else would do with it. My main goal with sharing it is to encourage KM users to try to build their own classes or at least understand how it's done.

    For example how about a horizontal scroller of thumbnails with reflections?
    Attached Files Attached Files

  19. #19
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    Oh by the way as soon as I get the time I'll do some sort of tutorial on building a class and post on my blog http://blanius.blogspot.com/

  20. #20
    Junior Member
    Join Date
    Feb 2010
    Posts
    26
    hi blanius, do you think you could post a fun file of this?

    I have all the classes and the xml file in the right folder structure, but I must be doing something wrong.

    the code you also have above, is all put into the stage, or are your later posts replacement code, for earlier code?

    cheers

    B

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