HELP (please)! Creating a function shared by different instances...

Hello,

Hoping someone here can help me out with this. It's been forever since I've done any AS3 coding (I wasn't all that fluent to begin with) and I'm stuck.

Basically, I have 3 objects (that need to behave like buttons) on my stage which I'd like to apply the same function to, so I don't have to code each one individually. I was trying to use an array to do this, but as previously mentioned, my concepts seem to out do my actual coding skills. The function should apply a dropshadow filter to the objects. When rolled over or clicked, the shadow of the individual objects would react accordingly (it changes the distance and alpha for each).

Here's where I'm at, which is obviously wrong...

Code:

---

var list:Array = [
        Pic1_10_btn,
        Pic1_11_btn,
        Pic1_12_btn
];

var overShadow:DropShadowFilter = new DropShadowFilter();
defaultShadow.color = 0x000000;
defaultShadow.blurY = 16;
defaultShadow.blurX = 16;
defaultShadow.angle = 45;
defaultShadow.alpha = .6;
defaultShadow.distance = 5;

var defaultShadow:DropShadowFilter = new DropShadowFilter();
overShadow.color = 0x000000;
overShadow.blurY = 12;
overShadow.blurX = 12;
overShadow.angle = 45;
overShadow.alpha = .7;
overShadow.distance = 4;

var clickShadow:DropShadowFilter = new DropShadowFilter();
clickShadow.color = 0x000000;
clickShadow.blurY = 8;
clickShadow.blurX = 8;
clickShadow.angle = 45;
clickShadow.alpha = .8;
clickShadow.distance = 3;

var filtersArray:Array = new Array(defaultShadow);

function setupPics(pic:SimpleButton, index:int, array:Array):void {
        pic.addEventListener(MouseEvent.CLICK, picClick);
        pic.addEventListener(MouseEvent.MOUSE_OVER, picOver);
        pic.addEventListener(MouseEvent.MOUSE_OUT, picDefault);
        pic.filters = filtersArray;
}

list.forEach(setupPics);

function picDefault(e:MouseEvent):void {
        this.filters=[defaultShadow];
}

function picOver(e:MouseEvent):void {
        this.filters=[overShadow];
}

function picClick(e:MouseEvent):void {
        this.filters=[clickShadow];
}

---

Assuming this is possible, any help would be greatly appreciated. Thanks in advance!
---
Chris

Your nearly there, try this.

Code:

---

var list:Array = [Pic1_10_btn, Pic1_11_btn,Pic1_12_btn];

var overShadow:DropShadowFilter = new DropShadowFilter();
defaultShadow.color = 0x000000;
defaultShadow.blurY = 16;
defaultShadow.blurX = 16;
defaultShadow.angle = 45;
defaultShadow.alpha = .6;
defaultShadow.distance = 5;

var defaultShadow:DropShadowFilter = new DropShadowFilter();
overShadow.color = 0x000000;
overShadow.blurY = 12;
overShadow.blurX = 12;
overShadow.angle = 45;
overShadow.alpha = .7;
overShadow.distance = 4;

var clickShadow:DropShadowFilter = new DropShadowFilter();
clickShadow.color = 0x000000;
clickShadow.blurY = 8;
clickShadow.blurX = 8;
clickShadow.angle = 45;
clickShadow.alpha = .8;
clickShadow.distance = 3;


for(var i:uint = 0; i < list.length; i++){
        list[i].addEventListener(MouseEvent.CLICK, picClick);
        list[i].addEventListener(MouseEvent.MOUSE_OVER, picOver);
        list[i].addEventListener(MouseEvent.MOUSE_OUT, picDefault);
}

function picDefault(e:MouseEvent):void {
        e.target.filters = [defaultShadow];
}

function picOver(e:MouseEvent):void {
        e.target.filters = [overShadow];
}

function picClick(e:MouseEvent):void {
        e.target.filters = [clickShadow];
}

---

Hi ilike2,

Thanks for taking the time to look at this. I copied and pasted your code into my project and it didn't seem to do anything (no dropshadows at all).

Thoughts?

Thanks again,
Chris

You are mixing up overshadow and defaultshadow. This is how it has to be.

var overShadow:DropShadowFilter = new DropShadowFilter();
overShadow.color = 0x000000;
.....

var defaultShadow:DropShadowFilter = new DropShadowFilter();
defaultShadow.color = 0x000000;
......

Ah... good catch! Thanks, cancerinform.

So, with that change, it's working when moused over, out, and clicked... however, I still need the objects to have a shadow by default when it loads (without any mouse activity).
---
Chris

How about this:
pic.filters = [filtersArray];

Hmmm... pic is no longer defined anywhere in the code ilike2 provided. I tried list.filters = [filtersArray]; but no luck.

Quote:

---

Originally Posted by cancerinform

You are mixing up overshadow and defaultshadow. This is how it has to be.

var overShadow:DropShadowFilter = new DropShadowFilter();
overShadow.color = 0x000000;
.....

var defaultShadow:DropShadowFilter = new DropShadowFilter();
defaultShadow.color = 0x000000;
......

---

Sorry, I typed it out quickly. If possible can you please upload a simple FLA example?

Here's a link to the the .swf...

http://scottthomasclarke-memorial.com/test/

I've attached the FLA as well.

As you can see, when the .swf loads, the items do not have shadows... but do after you mouse over them. They should have the defaultshadow when initially loaded.

Another semi-related question...
The button instances are linked to launch a lightbox to view the images larger. Is it possible to use the same list array (along with another array... or a multidimensional array, I guess?) to trigger those links instead of having them each coded individually as I do now?

Thanks again to everyone for your help on this. I haven't worked on a Flash project in ~8 years... and it was AS2... so this AS3 thing is a whole different deal than what I remember. i really appreciate the help.
---
Chris

Add this line:
list[i].filters = [defaultShadow];

This is what you can change to to have one function.

PHP Code:

---

function callJS(event:MouseEvent):void
{
    var butName:Object = event.currentTarget;
    
    switch (butName)
    {
        case Pic1_btn :
            ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic1.jpg", " " );
            break;
        case Pic2_btn :
            ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic2.jpg", " " );
            break;
        case Pic3_btn :
            ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic3.jpg", " " );
            break;
    }
}
Pic1_btn.addEventListener(MouseEvent.CLICK,callJS);
Pic2_btn.addEventListener(MouseEvent.CLICK,callJS);
Pic3_btn.addEventListener(MouseEvent.CLICK,callJS); 


---

This is another solution.

Code:

---

var list:Array = [Pic1_btn, Pic2_btn, Pic3_btn];

var defaultShadow:DropShadowFilter = new DropShadowFilter(5, 45, 0x000000, 0.6, 16, 16);
var overShadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, 0.7,12,12);
var clickShadow:DropShadowFilter = new DropShadowFilter(3, 45, 0x000000, 0.8, 8,8);


