flash with XML database 8

[wikfx]

Hi I am trying to do a client list for someone and they want soething like this:

http://www.newezra.com/flash/

you have to go to the portfolio section of that page to see it. anyway is that done with an xml backend? I am trying to do it with xml so that it would be very easy to update can anyone help?

WiKfx

W i K

 

[pixl8r]

Could you identify which part of the portfolio section you are trying to duplicate?

The section on the whole does not have to be data driven, but certainly could be. The only person who could tell you for sure is the Developer that created it. (or the company).

Wow JT that almost looked like you knew what you were doing!

 

[wikfx]

ok I would like to do that portfolio section where it shows a thumbnail and description and link. I would like to do this driven by xml as I think it would be very easy to update like this.

Thanks

WiKfx

W i K

 

[pixl8r]

What version of Flash are you using Wik?

 

[wikfx]

I am using flash mx 2004 pro

WiK

W i K

 

[pixl8r]

Cool... that makes for less coding for the XML part since you can use the components. (XML Connector and DataSet)

Your question is pretty broad though and would take forever to explain here... can you be a bit more narrow on your question?

 

[wikfx]

ok I want to make sorta a portfolio client database in the database I would need these fields:
Picture (this is going to be a .jpg file)
Description (this will be a description of the project)
Webpage (this has to work as a link to the clients page)
than in flash I need to show all the records in kind of a list view
kinda like the one in the portfolio section in this site

http://www.newezra.com/flash/

anyway thanx again
WiK

W i K

 

[pixl8r]

That's still a pretty tall order. Here's an example.

Sample XML data source (filename: myData.xml):

<portfolio>
	<item id="1" title="Web Site 1" imageURL="images/site1.jpg" url="images/site1.gif" summary="This is a summary of site 1" />
	<item id="2" title="Web Site 2" imageURL="images/site2.jpg" url="images/site2.gif" summary="This is a summary of site 2" />
	<item id="3" title="Web Site 3" imageURL="images/site3.jpg" url="images/site3.gif" summary="This is a summary of site 3" />
</portfolio>

Create a 2 frame Flash movie. Save it in the same directory as the myData.xml file. Create an image directory and create 3 jpeg images (site1-3.jpg) and save them to the images directory.

In the Flash movie drag an XML Connector and a DataSet to the stage. Name the instance of the Connector "data_con" and the dataSet "data_ds".

Select the XML Connector. Open the component inspector. Set the data source to "myData.xml". Click on the Schema tab and select the import option (the little paper like icon top right). Then select your myData.xml file to import the schema from the xml document. This is very handy! Make sure you double check the data types. (should be id:integer,imageURL:string,summary:String,title:Sring,url:string)

Next: Select the data set. In the component inspector click on Schema. Here you will have to match the items that you just imported to the connector. Click on the plus sign to add them. Match the name of the item and the datatype so they are the same as the connector schema. (should be id:integer,imageURL:string,summary:String,title:Sring,url:string)

With the data set still selected click on Bindings in the component inspector. Click the + sign to add a binding. Select the XML Connector from the list on the left and "item:Array" from the list on the right. Now the Connector will populate the data set.

Now add a new layer "actions" to the main timeline of the Flash movie. (key frames on frame 1 and 2)

In the first frame of "actions":

//trigger the xml Connection
_root.data_con.trigger();

//Listener to prevent movie from going to second frame before the XML data is loaded.
dataListener = new Object();
dataListener.afterLoaded = function(){
	gotoAndPlay(2);
}

//assign the listener to the dataset
_root.data_ds.addEventListener("afterLoaded",dataListener);

stop();

This triggers the data source and adds the listener which tell it to go forward once the data is loaded.

Next create a new movie clip called targetClip (click + in library window). Inside targetClip place 3 dynamic text boxes. Set the var values to "title","url", & "summary". Create another (empty) MC called "imageTarget" and place it in the targetClip stage. Give it the instance name "imageTarget".

Add an "actions" targetClip MC. Insert the following:

loadMovie(this.imageURL,"imageTarget");

Right click on the targetClip in the Library and select properties. Click on advanced and check the box that says "export for actionscript".

Now return to the main timline (click on Scene 1).

In frame 2 of the "actions" layer add:

