Fading In/out dynamic text from XML

  • DAVE EVANS
  • Born
  • Born
  • DAVE EVANS
  • Posts: 3

Post 3+ Months Ago

Hi all

Spent all day searching forums and trying code to do this simple task;

Fade in some dynamic text when the user hovers mouse over an image.

Ive got the text displaying fine, just trying to get it to fade in, and when the user moves the cursor away from the image, the text fades out again.

Anybody here able to help?

Im very new to actionscript coding BTW!

My code so far is as follows:

Code: [ Select ]
 
 
import mx.utils.Delegate;
 
var numOfItems:Number;
var radiusX:Number = 210;
var radiusY:Number = 10;
var centerX:Number = Stage.width / 2.51;
var centerY:Number = Stage.height / 2;
var speed:Number = 0.003;
var perspective:Number = 100;
var home:MovieClip = this;
 
tn_group_mc._visible = false;
fm_label.text = ""; fm_info.text = "";
 
var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
tooltip._alpha = 0;
 
var xml:XML = new XML();
xml.ignoreWhite = true;
 
xml.onLoad = function()
{
    var nodes = this.firstChild.childNodes;
    numOfItems = nodes.length;
    for(var i=0;i<numOfItems;i++)
    {
        var t = home.attachMovie("item","item"+i,i+1);
        t.angle = i * ((Math.PI*2)/numOfItems);
        t.onEnterFrame = mover;
        t.icon.inner.loadMovie(nodes[i].attributes.image);
        t.r.inner.loadMovie(nodes[i].attributes.image);
        t.icon.onRollOver = over;
        t.icon.onRollOut = out;
        t.icon.onRelease = released;
       
        t.fm_label = nodes[i].attributes.label;
        t.fm_info = nodes[i].attributes.info;
        t.fm_url = nodes[i].attributes.url;
 
        }
}
 
function over()
{
 
            fm_label.text =  this._parent.fm_label; 
            fm_info.text = this._parent.fm_info;   
            fm_url.text = this._parent.fm_url; 
 
            home.tooltip.tipText.text = this._parent.fm_label;
            home.tooltip._x = this._parent._x;
            home.tooltip._y = this._parent._y - this._parent._height/2;
            home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
            home.tooltip._alpha = 100;
           
           
}
 
function out()
{
            fm_label.text = "";
            fm_info.text = "";
            fm_url.text = "";
           
            delete home.tooltip.onEnterFrame;
            home.tooltip._alpha = 0;
}
 
function released()
{
            getURL(this._parent.fm_url);
}
 
function moveTip()
{
    home.tooltip._x = this._parent._x;
    home.tooltip._y = this._parent._y - this._parent._height/2;
}
 
xml.load("icons.xml");
 
function mover()
{
    this._x = Math.cos(this.angle) * radiusX + centerX;
    this._y = Math.sin(this.angle) * radiusY + centerY;
    var s = (this._y - perspective) /(centerY+radiusY-perspective);
    this._xscale = this._yscale = s*100;
    this.angle += this._parent.speed;
    this.swapDepths(Math.round(this._xscale) + 100);
}
 
this.onMouseMove = function()
{
    speed = (this._xmouse-centerX)/15000;
}
 
 
  1.  
  2.  
  3. import mx.utils.Delegate;
  4.  
  5. var numOfItems:Number;
  6. var radiusX:Number = 210;
  7. var radiusY:Number = 10;
  8. var centerX:Number = Stage.width / 2.51;
  9. var centerY:Number = Stage.height / 2;
  10. var speed:Number = 0.003;
  11. var perspective:Number = 100;
  12. var home:MovieClip = this;
  13.  
  14. tn_group_mc._visible = false;
  15. fm_label.text = ""; fm_info.text = "";
  16.  
  17. var tooltip:MovieClip = this.attachMovie("tooltip","tooltip",10000);
  18. tooltip._alpha = 0;
  19.  
  20. var xml:XML = new XML();
  21. xml.ignoreWhite = true;
  22.  
  23. xml.onLoad = function()
  24. {
  25.     var nodes = this.firstChild.childNodes;
  26.     numOfItems = nodes.length;
  27.     for(var i=0;i<numOfItems;i++)
  28.     {
  29.         var t = home.attachMovie("item","item"+i,i+1);
  30.         t.angle = i * ((Math.PI*2)/numOfItems);
  31.         t.onEnterFrame = mover;
  32.         t.icon.inner.loadMovie(nodes[i].attributes.image);
  33.         t.r.inner.loadMovie(nodes[i].attributes.image);
  34.         t.icon.onRollOver = over;
  35.         t.icon.onRollOut = out;
  36.         t.icon.onRelease = released;
  37.        
  38.         t.fm_label = nodes[i].attributes.label;
  39.         t.fm_info = nodes[i].attributes.info;
  40.         t.fm_url = nodes[i].attributes.url;
  41.  
  42.         }
  43. }
  44.  
  45. function over()
  46. {
  47.  
  48.             fm_label.text =  this._parent.fm_label; 
  49.             fm_info.text = this._parent.fm_info;   
  50.             fm_url.text = this._parent.fm_url; 
  51.  
  52.             home.tooltip.tipText.text = this._parent.fm_label;
  53.             home.tooltip._x = this._parent._x;
  54.             home.tooltip._y = this._parent._y - this._parent._height/2;
  55.             home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
  56.             home.tooltip._alpha = 100;
  57.            
  58.            
  59. }
  60.  
  61. function out()
  62. {
  63.             fm_label.text = "";
  64.             fm_info.text = "";
  65.             fm_url.text = "";
  66.            
  67.             delete home.tooltip.onEnterFrame;
  68.             home.tooltip._alpha = 0;
  69. }
  70.  
  71. function released()
  72. {
  73.             getURL(this._parent.fm_url);
  74. }
  75.  
  76. function moveTip()
  77. {
  78.     home.tooltip._x = this._parent._x;
  79.     home.tooltip._y = this._parent._y - this._parent._height/2;
  80. }
  81.  
  82. xml.load("icons.xml");
  83.  
  84. function mover()
  85. {
  86.     this._x = Math.cos(this.angle) * radiusX + centerX;
  87.     this._y = Math.sin(this.angle) * radiusY + centerY;
  88.     var s = (this._y - perspective) /(centerY+radiusY-perspective);
  89.     this._xscale = this._yscale = s*100;
  90.     this.angle += this._parent.speed;
  91.     this.swapDepths(Math.round(this._xscale) + 100);
  92. }
  93.  
  94. this.onMouseMove = function()
  95. {
  96.     speed = (this._xmouse-centerX)/15000;
  97. }
  98.  
  99.  
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

