Een Mask layer is een laag waarin één of meer objecten een geanimeerd doorkijkvenster vormen voor de onderliggende lagen. Met een Mask layer creëer je als het ware Spotlight-effecten.

Bekijk hier een voorbeeld van een Mask layer.

Open Flash CS3.

Open een nieuw werkdocument.

De Stage heeft volgende kenmerken : 650 x 120 pixels, 12 frames per seconde en een witte kleur.

Selecteer het Text-tool en kies lettertype Verdana, 50 pixels, vet en cursief.

Typ de tekst www.webtutorials.be en plaats deze in het midden van de Stage.

Wijzig de layernaam in tekst.

Voeg een nieuwe layer toe met als naam Mask.

Selecteer frame 1 van deze nieuwe layer en teken een cirkel met willekeurige vulkleur links van de tekst net BUITEN de Stage.

Zorg dat de cirkel voldoende groot is zodat alle letters straks in de cirkel passen als deze over de letters beweegt.

In de layer mask voeg je in frame 40 een keyframe in (F6)

Sleep de geselecteerde cirkel naar rechts tot net buiten de Stage.

Druk eerst op de shift toets vooraleer je begint te slepen, zo verplaats je de cirkel op een rechte lijn.

Selecteer frame 1 van layer mask en maak een Shape Tween.

Selecteer de layer tekst en voeg in frame 40 een keyframe in zodat de tekst opnieuw verschijnt.

Klik met de rechtermuisknop op de layer mask en kies de optie Mask in het snelmenu.

Fash zal beide layers vergrendelen en de layers zelf krijgen specifieke pictogrammen.

Bewaar de animatie en bekijk het effect.

Tutorial gemaakt door Cocovijve

Nog vragen? Bezoek het forum...

Flash buttons zijn symbolen die je kunt beschouwen als schakelaars.
Een button heeft een aparte Timeline maar er zijn slechts 4 toestanden of keyframes mogelijk.

De vier verschillende toestanden zijn :

Up : de rustfaze van de button.
Over : de toestand (of vorm) van de button wanneer de muis erover beweegt.
Down : de toestand tijdens het indrukken van de muistoets.
Hit : het aanklikbare gebied va de button.

In elk van deze vier toestanden kan de button een ander uiterlijk aannemen. Buttons kunnen meerdere layers bevatten met verschillende achtergronden

Bekijk hier het voorbeeld van een Flash button

Open Flash CS3.

Open een nieuw werkdocument.

Voeg een nieuw symbool in. (Ctrl + F8)

Geef een naam voor de button : btnEersteKnop (begin steeds met het voorvoegsel btn), kies button als type en klik op OK.

Er wordt een subscene geopend met in de Timeline 4 aparte frames : Up, Over, Down en Hit. Het frame Up is reeds een keyframe.

Teken op de Substage een cirkel met een lichtgrijze vulkleur zonder rand.

Plaats deze cirkel in het midden van de Stage.

Selecteer het frame Over en voeg een keyframe in. (F6)

De cirkel van het frame Up wordt automatisch gekopieerd.

Verander de kleur van de cirkel in blauw.

Voeg in het frame Down een keyframe in en wis de cirkel op de Substage.

Teken een vierkant op de Substage en voorzie een breedte die dezelfde is als de diameter van de cirkel. Kleur groen.

Centreer het vierkant ten opzichte van de substage.

In het frame Hit plaats je een keyframe en laat je het vierkant staan.

Ga terug naar Scene 1 en sleep vanuit de Library het symbool btnEersteKnop naar de Stage.

Controleer de animatie. (Enter) Als er niets gebeurd, ga dan naar het menu Control en zorg dat er een vinkje staat naast “Enable Simple Buttons”.

Momenteel zal de knop werken maar er worden geen acties gekoppeld aan de button.

Acties worden geprogrammeerd via ActionScript, een ingebouwde programmeertaal in Flash.

ACTIONSCRIPT toevoegen.

Selecteerde grijze cirkel (schakel desnoods “Enable Simple Buttons” terug uit)

en wijzig de Instance name in de Property Inspector in “eersteknop”.

Selecteer frame 1 en klik op F9, voeg onderstaande code toe :

function eersteknop_clicked(o:Object){

navigateToURL(new URLRequest("http://www.webtutorials.be"));

}

eersteknop.addEventListener(MouseEvent.CLICK, eersteknop_clicked);

Bij het klikken op de knop kom je terecht op de webtutorials home-page…

Bewaar de animatie.

Tutorial gemaakt door Cocovijve

Deze tutorial is bedoeld om de omgeving en mogelijkheden van Flash CS3 in een beknopte vorm voor te stellen aan beginnende Flash CS3 gebruikers.

