ActionScript 2.0 :: Adding Thumbnails Tutorial - Position The Thumbs?
Feb 11, 2006
There is this great tutorial here on kirupa where you add thumbnails to a XMLNow, everything works fine with horizontal pictures, but when i add vertical images the thumbs positions gets messed up. now, what i want to do is when it loads the thumbnails it should get the width of the previous thumbnail and position the next thumbnail right after it plus 5 pixels, then everything should work nicely. (I've already fixed how the big image gets positioned with horizontal/vertical images,If someone can point me in to right direction where the positioning of the thumbs are being made, then maybe i can fix it myself.
I used the tutorial "Adding Thumbnails" to build a fotoshow. Adding another xml-file I have the problem,that I cannot reload(?) the thumbnails correctly.[code]Then I do not see any thumbnails,if(!) the new thumbnail list contains fewer elements than the old one and if the old thumbnail list was scrolled over the hit_right field before.It is seemingly necessary to reset the internal state of the movieclip. But how can I accompish that?
I've stumbled across a very interesting tutorialBut, I've noticed a little detail. When you click on the big image of the finished example on the first page of tutorial, it acts like a link. When I have downloaded finished .fla source, links are nicely written in the images.xml file, but the links in the .fla file don't work.
continue the success with incorporating the scrolling thumbnails feature to my current galleries.I have done my best to incorporate the code from Kirupa's "Adding Thumbnails" tutorial to my site, but have a feeling the loader class is only MX 2004 and on, and I'm using plain old MX. I have absolutely no thumbnails showing up at all.
PS I also found two discrepancies in the tutorial:
1. Initial code to be pasted has a line such as this:
2. Initial code to be pasted has a line such as this:
Code: }else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))){
but later in the tutorial when it's broken down it's listed as this:
Code: }else if ((_root._xmouse<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
It's very difficult to test all possible variations in this, but I think I have, as there were 4 possible combinations since 2 lines of code varied. But none of them worked. Either way, would be good to know which users should be using. A little help in identifying: "snowThumbMC" is the name of my empty movie clip instance on my stage, in which I should be loading all of the thumbnails.
1. Is "target_mc" the name of an actual movie clip I should have on the stage somewhere? Or is it simply an empty one created via code to hold info?? I'm trying to figure out what exactly "target_mc" refers to.
2. Is "pictureValue" an actual value of a variable named "picture"? If so, should I have this variable on stage somewhere? I'm just not sure by reading the code (since I can't properly read it) what exactly "picture" refers to.
This tutorial found on: [URL] Is extension of: [URL] The problem manifests itself when I substitute .jpg thumbnail with .swf one. (I need this because i need transparent thumbs, so i needed to import transparent gifs via swfs - i used [URL] to convert gifs to swfs if someone is interested - It is released under the GPL. ) XML is parsed ok, and the thumbnail is visible with other .jpg thumbnails. The problem is that it is not "alive": Clicking on it doesn't change the main image, hovering doesn't change its alpha:
original: I really just need to figure out how to center the pictures. here is what I did I have modified the tutorial that I finished to have a bigger stage for bigger pictures. Everything is working properly but the pictures are displayed on the left side, I want to have them centered in the stage for the images, after clicking on the thumbnails, plus my images are different sizes as well. ranging from 200x410 to 744x410 but all are the same height of 410. i will post up what I am talking about at the end. I believe it is something within either the action script or the xml coding that allows the position of the image to be differently? please help here is what i am talking about[URL] Continued: Here is my coding in action script:
I was working with the XML Photo Gallery Thumbnail Tutorial on this site: [URL] And I modified it for my own usage, making it a vertical gallery instead, and had no problems until I came upon the thumbnail images. When I replaced the original thumbs with my new thumbs (that I sized based on width, as it is a vertical gallery) it got all screwed up. The images are of all different shapes. So when it loads up, some of them had huge gaps in between them, and others were even overlapping. So I fixed it by making the heights of all the images the same, resulting in a working thumb gallery, but now half my thumbs are cropped off by the mask. I'm looking for a way to fix it where I still have the same spacing between the images, and that they are all the same width, but can vary in their height. Here's the section of the code I am using:
I'm using the code below to create a simple gallery of thumbs in a line with space between each thumbnail.[code]I have a rollover/out function that scales up/down the thumb outwards from the centre of the thumb.I was expecting the scaling thumbnail to "push" the other thumbnails left and right as it scaled...but it only shifts the thumbs to the right of it and the thumbs to the left do not move.I need code to allow a scaling thumbnail to push aside the other thumbs in every direction.
I'm using the code below to create a simple gallery of thumbs in a line with space between each thumbnail.
ActionScript Code: onEnterFrame = function () { for (projIdx = 0; projIdx < projectsArray.length; projIdx++) { //space between photoThumbs
[Code].....
I have a rollover/out function that scales up/down the thumb outwards from the centre of the thumb.
I was expecting the scaling thumbnail to "push" the other thumbnails left and right as it scaled...but it only shifts the thumbs to the right of it and the thumbs to the left do not move.
Imagine a 3 thumbnails in a horizontal line, I want the middle thumbnail (thumbnail 2) to scale from the centre and push thumbnail 1 to the left and thumbnail 3 to the right. But obviously I want this to work for x amount of thumbs.
I'm wondering if there is a way to tweak the tutorial for the thumbnails slider (link below) to allow for thumbnails of various widths: [URL] Currently the script creates the spacing between the thumbs by taking the width of the first thumbnail loaded and adding a value of 5 to it. However, in my instance the first thumb is the widest, so this creates odd spacing (This is for a product selector that runs from largest thumb to smallest).
What I want to do is to make a gallery based on the tutorial gallery here (thumbs), but I want the user to be able to choose different galleries from within the movie. I figured that I could make a loop to cycle through the galleries, then nest another loop inside it to cycle through the pics, captions and thumbs. While I wrote, I constantly tested the output with trace commands, but when I tried nesting the loop I lost all output.. I'm pretty new to both Flash and Actionscript, so if theres an obvious solution I havent been able to see it.. This is my temp XML file:
I saw the tutorial here on how to make a Flash XML photo gallery with a scrolling thumbnail bar. Awesome!
The thing is, the example he DIDN'T choose to illustrate is the one I want make - exactly.[URl]..Is there somewhere else I can find this? The problem is that I have say, 16 photos and I want 4 displaying on the stage at one time. I want a forward / back button available to switch through the remaining 12 images, when the user clicks the buttons (as opposed to a scroller, which I find difficult to control and therefore less useable).
The problem comes when loading the four images from my XML file. I am able to load the first four, but how do I indicate in AS that the next four images are to be loaded, until there are no more images left? What if I add 5 more, I want to be able to have that AS load them. I was using a mod function in my script, but I keep getting the wrong remainder. I'll have to post the code later.
i want each image that opens up from the scrolling thumbnails below to have another set buttons relating to the main image. for instance:
[Code]...
numbers = buttons linked to another set of external images that are related to the big image. the problem is i don't know what controls the thumbnail/main image when i click on the scroller (i'm kinda lost in the code). so right now i have only one set of numbers regardless of which big image opens up.
I'm trying to create a portfolio with ten images that I needto be loaded and added on the stage.The problem i not to load theese images or adding themdirectlyt on the stage, but I want them to be added inside a thumbthat I've created as a movieclip.I've also created a for...loop so the thumbs dynamically areadded on the stage. To access them I've given them an instance-nameusing [object].name = "[name]" and I've also created an Array tokeep track of the names.
dding text to my scrolling thumbs. I've completed the following Kirupa tutorial:As well as the thumbs scrolling, I also want to have text that scrolls with it - that would be wording about each thumb
I'm trying to do something a little crazy from what it seems here, I have a carousel that I am modifying to have thumbnail images added to dynamically from an XML file. Now me being the practical persona I am I did NOT want to make little images for each picture in the gallery so I used a neat little class from a blog called soulwire
[URL]
the class lets me use the bitmap properties of flash to fit a copy of my image into the thumbnail are for my carousel Icons, later I will use the same info to click and show the large image for each of these icons.
My problem is that I can get it to work but only the last generated MovieClip gets an image, and it's not even the correct one. it gets image #2 in clip #5.
It seems as though my Event.COMPLETE for my loader is not firing for each image, if it is I'm not sure why I'm just getting the image in 1 icon.
I was working with the XML Photo Gallery Thumbnail Tutorial on this site: http:[url]....
And I modified it for my own usage, making it a vertical gallery instead, and had no problems until I came upon the thumbnail images. When I replaced the original thumbs with my new thumbs (that I sized based on width, as it is a vertical gallery) it got all screwed up. The images are of all different shapes. So when it loads up, some of them had huge gaps in between them, and others were even overlapping. So I fixed it by making the heights of all the images the same, resulting in a working thumb gallery, but now half my thumbs are cropped off by the mask. I'm looking for a way to fix it where I still have the same spacing between the images, and that they are all the same width, but can vary in their height. Here's the section of the code I am using:
function thumbNailScroller() { // thumbnail code! this.createEmptyMovieClip("tscroller", 1000);[code]....
I'm also trouble figuring something out from the same tutorial, that I want to change. The tutorial uses these "Next" and "Previous" buttons. On the far right hand side, the half-circle buttons are what I assigned this to, but I don't really want them to have that function. I would rather have them function just like how the mouse functions when it rolls over the thumb gallery, except they scroll the thumbs up and down when clicked.
I'm building an XML based gallery, and I used the kirupa tutorials for that (both of them).but I wanted a grid look for the thumbnails and I found this great post by ikim just for that:So I managed to suit the code to my gallery and everything is going good.but there is one problem:when I press the button that loads the XML (WITH THE THUMBS), they load like they supposed to:but when I press again on the button, they load like this:and stays like this.. Why is that?here is the complete code I use to load the images and thumbnails:
I am using the Carousel application as designed in the 3 part tutorial. My question that i can't find an answer to online is how to add a URL link in the description text that shows when an icon is clicked.
I tried to add some thumbnails attributes to list component,i was using the xml vidlist however i was unsuccesfull.i thought just adding another attribute would work but it didnt .am i suppose to make an image holder i am sorta lost at this point
im already read almost of the tutorial in how to create a XML Photogallery but it seems i cant find solution to my problem on "how to put a link on the thumbnail?" im creating a different style of gallery.. i only put the scrolling thumbnail area in my index page like a image scroller via XML. im new to XML thats why i cant still figure out how to put the link and pull it in the AS when the certain image is click..
I was adding the thumbnail gallery to my website, but the rollover to scroll through the thumbnails must is offset somewhere. I would like to just add left and right buttons to scroll if possible.http:[url]......
i have been able to customize this tutorial for my needs but i am still having one problem with the thumbnails. Unlike in the tutorial i have thumbnail that are two different sizes. most of them are 100 pixals wide but some are 75 and when they are different sizes like that it screws it up...they overlap or leave big gaps between thumbs.
below you can find the code i am using. the line of code that places the thumbs in there position is
i was able to stop the thumbs from over laping by replacing target_mc._width with 100 but that doesnt fix the big gaps between the images that are 75 wide.
function loadXML(loaded) { if (loaded) { xmlNode = this.firstChild; image = [];
I am using the Kirupa gallery with thumbnail scroller - which is a FANTASTIC gallery system!
I want to move the scroller but when its moved further right...the scroller stops working. I can move it up and down on the stage, but once it goes a certain distance to the right the thumbnails do not load.
I also shortened the mask to about 160 px so it only shows 3 thumbnails of my pictures.
Here is a link to my FLA file: [URL]
How can I get this to work? Why wont the thumbnails load once the scroller moves a bit further to the right!
I have made a gallery with xml, and my problem is that when the thumbnails are loaded they move on the Y axis and doesn't want to be in their original placed position. I am attaching a zip with my problematic sample to see what i mean. Attachments: another_problem.zip (147.0 K)
I have a .fla which loads thumb nails and when clicked shows the large image. It all works fine. I would like to have a reflection for each thumb how would I go about doing this, or how would amend my code to add the reflection.
Code: var holder:thumbNail = new thumbNail(); var thumb:Loader; var container:MovieClip = new MovieClip();
I have built a thumbnail gallery based on the tutorial on this site. It works great, but I'm having trouble with my thumbnails loading in order.I am calling images from an xml file, and placing them in a horizontal scrollbar. All of my thumbnails are different widths. Therefore, I need to be able to get the width of each thumbnail to position it in relation to the one before it and so on. Because of this, I'm using onLoadInit to position the images. Now, this creates a random horizontal order, based on how fast they load on the user's computer, not on their order in the xml file. I would use onLoadStart or onLoadComplete, as this would call them in that order, but the width is not available at this point in the loading, so they pile on top of each other.
I used this code, from "Creating Websites for Dummies" to create a video playlist. The only problem is that it (the book) doesnt show how to load descriptions for the video thumbnails (saying the title etc...of the video). I cant work out how to attach a dynamic text field to each thumbnail that reads its description from an xml file, can anyone give me some pointers or explain how this is done? I've been stuck on this for a few days now and i cant work it out..
in the code below 'main' refers to an attribute in teh xml file.
Code:
ar nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc);
