tutorial toolTips

toolTips

_{door vinTage op 14-05-2007}

In deze korte tutorial gaan te weten komen hoe we een tooltip kunnen tonen als je over een button heen gaat.
Een tooltip kennen we allemaal wel, het toont informatie als je op een bepaald icoon hovert.

Hieronder een voorbeeldje

Download de gratis flash plugin
Normaal zou hier dit voorbeeld moeten staan.

De button met tool tip

Om te beginnen kunnen we elke soort button nemen die we zelf mooi vinden, het daadwerkelijke "tooltip" maken doe ik hier via actionScript en heeft dus verder geen belang met welk soort button we dit doen.

Neem dus de button(s) die je mooi vind en plaats ze op de scene.
Geef je button een instancenaam, deze instancenaam hebben we nodig om het actionscript toe te wijzen aan een bepaalde button.

De tooltip actionscript code

De functie die ik ervan heb gemaakt werkt als volgt:

maakToolTip ( "welke tekst er in de tooltip moet staan", backgroundKleur, fontKleur ) ;

backgroundKleur en fontKleur moeten als volgt worden ingegeven:
0xHexWaarde
bijvoorbeeld 0x000000 is zwart en 0xFF0000 is rood.

Zet onderstaande script in een keyFrame in de timeline, dus niet aan de button zelf meegeven.

actionscript code

//script voor de buttons, rodeKnop en groeneKnop zijn de instancenamen van de buttons

rodeKnop.onRollOver = function() {

  maakToolTip("Dit is een rode knop", 0xFFFFFF, 0xFF0000);

  this.onRollOut = function() {

    removeMovieClip("veldje");

  };

};

rodeKnop.onRelease = function() {

  //actions hier die er moeten gebeuren als er geklikt is, bijvoorbeeld:

  getURL("http://www.vintagesworld.be", "_blank");

};

groeneKnop.onRollOver = function() {

  maakToolTip("Dit is een groene knop", 0xFFFFFF, 0x009900);

  this.onRollOut = function() {

    removeMovieClip("veldje");

  };

};

groeneKnop.onRelease = function() {

  //actions hier die er moeten gebeuren als er geklikt is, bijvoorbeeld:

  getURL("http://www.vintagesworld.be", "_blank");

};

//onderstaande script hoef je niet aan te passen

function maakToolTip(txt, bg, fc) {

  this.createTextField("veldje", this.getNextHighestDepth(), _xmouse+25, _ymouse-25, 0, 0);

  //tooltip looks

  veldje.autoSize = true;

  veldje.border = true;

  veldje.borderColor = fc;

  veldje.background = true;

  veldje.backgroundColor = bg;

  fontPrefs = new TextFormat();

  fontPrefs.color = fc;

  veldje.text = txt;

  veldje.setTextFormat(fontPrefs);

  //tooltop positioneren adh van de muis positie

  this.onMouseMove = function() {

    veldje._x = _xmouse+25;

    veldje._y = _ymouse-25;

    updateAfterEvent();

  };

}

Tot zover deze korte tutorial, hopelijk heb je iets aan deze toolTip.
Mocht je toch tegen problemen aanlopen, dan kan je hier de door mij gebruikte FLA downloaden.

Share |

Stem op deze tutorial

Reacties

Je bent niet ingelogged, je kan geen commentaar geven, of commentaren lezen over deze tutorial.