Forum: Log-In | Register | Contact | Shop


SwishMax Tutorials And Resources
Where Imagination Is The Creation

 


Add


Welcome To Swish-Designs.co.uk Have a Nice Tuesday

Swishmax Rss/Xml News Reader SwishMax 2 Tutorial


In this tutorial you will learn how to write an xml news file that will be read and displayed in a swishmax movie, you will create 1 container movie clip that will load and display as many news items as you have in your news.rss or news.xml file.

Example:





Step.1

First open Swishmax 2 and set the movies properties for this example i have only loaded 2 news items to the movie so i have used the following. width = 500px x height = 140px. frame rate doesnt realy matter unless you want to add effect at a later time. so we will kepp it at 25fps.




Step.2

Insert a dynamic text box to the bottom left hand corner of your movie give it the name msg_txt and the var name of msg do not check the target box.
Now create a new movie clip and give it the name of newsmenu, inside the movie clip drag out a solid white with dark bordered rectangle with the following dimensions 343 x 147 and name it bg copy and paste in place this shape, place the duplicated shape underneath the original rename the shape shaddow change the fill colour to a light grey colour and with the shape selected and using the arrow keys press down twice and right twice this will create a drop shadow. see fig.1 below.

fig.1 Fig.1



Step.3

Still working inside the movie clip add a new movie clip name it pic move it to the left hand side set the transform to top left this will be the place holder where the icon image will be displayed, if you wish you can use the rectangle tool with a dark bork but no colour fill to create a border around the image / movie clip. see fig.2 below.

fig.2 Fig.2


Step.4

add a dynamic text box i sugest you you click the black border with white background icon icon to help you get your text box lined up and then click it again when your text box is in place, name the text box newslink and the var newslink do not check the target checkbox.
Now create another dynamic text box name it desc and a var name of desc again do not check the target checkbox. click the icon again to help you position your test box. when you are happy with the postition remove the border from the text boxes by clicking the icon again. see fig.3 below.

fig.3 Fig.3

Once you have positioned your text boxes and removed the borders, close the movie clip and move it anwhere off stage.


Step.5

Lets start by writing our RSS news file, open you favourite text editor and add the following code to it.

RSS Code:
<?xml version="1.0"?>
<Menu>
<myItem name="Tile Goes Here" link="Url goes here" desc="Description goes here" icon="link to icon image goes here"></myItem>
<myItem name="Tile Goes Here" link="Url goes here" desc="Description goes here" icon="link to icon image goes here"></myItem>
</Menu>

And save the file as news.rss

now to get this to read inside of swishmax, to do so add the following script to Scene_1

SwishScript:
onSelfEvent (load) {
newsXML = new XML();
newsXML.ignoreWhite = true;
newsXML.onLoad = function(success) {
if (success) {
msg="Rss file loaded successfully:";
newsItem = this.firstChild.childNodes;
for (var i=0; i<newsItem.length; i++) {
box = newsmenu.duplicateMovieClip("newsmenu" + i, i);//,_y = 60
box._x = 5;
box._y = 60*i;
box.newslink.text = newsItem[i].attributes.name;
box.link = newsItem[i].attributes.link;
box.desc.text = newsItem[i].attributes.desc;
box.icon = newsItem[i].attributes.icon;
box.pic.loadMovie(box.icon);
box.onPress = function() {
getURL(this.link);
};
}
}
};
newsXML.load("news.rss");
}
onFrame (1) {
stop();
}


Thats it press Ctrl+T and you should end up with something looking like the example at the start of this tutorial.

Buy this source file for £2.00