Alt tags?

[steve]

Hi,

please can someone help? Is it possible to create alt tags in Flash so that when the cursor rolls over an image the alt tag will appear?

If so, how is this done?

[NTD]

Hi,

There are several ways to do it. You could put an invisible button over the image with a graphic in the over state. You could place a movieclip on top of the image and toggle the visibility. Here is a compact method for achieving a pop up on roll over. Turn your image into a movieclip and give it an instance name of 'image'. Paste this code into the first frame of your movie.....



_root.onEnterFrame = function() {
if (!_root.image.hitTest(_root._xmouse, _root._ymouse, true)) {
myField.text = "";
} else {
trace("I was hit");
image.createEmptyMovieClip("tag", 1);
image.tag._x = _root._xmouse;
image.tag._y = _root._ymouse;
image.tag.createTextField("message", 1, -400, -100, 100, 20);
myField = image.tag.message;
myField.text = "Your on me!";
}
}


hope it helps
NTD

[steve]

Thanks for the reply NTD, however I'm not sure if these methods can be applied in this occasion due to the nature of the piece. I'll try and explain myself... I have created an image slider in which the images are loaded into the Flash movie as and when the corresponding button is pressed. So once pressed a jpeg will load into the movie and slide seamlessly from left to right. Is this achievable, so that when the cursor rolls over the loaded image in the viewing area an alt tag will appear describing the image?
(Being used to showcase work/portfolio).

[NTD]

Hi,

If you use a movieclip as a holder for your loaded photo's, it will work fine. Also, by using a movieclip as a holder for your photo's, you can apply any movieclip property to the photo, such as alpha,color,motion, etc... The code will fire on the movieclip and not the image, so you would need a loop of some kind to tell what image is in the holder and what text for the pop up to use. Create a test movie and play around with the code. Create a single MC on stage named "image", paste the code in the first frame and test it out, then try loading an image into the movieclip.

NTD

[steve]

Thanks for the help NTD. I will try that out and see how i get on!

Cheers

Steve

[joe1977]

NTD,

I took that code and took it one step farther to create a function to use with movie clips (my first function, aww :) ):

function ALTtag (myMovieclip, myText) {
myMovieclip.onEnterFrame=function(){
myMovieclip.createEmptyMovieClip("tag", 1);
myMovieclip.tag._x = _root._xmouse;
myMovieclip.tag._y = _root._ymouse;
myMovieclip.tag.createTextField("message", 1, -250, -200, 100, 20);
myField = myMovieclip.tag.message;
myField.text = (myText);
delete this.onEnterFrame;
}
}
_root.onMouseMove = function() {
if (button.hitTest(_root._xmouse, _root._ymouse, true)) {
currentlyOver = "button";
} else if(!button.hitTest(_root._xmouse, _root._ymouse, true)) {
currentlyOver = "off";
}
}
this.onEnterFrame = function() {
switch (currentlyOver) {
case "button" :
button.onMouseMove = ALTtag(button, "IT WORKS!");
break;
case "off" :
button.onMouseMove = ALTtag(button, "");
break;
default :
break;
}
}

There are a few issues I've come accross. First, for each movie clip hittest, I have to have an anti-hittest (!) to turn off the tag. Any way around that, like a universal off? Second, how do I format the "tag" movie clip properties (like a colored box or something to make it look more like a true alt tag) and the "message" text field (like font and color) in the context of AS? Is it possible?

Joe

[joe1977]

NTD, I figured out how to manipulate the tag. Here's the new script:

function ALTtag (myMovieclip, myText, myTrue) {
myMovieclip.onEnterFrame=function(){
myMovieclip.createEmptyMovieClip("tag", 1);
myMovieclip.tag._x = _root._xmouse;
myMovieclip.tag._y = _root._ymouse;
myMovieclip.tag.createTextField("message", 1, -250, -200, 100, 20);
myMovieclip.tag.message.textColor=0xff9900;
myMovieclip.tag.message.autoSize = "center";
myMovieclip.tag.message.background = myTrue;
myMovieclip.tag.message.backgroundColor = 0x000000;
myField = myMovieclip.tag.message;
myField.text = (myText);
delete this.onEnterFrame;
}
}
_root.onMouseMove = function() {
if (button.hitTest(_root._xmouse, _root._ymouse, true)) {
currentlyOver = "button";
} else if(!button.hitTest(_root._xmouse, _root._ymouse, true)) {
currentlyOver = "off";
}
}
this.onEnterFrame = function() {
switch (currentlyOver) {
case "button" :
button.onMouseMove = ALTtag(button, "It Works!", true);
break;
case "off" :
button.onMouseMove = ALTtag(button, "", false);
break;
default :
break;
}
}

I added a third variable to control the visibilty by toggling the background value.

However, I can't find a better was to toggle the entire tags visibility. Any help?

Joe

[NTD]

Hi,

Have you looked into the removeMovieClip method? I think that is the most efficient way to go. When the mouse detects the hit, attach the movieclip from the library. When no hit is detected, remove the movieclip entirely. Here is the original tutorial I wrote on how to achieve alt tags...

http://www.ntdesigns.net/tutorial/toolTips.html

Regards
NTD

[joe1977]

NTD

Thanks for the tip. Although I got your version working, I did modify my Function with the removeMovieClip method:

function ALTtag (myMovieclip, myText) {
myMovieclip.onRollOver = function(){
myMovieclip.createEmptyMovieClip("tag", 1);
myMovieclip.tag._x = _root._xmouse;
myMovieclip.tag._y = _root._ymouse;
myMovieclip.tag.createTextField("message", 1, -250, -200, 100, 20);
myMovieclip.tag.message.textColor=0x000000;
myMovieclip.tag.message.autoSize = true;
myMovieclip.tag.message.align = "center";
myMovieclip.tag.message.border= true;
myMovieclip.tag.message.borderColor = 0x000000;
myMovieclip.tag.message.background = true;
myMovieclip.tag.message.backgroundColor = 0xECE9D8;
myField = myMovieclip.tag.message;
myField.text = (myText);
}
myMovieclip.onRollOut = function() {
removeMovieClip(myMovieclip.tag);
}
}

This works much better and also allows me to apply the tag when I apply the "on"-"off" movieclip AS for a rollover movieclip:

onClipEvent (enterFrame) {
currentlyOver = this.hitTest(_root._xmouse, _root._ymouse, true);
// if there is a change, go to another frame
if (currentlyOver) {
this.gotoAndStop("on");
_root.ALTtag(_root.button, "It Works!")
} else {
this.gotoAndStop("off");
}
}

Thanks for the help as always.
Joe