all groups > flash actionscript > may 2005 >
You're in the

flash actionscript

group:

Random image with label and hyperlink


Random image with label and hyperlink gBOT
5/27/2005 12:00:00 AM
flash actionscript:
Hi there, I hope someone can help with this, I'm a relatively basic flash
designer, and I need to make a movie for a page that will load an image at
random each time the page is loaded.

That seems simple enough, plenty of posts on that topic. But how about having
the flash movie remember, say the last 2 images, and ensure that they don't
show again. I think I could figure out how to do that if I was just showing an
image, but I also need each image to have a hyperlink to jump to another page,
specific to each image, and ideally also a text label to show as well.

And just to top it off, it would be great if I could do it in such a way as to
be able to add to the random image "pool" by just dumping new images into a
folder repository, and editing a simple text or xml file.

I think I've got the basic idea of how to go about it, but I'm sure someone
probably has a better solution, and I'm not too savy with xml, which I assume
would be the best way to achieve this.

So, basically I need to have a file that contains somthing like:

<image>
<url="folder/imageurl.jpg">
<label="Label image 1">
<hyperlink="to_a_page.html">
</image>

etc etc

And the have the flash movie somehow parse this file, pick one at random, and
display the image in a clip, print the label to a text box, and put the href
into a button.

Something like this would be pretty neat, I'm a bit surprised I haven't found
an extension that does this..?

Any help greatly appreciated.

Thank you.
Re: Random image with label and hyperlink kglad
5/27/2005 12:00:00 AM
flash can't remember anything. you need to use some server-side coding to save
information about what was displayed to previous visitors.

unless you can accept not showing the same image to a previous visitor. flash
can save a cookie-like file on any users system that can store the value of the
image they viewed. if and when they return to your site, a different image can
be displayed. is that good enough?
Re: Random image with label and hyperlink the fleece
5/27/2005 12:00:00 AM
yep, try looking up
shared object
Re: Random image with label and hyperlink kglad
5/27/2005 12:00:00 AM
Re: Random image with label and hyperlink gBOT
5/29/2005 12:00:00 AM
Hi, thanks for your replies.

I can do without the remembering feature then, I see know that that would be
too involved, and require cookies or server-side variables - I should have
realised that.

So, you say the rest is easy, and I'll find it all explained in the help
files? So should I use an XML file?

Any other tips on how I go about it?

Thanks again.
Re: Random image with label and hyperlink kglad
5/29/2005 12:00:00 AM
in a text file (say yourtext.txt) you can use:

&url1=folder/imageurl.jpg
&label1=Label image 1
&link1=to_a_page.html

&url2=folder/anotherimageurl.jpg
&label2=Label image 2
&link2=to_another_page.html
.
.
etc

in your flash you can use:

myLV = new LoadVars();
myLV.load("yourtext.txt");
myLV.onLoad = function() {
for (ivar=1; ivar<100; ivar++) {
if (!this["url"+ivar]) {
trace(ivar);
displayF(Math.ceil(Math.random()*(ivar-1)));
break;
}
}
};
function displayF(i) {
rclip = _root.createEmptyMovieClip("holderMC", _root.getNextHighestDepth());
/* rclip._x=?
rclip._y=?
*/
rclip.loadMovie(myLV["url"+i]);
preloadI = setInterval(preloadF, 100, i);
}
function preloadF(i) {
loaded = holderMC.getBytesLoaded();
total = holderMC.getBytesTotal();
if (loaded>0 && loaded>=total) {
clearInterval(preloadI);
holderMC.onPress = function() {
getURL(myLV["link"+i]);
};
_root.createTextField("tf", _root.getNextHighestDepth(), 0,
holderMC._y+holderMC._height+20, 10, 30);
tf.autoSize = "left";
tf.text = myLV["label"+i];
tf._x = holderMC._x+holderMC._width/2-tf._width/2;
}
}
Re: Random image with label and hyperlink kglad
5/30/2005 12:00:00 AM
yes, the flash code should be attached to a frame. the rclip parameter's (your
target movieclip) should be set where you want you loaded swf to appear.

yourtext.txt in flash should match your textfile's path/name.

use trace statements to pinpoint the problem's location.
Re: Random image with label and hyperlink gBOT
5/30/2005 8:17:54 AM
wow. thanks. I really appreciate that, I wouldn't have known where to begin
doing it entirely in ActionScript like that.

Unfortunately I can't get it to work tho', should I just paste that into frame
one of the root timeline?

I've adjusted the filename of the text file to match mine, and the jpegs I'm
using are not progressive.

Am I supposed to set those x and y parameters that are commented out? I tried
setting them both to 0 but didn't seem to make a difference.

That's helped me understand the task much better tho - thanks

Any more help to get your method working would be appreciated, as it is
beautifully simple.

Re: Random image with label and hyperlink kglad
5/31/2005 12:00:00 AM
Re: Random image with label and hyperlink gBOT
5/31/2005 12:03:10 AM
Hi, yes I tried setting the rclip params to "0" assuming that would be the top
left corner. And I have the path to the text file set. I can see that the
variables are there in the debug window, so that must be working - but no image
showing up.

I'm not familiar with tracing, but I'll give it a go - thanks again for your
help.


Re: Random image with label and hyperlink gBOT
6/4/2005 9:50:54 AM
kglad are you out there? Please help. I've got things going nicely, based on
your original script - it's all working perfectly.

But now I'm stuck again and can't figure what's wrong - please help!

I need the movie to work in Flash v6 - it works like a charm in v7, but breaks
in v6.

It seems to be some problem with accessing the URL variable (which I've now
called "path"), using the syntax:

myLV["path" + i];

This doesn't work in v6 for some reason (although I can't see anything in the
documentation that says it shouldn't).

Therefore when the loadmovie command happens flash can't find the jpg file and
nothing happens:

rclip.loadMovie(folder + myLV["path"+i]);

Here's how my whole script looks now, I've added a few things and commented a
lot of it, and put in trace statements.

Any advice on how to get this compatible with v6 hugely appreciated! Thanks in
advance!!





// path to folder containing images
folder = "img_bin/"
trace("folder set " + folder);

// function to postition picture on stage
function position() {
// set vars for positioning
stageWidth = 540;
stageHeight = 420;
imgW = rclip._width;
imgH = rclip._height;

// center horizontally
posX = stageWidth/2 - imgW/2;
imgHolder._x = posX;

// if landscape, center vertically
if (imgW > imgH) {
posY = stageHeight/2 - imgH/2;
imgHolder._y = posY;
};
trace("positioning done");
};

//load vars from data.txt file
myLV = new LoadVars();
myLV.load("data.txt");

// select one at random, and then run displayF function
myLV.onLoad = function() {
trace("vars loaded :" + myLV);
for (ivar=1; ivar<100; ivar++) {
if (!this["path"+ivar]) {
displayF(Math.ceil(Math.random()*(ivar-1)));
break;
}
}
};

// create text field for preload counter
//_root.createTextField("ldTxt", _root.getNextHighestDepth(), 0, 0, 10, 30);


// function to load and display image

// create clip for image
function displayF(i) {
rclip = _root.createEmptyMovieClip("imgHolder", _root.getNextHighestDepth());
rclip._x=0;
rclip._y=0;
rclip._alpha = 0;

// load jpeg
test = folder + myLV["path"+i];
trace("Path to image is: " + test);
rclip.loadMovie(folder + myLV["path"+i]);
trace("movie load set " + rclip);
preloadI = setInterval(preloadF, 100, i);
trace("preload interval set off");
}

// preload
function preloadF(i) {
trace("preloadF function started");
loaded = imgHolder.getBytesLoaded();
total = imgHolder.getBytesTotal();
trace("bytes loaded: " + loaded + " / " + total);

// write progress to loader text field
//ldTxt.text = loaded;
//ldTxt.autoSize = "left";

// check if loaded
if (loaded>0 && loaded>=total) {
trace("image loaded");
// if loaded stop preloader
clearInterval(preloadI);

// create hyperlink button on image
//imgHolder.onPress = function() {
//getURL(myLV["link"+i]);
//};

// call position function
position();

// now that it is loaded and positioned, start timer to fade it in
goTimer();

//create text field for label
_root.createTextField("tf", _root.getNextHighestDepth(), 0,
imgHolder._y+imgH+1, 10, 30);
tf.autoSize = "center";
tf.selectable = false;
tf.embedFonts = false;

// define text format
var tFmt:TextFormat = new TextFormat();
tFmt.font = "Arial,Helvetica,_sans";
tFmt.color = 0x999999;
//tFmt.bold = true;
tFmt.size = 12;

// position text field
tf._x = imgHolder._x+imgW/2-tf._width/2;

// populate text field with text
txtPrefix = "Photography \u00A9 "
tf.text = txtPrefix + myLV["label"+i];

// apply text format
tf.setTextFormat(tFmt);
};
};


// fade in function
function fadeIn() {
if (imgHolder._alpha < 100) {
imgHolder._alpha = imgHolder._alpha+2;
updateAfterEvent();
} else {
clearInterval(int1);
trace("fade in complete");
}
};

// timer that calls fade in function
function goTimer() {
int1 = setInterval(fadeIn, 10);
trace("fade in triggered");
};
Re: Random image with label and hyperlink kglad
6/4/2005 3:36:29 PM
the part of that code that requires flash 7 is getNextHighestDepth(). so, to
remedy we'll need to handle that the "old" way:

// path to folder containing images
folder = "img_bin/";
trace("folder set "+folder);.
depthVar=1;
// function to postition picture on stage
function position() {
// set vars for positioning
stageWidth = 540;
stageHeight = 420;
imgW = rclip._width;
imgH = rclip._height;
// center horizontally
posX = stageWidth/2-imgW/2;
imgHolder._x = posX;
// if landscape, center vertically
if (imgW>imgH) {
posY = stageHeight/2-imgH/2;
imgHolder._y = posY;
}
trace("positioning done");
}
//load vars from data.txt file
myLV = new LoadVars();
myLV.load("data.txt");
// select one at random, and then run displayF function
myLV.onLoad = function() {
trace("vars loaded :"+myLV);
for (ivar=1; ivar<100; ivar++) {
if (!this["path"+ivar]) {
displayF(Math.ceil(Math.random()*(ivar-1)));
break;
}
}
};
// create text field for preload counter
//_root.createTextField("ldTxt",depthVar, 0, 0, 10, 30);
// depthVar++;
// function to load and display image
// create clip for image
function displayF(i) {
rclip = _root.createEmptyMovieClip("imgHolder", depthVar);
depthVar++;
rclip._x = 0;
rclip._y = 0;
rclip._alpha = 0;
// load jpeg
test = folder+myLV["path"+i];
trace("Path to image is: "+test);
rclip.loadMovie(folder+myLV["path"+i]);
trace("movie load set "+rclip);
preloadI = setInterval(preloadF, 100, i);
trace("preload interval set off");
}
// preload
function preloadF(i) {
trace("preloadF function started");
loaded = imgHolder.getBytesLoaded();
total = imgHolder.getBytesTotal();
trace("bytes loaded: "+loaded+" / "+total);
// write progress to loader text field
//ldTxt.text = loaded;
//ldTxt.autoSize = "left";
// check if loaded
if (loaded>0 && loaded>=total) {
trace("image loaded");
// if loaded stop preloader
clearInterval(preloadI);
// create hyperlink button on image
//imgHolder.onPress = function() {
//getURL(myLV["link"+i]);
//};
// call position function
position();
// now that it is loaded and positioned, start timer to fade it in
goTimer();
//create text field for label
_root.createTextField("tf",depthVar, 0, imgHolder._y+imgH+1, 10, 30);
depthVar++;
tf.autoSize = "center";
tf.selectable = false;
tf.embedFonts = false;
// define text format
var tFmt:TextFormat = new TextFormat();
tFmt.font = "Arial,Helvetica,_sans";
tFmt.color = 0x999999;
//tFmt.bold = true;
tFmt.size = 12;
// position text field
tf._x = imgHolder._x+imgW/2-tf._width/2;
// populate text field with text
txtPrefix = "Photography \u00A9 ";
tf.text = txtPrefix+myLV["label"+i];
// apply text format
tf.setTextFormat(tFmt);
}
}
// fade in function
function fadeIn() {
if (imgHolder._alpha<100) {
imgHolder._alpha = imgHolder._alpha+2;
updateAfterEvent();
} else {
clearInterval(int1);
trace("fade in complete");
}
}
// timer that calls fade in function
function goTimer() {
int1 = setInterval(fadeIn, 10);
trace("fade in triggered");
}

Re: Random image with label and hyperlink gBOT
6/5/2005 8:02:58 AM
Hi kglad - thanks again - I should have spotted that.

Whilst that would have no doubt been a problem a little further on, it appears
that it's not the issue I'm experiencing.

The problem is that the script can't find the jpeg image - I get an "error
loading URL".

And if I trace the path variable which should be "img_bin/n.jpg", it's only
showing "img_bin/".

The varaible from the txt file is not being added on to the end for some
reason.

It seems to be something to do with the way the variables are accessed i.e.
myLV["path"+i] - doesn't seem to work.

The variable (random number) being passed to displayF is always 0 when I
publish for v6 - it's fine on v7.

This has really got me stumped!

It all work perfectly in 7, but breaks on v6.

If I test movie and publish v6 i get this in the output window(edited):

folder set img_bin/
'i' = 0
Path to image is: img_bin/
movie load set _level0.imgHolder
Error opening URL
"file:///C|/Documents%20and%20Settings/Gavin%20Botica/Desktop/C1%20new%20flash%2
0home%20page/img_bin/"

as you can see the full path to the image is not being contstructed, and 'i'
always equals 0.

if I publish for v7 I get this in output window (edited):

folder set img_bin/
'i' = 1
Path to image is: img_bin/1.jpg
movie load set _level0.imgHolder

I am leaving actionscript on version 2 when switching to flash version 6 - but
that is correct isn't it?

Any more ideas?? (thanks again in advance :-)

Here's how my code looks now ( a few more minor changes...)





// set alignment frame visibility
frame._visible = false;

// set var for movie clip depth
depthVar = 1

// path to folder containing images
folder = "img_bin/"
trace("folder set " + folder);

// function to postition picture on stage
function position() {
// set vars for positioning
stageWidth = 540;
stageHeight = 420;
imgW = imgHolder._width;
imgH = imgHolder._height;
trace("Imgage dimensions: " + imgW + " + " + imgH);

// center horizontally
posX = stageWidth/2 - imgW/2;
imgHolder._x = posX;

// if landscape, center vertically
if (imgW > imgH) {
posY = stageHeight/2 - imgH/2;
imgHolder._y = posY;
};
trace("positioning done");
};

//load vars from data.txt file
myLV = new LoadVars();
myLV.load("data.txt");

// select one at random, and then run displayF function
myLV.onLoad = function() {
trace("vars loaded :" + myLV);
for (ivar=1; ivar<100; ivar++) {
if (!this["img"+ivar]) {
displayF(Math.ceil(Math.random()*(ivar-1)));
break;
}
}
};

// create text field for preload counter
//_root.createTextField("ldTxt",depthVar, 0, 0, 10, 30);
//depthVar++;
// setup company1 logo as preload indicator
logo._xscale = 0;
logo._yscale = 0;

// function to load and display image

// create clip for image
function displayF(i) {
trace("'i' = " +i);
rclip = _root.createEmptyMovieClip("imgHolder", depthVar);
depthVar++;
rclip._x=0;
rclip._y=0;
rclip._alpha = 0;

// load jpeg
pathToImage = folder + myLV["img"+i];
trace("Path to image is: " + pathToImage);
rclip.loadMovie(folder + myLV["img"+i]);
trace("movie load set " + rclip);
preloadI = setInterval(preloadF, 50, i);
}

// preload
function preloadF(i) {
trace("preloadF function started");
loaded = imgHolder.getBytesLoaded();
total = imgHolder.getBytesTotal();
percent = imgHolder.getBytesLoaded() / imgHolder.getBytesTotal() * 100;
trace("bytes loaded: " + loaded + " / " + total + " (" + Math.round(percent) +
"%)");

// write progress to loader text field
//ldTxt.text = loaded;
//ldTxt.autoSize = "left";

// scale logo according to percent loaded
logo._xscale = percent + 5;
logo._yscale = percent + 5;

// fade out logo
if (percent > 70) {
alpha = (Math.abs(percent - 100) * (percent / 10) / 2);
logo._alpha = alpha;
trace("Logo alpha: " + logo._alpha);
};

// check if loaded
if (loaded>0 && loaded>=total && alpha == 0) {
trace("image loaded");

// if loaded stop preloader
clearInterval(preloadI);

// create hyperlink button on image
//imgHolder.onPress = function() {
//getURL(myLV["link"+i]);
//};

// call position function
position();

// now that it is loaded and positioned, start timer to fade it in
goTimer(fadeIn,20);

//create text field for label
_root.createTextField("tf", depthVar, 0, imgHolder._y+imgH+1, 10, 30);
depthVar++;
tf.autoSize = "center";
tf.selectable = false;
tf.embedFonts = false;

// define text format
var tFmt:TextFormat = new TextFormat();
tFmt.font = "Arial,Helvetica,_sans";
tFmt.color = 0x999999;
//tFmt.bold = true;
tFmt.size = 12;

// position text field
tf._x = imgHolder._x+imgW/2-tf._width/2;

// populate text field with text
txtPrefix = "Photography \u00A9 "
tf.text = txtPrefix + myLV["label"+i];

// apply text format
tf.setTextFormat(tFmt);
};
};


// fade in image function
function fadeIn() {
if (imgHolder._alpha < 100) {
imgHolder._alpha = imgHolder._alpha+10;
updateAfterEvent();
} else {
clearInterval(int1);
trace("fade in complete");
}
};

// timer that calls a function (pass function name & interval)
function goTimer(f,t) {
int1 = setInterval(f,t);
trace("goTimer function triggered");
};
Re: Random image with label and hyperlink knut_einar_skjær
6/5/2005 12:39:24 PM
[quoted text, click to view]

I think you must use 'eval' for this. Something like var
myPath=eval("path"+i); I might be wrong, though ...


[quoted text, click to view]

Just wanted to comment on your hardcoding of StageHeight and StageWidth.
I'm not sure what you're after, but unless you are sending these
variables to some JavaScript, I really can't see what good they do. What
you could do, is make a StageListener, something like this:

var stageListener:Object = new Object(); stageListener.onResize =
function() { stageWidth = Stage.width; stageHeight = Stage.height;
}; Stage.scaleMode = "noScale"; Stage.addListener(stageListener);

.... and get rid of your hardcoding on those.

Re: Random image with label and hyperlink kglad
6/5/2005 3:38:21 PM
Re: Random image with label and hyperlink gBOT
6/5/2005 10:40:45 PM
Hi kglad, I assume you mean to show you the content of the data.txt?



&img1=1.jpg&label1=Jean Francios Campos&link1=

&img2=2.jpg&label2=Jean Francios Campos&link2=

&img3=3.jpg&label3=Simon Lekias&link3=

&img4=4.jpg&label4=Simon Lekias&link4=

&img5=5.jpg&label5=Jonathan Bookallil&link5=

&img6=6.jpg&label6=Jonathan Bookallil&link6=

&img7=7.jpg&label7=Kane Skennar&link7=

&img8=8.jpg&label8=Russel Pell&link8=

&img9=9.jpg&label9=Russel Pell&link9=

&img10=10.jpg&label10=Kane Skennar&link10=

&img11=11.jpg&label11=Christopher Ferguson&link11=

&img12=12.jpg&label12=Christopher Ferguson&link12=
Re: Random image with label and hyperlink gBOT
6/6/2005 12:31:43 PM
:D

Eureka!

Finally figured out what was tripping it up when publishing for v6 flash
player.

I had to change this 'if' statement:

if (!this["img"+ivar]) {
displayF(Math.ceil(Math.random()*(ivar-1)));
break;
}

to

if (this["img"+ivar] == undefined) {
displayF(Math.ceil(Math.random()*(ivar-1)));
trace("loop broken");
break;
}

for some reason the expression evaluated in the if statement would not work in
version 6.

Whew. Done.

Thanks very, very much for your help kglad. Much appreciated.

regards

Re: Random image with label and hyperlink kglad
6/6/2005 1:48:12 PM
Re: Random image with label and hyperlink gugateider.com
6/10/2005 10:13:00 AM
Hi, i did write an tutorial this ...

This is tutorial it is using MovieClipLoader class ...
it is good, you can see ?
http://www.portalfiremasters.com.br/index.php?area=arquivos&action=view&a=2575
but, it's language it is portuguese, but, if you can read, go there! ;)
thanks

--
Gustavo Teider
www.gugateider.com
Curitiba - PR - BRAZIL


"kglad" <webforumsuser@macromedia.com> escreveu na mensagem
news:d81k6s$it9$1@forums.macromedia.com...
[quoted text, click to view]

Re: Random image with label and hyperlink tyburski77
10/28/2005 2:52:18 PM
i've tried doing this, but it just won't work out. i'm a beginner as far as flash coding and AS.
any way to get a test file from anyone regarding this?

AddThis Social Bookmark Button