Flash
 ActionScript

     

HTML Links in xml.

Hi all,

I’m making a news section where the news comes from an xml file, the xml contains a date and a block of news, within the block of news I wanted to have links.

the xml looks like this:

I’m using the CDATA tags around the links

[php]
<?xml version=“1.0” ?>
<newsMenu>
<item>
  <date>10/12/2007</date>
  <news>New book avaiable for download from <![CDATA[ newbooks.com ]]></news>
</item>
<item>
  <date>10/13/2007</date>
  <news>Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news </news>
……

</newsMenu>
[/php]

I’m bring the xml into flash using this code:

[as]
var gutter = 8;
var newsBlock = 50;
my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
if (success) {
  DisplayNews();
} else {
  trace(“Error XML not loaded”);
}
};
my_xml.load(“xml/news.xml”);
function DisplayNews() {
var start1 = my_xml.firstChild.childNodes;
for (var i = 0; i<start1.length; i++) {
displayNews = news_mc.holder_mc.attachMovie("news_mc", "news_mc"+i, i+1);
displayNews.dates = start1.firstChild.childNodes;
displayNews.news = start1.firstChild.nextSibling.childNodes;
displayNews.news_txt.html = true;
displayNews.date_txt.width = 155;
displayNews.date_txt.text = displayNews.dates;
dateHeight = displayNews.date_txt._height;
displayNews.news_txt._width = 155;
displayNews.news_txt.text = displayNews.news;
displayNews.news_txt.autoSize = true;
newsHeight = displayNews.news_txt._height;
baseHeight = Math.round(dateHeight+newsHeight+gutter);
displayNews.base_mc._height = baseHeight;
if (i != 0) {
prevClip = news_mc.holder_mc["news_mc"+(i-1)];
displayNews._y = Math.round((prevClip._y+prevClip._height+gutter));
}
}
Nav();
}
[/as]

The code attaches news_mc from the library which contains two text fields, date_txt and news_txt, the information from the xml is placed into the different fields. The news_txt field is set with html to true. The text field just displays the text

Is it possible to get the these links to work in Flash ?

  19 REPLIES
Nutrox
1  
Nutrox

It is indeed possible, but you need to enclose all of the text in CDATA. CDATA is just a special kind of node so you need to treat it just like any other node.

[highlight=XML]<?xml version=“1.0” ?>
<newsMenu>
  <item>
      <date>10/12/2007</date>
      <news><![CDATA[New book avaiable for download from newbooks.com]]></news>
  </item>
  <item>
      <date>10/13/2007</date>
      <news><![CDATA[Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news]]></news>

</newsMenu>[/highlight]

It would be worthwhile enclosing the text for every <news> node in CDATA (as shown) because you will know exactly how to handle/parse each node then. Hope that helps. smilie

  • 14 December 2007 08:26 AM
    •  
cooper10 Author 
2  
cooper10

Nutrox,

Thanks for your reply - I’ve tried what you recommended but I still get the same results.

The link just appears as text

  • 14 December 2007 08:54 AM
    •  
Nutrox
3  
Nutrox

Are you using the proper syntax for the links, i.e. < ” > or are you using < and > etc? It should be the former.

  • 14 December 2007 09:08 AM
    •  
cooper10 Author 
4  
cooper10

Nutrox,

I’ve tried both ways but I still get the same results.

