# Animated Image Fading

**URL:** <https://forum.kirupa.com/t/animated-image-fading/22713>\
**Category:** flash\
**Created:** [June 7, 2003, 2:52pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713 "2003-06-07T14:52:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Butters](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Butters](https://forum.kirupa.com/u/Butters)\
**Post date:** [June 7, 2003, 2:52pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/1 "2003-06-07T14:52:43Z")

</div>

Yo Yo Again,

Don’t mean to be a bothering pest or w/e but does anyone know how to make animated buttons that fade images in when you put your mouse over them. So when someone hovers over a button, the image fades in and when their mouse moves off the button, the image fades out.

Thanks dudes 😉

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:11pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/2 "2003-06-07T15:11:14Z")

</div>

use the hitTest function - do a loop that increases the transparency while the mouse is over (= hitTest is true) or that decreases the transperency (more opaque) when the mouse isnt over it…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:14pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/3 "2003-06-07T15:14:52Z")

</div>

hmmm…  
I dont understand.  
Im not to good with actionscript etc…

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:23pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/4 "2003-06-07T15:23:53Z")

</div>

```auto
onEnterFrame = function() {
hitTest(_root._xmouse, _root._ymouse, true) ? alpha = 100 : alpha = 20;
_alpha += (alpha - _alpha) /5
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:25pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/5 "2003-06-07T15:25:46Z")

</div>

how do i use that? where do i put it?

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:35pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/6 "2003-06-07T15:35:16Z")

</div>

\<embed src=http://membres.lycos.fr/mlkdesign/kirupa/hittest.swf height=140 width=140 type=application/x-shockwave-flash\>

[http://membres.lycos.fr/mlkdesign/kirupa/hittest.fla](http://membres.lycos.fr/mlkdesign/kirupa/hittest.fla)

I wrote everything on the first MC… It’s similar to fluid’s code without the advanced syntax. Basically when the mouse cursor is over the MC (which has a button inside) actionscripts increases transparency and vice versa:

```auto

onClipEvent (enterFrame) {
	if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
		if (this._alpha>20) {
			this._alpha -= 10;
		}
	} else {
		if (this._alpha<=100) {
			this._alpha += 5;
		}
	}
}

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:54pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/7 "2003-06-07T15:54:39Z")

</div>

so many ways to do the same thing…

```auto
myMovieClip.onEnterFrame = function() {
	this._alpha = Math.min(Math.max(20, this._alpha+(this.hitTest(_root._xmouse, _root._ymouse) ? 5 : -5)), 100);
};

```

😛

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [June 7, 2003, 3:56pm UTC](https://forum.kirupa.com/t/animated-image-fading/22713/8 "2003-06-07T15:56:00Z")

</div>

hehe :crazy: