/**
* @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.
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.
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?
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...
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.
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.
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!
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();
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.
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.
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.
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:XML, width:Number, t_height:Number, t_width:Number, scroll: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 (width, t_height*totalRows, t_width, totalRows, totalCols);
table1.setSize(width, t_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)
}
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.
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.
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?
Reply With Quote
Are you still going to keep after the other one?