Bekijk hier een voorbeeld van deze Flash tutorial.

Open Flash CS3

Open een nieuw document : Klik op Flash File (ActionScript 3.0)

Wijzig de breedte van de Stage naar 350 pixels en de hoogte naar 200 pixels. Klik daarvoor in het Properties Panel op de knop Size.

Geef de achtergrond van de Stage een lichtblauwe achtergrond.

1. Background color : #0099CC

Bevestig de wijziging door te klikken op OK.

Breng de Stage volledig in beeld (Kies voor Fit in Window onder de Timeline)

Toon de gridlines op het scherm via het menu View/Grid/Show Grid.

Selecteer het Oval Tool. Klik daarvoor op het Rectangle Tool tot er een submenu tevoorschijn komt.

Wijzig de instellingen van het Oval Tool als volgt :

1. Stroke : zwart; 1 pixel; dikte : Solid
2. Fill : #00CCCC

Stel ook Snap to Objects in : Snapping wordt gebruikt om objecten onderling te positioneren tijdens het tekenen of het verplaatsen door slepen.

Object snapping : om bijvoorbeeld een lijn te verplaatsen naar een hoek van een vierkant. Wanneer je het beginpunt van een lijn verplaatst, zal bij naderen van een hoek van een ander object, een snapring verschijnen.

Teken nu een cirkel op de Stage. Houd de shift toets ingedrukt tijdens het slepen om een perfecte cirkel te krijgen.

Selecteer het Selection Tool.

Selecteer alles m.b.v. Ctrl + A.

Zowel de blauwe cirkel als de zwarte rand zijn nu voorzien van witte puntjes.Converteer de cirkel naar een symbool door F8 in te drukken.

Geef als naam grCirkel, selecteer Graphic en plaats het focuspunt in het midden (Registration middelste kleine vierkantje). Bevestig met OK.

Centreer de cirkel in het midden t.o.v. de Stage. Klik eerst op Window en selecteer daarna Align om het Align Panel zichtbaar te maken. (Het Align Panel staat nu rechts op uw scherm)

Het symbool bij To stage moet actief staan. Klik op de 2 andere aangeduide symbolen om de cirkel zowel horizontaal als vertikaal te centreren ten opzichte van de stage.

Selecteer in de timeline frame 30 en maak er een keyframe van door op de functietoets F6 te klikken.

Maak de cirkel groter tot buiten de Stage. Gebruik hiervoor het Free Transform Tool en de shifttoets om het hoekpunt te slepen met behoud van de verhouding.

Selecteer frame 1 :

Maak een Motion Tween via de Property Inspector.

Selecteer de cirkel in frame 30 en stel in de Property Inspector keuzemenu Color de Alphawaarde in op 20.

Wijzig de layernaam in cirkel. Dubbelklik hiervoor op de naam Layer 1 en wijzig de naam in cirkel. Voeg een nieuwe layer toe, klik op het meest linkse symbool, en geef deze layer de naam ‘tekst’.

Selecteer frame 1 van de layer tekst.

Plaats in dit frame een statische tekst, Arial, 20 pixels groot en Bold. Selecteer daarvoor eerst het Text Tool.

In de Property Inspector wijzig je volgende waarden :

Klik ergens in de Stage en plaats volgende tekst : KENNISMAKING MET FLASH CS3

Let op : Om de invoer van tekst te beëindigen klik je niet op Enter maar wel ergens buiten de tekst.

1. Selecteer de tekst en converteer deze naar een grafisch symbool (Ctrl F8).
2. Positioneer de tekst in het midden van de Stage.
3. Maak van frame 30 in de layer tekst een keyframe (F6) .
4. Selecteer frame 1 in de layer tekst en vergroot de tekst tot buiten de Stage.

Maak een Motion Tween van de tekst. Deze moet 1 maal roteren in wijzerzin tussen frame 1 en 30.

Bekijk nu even uw gemaakte flash animatie door te klikken op Ctrl + Enter.

Je ziet dat de animatie telkens opnieuw begint. Dit kunnen we voorkomen door een ActionScript toe te voegen.

Selecteer in de layer cirkel het laatste frame en klik vervolgens op F9 om het Acion Panel te openen.

Vul volgende “actie“ in stop (); (vergeet de punt-komma niet !!)

Controleer opnieuw de animatie (Ctrl + Enter), nu stopt de animatie nadat deze 1 maal is uitgevoerd.

Bewaar het werkbestand via File >> Save as…

Publiceer eventueel in swf-formaat of html formaat om te gebruiken op uw website.

Tutorial gemaakt door Cocovijve