[php]
<news><![CDATA[New book avaiable for download from <a href=“http://www.newbooks.com”>newbooks.com</a>]]></news>

[/php]

and

[php]
<news><![CDATA[New book avaiable for download from newbooks.com]]></news>
[/php]

  • 14 December 2007 09:41 AM
    •  
Nutrox
5  
Nutrox

D’oh! d’oh! I have just spotted what you are doing wrong. Ok, use the syntax in the second block of XML you have just posted there^ and also replace this line of ActionScript code…

[highlight=ActionScript]displayNews.news_txt.text = displayNews.news;[/highlight]
...with this…
[highlight=ActionScript]displayNews.news_txt.htmlText = displayNews.news;[/highlight]
You need to use TextField.htmlText not TextField.text if you want Flash to render HTML.

smilie

  • 14 December 2007 09:48 AM
    •  
cooper10 Author 
6  
cooper10

Sorry inbetween posts, I spotted that and changed it but it’s still not working

[as]
my_xml.load(“xml/news.xml”);
function DisplayNews() {
var start1 = my_xml.firstChild.childNodes;
for (var i = 0; i<start1.length; i++) {
displayNews = news_mc.holder_mc.attachMovie("news_mc", "news_mc"+i, i+1);
displayNews.dates = start1.firstChild.childNodes;
displayNews.news = start1.firstChild.nextSibling.childNodes;
//displayNews.news_txt.html = true;
displayNews.news_txt.htmlText = displayNews.news;
displayNews.date_txt.width = 155;
displayNews.date_txt.text = displayNews.dates;
dateHeight = displayNews.date_txt._height;
displayNews.news_txt._width = 155;
displayNews.news_txt.autoSize = true;
newsHeight = displayNews.news_txt._height;
baseHeight = Math.round(dateHeight+newsHeight+gutter);
displayNews.base_mc._height = baseHeight;
if (i != 0) {
prevClip = news_mc.holder_mc["news_mc"+(i-1)];
displayNews._y = Math.round((prevClip._y+prevClip._height+gutter));
}
}
Nav();
}
[/as]

  • 14 December 2007 10:00 AM
    •  
Nutrox
7  
Nutrox

Uncomment this line…

[highlight=ActionScript]//displayNews.news_txt.html = true;[/highlight]

  • 14 December 2007 10:17 AM
    •  
cooper10 Author 
8  
cooper10

Still no luck sorry.

Just to make sure I’m not confusing you I wanted say a word in the text field to be a link to another page as in normal html.

So in the image ‘newbook.com’ would be the link - that is possible is’nt it ?

If anyone could see where I’m going wrong I’ve attached the fla.

Any help would be greatly appericated.

  • 14 December 2007 10:35 AM
    •  
Nutrox
9  
Nutrox

Run the following code in a new movie…

[highlight=“ActionScript”]var textField:TextField = createTextField( “textField”, 0, 20, 20, 300, 30 );

textField.html = true;

textField.htmlText = ‘Visit ultrashock.com’;[/highlight]

You will see that the link works fine. If you are setting the TextField’s html property to true, and you are using the TextField’s htmlText property to set the HTML text, then the problem must be the XML data or the way you are parsing it. Can you post a link to the actual XML file you are loading into Flash?

  • 14 December 2007 10:48 AM
    •  
cooper10 Author 
10  
cooper10

This is the xml I’m loading into Flash - it’s just dummy text at the moment but the structure is correct.

[php]
<?xml version=“1.0” ?>
<newsMenu>
<item>
  <date>10/12/2007</date>
  <news><![CDATA[New book avaiable for download from newbooks.com]]></news> 
</item>
<item>
  <date>10/13/2007</date>
  <news>Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news </news>
</item>
<item>
  <date>10/14/2007</date>
  <news>Third piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news </news>
</item>
<item>
  <date>10/15/2007</date>
  <news>Fifth piece of news Second piece of news Second </news>
</item>
<item>
  <date>10/16/2007</date>
  <news>Third piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news </news>
</item>
<item>
  <date>10/17/2007</date>
  <news>Third piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news </news>
</item>
<item>
  <date>10/18/2007</date>
  <news>Third piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news Second piece of news </news>
</item>
</newsMenu>

[/php]

I posted the fla in the last post to see how I’m drawing it into flash - here is the AS

[as]
stop();
//
var speed = 5.2;
var targY = 0;
var dragger = news_mc.dragger_mc;
var holder = news_mc.holder_mc;
var mask = news_mc.mask_mc;
//
//
var gutter = 8;
var newsBlock = 50;
my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.onLoad = function(success) {
if (success) {
  DisplayNews();
} else {
  trace(“Error XML not loaded”);
}
};
my_xml.load(“xml/news.xml”);
function DisplayNews() {
var start1 = my_xml.firstChild.childNodes;
for (var i = 0; i<start1.length; i++) {
displayNews = news_mc.holder_mc.attachMovie("news_mc", "news_mc"+i, i+1);
displayNews.dates = start1.firstChild.childNodes;
displayNews.news = start1.firstChild.nextSibling.childNodes;
displayNews.news_txt.html = true;
displayNews.news_txt.htmlText = displayNews.news;
//displayNews.news_txt.text = displayNews.news;
displayNews.date_txt.width = 155;
displayNews.date_txt.text = displayNews.dates;
dateHeight = displayNews.date_txt._height;
displayNews.news_txt._width = 155;
displayNews.news_txt.autoSize = true;
newsHeight = displayNews.news_txt._height;
baseHeight = Math.round(dateHeight+newsHeight+gutter);
displayNews.base_mc._height = baseHeight;
if (i != 0) {
prevClip = news_mc.holder_mc["news_mc"+(i-1)];
displayNews._y = Math.round((prevClip._y+prevClip._height+gutter));
}
}
Nav();
}
//
//
function Nav() {
holder.setMask(mask);
dragger._y = 0;
draggerX = Math.round(mask._width+10);
dragger.onEnterFrame = function() {
  this._x += (draggerX-this._x)/(speed/1.8);
  if (this._x>=(draggerX-1)) {
  this._x = draggerX;
  delete this.onEnterFrame;
  }
};
//dragger._yscale = (holder._height/mask._height)*100;
dragger.onPress = function() {
  startDrag(this, false, this._x, 0, this._x, mask._height-this._height);
};
dragger.onRelease = dragger.onReleaseOutside=function () {
  stopDrag();
};
holder.onEnterFrame = function() {
  scroll = (this._height-(mask._height/1.2))/(mask._height-dragger._height);
  targY = -dragger._y*scroll;
  this._y -= Math.round((this._y-targY)/speed);
};
}
[/as]

Again thanks for all the help.

  • 14 December 2007 11:28 AM
    •  
cooper10 Author 
11  
cooper10

wow that was killing me but got it working but without the CDATA tags, just using

[php]
<news>This is the first piece of news have a look newbooks.com </news>
[/php]

Final question - was is the best way of high lighting the link so the link will be underlined or colored different.

  • 14 December 2007 01:32 PM
    •  
Nutrox
12  
Nutrox

CSS. wink

[highlight=“ActionScript 2.0”]import TextField.StyleSheet;

var css:String = “a { color:#FF0000; text-decoration:underline; }”
          + “a:hover { color:#0000FF; }”;

var style:StyleSheet = new StyleSheet();
style.parseCSS( css );

textField.styleSheet = style;

textField.htmlText = ‘Ultrashocked’;[/highlight]

You could also load an external CSS file if you wanted to instead of defining it in the code.

  • 14 December 2007 01:46 PM
    •  
cooper10 Author 
13  
cooper10

I think I might have spoken a little too soon.

The link seem to work in the display but it puts in a comma before the link as shown in the image, the word with the link is “here”.

here is the xml

[php]
<item>
  <date>10/12/2007</date>
  <news>This is the first piece of news have a look hereThis is the first piece of news have a look </news> 
</item>
[/php]

On the use of CSS is that only avaiable in MX 2004 and above. I’m having to use MX for this, is there another methos I could use to highlight the text.

  • 14 December 2007 02:02 PM
    •  
yakken
14  
yakken

Check the replies in my thread here:
http://www.ultrashock.com/forums/showthread.php?t=91335
I got mine working by redefining the parsing code for the XML - I had excactly the same problems as you did.

  • 17 December 2007 09:18 PM
    •  
pisosse
15  
pisosse

hmmm.. nutrox I can get your css proporties to work well in a runtime created textfield feeded tru xml like above. But if I ty to set font-family it dosn’t change a thing.. any idea?

  • 18 November 2008 05:39 PM
    •  

Page 1 of 2