dcsimg
A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: xml image loader & buttons

  1. #1
    Junior Member
    Join Date
    Jun 2009
    Posts
    8

    xml image loader & buttons

    Files:
    Attached is a link to a file I made named "index".
    https://rcpt.yousendit.com/706233226...b5cbae32c47398
    I would have liked to have included the following files but was limited due to "you-send-it" not uploading folders.

    Files not included: [but functioning and vital to the site as well as the question]
    - xml list
    - images [folder]
    - thumbnails [folder]

    Project scope:
    Website is an online-art gallery.

    In 2006, I was able to get a functioning xml rolling thumbnail bar as well as have it load images. [Due to certain circumstances I was forced to put the project on hold until now.]

    It consist of 17 buttons, on the index [home] page, which are to call upon an xml file to load the appropriate scrolling thumbnail bar and the images which it loads upon clicking.

    Problem
    When you open up the index file, go to the actions layer.
    You will see the script needed to load in the xml scrolling thumbnails as well as the associated images.

    The actionscript is fine and works in as much as when I save out an swf file the thumbnails dynamically load in and when I click on them the associated image loads to stage as well.
    [again if you download the index file you will not see this as not all the files were able to be uploaded due to "you-send-it" as mentioned.]

    However, seeing that I have more than one gallery, I will need this actionscript to be applied to the buttons instead.
    Hence the problem as I have not been able to successfully get this to work.
    [i.e., customizing the actionscript that currently exist so that I can apply it to the 'silk_paintings" button and it calls up the "silk_paintings" xml list, etc.]

    If I understand this correctly the change that needs to currently happen is to change the xml name from "list" to something more specific like: "silk_paintings". [the folder names, "images" & "thumbnails" I assume will need to change as well, perhaps as "images1", "images2", etc. - again these are not with the index file uploaded, but do exist]

    But getting the button, when clicked, to execute the actionscript code that already exist, is proving to be a bit difficult for me at this time.

    The last issue is getting the button clicked, in this case "silk_paintings", to stay the transparent blue that it is in the 'hit' state until another button is clicked.

    Conclusion:
    This would be easier if you could see the functioning xml at work - but alas, i do not have a webhosting provider at this time, nor - as I mentioned - does "you send it" allow folders to be sent. [individual files, yes, but getting it reorganized can cause glitches in and of itself.]

    - q.a1: How do I successfully take the current actionscript and apply it to each button so that it will call up the appropriate xml list?
    [note: the way I have the buttons now, they are in a group movie clip on the main stage. - yes, they are buttons, but grouped and thrown on main stage. - Seeing that its actionscript and being applied to the button, their location should not matter if I understand this correctly.]

    - q.a2: Apart from getting the buttons to actually execute the actionscript, if I understand it correctly, I will need to aslo re-name the current xml "list" to something more specific, such as "silk-paintings" as well as better defining the "images" & "thumnails" folder as not to have duplicates across the galleries.
    [though I hope this does not complicate the coding...shouldnt as I can do a 'find' for all references to the folder 'thumbnail' and simply type in 'thumnail1', etc. to differentiate the folders.]

    - q.b: Considering this works, and I hope it does as its going to keep the file small with no duplicate items, then how do I tell the button once clicked to stay in the transparent blue hit state given to it until another button is clicked?

    Bonus: [and as a bonus, to get back home...which is merely the state of having not buttons highlighted, I would have the user click on the site names at the top left corner.]

    Thank you for your time,

    Best Regards

    Dalen
    Last edited by dalen7; 06-30-2009 at 07:04 AM.

  2. #2
    Junior Member
    Join Date
    Jun 2009
    Posts
    8
    The current code in the actions layer looks like this:

    - q1: How to customize it so that it can be applied directly to the buttons, using "silk_paintings" as the example, as well as...
    - q2: Keeping the transparent blue hit state when clicked, until another button is clicked.

    Again, thank you for your time,

    Peace

    Dalen


    Code:
    stop();
    fscommand("allowscale", false);//keep SWF display at 100%
    
    var x:XML = new XML ();//Define XML Object
    x.ignoreWhite = true;
    
    var fullURL:Array = new Array;//Array of full size image urls
    var thumbURL:Array = new Array;//Array of thumbnail urls
    var thumbX:Number = 25;//Initial offset of _x for first thumbnail
    
    x.onLoad = function(){ //Function runs after XML is loaded
        var photos:Array = this.firstChild.childNodes;//Defines variable for length of XML file
    	for (i=0;i<photos.length;i++) {//For loop to step through all entry lines of XML file
    		fullURL.push(photos[i].attributes.urls);//Each loop, adds URL for full sized image to Array fullURL
    		thumbURL.push(photos[i].attributes.thumbs);//Each loop, adds URL for thumbnails to Array thumbURL
    		trace(i+". Full Image = "+fullURL[i]+"  Thumb Image = "+thumbURL[i]);		
    		var t = panel.attachMovie("b","b"+i,i);//Each loop, Define local variable 't' as a new instance of 'b' movie clip, given unique instance name of 'b' plus the index number of the For loop
    		t.img.loadMovie(thumbURL[i]);// Each loop, load thumbnail image from XML data into variable movie clip
    		t._y = 0;//Set Y coordinate of variable movie clip
    		t._x = thumbX;//Set X coordinate of variable movie clip based on variable thumbX
    		t.numb = i;//Set sub-variable 'numb' inside variable t to hold index number
    		t._alpha = 75;//Set the Alpha value of the variable movie clip to 75% - for onRollOver highlight action
    		thumbX += 55;//Increment thumbX value so next thumbnail is placed 125 pixels to the right of the one before
    		t.onRollOver = function () {//define onRollOver event of the variable movie clip
    			this._alpha = 100;//Set thumbnail alpha to 100% for highlight
    		}
    		t.onRollOut = function () {//define onRollOut event of the variable movie clip
    			this._alpha = 75;//Reset thumbnail alpha to 75%
    		}
    		t.onPress = function () {//define onPress event of the variable movie clip
    			this._rotation += 3;//rotates thumbnail 3 degrees to indicate it's been pressed
    			this._x += 3;//Offset X coordinate by 3 pixels to keep clip centered during rotation
    			this._y -= 3;//Offset Y coordinate by 3 pixels to keep clip centered during rotation
    		}
    		t.onReleaseOutside = function () {//define onRelease event of the variable movie clip
    			this._rotation -= 3;//rotate thumbnail back 3 degrees
    			this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during rotation
    			this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during rotation
    			this._alpha = 75;//Reset thumbnail alpha to 75%
    		}
    		t.onRelease  = function () {//define onRelease function to load full sized image
    			this._rotation -= 3;//rotate thumbnail back 3 degrees
    			this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during 
    			this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during 
    			this._alpha = 75;//Reset thumbnail alpha to 75%
    			holder.loadMovie(fullURL[this.numb]);//Load full sized image into holder clip based on sub-variable t.numb, referenced by 'this'
    		}
    	}
    	holder.loadMovie(fullURL[0]);//Initially load first full size image into holder clip
    }
    
    
    x.load ("silk_paintings.xml");// path to XML file
    
    panel.onRollOver = panelOver;
    
    function panelOver() {
    	this.onEnterFrame = scrollPanel;
    	delete this.onRollOver;
    }
    
    var b = stroke.getBounds(_root);
    
    function scrollPanel() {
    	if (_xmouse<b.xMin||_xmouse>b.xMax||_ymouse<b.yMin||_ymouse>b.yMax) {
    	this.onRollOver = panelOver;
    	delete this.onEnterFrame;
    	}
    	if (panel._x >= 740) {
    	panel._x = 740;
    	}
    if(panel._x <= (thumbX-10))  {
    		panel._x = (thumbX-10)
    	}
    	
    	var xdist = _xmouse - 830;
    	
    	panel._x += -xdist / 7;
    }

  3. #3
    Junior Member
    Join Date
    Jun 2009
    Posts
    8

    I have uploaded a picture of how the site looks when the xml loads in the scrolling thumbnails as well as the associated images.

    You will also see the time-line in the background which will assist in understanding my query better.

    - The time line uses only one frame [and my goal is to keep it this way]
    - the actions panel holds the script posted above
    - The buttons are grouped as a movie clip [which should not matter]
    - My desire is to take out the actions from where it is and place it with each button.
    [So far I have not been able to figure out the script to make this work properly.
    As of now, when an swf is saved out, you get what you see in the screenshot.
    The goal is to have each button call up the gallery associated to it, using the above actions script as a template.]
    - Also, the buttons must be able to stay the transparent light blue when clicked. - the color assigned to it in the 'hit' state...not shown in photo. [buttons were made by using the flash button 'up', 'over', 'down', 'hit' states]

    Again, thanks,

    Peace,

    dAlen
    Last edited by dalen7; 06-28-2009 at 04:15 PM.

  4. #4
    Junior Member
    Join Date
    Jun 2009
    Posts
    8
    Didnt think about adding the xml list, [in this case the xml for the silk_paintings], but it may be useful as well when looking at the actionscript listed above. [pretty straightforward]

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <slideshow>
    <photo thumbs="thumbnails/i_brown_fairy.jpg"  urls="images/brown_fairy.jpg"  />
    <photo thumbs="thumbnails/i_blonde_fairy.jpg"  urls="images/blonde_fairy.jpg"  />
    <photo thumbs="thumbnails/i_flower_fairy.jpg"  urls="images/flower_fairy.jpg"  />
    <photo thumbs="thumbnails/i_red_fairy.jpg"  urls="images/red-fairy.jpg"  />
    </slideshow>
    Peace,

    Dalen

  5. #5
    Junior Member
    Join Date
    Jun 2009
    Posts
    8
    I have been trying to solve this since Friday...having tried to implement various listeners/MouseEvents to make this work as described above.

    While convinced that it is a simple matter, with not much code needed to go with what already exist, it has proven to be quite frustrating to find the exact script to execute the desired results.

    The above post were made as detailed and comprehensive as possible in hopes that it would provide the grounds for an accurate - as well as simple - solution. [with all the tutorials out there for similar things, it becomes obvious its not a matter of just taking one bit of code and making it work with another... wish that issues such as what Im dealing with in the navigation and button behaviors would be simplified in future versions of flash - even Director is a bit more user friendly in this regards. ]

    In the quest for clarity I have not posted any code which does not work..[why bother, its a Mouse Event handler/listener Im needing to deal with, but the placement within is really the issue, and I have wished to keep this as clean/clear as possible.]

    If anyone can help with this, it would be deeply appreciated.

    Thanks,

    Dalen

  6. #6
    Junior Member
    Join Date
    Jun 2009
    Posts
    8
    I have posted this query on several other forums over the week to try and get a solution, and thus far here is where Im at.
    There has been some confusion it seems as far as the buttons themselves. Seeing that they are built as button objects it has been brought to my attention that actionscript can not be added to it.

    While this is true, I have also seen that you can add it to the button if its in the frame, etc.
    Though, in truth, this may not help as Im not sure how I would get the button to stay in a clicked state once clicked and revert back once another button is clicked. [i have one tutorial someone pointed to in which this is accomplished with a movie clip - but seeing I can drag the buttons into a movie clip as a group I may be able to work with what I have.]

    Before even messing with the actual buttons, at this point I am wanting to see that I can get a button [regardless of it being an object or movie clip] to just be the point that calls up the actions already posted which loads in the xml data for the scrolling thumnail and images vs. it loading automatically as it already does.

    Apparently the bit of code below allows the button to click regardless of if it is an object button or movie clip button, but in the case of the former must be in the time line.

    My question is can it sit at the top of the rest of my action script? And more importantly, perhaps, is what is that secret line of code which will tell the button click action to actually load in the actions [which are currently automatically loading] into the stage?

    If I can get that bit, Ill feel like a king.

    Seriously though, its the most simplest bit of the design Im now becoming most happy for, as its proven to be the hardest. [Im begging Adobe to adopt a more fluid way to deal with buttons and navigation in future versions of flash. The fact that in one week back in 1997 I could learn and put together a fully functional portfolio with sound, movies, animation, etc., in Director, after coming from the world of print, is proof enough to me that the Flash way of dealing with buttons is less than straightforward.]

    Below is the code, now to have it linked... [looking forward to the response!]

    Thank you & Peace,

    Dalen

    Code:
    import flash.events.MouseEvent;
    
    silk_paintings.addEventListener(MouseEvent.CLICK, silk_paintingsClick);
    
    function silk_paintingsClick(event:MouseEvent):void {
    
         trace("button clicked"):
    }

  7. #7
    Junior Member
    Join Date
    Jun 2009
    Posts
    8
    My apologies that this was in the wrong forum. I was mixing 3.0 with 2.0
    The solution was:

    silk_paintings.onRelease = function():Void
    {
    x.load("silk_paintings.xml");// path to XML file
    }

    Thanks to: Nebutch at gotoandlearn forum as well as Rob at the Adobe forums.
    Both sent the response at the same time last night!

    Wanted to update here for those who may have been interested in the follow up solution. [note: this does not take care of keeping the buttons in the hit state staying the same colour until other button is clicked, but it does get the site functioning properly.]

    Peace

    dAlen

  8. #8
    Junior Member
    Join Date
    Jun 2009
    Posts
    8
    The issues with the buttons calling up the scrolling thumbnail panel have been resolved, thanks to Rob [at Adobe Forums].
    Those that have been following this thread, or stumble upon it in their searches later, may appreciate to see the final solution to this particular issue.

    Code:
    stop();
    fscommand("allowscale", false);//keep SWF display at 100%
    
    var x:XML = new XML();//Define XML Object
    x.ignoreWhite = true;
    
    var fullURL:Array = new Array();//Array of full size image urls
    var thumbURL:Array = new Array();//Array of thumbnail urls
    //  .......  CHANGE
    var thumbX:Number;// = 25;//Initial offset of _x for first thumbnail
    
    shadesOfGrey.onRelease = function():Void  {
    	x.load("shadesOfGrey.xml");// path to XML file
    	thumbX = 25;
    };
    
    x.onLoad = function() {//Function runs after XML is loaded
    	//  resets the position of the panel on each new load
    	panel._x = 740;
    	//  .......  CHANGE  removes the existing movieclips from the panel before any new load...
    	for (c in panel) {
    		if (typeof (panel[c]) == "movieclip") {
    			removeMovieClip(panel[c]);
    		}
    	}
    	var photos:Array = this.firstChild.childNodes;//Defines variable for length of XML file
    	for (i=0; i<photos.length; i++) {//For loop to step through all entry lines of XML file
    		fullURL.push(photos[i].attributes.urls);//Each loop, adds URL for full sized image to Array fullURL
    		thumbURL.push(photos[i].attributes.thumbs);//Each loop, adds URL for thumbnails to Array thumbURL
    		//trace(i+". Full Image = "+fullURL[i]+"  Thumb Image = "+thumbURL[i]);
    		var t = panel.attachMovie("b", "b"+i, i);//Each loop, Define local variable 't' as a new instance of 'b' movie clip, given unique instance name of 'b' plus the index number of the For loop
    		t.img.loadMovie(thumbURL[i]);// Each loop, load thumbnail image from XML data into variable movie clip
    		t._y = 0;//Set Y coordinate of variable movie clip
    		t._x = thumbX;//Set X coordinate of variable movie clip based on variable thumbX
    		t.numb = i;//Set sub-variable 'numb' inside variable t to hold index number
    		t._alpha = 75;//Set the Alpha value of the variable movie clip to 75% - for onRollOver highlight action
    		thumbX += 55;//Increment thumbX value so next thumbnail is placed 125 pixels to the right of the one before
    		t.onRollOver = function() {//define onRollOver event of the variable movie clip
    			this._alpha = 100;//Set thumbnail alpha to 100% for highlight
    		};
    		t.onRollOut = function() {//define onRollOut event of the variable movie clip
    			this._alpha = 75;//Reset thumbnail alpha to 75%
    		};
    		t.onPress = function() {//define onPress event of the variable movie clip
    			this._rotation += 3;//rotates thumbnail 3 degrees to indicate it's been pressed
    			this._x += 3;//Offset X coordinate by 3 pixels to keep clip centered during rotation
    			this._y -= 3;//Offset Y coordinate by 3 pixels to keep clip centered during rotation
    		};
    		t.onReleaseOutside = function() {//define onRelease event of the variable movie clip
    			this._rotation -= 3;//rotate thumbnail back 3 degrees
    			this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during rotation
    			this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during rotation
    			this._alpha = 75;//Reset thumbnail alpha to 75%
    		};
    		t.onRelease = function() {//define onRelease function to load full sized image
    			this._rotation -= 3;//rotate thumbnail back 3 degrees
    			this._x -= 3;//Reset X coordinate by 3 pixels to keep clip centered during 
    			this._y += 3;//Reset Y coordinate by 3 pixels to keep clip centered during 
    			this._alpha = 75;//Reset thumbnail alpha to 75%
    			holder.loadMovie(fullURL[this.numb]);//Load full sized image into holder clip based on sub-variable t.numb, referenced by 'this'
    		};
    	}
    	holder.loadMovie(fullURL[0]);//Initially load first full size image into holder clip
    };
    
    panel.onRollOver = panelOver1;
    
    function panelOver1() {
    	this.onEnterFrame = scrollPanel1;
    	delete this.onRollOver;
    }
    
    var b = stroke.getBounds(_root);
    
    function scrollPanel1() {
    	
    	if (_xmouse<b.xMin || _xmouse>b.xMax || _ymouse<b.yMin || _ymouse>b.yMax) {
    		this.onRollOver = panelOver1;
    		delete this.onEnterFrame;
    	}
    	//  .......  CHANGE  changes the way that the ends of the panel movieclip are measured...
    	if(panel._x >= 740) {
    		panel._x = 740;
    	}
    	if(panel._x<=740-panel._width+mask._width) {
    		panel._x = 740-panel._width+mask._width;
    	}
    	if ((panel._x<=740) && (panel._x>=740-panel._width+mask._width)) {
    		var xdist = _xmouse-830;
    		panel._x += -xdist/7;
    	}
    }
    Of note is the change to how the movie clips are measured... this change in and of itself has really helped to make the thumbnail panels operation more efficient.

    Again, thanks Rob...

    Peace,

    Dalen

    p.s.

    note: This code does not account for any code in which will make the buttons stay in their hit state once clicked, however it appears that I will have to make movie clips instead of button objects if I want that functionality.
    Last edited by dalen7; 07-26-2009 at 05:34 PM.

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