Flashlevel Nav?

[simplistik]

I don't post to many things I can't find the answer to myself but this one I'm having a few problems accomplishing.

I want to create something very similar to the flashlevel (http://www.flashlevel.com) navigation they have, JUST the navigation. I would like to turn it into a thumb scroller. It's very similar to an infinite menu, but not infinite.

Just thought I'd see if anyone can help me out w/ it as I'm no flash guru. Any help is appriciated.

Edit:
Oh yea I want to be able to upload my images dynamically, using an xml list or something too... but that I can establish later.

[simplistik]

BUMP - help me plz or i'll cry :(...

[Voetsjoeba]

I'll see if I can whip something up for you :)

[Voetsjoeba]

Alrighty, how's this ? :)

SWF (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/index.html)
FLA (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/navMX.fla)
XML (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/images.xml)
Images (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/images)

[icio]

nice :)

[simplistik]

lol... i knew I should've just called you first :)

[[m]]

Heh~ This is the standard scroll thingy I always use. :rabbit:

Ok, not really god information, but what the hell.

[simplistik]

Alright, I've been tryin this and I thought I did everythign right but apparently I didn't... how can I add a description loaded dynamically from the XML as well when I mouse over the thumb? I'm able to call the xml name but it will on get the first or last description tag... not the one to the corresponding thumb.

[Voetsjoeba]

Hey simplistik, make sure to reply to this thread in the next 24h so I'll see it tomorrow.

[simplistik]

k, i replied :)

[simplistik]

Only bumping this back up cause there were 15 new posts.

[pom]

Alrighty, how's this ? :)

