Ultrashock Forums > Flash > ActionScript
• HTML Links in xml.

You are currently viewing our website as a guest which gives you limited access to forums, files and other resources.

Click here to join now for free, and start interacting with our members, download files and much more!

Click here if you are looking for our Flash files and other professional assets.
  
Post Reply | View first unread | Rate Thread Search this Thread | Thread Tools | Display Modes

#1
Bookmark and Share!
HTML Links in xml.
Old 2007-12-14

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 Code:
<?xml version="1.0" ?>
<newsMenu>
    <item> 
        <date>10/12/2007</date>
        <news>New book avaiable for download from <![CDATA[ <a href="http://www.newbooks.com">newbooks.com</a> ]]></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>
I'm bring the xml into flash using this code:

ActionScript Code:
  1. var gutter = 8;
  2. var newsBlock = 50;
  3. my_xml = new XML();
  4. my_xml.ignoreWhite = true;
  5. my_xml.onLoad = function(success) {
  6.     if (success) {
  7.         DisplayNews();
  8.     } else {
  9.         trace("Error XML not loaded");
  10.     }
  11. };
  12. my_xml.load("xml/news.xml");
  13. function DisplayNews() {
  14.     var start1 = my_xml.firstChild.childNodes;
  15.     for (var i = 0; i<start1.length; i++) {
  16.         displayNews = news_mc.holder_mc.attachMovie("news_mc", "news_mc"+i, i+1);
  17.         displayNews.dates = start1[i].firstChild.childNodes;
  18.         displayNews.news = start1[i].firstChild.nextSibling.childNodes;
  19.         displayNews.news_txt.html = true;
  20.         displayNews.date_txt.width = 155;
  21.         displayNews.date_txt.text = displayNews.dates;
  22.         dateHeight = displayNews.date_txt._height;
  23.         displayNews.news_txt._width = 155;
  24.         displayNews.news_txt.text = displayNews.news;
  25.         displayNews.news_txt.autoSize = true;
  26.         newsHeight = displayNews.news_txt._height;
  27.         baseHeight = Math.round(dateHeight+newsHeight+gutter);
  28.         displayNews.base_mc._height = baseHeight;
  29.         if (i != 0) {
  30.             prevClip = news_mc.holder_mc["news_mc"+(i-1)];
  31.             displayNews._y = Math.round((prevClip._y+prevClip._height+gutter));
  32.         }
  33.     }
  34.     Nav();
  35. }

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 ?
postbit arrow 21 comments | 3546 views postbit arrow Reply: with Quote   
Registered User
 cooper10 is offline
seperator
Posts: 26
2007-12-14
cooper10 lives in United Kingdom
seperator

Ultrashock Member Comments:
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2007-12-14 #2 Old  
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.

XML Code:
  1. <?xml version="1.0" ?>
  2. <newsMenu>
  3.     <item> 
  4.         <date>10/12/2007</date>
  5.         <news><![CDATA[New book avaiable for download from <a href="http://www.newbooks.com">newbooks.com</a>]]></news>
  6.     </item>
  7.     <item> 
  8.         <date>10/13/2007</date>
  9.         <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>
  10.  
  11. </newsMenu>

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.
Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #3 Old  
Last edited by cooper10 : 2008-05-09 at 12:36.
Nutrox,

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

The link just appears as text
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2007-12-14 #4 Old  
Are you using the proper syntax for the links, i.e. < " > or are you using &lt; and &gt; etc? It should be the former.
Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #5 Old  
Nutrox,

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

