Wednesday, January 8, 2014

Using a StyleSheet in Actionscript 2 to display an iTunes img Correctly

There are times when a simple request turns into a flight down the rabbit hole. mathies and mathclips share an XML file with information about learning tools available to Ontario students.  A link to Sketchpad Explorer on the App store needed to be added.  On the mathies webpage, this was easily done with html like:
       

Sketchpad Explorer is available from the 
<a href="http://itunes.apple.com/ca/app/sketchpad-explorer/id452811793?mt=8&amp;uo=4" target="itunes_store">
<img src="http://www.oame.on.ca/mathiesbeta/images/badge_appstore-sm.png" height="15px" width="61px" />
</a>
getting a result like:
where the image was unnecessarily copied from one created with http://linkmaker.itunes.apple.com to the local server.

In Flash, there were two issues:
  1. A phantom underline preceded the image as the result of a <u> tag surrounding the <a>...<img /> tags
  2. The topic list, a feature only of the mathclips tool tab,  appeared next to the image and not below it, despite <br /> tags.  This is due to Flash floating images.
The wrapping issue was solved using an idea from Panax and StyleSheets and the underline issue was solved by creating a blueNoUnderline class.

The StyleSheet is created in code as follows:
var myStyleSheet:TextField.StyleSheet = new TextField.StyleSheet();
myStyleSheet.setStyle("a", {color:'#0000FF', textDecoration:'underline'});
myStyleSheet.setStyle(".blueNoUnderline", {color:'#0000FF', textDecoration:'none'});
myStyleSheet.setStyle(".imageSpacer30", {fontSize:30});
The htmlText is massaged to wrap the <img /> tag inside a <p> tag (red text below).  The dummy paragraph suggested by Panax is added (green text below).  The blueNoUnderline class is added to the <a> tag to avoid a bit of underlined space (blue text below).
       
Sketchpad Explorer is available from the 
<a href='http://itunes.apple.com/ca/app/sketchpad-explorer/id452811793?mt=8&uo=4' target='itunes_store' class='blueNoUnderline'>
<p>
<img src='http://www.oame.on.ca/mathiesbeta/images/badge_appstore-sm.png' width='61px' height='15px' />
</p>
</a>
<p class='imageSpacer30'></p>
<br />
<p><font size=\"10\">(Geometry, Measurement, Simulations)</font></p>
The necessity to precede the "blueNoUnderline" name with period in the setStyle was a late discovery as I did not see it any of the examples I looked at.  For a while, I was convinced that StyleSheets read from .css files were the only ones that worked.