SWF (http://www.spotwebsolutions.com/~voetsjoe/upload/flashlevelnav/index.html)
FLA (http://www.spotwebsolutions.com/~voetsjoe/upload/flashlevelnav/navMX.fla)
XML (http://www.spotwebsolutions.com/~voetsjoe/upload/flashlevelnav/images.xml)
Images (http://www.spotwebsolutions.com/~voetsjoe/upload/flashlevelnav/images)
I get nothing but 404s :crying: I wanna see! :P

[Voetsjoeba]

Woops, sorry, changing servers and stuff:

SWF (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/index.html)
FLA (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/navMX.fla)
XML (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/images.xml)
Images (http://www.spotwebsolutions.com/~voetsjoe/upload/flnav/images)

[Voetsjoeba]

Ack - I'm short on time here simplistik. Sorry, but work is first priority. I just hope I won't forget.

[simplistik]

No hurry... just do what you can when ever... this is a freebie and I completely understand where priorities lie.

[Voetsjoeba]

Hey simplistik, where do you want the captions to come ?

[simplistik]

I've attached an image so you can see how I've skinned it... and so you can see how I want the caption to show up.

[Voetsjoeba]

Updated :)

[simplistik]

Very nice... I had something pretty similar but didn't get the same results... you're the man.

[GreenLantern]

Wow, that is awesome.

I vote this be moved to "best of kirupa"

[Ubik]

Hello,
Hey voets, sorry to ask, i know your busy, but how can i add a loadMovie command to an image ?
Thanks, it's a great scroller, very smooth :)

[Voetsjoeba]

The code that handles the events is in the thumbMC movieclip in the library. The main code writes a variable to that movieclip, which it can then use there. That would be link and path. The link is get from the XML file, read by the main script and written to the movieclip, where the code then uses it. Same for path. So just change getURL to loadMovie, and in the XML file change the urls to your swf filenames and you're done.

[casper_designs]

Very nice Voetsjoeba :te:

I was wondering how you could make the menu move horizontally instead of vertically?

[Voetsjoeba]

I'll look into it tomorrow, it's time for bed here now. Can you bump this thread in say, an hour, so that I won't forget tomorrow ?

[casper_designs]

bump ... no problem

[Voetsjoeba]

Here ya go :)

[casper_designs]

thanks! you the man :beer:

[Voetsjoeba]

Anytime :beer:

[Ubik]

The code that handles the events is in the thumbMC movieclip in the library. The main code writes a variable to that movieclip, which it can then use there. That would be link and path. The link is get from the XML file, read by the main script and written to the movieclip, where the code then uses it. Same for path. So just change getURL to loadMovie, and in the XML file change the urls to your swf filenames and you're done.
Hey thank you voets :) I couldn't find this thread anymore, i thought it had disapeared in the flow of threads but... yeah... this is a best of indeed !:thumb:

[artwisted]

nice.

k i was wondering what wpuld i have to do for it to load a jpeg into a conatiner?
im learning script but this menu is complicated lol.
can some one help me out

[Voetsjoeba]

Check out this tutorial:
http://www.kirupa.com/developer/actionscript/loading_random_movie2.htm

[artwisted]

i dont really see hwo it woudl work with that type of menu. since the pictures are loaded dynamically.
could i change replace the http" address in the xml file? to load into a empty movie clip?

[Voetsjoeba]

Oh I thought you were talking in general ... well, look in the script for loadMovie, that's where it loads the jpgs ;)

[artwisted]

no, i dotn think im making my self clear, let me try to expalin a little better.
im lookin at the way you have the images loaded into a xml fiel, while load in to the thumb mc.
But what i want to do it, when they click on the thumbnail, i want to load a bigger picture into a diffrent emptyMovieClip.

but the thing is when i click on the thumbnail, it gives me a web page.

now the question is, how would i go about loading a jpeg instead of opening a web page?

i would usually use, loadMovieNum blah blah blah.
but since the pictures ar eloaded dynamically , im not to sure how to go about this one?
thanks

[Voetsjoeba]

The pictures that are dynamically loaded is nothing to worry about - it's the onRelease handler that counts. You'll see that I have a getURL action there - that's what opens the link to the page. So simply replace it with your loadMovie command. I think that the url is also loaded from the XML, so instead of putting a URL there you can put a swf name in it.

[artwisted]

<images>
<image>
<path>images/angel.jpg</path>
<url>loadMovie("angel.jpg",_root.picture</url>
<caption>ultimatum</caption>
</image>
</images>

Ok this does not work but am i headign int the right direction?

[Voetsjoeba]

You don't put the loadMovie in the XML itself, only the name of the swf to load. So:

<images>
<image>
<path>images/angel.jpg</path>
<url>angel.jpg</url>
<caption>ultimatum</caption>
</image>
</images>

Then, in the AS, instead of getURL(thevarhere,"_blank") you use _root.picture.loadMovie(thevarhere).

[artwisted]

ah ok. ill give it a ry later. see how it works out


You don't put the loadMovie in the XML itself, only the name of the swf to load. So:

<images>
<image>
<path>images/angel.jpg</path>
<url>angel.jpg</url>
<caption>ultimatum</caption>
</image>
</images>

Then, in the AS, instead of getURL(thevarhere,"_blank") you use _root.picture.loadMovie(thevarhere).

[McGuffin]

Hey Voets, I just wanted to say thanks, I found a way to recode some of the stuff you posted and use it on my site :)

[artwisted]

OK i put the xml fiel liek you said.
but the AS does not have a get url


images = new Array();
xml_file = "images.xml";
xmlload = new XML();
xmlload.ignoreWhite = true;
xmlload.onLoad = function(ok) {
if (ok) {
count = this.firstChild.childNodes.length;
for (var i = 0; i<count; i++) {
curNode = this.firstChild.childNodes[i];
images[i] = {path:curNode.childNodes[0].firstChild.nodeValue,link:curNode.childNodes[1].firstChild.nodeValue,caption:curNode.childNodes[2].firstChild.nodeValue};
}
boot();
} else {
trace("Could not load "+xml_file+".");
}
};
xmlload.load(xml_file);
// ------------------------------------------------------------
spacing = 5;
boot = function () {
for (var i = 0; i<images.length; i++) {
mc = container.attachMovie("thumbMC", "thumb"+i, i);
mc._x = i*(60+spacing);
mc.path = images[i].path;
mc.link = images[i].link;
mc.over.captionMC.caption.text = images[i].caption;
}
setRollOver();
};
setRollOver = function () {
this.onEnterFrame = function() {

if (this.mask.hitTest(_root._xmouse, _root._ymouse)) {
slideMenu();
}
};
};
slideMenu = function () {
diff = _root._xmouse-this._x;
scale = diff*100/this.mask._width;
target = -scale*(this.container._width-this.mask._width)/100;
this.arrows.easeX(diff);
this.container.easeX(target);
};

can i get a hand over here?

[Voetsjoeba]

I don't have Flash installed here yet (new comp), but it should be done today, so I'll help you out when it's installed.

[artwisted]

Awesome, thanks man

[jerez_z]

well done voets

[artwisted]

have you had a chance to take a looka t it voet?

[ewallace]

wow thats a cool menu Voet. But could you explain how to modify it to make an infinite menu. like the one in the tutorial. I am not sure what part of the actionscript to change. Maybe you could tell me what in your action script is controlling the scroller. Thanks playa

[sipher]

as always nice job voetsjoeba...
:A+:

[booler]

Ok would someone who got this working take a look at my posts in this thread:
This is the Source Experiments Flashlevel thread...
http://www.kirupa.com/forum/showthread.php?t=79647
and here is my other thread with a better explaination of what is going on...
http://www.kirupa.com/forum/showthread.php?t=86046
thanks guys I'm pulling my hair out on this one!!!!

[ixus]

Hello,

I've modified the flashlevel menu by Voets a littlebit and now i want to preload the images in the menu.
I've read every single post regarding to preloading XML data and i've checked al the tut's here, but i can't seem to get it to work with the FLA file as created by Voets.
The code that i've tried to use is similar to the one used in the XML photogallery tut here on Kirupa.

this.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader.visible = true;
if (loaded != filesize){
preloader.preload_bar_xscale = 100*loaded/filesize;
}else{
preloader.visible = false;
if (picture._alpha<100) {
picture_alpha += 10;
}
}
};


(there might be some code flaws, but for some reason Firefox won't "right-click-paste". I look into that later)

The problem i'm facing is that i don't know where to place the loadbar (similar to the one from the photogallery-tut) within the fla by Voets and how to implement the code.

The code from the photogallery tut uses an empty MC called "picture" where the images are loaded in.
I can't seem to find the empty MC used within Voet's FLA.

This is my first attempt using XML, so help is much appreciated.

Thx in advance.

[tobijas20]

I have a similar problem. I have tried with simple preloader with dynamic text field showing percentage of loading thumbnails. But I can’t get it working. I have put all code in “thumbMC” instead of “loader.loadMovie(this.path);”
Anyone any ideas?

[tobijas20]

Ok, I have made it :)



aux.onEnterFrame = function() {
var t = loader.getBytesTotal(), l = loader.getBytesLoaded();
per = Math.round((l/t)*100);
percentage.text = per;
// here you cant put some code for fade in, load bar...
if(loader._width>0) {
delete this.onEnterFrame;
loader.onRollOver = function(){
delete over.onEnterFrame;
over.play();
}
loader.onRollOut = function(){
over.backwards();
}
loader.onRelease = function() {
getURL(this._parent.link, "_blank");
};
}
};

[tobijas20]

Uuups, it works locally perfect, but online it doesn't count! Preloader writes 0%loaded for each picture and after loading it puts 100%.

What have I done wrong?

[tobijas20]

I'm back with this preloader problem (I would like preloader for each thumbnail, so the visitors can see loading progress).

First I have made it inside "thumbMC" and it worked perfect while testing localy on my PC. But online it was showing 0% and 100% after loading, but without counting. I guess it's because of download limitation (I think only 4 downloads are allowed at the same time and there is 10 or more thumbnails). I think the only way to make preloader is to preload one thumbnail after another. That's why preloading code should be in "thumbScroller" and not in "thumbMC". I have deleted:
loader.loadMovie(this.path);
from "thumbMC" and changed code in "thumbScroller" like:

boot = function () {
for (var i = 0; i<images.length; i++) {
mc = container.attachMovie("thumbMC", "thumb"+i, i);
mc._y = i*(55+spacing);
mc.path = images[i].path;
mc.link = images[i].link;
mc.over.captionMC.caption.text = images[i].caption;
mc.loader.loadMovie(images[i].path);//new line
}
setRollOver();
};

It loads all images, but what now? How to make preloader that loads one image after another?

[SAVAGER]

this is a great little nav system but I am having trouble finding what is actually calling the getURL.

I'm trying to modify it to load other elements from an xml file rather then an html link but don't see the onRelease event handler.

How do I go about this?

[SpyderWeb]

I have seen a few hints on how to manipulate the Flashlevel Navigation in this forum, but can someone tell me (step-by-step) on how to manipulate it to fetch internal movieClips or more importantly; external .swf's (as opposed to external links) ...as well as any actionScript necessary within the movieClips or external .swf's. Your help would be much appreciated. If anyone has sample files whether they load internal MC's and/or external .swf's (both preferred) ... it would help a lot.

[Iso-Rob]

Very nice menu=)