I don't see any code for actual button actions...

Code for a button would be
Code: [ Select ]
buttonInstanceName.onRelease = function(){
// do some action when button is clicked
}

buttonInstanceName.onRollOver= function(){
// do some action when button Hovered
}

buttonInstanceName.onRollOut= function(){
// do some action when mouse leaves button
}
  1. buttonInstanceName.onRelease = function(){
  2. // do some action when button is clicked
  3. }
  4. buttonInstanceName.onRollOver= function(){
  5. // do some action when button Hovered
  6. }
  7. buttonInstanceName.onRollOut= function(){
  8. // do some action when mouse leaves button
  9. }


so you would need something like...
Code: [ Select ]
nameOfButton.onRollOver = function(){
     fm_label.text = this._parent.fm_label;
     fm_info.text = this._parent.fm_info; 
     fm_url.text = this._parent.fm_url;

     home.tooltip.tipText.text = this._parent.fm_label;
     home.tooltip._x = this._parent._x;
     home.tooltip._y = this._parent._y - this._parent._height/2;
     home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
     home.tooltip._alpha = 100;
}
  1. nameOfButton.onRollOver = function(){
  2.      fm_label.text = this._parent.fm_label;
  3.      fm_info.text = this._parent.fm_info; 
  4.      fm_url.text = this._parent.fm_url;
  5.      home.tooltip.tipText.text = this._parent.fm_label;
  6.      home.tooltip._x = this._parent._x;
  7.      home.tooltip._y = this._parent._y - this._parent._height/2;
  8.      home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
  9.      home.tooltip._alpha = 100;
  10. }
  • DAVE EVANS
  • Born
  • Born
  • DAVE EVANS
  • Posts: 3

Post 3+ Months Ago

Thanks for the quick reply.

Do I need a button? At the moment I have functions for when the user rolls over an image, the text is loaded from the xml file.

The flash is like a carousel thing, with text underneath the images.

So basically, I want on image rollover, fade in text from xml file, and on image rollout, fade away text.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

well you have to have either a button or a movieclip (flash views them the same way) to connect to the onRollOver/onRollOut code. as long as your images are inside of movieclips you can attach the code to that movieclip.
  • DAVE EVANS
  • Born
  • Born
  • DAVE EVANS
  • Posts: 3

Post 3+ Months Ago

Yeah, your right they are movie clips.

Have managed to do it now, made a new layer and put this code into it:

Code: [ Select ]
MovieClip.prototype.fade = function(newAlpha:Number,speed:Number):Void{
        this.currentAlpha = this._alpha;
        this.onEnterFrame = function():Void{
                if(this.currentAlpha > newAlpha){
                        this._alpha -= speed;
                }
                else if(this.currentAlpha < newAlpha){
                        this._alpha += speed;
                }
                if (Math.abs(Math.round(newAlpha-this._alpha))<=speed){
                        this._alpha = newAlpha;
                        delete this.onEnterFrame;
                }
        };
};
  1. MovieClip.prototype.fade = function(newAlpha:Number,speed:Number):Void{
  2.         this.currentAlpha = this._alpha;
  3.         this.onEnterFrame = function():Void{
  4.                 if(this.currentAlpha > newAlpha){
  5.                         this._alpha -= speed;
  6.                 }
  7.                 else if(this.currentAlpha < newAlpha){
  8.                         this._alpha += speed;
  9.                 }
  10.                 if (Math.abs(Math.round(newAlpha-this._alpha))<=speed){
  11.                         this._alpha = newAlpha;
  12.                         delete this.onEnterFrame;
  13.                 }
  14.         };
  15. };


Then on my rollover function I used this code to call it:

Code: [ Select ]
obj_mc.fade(100, 8);


Probably not the best way to do it but hey, its working!

Thanks for the help!
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

glad you got it figured out.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 16 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.