?
Solved

How to get the thumbnails working im my XML Driven Video Gallery with Playlist?

Posted on 2009-12-24
15
Medium Priority
?
295 Views
Last Modified: 2013-11-11
Hi,
I have put together a XML Driven Video Player with auto thumbnail detection but there is a problem.The Video plays but, The thumbs will not show. I think my thumbnail function is not reaching the correct node in my XML.Can someone take a look at my Actionscript Please? The Action Script is below. The XML is at the bottom of this post. The top half of the code is the video playing code the bottom is for the thumbs.
 
Actionscript 2.0
---------------------------------------------------------------
 
 
var nc:NetConnection = new NetConnection();
nc.connect(null);
 
var ns:NetStream = new NetStream(nc);
 
ns.setNufferTime(30);
 
ns.onStatus = function(info) {
if (info.code == "NetStream.Buffer.Full") {
bufferClip._visible = false;
}
if (info.code == "NetStream.Buffer.Empty") {
bufferClip._visible = true;
}
if (info.code == "NetStream.Buffer.Stop") {
ns.seek(0);
}
};
theVideo.attachVideo(ns);
 
rewindButton.onRelease = function() {
ns.seek(0);
};
playButton.onRelease = function() {
ns.pause();
};
 
var videoInterval = setInterval(videoStatus, 100);
var amountLoaded:Number;
var duration:Number;
 
ns["onMetaData"] = function (obj) {
duration = obj.duration;
};
 
function videoStatus() {
amountLoaded = ns.bytesLoaded/ns.bytesTotal;
loader.loadbar._width = amountLoaded*187.4;
loader.scrub._x = ns.time/duration*187.4;
}
 
var scrubInterval;
 
loader.scrub.onPress = function() {
clearInterval(videoInterval);
scrubInterval = setInterval(scrubit, 10);
this.startDrag(false,0,this._y,187.4,this._y);
};
 
loader.scrub.onRelease = loader.scrub.onReleaseOutside=function () {
clearInterval(scrubInterval);
videoInterval = setInterval(videoStatus, 100);
this.stopDrag();
};
 
function scrubit() {
ns.seek(Math.floor((loader.scrub._x/187)*duration));
}
 
var theMenu:ContextMenu = new ContextMenu();
theMenu.hideBuiltInItems();
_root.menu = theMenu;
 
var i1:ContextMenuItem = new ContextMenuItem(":::::Video Controls:::::", trace);
theMenu.customItems[0] = i1;
 
var i2:ContextMenuItem = new ContextMenuItem("Play / Pause Video", pauseIt, true);
theMenu.customItems[1] = i2;
 
var i3:ContextMenuItem = new ContextMenuItem("Replay Video", replayIt);
theMenu.customItems[2] = i3;
 
var i4:ContextMenuItem = new ContextMenuItem("All Rights Reserved 2009", trace, true);
theMenu.customItems[3] = i4;
 
var i5:ContextMenuItem = new ContextMenuItem("SamAndOnline.com Video Player", trace);
theMenu.customItems[4] = i5;
 
function pauseIt() {
ns.pause();
 
}
 
function replayIt() {
ns.seek(0);
}
 
//sound controls
 
_root.createEmptyMovieClip("vSound",_root.getNextHighestDepth());
vSound.attachAudio(ns);
 
var so:Sound = new Sound(vSound);
 
 
 
 
so.setVolume(100);
volControl.volcon.slider1.onPress = function() {
this.startDrag(true,volControl.volcon.groove1._x,volControl.volcon.groove1._y,vo lControl.volcon.groove1._x,volControl.volcon.groove1._y+100);
slideit = setInterval(volControl.volcon.slider_1Move, 100, this);
};
volControl.volcon.slider1.onRelease = function() {
this.stopDrag();
clearInterval(slideit);
mute.gotoAndStop("on");
};
volControl.volcon.slider1.onReleaseOutside = function() {
this.stopDrag();
clearInterval(slideit);
mute.gotoAndStop("on");
};
 
 
mute.onRollOver = function() {
if (so.getVolume() == 100) {
this.gotoAndStop("onOver");
} else {
this.gotoAndStop("muteOver");
}
};
 
 
mute.onRollOut = function() {
if (so.getVolume() == 100) {
this.gotoAndStop("on");
} else {
this.gotoAndStop("mute");
}
};
 
mute.onRelease = function() {
if (so.getVolume() == 100) {
so.setVolume(0);
this.gotoAndStop("muteOver");
 
} else {
so.setVolume(100);
this.gotoAndStop("onOver");
}
};
//listBx
var vlist:XML = new XML();
vlist.ignoreWhite = true;
 
 
vlist.onLoad = function() {
var videos:Array = this.firstChild.childNodes;
for (i=0; i<videos.length; i++) {
videoList.addItem({label:videos[i].attributes.desc,data:videos[i].attributes.url ,image:videos[i].attributes.thumb});
}
//play 1st video
ns.play(videoList.getItemAt(0).data);
videoList.selectedIndex = 0;
//would like to reference something in the XML File with the thumb attribute
thumbnails_fn(i);
 
};
 
var vidList:Object = new Object();
 
vidList.change = function() {
ns.play(videoList.getItemAt(videoList.selectedIndex).data);
};
videoList.addEventListener("change",vidList);
 
vlist.load("videos.xml");
 
 
soundb.onRelease = function() {
if (volControl.switch2=open2) {
volControl.gotoAndPlay("open");
} else {
volControl.play();
}
};
 
///---------------------------------------------------------
function thumbNailScroller() {
// thumbnail code!
this.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
 
function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(image[k], "thumbnail_mc.t"+k);
}
trace(videoList.getItemAt(0).image+ "k= "+k+" "+videos.length+" pv "+target_mc.pictureValue+" thumbnails");
 
 
 
 
 
XML Example
------------------------------------------------
 
<?xml version="1.0" encoding="ISO-8859-1"?>
<videos>
<video url="vid1.flv" desc="Video 1" thumb="1.jpg"/>
<video url="vid2.flv" desc="Video 2" thumb="2.jpg"/>
</videos>
0
Comment
Question by:samuels27921
  • 8
  • 7
15 Comments
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26126443
Your code looks correct for the image to load, do you have a sample page for me to view?
0
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26126462
Taken another look at the code, it seems that I found the problem.

Since you did not specify properly whether you did use any components, I supposed you use the list component for the variable videoList. I took a look where you use videoList and it seems that you used the properties of the list component, I can't be sure though if you are using datagrid. Nevertheless, the problem seems to be already known by you.

Look at this code snippet below from you:

function thumbnails_fn(k) {
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+k)._width+5)*k;
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
this._alpha = 50;
thumbNailScroller();
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(image[k], "thumbnail_mc.t"+k);
}
trace(videoList.getItemAt(0).image+ "k= "+k+" "+videos.length+" pv "+target_mc.pictureValue+" thumbnails");

It seems you are trying to load the thumbnail here in this line of code

image_mcl.loadClip(image[k], "thumbnail_mc.t"+k);

However, I couldn't find any variables referenced with image except in the videoList. However, you can't get the image like this. You have to do it like what you did in the trace code.

You simply change image[k] into

videoList.getItemAt(k).image

The reason I said you know this already because you traced it yourself, except that you put image[k] in the code instead.

So the new reflected line of code will be

image_mcl.loadClip(videoList.getItemAt(k).image, "thumbnail_mc.t"+k);

and not

image_mcl.loadClip(image[k], "thumbnail_mc.t"+k);
 
0
 

Author Comment

by:samuels27921
ID: 26128614
everything you said so far is true. i tried it that way and the thumbs wont show still. i can post the fla.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:TanLiHao
ID: 26129395
OK please post the .fla and I will try to see what's wrong.
0
 

Author Comment

by:samuels27921
ID: 26131091
Here's the attachment
sonytv2.fla
0
 

Author Comment

by:samuels27921
ID: 26134745
So the new reflected you gave me worked when I changed the value k to 1 or 0. I need it to know how many movie clips to generate tho

image_mcl.loadClip(videoList.getItemAt(k).image, "thumbnail_mc.t"+k);
0
 

Author Comment

by:samuels27921
ID: 26134793
the total number of XML entries is videos that length, but it is cleared or undefined when referenced outside on my onload function. How can I fix this
0
 