PHP Code:
<news><![CDATA[New book avaiable for download from &lt;a href=&quot;http://www.newbooks.com&quot;&gt;newbooks.com&lt;/a&gt;]]></news> 
and

PHP Code:
<news><![CDATA[New book avaiable for download from <a href="http://www.newbooks.com">newbooks.com</a>]]></news> 
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2007-12-14 #6 Old  
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...

ActionScript Code:
  1. displayNews.news_txt.text = displayNews.news;
...with this...
ActionScript Code:
  1. displayNews.news_txt.htmlText = displayNews.news;
You need to use TextField.htmlText not TextField.text if you want Flash to render HTML.

 Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #7 Old  
Sorry inbetween posts, I spotted that and changed it but it's still not working

ActionScript Code:
  1. my_xml.load("xml/news.xml");
  2. function DisplayNews() {
  3.     var start1 = my_xml.firstChild.childNodes;
  4.     for (var i = 0; i<start1.length; i++) {
  5.         displayNews = news_mc.holder_mc.attachMovie("news_mc", "news_mc"+i, i+1);
  6.         displayNews.dates = start1[i].firstChild.childNodes;
  7.         displayNews.news = start1[i].firstChild.nextSibling.childNodes;
  8.         //displayNews.news_txt.html = true;
  9.         displayNews.news_txt.htmlText = displayNews.news;
  10.         displayNews.date_txt.width = 155;
  11.         displayNews.date_txt.text = displayNews.dates;
  12.         dateHeight = displayNews.date_txt._height;
  13.         displayNews.news_txt._width = 155;
  14.         displayNews.news_txt.autoSize = true;
  15.         newsHeight = displayNews.news_txt._height;
  16.         baseHeight = Math.round(dateHeight+newsHeight+gutter);
  17.         displayNews.base_mc._height = baseHeight;
  18.         if (i != 0) {
  19.             prevClip = news_mc.holder_mc["news_mc"+(i-1)];
  20.             displayNews._y = Math.round((prevClip._y+prevClip._height+gutter));
  21.         }
  22.     }
  23.     Nav();
  24. }
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2007-12-14 #8 Old  
Uncomment this line...

ActionScript Code:
  1. //displayNews.news_txt.html = true; 
  2.  
 Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #9 Old  
Last edited by cooper10 : 2008-05-09 at 12:36.
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.
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2007-12-14 #10 Old  
Run the following code in a new movie...

ActionScript Code:
  1. var textField:TextField = createTextField( "textField", 0, 20, 20, 300, 30 );
  2.  
  3. textField.html = true;
  4.  
  5. textField.htmlText = 'Visit <a href="http://www.ultrashock.com/">ultrashock.com</a>';

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?
Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #11 Old  
This is the xml I'm loading into Flash - it's just dummy text at the moment but the structure is correct.

PHP Code:
<?xml version="1.0" ?>
<newsMenu>
    <item> 
        <date>10/12/2007</date>
        <news><![CDATA[New book avaiable for download from <a href="http://www.newbooks.com">newbooks.com</a>]]></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>
I posted the fla in the last post to see how I'm drawing it into flash - here is the AS

ActionScript Code:
  1. stop();
  2. //
  3. var speed = 5.2;
  4. var targY = 0;
  5. var dragger = news_mc.dragger_mc;
  6. var holder = news_mc.holder_mc;
  7. var mask = news_mc.mask_mc;
  8. //
  9. //
  10. var gutter = 8;
  11. var newsBlock = 50;
  12. my_xml = new XML();
  13. my_xml.ignoreWhite = true;
  14. my_xml.onLoad = function(success) {
  15.     if (success) {
  16.         DisplayNews();
  17.     } else {
  18.         trace("Error XML not loaded");
  19.     }
  20. };
  21. my_xml.load("xml/news.xml");
  22. function DisplayNews() {
  23.     var start1 = my_xml.firstChild.childNodes;
  24.     for (var i = 0; i<start1.length; i++) {
  25.         displayNews = news_mc.holder_mc.attachMovie("news_mc", "news_mc"+i, i+1);
  26.         displayNews.dates = start1[i].firstChild.childNodes;
  27.         displayNews.news = start1[i].firstChild.nextSibling.childNodes;
  28.         displayNews.news_txt.html = true;
  29.         displayNews.news_txt.htmlText = displayNews.news;
  30.         //displayNews.news_txt.text = displayNews.news;
  31.         displayNews.date_txt.width = 155;
  32.         displayNews.date_txt.text = displayNews.dates;
  33.         dateHeight = displayNews.date_txt._height;
  34.         displayNews.news_txt._width = 155;
  35.         displayNews.news_txt.autoSize = true;
  36.         newsHeight = displayNews.news_txt._height;
  37.         baseHeight = Math.round(dateHeight+newsHeight+gutter);
  38.         displayNews.base_mc._height = baseHeight;
  39.         if (i != 0) {
  40.             prevClip = news_mc.holder_mc["news_mc"+(i-1)];
  41.             displayNews._y = Math.round((prevClip._y+prevClip._height+gutter));
  42.         }
  43.     }
  44.     Nav();
  45. }
  46. //
  47. //
  48. function Nav() {
  49.     holder.setMask(mask);
  50.     dragger._y = 0;
  51.     draggerX = Math.round(mask._width+10);
  52.     dragger.onEnterFrame = function() {
  53.         this._x += (draggerX-this._x)/(speed/1.8);
  54.         if (this._x>=(draggerX-1)) {
  55.             this._x = draggerX;
  56.             delete this.onEnterFrame;
  57.         }
  58.     };
  59.     //dragger._yscale = (holder._height/mask._height)*100;
  60.     dragger.onPress = function() {
  61.         startDrag(this, false, this._x, 0, this._x, mask._height-this._height);
  62.     };
  63.     dragger.onRelease = dragger.onReleaseOutside=function () {
  64.         stopDrag();
  65.     };
  66.     holder.onEnterFrame = function() {
  67.         scroll = (this._height-(mask._height/1.2))/(mask._height-dragger._height);
  68.         targY = -dragger._y*scroll;
  69.         this._y -= Math.round((this._y-targY)/speed);
  70.     };
  71. }

Again thanks for all the help.
Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #12 Old  
wow that was killing me but got it working but without the CDATA tags, just using

PHP Code:
<news>This is the first piece of news have a look <a href="http://www.google.com" target="blank"> newbooks.com </a></news> 
Final question - was is the best way of high lighting the link so the link will be underlined or colored different.
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2007-12-14 #13 Old  
CSS.

ActionScript 2.0 Code:
  1. import TextField.StyleSheet;
  2.  
  3. var css:String = "a { color:#FF0000; text-decoration:underline; }"
  4.                + "a:hover { color:#0000FF; }";
  5.  
  6. var style:StyleSheet = new StyleSheet();
  7. style.parseCSS( css );
  8.  
  9. textField.styleSheet = style;
  10.  
  11. textField.htmlText = 'Ultra<a href="http://...">shocked</a>';

You could also load an external CSS file if you wanted to instead of defining it in the code.
Reply With Quote  
cooper10 cooper10 is offline cooper10 lives in United Kingdom 2007-12-14 #14 Old  
Last edited by cooper10 : 2008-05-09 at 12:36.
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 Code:
<item> 
        <date>10/12/2007</date>
        <news>This is the first piece of news have a look <a href="http://www.google.com" target="blank">here</a>This is the first piece of news have a look </news>     
    </item> 
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.
Reply With Quote  
yakken's Avatar yakken yakken is offline yakken lives in Denmark 2007-12-17 #15 Old  
Check the replies in my thread here:
XML and CDATA not formatting as HTML text
I got mine working by redefining the parsing code for the XML - I had excactly the same problems as you did.
Reply With Quote  
pisosse pisosse is offline pisosse lives in Denmark 2008-11-18 #16 Old  
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?
Reply With Quote  
Laveklint's Avatar Laveklint Laveklint is offline Laveklint lives in Sweden 4 Creative Assets 2008-11-19 #17 Old  
if you wanna set a font-family in your css you´ll have to embed the font into your library and then choose the font manually for the textfield, your embeded font will have an * infront of the name of the font. As below:

MeTooPixie
*MyFont
Myriad Pro
Reply With Quote  
pisosse pisosse is offline pisosse lives in Denmark 2008-11-20 #18 Old  
Thanks.. I found that you can ad the font to library and then you can call it from css. But I belive thats also what your saying.. Thankss
Reply With Quote  
Laveklint's Avatar Laveklint Laveklint is offline Laveklint lives in Sweden 4 Creative Assets 2008-11-20 #19 Old  
no problem
Reply With Quote  
Nutrox's Avatar Nutrox Nutrox is offline Super Moderator Nutrox lives in United Kingdom 17 Creative Assets 2008-11-20 #20 Old  
If you just want to use device fonts make sure the TextField isn't embedding fonts (default value is false anyway), the CSS font-family rule should work the same as it does in regular CSS then.

Code:
import TextField.StyleSheet;

var css:String = "span { font-size:13px; }"
               + ".arial { font-family:arial,sans-serif; }"
               + ".verdana { font-family:verdana,sans-serif; }";

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

var textField:TextField = createTextField( "textField", 0, 0, 0, 200, 200 );
textField.multiline = true;
textField.html = true;

textField.styleSheet = style;
textField.htmlText = "<span class=\"arial\">Arial @ 13px</span>\n"
                   + "<span class=\"verdana\">Verdana @ 13px</span>";
 Reply With Quote  
Chivrak Chivrak is offline Chivrak lives in United States 2009-07-24 #21 Old  
Hello everyone, I am having a similar issue putting html in my text box. I am using a carousel style template http://www.chivrak.com I think part of the issue is how the structure in the xml is written and the other is something I must be missing in the AS. Please help. I will give you a bunch of links on my main site (once it is completed) to show my appreciation.

XML:

DOES WORK:
<content>

<sitio imagen="icon4.png" titleA="music" contentA= "This boring font unlinked text works fine."/>

</Content>


DOES NOT WORK:
<content>

<sitio imagen="icon4.png" titleA="music" contentA= "I would really like to put a link here and I have tried <link><![CDATA[<a href="www.vinyljockeys.com">VJ</a>]]></link>"/>

</Content>


ALSO DOES NOT WORK:
<content>

<sitio imagen="icon4.png" titleA="music" contentA= "I would really like to put a link here and I have tried link=![CDATA[<a href="www.vinyljockeys.com">VJ</a>]] I am totally <b>confused.</b> Please help." />

</Content>


AS:

var xml:XML = new XML();
xml.load("content.xml");
xml.ignoreWhite = true;
xml.onLoad = function() {
var nodes = this.firstChild.childNodes;
numOfItems = nodes.length;
for (var i = 0; i<numOfItems; i++) {
var t = home.attachMovie("item", "item"+i, i+1);
t.angle = i*((Math.PI*2)/numOfItems);
t.onEnterFrame = mover;
t.toolText = nodes[i].attributes.titleA;
t.contenido = nodes[i].attributes.contentA;
t.content = nodes[i].attributes.content;
t.icon.inner.loadMovie(nodes[i].attributes.imagen);
t.icon2.inner.loadMovie(nodes[i].attributes.imagen);
t.r.inner.loadMovie(nodes[i].attributes.imagen);
t.icon.onRollOver = over;
t.icon.onRollOut = out;
t.icon.onRelease = released;
Reply With Quote  
Chivrak Chivrak is offline Chivrak lives in United States 2009-07-29 #22 Old  
Go to http://blog.vamapaull.com/?page_id=12 and you will get a great solution, just download and compare the .XML and .Fla to your carousel make the AS and XMl changes and voi la, you get CDATA in your text boxes.

Even tho my site is carousel based I cannot make it work for me unless I change the action of my icons. My icons fall thru the floor instead of going to the side, as they do in carousel, unfortunately I do not know flash well enough to make it work for me with out a direct expample So I am still lookiing for a solution...
Reply With Quote  
Thread Tools
Display Modes Rate This Thread
Linear Mode Linear Mode
Rate This Thread: