Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

fonts in jpeg images in my xml gallery are distorted 1

Status
Not open for further replies.
ozzie12

ozzie12

Programmer
Joined
Nov 9, 2007
Messages
19
Location
CA
I've set up some xml galleries for the portfolio section of my website My problem is with the jpeg images within the xml files. I have created the jpeg files so that each portfolio image has a short description below in a simple font (Verdana). The fonts are fine in the original jpeg files but as soon as the jpegs are part of the xml gallery, they become distorted and hard to read. I have no clue how to solve this. I've tried other fonts within Photoshop (including Pixel fonts) and I've tried outlining the fonts before I save as jpegs and nothing works. It seems that the xml file is distorting the look of the fonts within each jpeg file. The images look fine, it's only the fonts. The problem can be viewed in the "folio" section of my site.

Help!
 
Sort by date Sort by votes
I'm guessing the images you are loading are larger than the size they are being scaled to in Flash, and when JPEG's are scaled most font's will distort slightly. My suggestion would be to remove the text from the image altogether, and if you're loading from an XML, create an element for each image in the XML file with the text you want to display. Create a layer over the loader component and add some dynamic text that is populated by the data in the XML.. would make for easier management in the long run if you ever wanted to change the text.

If you need a hand with this let me know, I'd be glad to help
 
Upvote 0 Downvote
That sounds like a great suggestion alucidweb! I don't understand xml very well and this is my first attempt with it so I'd love your help. I understand how to set up a dynamic text field layer over the loader component in Flash but I'm not sure how to make the text change so that it is specific to each image in the gallery. I'm assuming I would have to alter something in either the actionscript (another weakness) for each gallery and/or the xml code? I can easily send you a sample of the code I'm using for both a flash file and an xml file if that helps.

Thanks so much. Your suggestion sounds like a logical one which will remedy this nuisance problem once and for all!
 
Upvote 0 Downvote
You did it again oldnewbie! This is perfect and explains things in such an easy manner. Perfect! Thanks once again.
 
Upvote 0 Downvote
Argh...despite the tutorial, I still can't quite get it. I've added a dynamic text field to my .fla file with the instance name "caption_txt". I think the problem I'm having is with the Actionscript. This is what I have:

Stage.scaleMode = "noScale";

var current_pic:Number = 0;
var total_pics:Number;
var pics:Array = new Array();

var full_image_path:String = "print_images/";
function changeTitle(name:String) {
gallery_mc.title_txt.text = name;
gallery_mc.viewing_txt.text = "Viewing Image " + (current_pic + 1)
+ " of " + total_pics;
}


function loadImage(clip, src) {
changeTitle(pics[current_pic].name);
var max_pics:Number = total_pics - 1;
if(current_pic == 0) {
gallery_mc.prev_btn.enabled = false;
gallery_mc.prev_btn._alpha = 50;
} else if(current_pic == max_pics) {
gallery_mc.next_btn.enabled = false;
gallery_mc.next_btn._alpha = 50;
} else {
gallery_mc.prev_btn.enabled = true;
gallery_mc.next_btn.enabled = true;
gallery_mc.prev_btn._alpha = 100;
gallery_mc.next_btn._alpha = 100;
}
clip._alpha = 0;
clip.createEmptyMovieClip("image_mc", clip.getNextHighestDepth());
clip.image_mc.loadMovie(src);
clip.onEnterFrame = function() {
if(this._alpha >= 100) {
delete this.onEnterFrame;
}
this._alpha += 5;
}
}


function init() {
gallery_mc.prev_btn.enabled = false;
gallery_mc.next_btn.enabled = false;
gallery_mc.prev_btn._alpha = 50;
gallery_mc.next_btn._alpha = 50;

var gallery_xml:XML = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
if(success == true) {
var xml:XML = this.firstChild;
for(var j = 0; j < xml.childNodes.length; j++) {
pics.push({name:xml.childNodes[j].childNodes[0].firstChild.nodeValue,
image:xml.childNodes[j].childNodes[1].firstChild.nodeValue});
}
total_pics = pics.length;
if(total_pics > 1) {
gallery_mc.next_btn.enabled = true;
gallery_mc.next_btn._alpha = 100;
}
loadImage(gallery_mc.image_holder_mc, full_image_path + pics[current_pic].image);
}
}
gallery_xml.load('print_list.xml');
}

gallery_mc.prev_btn.onRelease = function() {
if(current_pic > 0) {
current_pic--;
loadImage(gallery_mc.image_holder_mc, full_image_path + pics[current_pic].image);
}
}
gallery_mc.next_btn.onRelease = function() {
if(current_pic < total_pics - 1) {
current_pic++;
loadImage(gallery_mc.image_holder_mc, full_image_path + pics[current_pic].image);
}
}
init();

I realize I'm missing something which references the captions. I've tried adding:
gallery_mc.caption_txt.text = description[p];

but it doesn't work. I'm not sure what I'm missing at this point. Any suggestions?
 
Upvote 0 Downvote
Within the gallery_mc movieclip in the .fla file there is a small dynamic text box in the lower left corner. I've given it the instance name "caption_txt". I just can't figure out what the actionscript should be for that dynamic text box so that it "speaks" with the xml file. I'm stumped.
 
Upvote 0 Downvote
Well like for the pictures, you need to store the captions in an array... As Kirupa's tutorial does...

Here's a quick addition to your code... I've bolded my additions...

Stage.scaleMode = "noScale";

var current_pic:Number = 0;
var total_pics:Number;
var pics:Array = new Array();
var caption:Array = new Array();

var full_image_path:String = "web_images/";
function changeTitle(name:String) {
gallery_mc.title_txt.text = name;
gallery_mc.viewing_txt.text = "Viewing Image " + (current_pic + 1)
+ " of " + total_pics;
}


function loadImage(clip, src) {
changeTitle(pics[current_pic].name);
var max_pics:Number = total_pics - 1;
if(current_pic == 0) {
gallery_mc.prev_btn.enabled = false;
gallery_mc.prev_btn._alpha = 50;
} else if(current_pic == max_pics) {
gallery_mc.next_btn.enabled = false;
gallery_mc.next_btn._alpha = 50;
} else {
gallery_mc.prev_btn.enabled = true;
gallery_mc.next_btn.enabled = true;
gallery_mc.prev_btn._alpha = 100;
gallery_mc.next_btn._alpha = 100;
}
clip._alpha = 0;
clip.createEmptyMovieClip("image_mc", clip.getNextHighestDepth());
clip.image_mc.loadMovie(src);
clip.onEnterFrame = function() {
if(this._alpha >= 100) {
delete this.onEnterFrame;
}
this._alpha += 5;
}
}

//caption = [];

function init() {
gallery_mc.prev_btn.enabled = false;
gallery_mc.next_btn.enabled = false;
gallery_mc.prev_btn._alpha = 50;
gallery_mc.next_btn._alpha = 50;

var gallery_xml:XML = new XML();
gallery_xml.ignoreWhite = true;
gallery_xml.onLoad = function(success) {
if(success == true) {
var xml:XML = this.firstChild;
for(var j = 0; j < xml.childNodes.length; j++) {
pics.push({name:xml.childNodes[j].childNodes[0].firstChild.nodeValue,
image:xml.childNodes[j].childNodes[1].firstChild.nodeValue, url: xml.childNodes[j].childNodes[2].firstChild.nodeValue});
caption[j] = xml.childNodes[j].childNodes[3].firstChild.nodeValue;
}
total_pics = pics.length;
if(total_pics > 1) {
gallery_mc.next_btn.enabled = true;
gallery_mc.next_btn._alpha = 100;
}
loadImage(gallery_mc.image_holder_mc, full_image_path + pics[current_pic].image);
gallery_mc.caption_txt.text = caption[0];
}
}
gallery_xml.load('web_list.xml');
}

gallery_mc.prev_btn.onRelease = function() {
if(current_pic > 0) {
current_pic--;
gallery_mc.caption_txt.text = caption[current_pic];
loadImage(gallery_mc.image_holder_mc, full_image_path + pics[current_pic].image);
}
}
gallery_mc.next_btn.onRelease = function() {
if(current_pic < total_pics - 1) {
current_pic++;
gallery_mc.caption_txt.text = caption[current_pic];
loadImage(gallery_mc.image_holder_mc, full_image_path + pics[current_pic].image);
}
}
init();

The above should at least get your captions displayed...

But you must make more corrections...

I'll explain when you get this working first...

Regards. FLASH HELP - OPENED FOR BUSINESS!
TO GET YOUR OWN FREE WEBSITE HOSTING
 
Upvote 0 Downvote
It works! I was missing much more than I thought. Now, I notice that the captions show for the images in this gallery with url links but it comes up "undefined" for the images without url links. Also, I have 5 xml galleries and this is the only one with any url links. What needs to be changed for the other galleries (and this one where there are no url links) so the caption text shows?

Thank you in advance for going well above and beyond the call of duty. I wish it were possible to award more than one star at a time!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

69ashton
  • Locked
  • Question Question
put items in correct boxes code for flash
Replies
3
Views
1K
Elia Watson
Elia Watson
stpapadakis
  • Locked
  • Question Question
Problem with full screen in apk
Replies
0
Views
924
stpapadakis
stpapadakis
TheCardMan
  • Locked
  • Question Question
My Flash Slideshow is not working once uploaded to my site.
Replies
0
Views
869
TheCardMan
TheCardMan
DKeil
  • Locked
  • Question Question
Large Vectors in Flash Project for iPad
Replies
0
Views
829
DKeil
DKeil
TheFuriousOne
  • Locked
  • Question Question
Need Help With XML Flash Gallery
Replies
0
Views
211
TheFuriousOne
TheFuriousOne

Part and Inventory Search

Sponsor

Back
Top