Back To Flash and ActionScript Forum

Fading In/out dynamic text from XML

  • DAVE EVANS
  • Born
  • Born
  • No Avatar
  • Joined: Aug 20, 2008
  • Posts: 3
  • Status: Offline

Post August 20th, 2008, 8:01 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 20th, 2008, 8:01 am

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post August 20th, 2008, 1:02 pm

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. }
  5. buttonInstanceName.onRollOver= function(){
  6. // do some action when button Hovered
  7. }
  9. buttonInstanceName.onRollOut= function(){
  10. // do some action when mouse leaves button
  11. }


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;
  6.      home.tooltip.tipText.text = this._parent.fm_label;
  7.      home.tooltip._x = this._parent._x;
  8.      home.tooltip._y = this._parent._y - this._parent._height/2;
  9.      home.tooltip.onEnterFrame = Delegate.create(this,moveTip);
  10.      home.tooltip._alpha = 100;
  11. }
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • DAVE EVANS
  • Born
  • Born
  • No Avatar
  • Joined: Aug 20, 2008
  • Posts: 3
  • Status: Offline

Post August 21st, 2008, 1:32 am

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post August 21st, 2008, 9:08 am

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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • DAVE EVANS
  • Born
  • Born
  • No Avatar
  • Joined: Aug 20, 2008
  • Posts: 3
  • Status: Offline

Post August 22nd, 2008, 7:21 am

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post August 22nd, 2008, 11:04 am

glad you got it figured out.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 53 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.