for(var i:uint = 0; i < list.length; i++)
{
        list[i].filters = [defaultShadow];
       
        list[i].addEventListener(MouseEvent.MOUSE_OVER, mOverOut);
        list[i].addEventListener(MouseEvent.MOUSE_OUT, mOverOut);
        list[i].addEventListener(MouseEvent.CLICK, callJS);
}

function mOverOut(e:MouseEvent):void
{
        if(e.type == MouseEvent.MOUSE_OVER) e.target.filters = [overShadow];
        if(e.type == MouseEvent.MOUSE_OUT)  e.target.filters = [defaultShadow];
}

function callJS(e:MouseEvent):void
{
        e.target.filters = [clickShadow];
       
        if(e.target == Pic1_btn) ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic1.jpg", " " );
        if(e.target == Pic2_btn) ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic2.jpg", " " );
        if(e.target == Pic3_btn) ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic3.jpg", " " );
}

---

That works great!

Is it at all further possible to condense it further so that only the array items need to change to switch the links as well?

Say that the Array is:
var list:Array = ["Pic1", "Pic2", "Pic3"]; ...could those array items be plugged into the link function? I guess I'm thinking something like this... except this doesn't work (hopefully you get the idea) :)...

Code:

---

var buttonName = i + "_btn";

function callJS(e:MouseEvent):void {
e.target.filters = [clickShadow];

if(e.target == buttonName) ExternalInterface.call("Photo_Enlarge", "/images/Pics/" + i + ".jpg", " " );
}

}

---

Sorry to keep pushing this... but I really appreciate the help so far. Essentially, I'm putting together a 100+ page flip book (a memorial website for a friend's brother whom has passed away) which loads swf's for the pages. Seeing as there's so many pages, I'm trying to keep the code changes as minimal as possible between them. Only having to change the array's would be great... if possible.

Thanks again!
---
Chris

Use a For loop, like this

Code:

---

function callJS(e:MouseEvent):void
{
        e.target.filters = [clickShadow];
       
        for (var i:uint = 0; i < list.length; i++)
        {
                if (e.target == list[i])
                {
                        ExternalInterface.call("Photo_Enlarge", "/images/Pics/Pic"+ (i + 1) +".jpg", " " );
                }
        }
}

---

Awesome! That seems to have done the trick. Thanks a ton ilike2... you're a life saver (or at least a ton of time saver).
---
Chris