[Flash] Gradient in een mask.

[Fubaruba]

Ik zat wat op de fantastische sites van microsoft te kijken en toen kwam ik ineens deze tegen.

http://www.windowsmedia.com/Mediaguide/gbHome

daar staat bovenaan een header met een leuk effect. Nu is deze niet in flash gemaakt, maar dat moet eigenlijk wel kunnen bedacht ik me.

Het gaat dus om het masking verhaal, bewegend, maar dan met in plaats van een rechte lijn, een transparantie-gradient.

Ik weet niet precies hoe het heet, maar het is dus zo'n transition van A naar B met een mooie overgang.


plaatje als simpel voorbeeldje, maar de xbox moet dus over de gamecube gemasked worden...

ik kan me voorstellen dat er meer mensen zijn die het interessant vinden om dit te maken.

Ik heb al geprobeerd om de mask van een layer een transparantie te geven in de gradient, maar dat mocht niet baten

iemand misschien een ideetje?

[Verwijderd]

Ik zou zo snel geen manier weten hoe je dit effect in Flash te bereiken behalve dan 15 plaatjes boven elkaar met ieder een lagere alpha (lelijke radient==het effect).

[GrimaceODespair]

Symbool opknippen in reepjes en alpha gebruiken? Hartstikke fake, maar met faken in Flash kun je soms mooie dingen bereiken.

zie ook ^^^

[ Voor 7% gewijzigd door GrimaceODespair op 08-09-2003 11:51 ]

[Fubaruba]

hmz... maar in theorie zou het moeten kunnen als je 1 kant van de gradient van het mask transparant maakt toch?

maargoed, ik zal proberen te faken... kijken wat er uit komt

[Wolfboy]

plaatje met achtergrond bitmap doen en, dan wat transparantie in gradient geven?
zou moeten lukken

[alienfruit]

Kun je niet een gradient mask maken over de achtergrond met hier boven plaatje B waarbij een deel weer uit fade?

[KillR-B]

Bij masking gaat het om de Fill. Het maakt niet uit of je transparantie gebruikt of welke kleur je gebruikt..

Ik had ff niks te doen dus heb gelijk maar een prototype in elkaar gezet:

Flash ActionScript:

MovieClip.prototype.gradientMasking = function(fStartAlpha, fEndAlpha, fSteps, fStartX, fEndX) {
    var realMC = null;

    /* Zoek één MovieClip in de 'holder' */
    for (var i in this) {
        if (typeof this[i] == "movieclip") {
            /* MovieClip gevonden */
            realMC = this[i];
            break;
        }
    }   
    if (realMC == null) {
        trace("De MovieClip bevat geen andere MovieClips!\nEr is niks aan de MovieClip aangepast.");
    } else {
        /* Er is een movieclip gevonden, dus we gaan hiermee aan de slag ;) */
        
        var startDepth = 1000;
        var bounds  = realMC.getBounds();
        var startX  = (fStartX != null) ? fStartX : bounds.xMin;
        var endX    = (fEndX != null) ? fEndX : bounds.xMax;
        
        /* Minimale waarde voor alpha stappen is 2 anders wordt
           het wel erg traag wanneer de MovieClip erg breed is */
        var steps   = Math.max(2, (fSteps != null) ? fSteps : 5);
        
        var width   = endX - startX;
        var alphaDiff = fEndAlpha-fStartAlpha;

        for (var x=0; x <= width; x=x+steps) {
            var newMcStr = "mask" + x;
            realMC.duplicateMovieClip(newMcStr, x+startDepth);
            var newMC = realMC._parent[newMcStr];

            /* We bepalen nu het zichtbare gedeelte van de MC mbv masking */
            newMC.createEmptyMovieClip("mask", startDepth);
            newMC.mask.beginFill(0x000000, 100);
            var tmpX = startX + x;
            newMC.mask.moveTo(tmpX,             bounds.yMin)
            newMC.mask.lineTo(tmpX + fSteps,    bounds.yMin);
            newMC.mask.lineTo(tmpX + fSteps,    bounds.yMax);
            newMC.mask.lineTo(tmpX,             bounds.yMax);
            newMC.mask.lineTo(tmpX,             bounds.yMin)
            newMC.mask.endFill();
            newMC.setMask(newMC.mask);
            
            /* Het zichbare gedeelte geven we een transparantie om zo 
               gradient masking te faken */
            newMC._alpha = (fStartAlpha + ((x/width) * alphaDiff))
        }
        /* Tot slot verbergen we de orginele MC */
        realMC._alpha=0;
    }
};