Is there a way to target an iframe from the xml file?

This is the flash script i was using to target a frame from a flash button before:

on (release) {
getURL("http://www.iso-land.com/cardiffa-1.html","innercontent");
}

What html script should i put in the xml file:

<images>
<image>
<path>leveltest.swf</path>
<url>http://www.kirupaforum.com</url>
<caption>cardiff</caption>
</image>
<image>

I did try this but it doesnt work:

<images>
<image>
<path>leveltest.swf</path>
<a href="http://www.iso-land.com/cardiffa-1.htm" target="innercontent">
<caption>cardiff</caption>
</image>

The image follows the mouse and it doesnt open in the iframe. Can anyone help please?

Thanks

[Gravnetic]

If I was linking the images through XML to a player component, and a details dynamic text box, how would I go about this with the scroller nav...

[ice987]

How is it that the mask rectangle ._y ends up 50 pixels below the thumbscroller ._y at run time. Yet if you look at the thumbscroller symbol in the author environment , the ._y starts the same

[Pixeladdict]

Hey I have a question.

Im trying to make this nav a thumb scroller for images, and it works well, although...
Everytime I load the swf file to my main stage, the scroller seems to think that the mouse is centered over the area that shows the thumbs, when actually its at the beginning of the area (all the way to the left (horizontal nav)).

How do I fix this?

[milesdavis]

Could anyone tell me how I could add a new field to the XML? For example, I'd like to load an image or SWF file underneath the image I'm loading via. XML (using the loadmovie into movieclip variation). I basically want another dynamic field that can appear below, one that is text (like the caption field) and one that is space for another SWF or IMG.

Thanks for any help! Much appreciated. great thread.

-md

[kos010]

Could someone attach the files on a reply? Cause Voetsj files arent online anymore!

[simplistik]

they are... just go to his site and goto the lab.

www.voetsjoeba.com

[DESIGNGRAPHY]

Unexpected file... Mine is Flash MX. Can someone upload this zip for Flash MX? Thanks.

[simplistik]

u need mx2004

[3lie]

The page cannot be displayed.
None of the links to .fla, .swf, etc.. work.
:-/

[u_avi_15]

can someone please convert the code to as2 please :sure:

[JoshuaJonah]

it is as2