You must be logged in to post Login Register
Search 

xml pages with actionscript tutorial

User Post

1:55 pm
June 30, 2009


dalen

Member

posts 4

1

Post edited 9:19 pm – June 30, 2009 by dalen
Post edited 9:23 pm – June 30, 2009 by dalen
Post edited 9:33 pm – June 30, 2009 by dalen


http://tutorials.flashmymind.c…..nscript-3/


The above tutorial is the closest I have found to help me in my project that I am currently trying to wrap up.

[After about 9 years... lol...though not far from the truth.]


However my set up is a bit different, and I am so happy that I was able to achieve a working xml loader for a scrolling

thumbnail as well as the associated images it loads, that I dont want to tamper with that code at all. [Just lining it up

was pretty non-intuitive and took hours into the wee morning to figure out how to adjust it to the graphics.]


I have been stuck on this issue since this past Friday, and here it is short and simple.


-  I have 17 buttons, made with the flash button function, that need to call up the xml data so it does not automatically

load as it does now. This could be done in an array, though I originally had stripped out the actionscript and applied it

directly to the button in flash [i.e. silk_paintings] to have it call up the xml from there…I tried to use some of the code

from the tutorial here but could not get it to work with what I had. [im sure it can, Im just not that fluid with

programming by any stretch of the imagination...Im still waiting for Adobe to come out with a feature where you drag a

feature on a button and fill out its parameters.]


- The second issue, which at this point is irrelevant if I cant get the button to call up the xml, is to have the button stay

the transparent blue that it is when its in the 'hit' state. [again Im sure this can be done in xml, but I have not seen it

implemented in quite the way I currently have it set up.]


I dont have a webhosting provider yet, so I took a screenshot of what it looks like when it loads in the scrolling

thumbnail with the associated image, as well as the layers in the main movie where the actionscript for calling up the xml

lies. 


Below I will post the actionscript & xml currently used.

The trick again is to get the buttons, when clicked, to execute the script vs. it automatically loading.

Just to clarify, I plan on duplicating the script and renaming it according to which button its associated with.

[im sure it could all be done with one document, but for now it may be easier for me to break it up like this.]


Thanks in advance for taking a look and for the help! :)


Peace


Dalen


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 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 (_xmouseb.xMax||_ymouseb.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;
}







1:34 am
July 3, 2009


dalen

Member

posts 4

2

Post edited 8:37 am – July 3, 2009 by dalen
Post edited 8:38 am – July 3, 2009 by dalen
Post edited 8:41 am – July 3, 2009 by dalen


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 allow 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


import flash.events.MouseEvent;

silk_paintings.addEventListener(MouseEvent.CLICK, silk_paintingsClick);

function silk_paintingsClick(event:MouseEvent):void {

trace(”button clicked”):

}


1:19 am
July 18, 2009


dalen

Member

posts 4

3

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

2:24 pm
July 26, 2009


dalen

Member

posts 4

4

Post edited 9:27 pm – July 26, 2009 by dalen
Post edited 9:32 pm – July 26, 2009 by dalen



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.


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

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 (_xmouseb.xMax || _ymouseb.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


[b]p.s.[/b]


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. 

Topic RSS 
Search