Fade ind og ud ved tryk på menuknap

Du har vel lavet det med tweens på timeline?
Hvis du i steder laver hver indholdsside som et MC (MovieClip), kan du lave funktioner til at fade ind og ud.

Sådanne funktioner kunne være:

function fadeIn(targetContent:MovieClip, fadeRate:Number) { // targetContent er MC der fades ind, og fadeRate angiver, hvor hurtigt der fades ind (0-100, jeg vil foreslå 1-10)
    targetContent.onEnterFrame = function() {
        if (this._alpha <= 100-fadeRate) {
            this._alpha += fadeRate; // Forøg synligheden af element der fades ind
        } else {
            delete this.onEnterFrame; // Slet gentagende funktion der forøger synligheden, når MC'et er fundstændig synligt
        }
    }
}
function fadeOut(targetContent:MovieClip, fadeRate:Number) { // targetContent er MC der fades ud, og fadeRate angiver, hvor hurtigt der fades ud (0-100, jeg vil foreslå 1-10)
    targetContent.onEnterFrame = function() {
        if (this._alpha >= fadeRate) {
            this._alpha -= fadeRate; // Formindsk synligheden af element der fades ud
        } else {
            delete this.onEnterFrame; // Slet gentagende funktion der formindsker synligheden, når MC'et er fundstændig usynligt
            // SLÅET FRA - denne linie sletter MC'et helt: targetContent.removeMovieClip(); // Slet MC der fades ud, når det er helt usynligt
        }
    }
}

Disse funktioner kan placeres i _root.

Hej hf2ke, det lyder lige som det jeg har brug for. Jeg skal bare have lidt mere hjælp. Hvordan skal jeg implementere funktionen på mit site, så knapperne aktivere det... Kan jeg maile dig en simpel fla-fil, hvor du kan sætte det ind det rigtige sted. Det er nok det allernemmeste at overskue?

Ja, send en mail med fla-filen til hf2ke@sol.dk, så implementerer jeg koden og sætter den endelige udgave ind her også (ellers bliver folk sure :o)).

Okay... Har fået det til at virke nu.

[[[ SETUP ]]]

Der er i _root tre MC'er med _alpha sat til 0. Navnene er indholdA, indholdB og indholdC. Desuden er der tre Buttons, også i _root.


[[[ Actions - Frame ]]]

function fadeIn(targetContent:MovieClip, fadeRate:Number) { // targetContent er MC der fades ind, og fadeRate angiver, hvor hurtigt der fades ind (0-100, jeg vil foreslå 1-10)
    targetContent.onEnterFrame = function() {
        if (this._alpha <= 100-fadeRate) {
            this._alpha += fadeRate; // Forøg synligheden af element der fades ind
        } else {
            delete this.onEnterFrame; // Slet gentagende funktion der forøger synligheden, når MC'et er fundstændig synligt
        }
    }
}
function fadeOut(targetContent:MovieClip, fadeRate:Number) { // targetContent er MC der fades ud, og fadeRate angiver, hvor hurtigt der fades ud (0-100, jeg vil foreslå 1-10)
    targetContent.onEnterFrame = function() {
        if (this._alpha >= fadeRate) {
            this._alpha -= fadeRate; // Formindsk synligheden af element der fades ud
        } else {
            delete this.onEnterFrame; // Slet gentagende funktion der formindsker synligheden, når MC'et er fundstændig usynligt
        }
    }
}

var glabalFadeInRate:Number = new Number(10); // Global indstilling til fading
var glabalFadeOutRate:Number = new Number(5); // Endnu en global indstilling til fading

fadeIn(indholdA, glabalFadeInRate); // Start med indholdA


[[[ Actions - Button (første knap) ]]]

on (release) {
    if (indholdA._alpha < 100) {
        fadeIn(indholdA, glabalFadeInRate);
    }
    if (indholdB._alpha > 0) {
        fadeOut(indholdB, glabalFadeOutRate);
    }
    if (indholdC._alpha > 0) {
        fadeOut(indholdC, glabalFadeOutRate);
    }
}


[[[ Actions - Button (anden knap) ]]]

on (release) {
    if (indholdB._alpha < 100) {
        fadeIn(indholdB, glabalFadeInRate);
    }
    if (indholdA._alpha > 0) {
        fadeOut(indholdA, glabalFadeOutRate);
    }
    if (indholdC._alpha > 0) {
        fadeOut(indholdC, glabalFadeOutRate);
    }
}


[[[ Actions - Button (tredje knap) ]]]

on (release) {
    if (indholdC._alpha < 100) {
        fadeIn(indholdC, glabalFadeInRate);
    }
    if (indholdA._alpha > 0) {
        fadeOut(indholdA, glabalFadeOutRate);
    }
    if (indholdB._alpha > 0) {
        fadeOut(indholdB, glabalFadeOutRate);
    }
}

Og et lille svar ;)

Forresten kan det da gøres endnu lettere.... Lige et sekund.

Her =)


[[[ Actions - Frame ]]]

function fadeIn(targetContent:MovieClip, fadeRate:Number) { // targetContent er MC der fades ind, og fadeRate angiver, hvor hurtigt der fades ind (0-100, jeg vil foreslå 1-10)
    if (targetContent._alpha < 100) { // Tjek om MC'et allerede er helt synligt
        targetContent.onEnterFrame = function() {
            if (this._alpha <= 100-fadeRate) {
                this._alpha += fadeRate; // Forøg synligheden af element der fades ind
            } else {
                delete this.onEnterFrame; // Slet gentagende funktion der forøger synligheden, når MC'et er fundstændig synligt
            }
        }
    }
}
function fadeOut(targetContent:MovieClip, fadeRate:Number) { // targetContent er MC der fades ud, og fadeRate angiver, hvor hurtigt der fades ud (0-100, jeg vil foreslå 1-10)
    if (targetContent._alpha > 0) { // Tjek om MC'et allerede er helt usynligt
        targetContent.onEnterFrame = function() {
            if (this._alpha >= fadeRate) {
                this._alpha -= fadeRate; // Formindsk synligheden af element der fades ud
            } else {
                delete this.onEnterFrame; // Slet gentagende funktion der formindsker synligheden, når MC'et er fundstændig usynligt
            }
        }
    }
}

var glabalFadeInRate:Number = new Number(10); // Global indstilling til fading
var glabalFadeOutRate:Number = new Number(5); // Endnu en global indstilling til fading

fadeIn(indholdA, glabalFadeInRate); // Start med indholdA


[[[ Actions - Button (første knap) ]]]

on (release) {
    fadeIn(indholdA, glabalFadeInRate);
    fadeOut(indholdB, glabalFadeOutRate);
    fadeOut(indholdC, glabalFadeOutRate);
}


[[[ Actions - Button (anden knap) ]]]

on (release) {
    fadeIn(indholdB, glabalFadeInRate);
    fadeOut(indholdA, glabalFadeOutRate);
    fadeOut(indholdC, glabalFadeOutRate);
}


[[[ Actions - Button (tredje knap) ]]]

on (release) {
    fadeIn(indholdC, glabalFadeInRate);
    fadeOut(indholdA, glabalFadeOutRate);
    fadeOut(indholdB, glabalFadeOutRate);
}