Je kunt deze als volgt gebruiken:
- Zet deze prototype-declaratie in de eerste frame van de Flashfile ofzo
- Maak een "MovieClip-holder" met daarin de MovieClip waar je een gradient fill op wilt toepassen. Je hebt dus een MovieClip in een MovieClip.
- Geef de "MovieClip-holder" een naam (in het voorbeeld hieronder heet hij "mc", de movie in deze holder hoeft niet persé een naam te hebben .. tenzij jij dat wilt
- Je kunt dan de functie op de holder toepassen:

Flash ActionScript:

mc.gradientMasking(0, 100, 5); // Gradient begint bij een trans. van 0 en eindigt in stappen van 5 pixels bij een trans. van 100
mc.gradientMasking(50, 0, 3); // Gradient begint bij een trans. van 50 en eindigt in stappen van 3 pixels bij een trans. van 0
mc.gradientMasking(0, 100, 10, 30, 250); // Gradient begint op x-coord 30 en eindigt op x-coord 250

Ik hoop dat het duidelijk is .. je kunt ook nog verticale gradients maken, maar dan mag je dat zelf aanpassen

[GrimaceODespair]

KillR-B schreef op 08 September 2003 @ 22:02:
Ik had ff niks te doen dus heb gelijk maar een prototype in elkaar gezet:

offtopic:
Get a life

[Verwijderd]

KillR-B schreef op 08 September 2003 @ 22:02:
Bij masking gaat het om de Fill. Het maakt niet uit of je transparantie gebruikt of welke kleur je gebruikt..

Leuk! Nog steeds natuurlijk gebonden aan veel mc's, maar n leuk prototype!

[KillR-B]

GrimaceODespair schreef op 09 september 2003 @ 09:24:
[...]

offtopic:
Get a life

Ik weet het, maar ik had echt nix te doen

Verwijderd schreef op 09 September 2003 @ 10:27:
[...]

Leuk! Nog steeds natuurlijk gebonden aan veel mc's, maar n leuk prototype!

Daarom kun je ook een stap grootte opgeven .. een andere oplossing wist ik zo 1,2,3 niet.

[GrimaceODespair]

Als je nou helemaal stoer bent, duw je d'r ook nog een createEmptyMovieClip bij als je geen realMC vindt

[stefanvverk]

Gradient in een Mask gaat niet, tenzij je zoals vele al gezegt hebben meerdere vlakken maakt met verschillende alpha, maar zelfs wat werkt geloof ik niet als Mask (zo uit m'n hoofd gezegt). Dit omdat een Mask niets anders is dan aangeven welk deel je wil laten zien, en of je dat deel nou aangeef met iets met alpha 30% of 100%, je houd hetzelfde resultaat.

[KillR-B]

GrimaceODespair schreef op 09 September 2003 @ 13:16:
Als je nou helemaal stoer bent, duw je d'r ook nog een createEmptyMovieClip bij als je geen realMC vindt

En wat is het nut daar dan van? Een masking effect op een lege movieclip krijg je dan.

stefanvverk schreef op 09 September 2003 @ 15:29:
Gradient in een Mask gaat niet, tenzij je zoals vele al gezegt hebben meerdere vlakken maakt met verschillende alpha, maar zelfs wat werkt geloof ik niet als Mask (zo uit m'n hoofd gezegt). Dit omdat een Mask niets anders is dan aangeven welk deel je wil laten zien, en of je dat deel nou aangeef met iets met alpha 30% of 100%, je houd hetzelfde resultaat.

Juist dat is precies wat ik al zei ... enige oplossing is (zover ik weet) je movie stukjes hakken (met masking) en daar een transparantie op toepassen .. dat is wat de prototype doet.

[GrimaceODespair]

KillR-B schreef op 09 September 2003 @ 15:47:
En wat is het nut daar dan van? Een masking effect op een lege movieclip krijg je dan.

Ok, ik had hem even niet. En nu misschien nog niet helemaal: waarom zoeken naar een realMC, als je ook gewoon 'this' zou kunnen gebruiken? Of mis ik nou weer iets?

[1st_Ro]

Een 24 bits PNG doet ook wonderen hoor Dan heb je dus 8 bits Alpha en dat fade wel zo lekker

<edit>D'OH ! Eerst goed lezen wat er bedoeld wordt ... excusez moi. Ik dacht even dat het om het namaken van dat plaatje ging, niet om het effect van die site ... </edit>

[ Voor 48% gewijzigd door 1st_Ro op 09-09-2003 15:58 ]

[KillR-B]

GrimaceODespair schreef op 09 September 2003 @ 15:51:
[...]

Ok, ik had hem even niet. En nu misschien nog niet helemaal: waarom zoeken naar een realMC, als je ook gewoon 'this' zou kunnen gebruiken? Of mis ik nou weer iets?

'this' zou naar het 'holder' object zelf verwijzen. Deze 'holder' bevat niet meer dan een MovieClip (het plaatje waar je de masking op wilt toepassen).

Je roept de functie aan met holder.gradientMasking(0, 100)
Binnen deze functie zoek je vervolgens naar de MovieClip binnen de holder. Een andere oplossing zou zijn om de MovieClip binnen de holder een naam te geven zodat je die direct kunt aanspreken vanuit je functie, maar dat scheelt 'de ontwikkelaar' weer tijd omdat je dan elke movie, waarmee je dit effect wilt toepassen, dezelfde naam moet geven