//goto first data set record
_root.data_ds.first();

addMovieClips(0);

function addMovieClips(i) {
        //loop through data and create a new instance of the targetClip for each record.
	while (_root.data_ds.hasNext()) {
		//trace("called else");
		attachMovie("targetClip", "site"+i, getNextHighestDepth(), _root.data_ds.currentItem);
		_root["site"+i]._y = _root["site"+i]._y+(i*100);
		i++;
		_root.data_ds.next();//this is important don't leave it out or the script will bomb.
	}
}
stop();

Now test your movie. What you should get (if I've explained it correctly) is a vertical list of 3 "targetClips" with the images that you placed in your image directory and the info related to each item in the XML file.

Note: It is not necessary to drag the targetClip MC to the stage.

Phew...

Let me know how it goes!

Wow JT that almost looked like you knew what you were doing!

 

[wikfx]

great info THANX! I did everything but I had one little last problem nothing shows up oin the screen ??? I did everything how you explained it step by step

anyway thanks for now
WiK

W i K

 

[wikfx]

hey I was just wondering if its possible to saa an example .fla file??? this would help me a great deal

Thanks
WiK

W i K

 

[pixl8r]

I have posted a sample for you. One thing to check... when you test movie go to the Debug menu at the top and "List Variables" Then do a search of the results looking for "site1.jpg". Then at least you know if the problem is with the XML connection or with another part of the process.

I have posted the example for you at

http://www.taylordesign.biz/tektips/dynamicportfolio.zip.

One thing to note on the example is that it contains a datagrid which is not necessary for the function of the file. (but might be useful for you if you ever want to use a datagrid)

Hope it helps.

Wow JT that almost looked like you knew what you were doing!

 

[wikfx]

cool thanks a million. I have one last question? how do I make a hyperlink from the xml file so that when the user clicks the hyperlink it takes him to the website?

is this question stupid did you already show this inthe example sorry but I didn't catch it I aint new to flash but I aint good at programming or databinding

anyway thanks again

WiK

W i K

 

[pixl8r]

I think the easiest way (based on the example) is to create an invisible button within the targetClip. Let's say over the "Image" box. (to create an invisible button create a button but only draw on the "hit" frame). Give the invisible button the instance name of "button".

Then on the "actions" layer of the targetClip add this:

this.button.onRelease = function(){
	getURL(url,"_blank");
}

Make sure you use a full address in your data source (with http:// and so on) or it won't do anything.

Hope it helps!

Wow JT that almost looked like you knew what you were doing!

 

[wikfx]

ok I feel stupid heheh I shoulda thought of that hehehe oh well thanks for the GREAT HELP!!

I have been fighting with tutorials and all sorts of things for a while to get to know how to do this whole data connection thing but never got it now I have a good idea thanks to you anyway thanks again c-ya

WiK

W i K

 

[wikfx]

hey I am back on this again I am having a little problem I am trying to load the output of this xml thing into a scrollpane and have had several problem:
sometimes the scrollers dont show??? (dont know why)
so I tried to load it into a scroller from another swf than load the swf with the scroller to another movie but it tells me 256 levels of recursion were exceeded in one action list.
This is probably an infinite loop.
Further execution of actions has been disabled in this movie.

can anyone please help, I think this is a depth problem????

W i K

 

[pixl8r]

Can you post a file or a URL?

Wow JT that almost looked like you knew what you were doing!

 

[wikfx]

I figured something out on it I put the loaded xml data movieclip to load in a scrollbar than exported the .swf with embeded scrollbars than I put that into my main movie using a loader and it worked GREAT I even used a preloader to load them here take a look

http://www.os3.com.mt/our_customers.asp

and tell me what you think

thanks a million for all your help guys

W i K

 

[pixl8r]

Looks like you have it now. Glad you got it to work.

Wow JT that almost looked like you knew what you were doing!

 

[frcedric]

hi pixl8r

This dynamic portfolio is great !

Unfortunately, I can't download your zip file

http://www.taylordesign.biz/tektips/dynamicportfolio.zip

It would be help a lot if it could be possible to get it again,

Thanks for your help.

 

[pixl8r]

I have re-posted the zip. Hope it helps!

Wow JT that almost looked like you knew what you were doing!