Author Comment

by:samuels27921
ID: 26134802
im sorry , videos.length
0
 

Author Comment

by:samuels27921
ID: 26134812
the problem is the value "k" which is the number of XML entries (videos.length) is cleared outside of the onload function. I have tried passing it to a varaible but it is still cleared. What can i do to retain the number.
0
 
LVL 14

Assisted Solution

by:TanLiHao
TanLiHao earned 2000 total points
ID: 26135983
The thing is you are doing it all wrongly, when your xml is loaded you play the first video. Therefore the thumbnail function is actually called wrongly. It must called with index 0 instead of i since you want to play the first video. By calling i you are calling the length of the videos (that is 2), the index 2 does not represent the thumbnails of the first thumbnail or second thumbnail, thus your thumbnail does not load.

In your .fla you traced k in onLoad, that is still wrong, k does not exist there but exists as a parameter in thumbnail's function. Therefore, you should trace i instead. In the original code snippet, k also does not exist for the same reason. Therefore to trace it, define a global variable or a variable on the frame instead of trying to read the parameter.

However, all these are unnecessary and do not contribute to your problem.
The problem has already been mentioned above.


Now you just need to call the thumbnail function like this
//play 1st video
ns.play(videoList.getItemAt(0).data);
videoList.selectedIndex = 0;
//would like to reference something in the XML File with the thumb attribute
thumbnails_fn(0);

instead of
//play 1st video
ns.play(videoList.getItemAt(0).data);
videoList.selectedIndex = 0;
//would like to reference something in the XML File with the thumb attribute
thumbnails_fn(i);


See how you must use 0 in the play of NetStream and thumbnails_fn? Otherwise it doesn't make sense, there are still many instances of code problems that do not behave right, but at least they work and fix your problem now.

Therefore, you may probably want to add a "change" event listener for your videoList list component so that when you click on another video, you will play another video. However, that's not part of your question so you should know how to do it yourself.
0
 

Accepted Solution

by:
samuels27921 earned 0 total points
ID: 26140029
I moved my thumbnails_fn(i); to my for-loop and that solved the problem. Thanks for everything.

vlist.onLoad = function() {
var videos:Array = this.firstChild.childNodes;
for (i=0; i<videos.length; i++) {
videoList.addItem({label:videos[i].attributes.desc,data:videos[i].attributes.url ,image:videos[i].attributes.thumb});
thumbnails_fn(i);}
//play 1st video
ns.play(videoList.getItemAt(0).data);
videoList.selectedIndex = 0;
0
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26143496
Are you going to award me the points or delete the question or what?
0
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26151760
Though I won't object yet, but I want to know the reason for you closing the question. I have helped you spot your mistakes and actually guided you to find the answer, I do not know if you would figure it out by yourself but I actually did help you with your problem.

Because of that, you should at least award me a B grade.
0
 

Author Comment

by:samuels27921
ID: 26154627
i award you i dont know why it wont give it to u.
0
 
LVL 14

Expert Comment

by:TanLiHao
ID: 26156957
Ah yes, I know why that is happening. Don't worry, the system will award me the points soon.

samuels27921 has requested that this question be closed by accepting samuels27921's comment #26140029 (0 points) as the solution and TanLiHao's comment #26135983 (500 points) as the assisted solution for the following reason:            i was able to figure it out.              To cancel this request and generate a request in Community Support for Moderator review, state your reason for objecting in the standard comment box and click the 'Object' button.  This question will be closed on 1/3/2010 if there are no objections.

This is what I see, so you are accepting your own post as a solution and my comment as the assisted solution, therefore due to the system's requirements, it will take some time for the expert to respond before it allows you to accept your own answer. As long as no experts object, what you requested will become final.

Therefore the reason is because of accepting your own post, and that will take some time due to the reason I said above. Thanks for replying back though.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

While working over numerous projects I often had the requirement for doing a screen capture in AS3.0. Unfortunately I found no "ready made" solutions in google search that suited my requirements. But I did come across some great resources which help…
Create a Windows 10 custom Image with custom task bar and custom start menu using XML for deployment.
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question