Adobe Flash CS3 - Werken in flash

Published:

Voorwoord

Met Adobe Flash kan je op gemakkelijke wijze verschillende animaties aanmaken, en heel snel een interactieve website bouwen. Adobe Flash is een enorm populair programma voor zijn eenvoudigheid, maar tegelijk ook voor zijn diverse functies. Zowat alles is mogelijk: "You dream it, You build it."

Voor het maken van jouw droomanimaties, moet je natuurlijk wel de nodige vaardigheden bezitten. Daar springt deze cursus je bij. Op de website probeerde ik een goede afwisseling te geven tussen theorie, oefeningen, eigen experimenten en videovoorbeelden. Dit bestand is een bundeling van alle theoriepagina's op de website, zodat je deze kan afdrukken om eenvoudiger te werken maar ook om alle theorie te kunnen doorzoeken zonder alle webpagina's te moeten overlopen.

Adobe Flash is heel compleet en uitgebreid, er valt dus veel over te zeggen. Ik zal mij hier echter beperken tot het maken van heel eenvoudige webpagina's en animaties. Is er iets wat je niet op de site gezien hebt dat je toch wil proberen in Flash, neem dan zeker eens een kijkje bij de pagina's "Handige Links" en "Help?!?". Daar kan je links vinden naar andere websites.

Lady using a tablet
Lady using a tablet

Professional

Essay Writers

Lady Using Tablet

Get your grade
or your money back

using our Essay Writing Service!

Essay Writing Service

Veel succes...

Inleiding

Het valt misschien niet altijd even hard op, maar bij vele websites is er gewerkt met Flash. Flash zijn animaties die de website aangenamer maken. Het is mogelijk om een hele website in Flash te maken, zonder dat je daarvoor een professionele ontwerper moet zijn. Het is eenvoudig, en snel te leren voor de mensen die het echt willen kunnen.

Het grote voordeel van Flash is, dat het heel compacte bestanden maakt. De bestanden zijn klein, en ze laden dus zeer snel als je op een website komt. Dit in tegenstelling tot andere animaties gemaakt in andere programma's, waarop je een hele tijd moet wachten voor ze op je scherm verschijnen. Dit is ook voor mensen die een website bezoeken niet echt aangenaam.

Het tweede voordeel van Flash is wat men noemt: "Streaming". Het klinkt moeilijker dan het is. Streaming wil zeggen dat je direct al te zien krijgt wat al geladen is van Flash. Je hoeft dus niet te wachten tot alle elementen van de website geladen zijn om iets op je scherm te krijgen. Van zodra er al een klein deel van het Flashbestand geladen is, word er al iets op je scherm weergegeven. De rest van de animatie laadt onzichtbaar verder op de achtergrond. Dit is heel handig voor mensen met een tragere internetverbinding.

Dus Flash is gemakkelijk te gebruiken, maakt compacte bestanden en kan Streamen. Waarom gebruikt dan niet iedereen dit voor zijn websites? Er zijn ook een aantal nadelen aan het gebruik van Flash. Ten eerste moet je al een extra programma installeren, Flash Player, om de animaties te kunnen bekijken.

Hoewel de bestanden compact zijn en heel snel kunnen laden, zijn ze nog altijd trager dan het laden van gewone tekst en foto's. Het heeft dus geen zin om Flash te gebruiken als je enkel webpagina's wilt met gewone tekst en foto's zonder animatie. Ook kleinere animaties zoals blinkende teksten kunnen beter met andere programma's gemaakt worden. GIF bestanden zijn een goed voorbeeld voor kleinere animaties. Flash afbeeldingen kun je dan wel weer uitrekken, zonder kwaliteitverlies. Dit kunnen anderen vaak niet! Zie website voor een voorbeeld!

Let ook op met wat je maakt in Flash! Het is de bedoeling dat deze animaties op een website komen, dus zorg ervoor dat ze mooi passen bij de kleuren van die webpagina. Zorg er ook voor dat je niet overdrijft met de Animaties. Deze kunnen je bezoekers snel afleiden, en kunnen er voor zorgen dat je serieuze site er snel belachelijk begint uit te zien.

Kennismaking met Flash CS3

Flash opstarten, clips aanmaken en openen

Om gemakkelijk van start te kunnen gaan is het handig om een snelkoppeling naar Flash op ons bureaublad te plaatsen. Dit kun je doen door:

Start?Alle programma's?Adobe Flash CS3 en vervolgens rechts te klikken op het Flash-icoon en te kiezen voor Kopiëren naar ? Bureaublad (snelkoppeling maken). Je kunt ook een snelkoppeling maken door het Flash-icoon naar het bureaublad te slepen.

Lady using a tablet
Lady using a tablet

Comprehensive

Writing Services

Lady Using Tablet

Plagiarism-free
Always on Time

Marked to Standard

Order Now

Dubbelklik op deze snelkoppeling om Flash CS3 te openen. Dan krijg je volgende kader op je scherm. Dit is het opstartscherm van Flash. Hier kun je nieuwe documenten aanmaken, een recent document opnieuw openen, of nieuwe documenten maken vanuit een Template. Een Template is een document waarbij een aantal dingen, zoals afmetingen en dergelijk, al op voorhand zijn ingesteld. Meer hierover verder in de cursus.

Zoals in bijna elk programma, kun je ook bestanden openen en nieuwe bestanden aanmaken via de menubalk bij : "File". We bespreken alle onderdelen van de menubalk verder wanneer de bijhorende theorie aan bod komt.

Je kunt Flash, en een Flash-bestand, ook openen door te dubbelklikken op dat Flash-bestand in de windows verkenner.

Bij het aanmaken van een nieuw document via "File", krijg je het onderstaande dialoogvenster op je scherm.

Bij het aanmaken van een nieuw document via "File", krijg je bovenstaand dialoogvenster op je scherm. Hier moet je kiezen welk type Flash-document je gaat maken. Hieronder kort waarvoor je de verschillende types moet gebruiken.

De overige bestandstypes zijn ActionScript Files en JavaScript Files, daar gaan we het in deze cursus niet over hebben.

Selecteer in dit kader het bestandstype naar keuze en Flash opent het gekozen bestandstype.

Bestanden openen kan door te dubbelklikken op het bestand in de verkenner, of via File?Open of File ? Open Recent om een recent geopend bestand opnieuw te openen.

De werkruimte

Flash heeft een echt specifieke interface. Daarom staan we even stil bij de verschillende onderdelen ervan. Let op de specifieke termen, deze zullen later veel voorkomen, en we gaan er vanuit dat je deze termen dan ook kent.

We overlopen nu even kort één voor één de verschillende onderdelen van Flash.

De gereedschapsbalk

In de gereedschapsbalk vinden we al het gereedschap terug dat we kunnen gebruiken. We gaan dieper in op alle gereedschappen als we ze nodig hebben bij de oefeningen. Hier is alvast een overzicht van wat elk gereedschap juist doet.

De Timeline (Tijdlijn)

De Timeline bestaat uit twee grote delen. Links kan je de Layers zien. Rechts zie je de verschillende frames.

Layers zijn transparante lagen, waarop je objecten kan tekenen. Je kan meerdere lager over elkaar zetten, zolang deze niet overlappen zijn ze allemaal zichtbaar. Als objecten wel overlappen, is alleen het bovenste object zichtbaar. Door met lagen te werken is het bij grotere animaties ook eenvoudiger om gestructureerd te werken. Het beste is om een laag te maken per object dat je wil invoegen. Alle objecten op één Layer zetten is niet aan te raden!

Frames zijn de kleine rechthoekjes met nummers boven. Elke frame duurt standaard 1/12 van een seconde. Je kan per laag in elke frame beelden toevoegen. Een Flash-filmpje maken is dus eigenlijk niets meer dan verschillende frames aanmaken, om dan snel achter elkaar af te spelen. Je krijgt dus eigenlijk allemaal korte beelden achter elkaar die ervoor zorgen dat het beeld beweegt.

Hieronder even kort samengevat welke functies er allemaal aanwezig zijn.

Het Podium (Stage)

Het Podium is veel te vergelijken met een echt podium. Het is de plaats waar je alle objecten zal tekenen die in je video zullen komen. Het podium kun je aan jouw wensen aanpassen. Dit doe je bij de properties vlak onder het podium, of Klik rechts op het podium ? Document Properties

Je kunt de grote van het podium aanpassen, het podium een achtergrondkleur geven en je kan ook de framerate aanpassen. Hoe hoger de frame rate, hoe vloeiender je video zal spelen, maar dit zal ook het bestand een pak groter maken.

De Panelen

Panelen zijn versleepbare dialoogvensters of werkbalken waarin specifieke functies terug te vinden zijn. Vaak zijn deze panelen niet zichtbaar en moet je deze activeren. Je kunt de panelen zichtbaar maken via het menu Window. Waarvoor elk paneel dient, zullen we bespreken als we ze nodig hebben.

Je kunt de meeste panelen ook vasthaken aan een rand van je Flash window. Daarvoor sleep je het paneel bij de titelbar naar de zijkanten of naar de onderkant, en laat je de muis los.

Help?!?

Lady using a tablet
Lady using a tablet

This Essay is

a Student's Work

Lady Using Tablet

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

Examples of our work

Soms loopt er toch iets mis, en vinden we niet meteen een oplossing. Bepaalde problemen zullen altijd voorkomen. Het is niet de bedoeling van deze cursus om een pasklare oplossing te hebben voor alle problemen. In plaats daarvan opteren wij met deze cursus ervoor om te leren hoe je hulp kan zoeken voor Flash

De hulpfunctie van Flash CS3

Om de hulpfunctie binnen Flash CS3 te gebruiken, moet je simpelweg op F1 drukken en het helpmenu verschijnt op je scherm. Je kunt dit helpmenu ook terugvinden in de menubalk bij Help.

De hulpfunctie van Flash CS3 is goed opgedeeld in hoofdstukken, dus je zult eenvoudig een antwoord kunnen vinden. Je kunt ook door alle helppagina's zoeken met de zoekfunctie (Search). Let wel op! Alle informatie is in het Engels.

Internet

Het internet is natuurlijk ook een bron van waardevolle informatie. Als je aan deze site niet genoeg zou hebben raden we je zeker volgende sites aan. Sommige bevatten zelfs een forum waar je jouw specifiek probleem kan proberen oplossen met de hulp van andere mensen.

  • http://users.telenet.be/viba/
  • http://www.adobe.com/support/documentation/nl/flash/
  • http://www.webtutorials.be/2008/08/12/kennismaking-met-flash-cs3/

Er zijn er zeker nog veel meer. Google is altijd een goede uitgaansbasis.

Werken in Flash

Het gereedschapspalet

Je kan het gereedschapspalet oproepen of verbergen in het menu window - tools.

Elke tool heeft ook een eigen snelkoppeling. Deze kun je terugvinden bij de interface, en in de titels bij elk gereedschap. In plaats van de snelkoppeling te gebruiken, kun je ook op de tool klikken in het gereedschapspalet.

Elk gereedschap heeft ook zijn eigen properties. Let dus goed op de properties als je het gereedschap gebruikt!

De Selectietools

Het Tekstgereedschap (T)

Soorten tekstvakken

Er zijn 3 soorten tekstvakken: Statische, Dynamische tekstvakken, en invoervelden.

  • Statische tekstvakken worden gebruikt voor tekst tijdens het maken van een basisontwerp, of voor tekst die niet veranderd tijdens de uitvoering van de animatie.
  • Dynamische tekstvakken worden gebruikt voor tekst die zich tijdens duur van de animatie kan aanpassen.
  • Invoervelden zijn velden waarin de gebruiker tekst kan invoeren. Vergelijkbaar met een tekstvak/invoerveld bij formulieren.

Tekst toevoegen

De hoogste tijd om eindelijk eens iets te gaan doen in het programma. We zullen beginnen bij het invoegen en bewerken van teksten. Een tekst invoegen op ons podium kan heel eenvoudig. Je klikt bij de gereedschappen op de knop of je druk op de T (dit is een sneltoets om je Text Tool te activeren). Je cursor krijgt dan een kleine T erboven. Ga dan met je muis op het podium staan en klik waar je de tekst wil zetten.

Dit vakje komt dan op je podium terecht. Daar kun je de gewenste tekst intypen. Het vakje wordt groter naar gelang de hoeveelheid tekst het bevat. Op deze manier kunnen we dus snel een tekst toevoegen aan onze animatie.

Je kan ook tekst invoegen vanuit andere programma's door te knippen/kopiëren en plakken.

Tekstvak verplaatsen en formaat wijzigen

Je kan het formaat van een tekstvak wijzigen door met het tekstgereedschap op de formaatgrepen te slepen tot je de breedte hebt die je wou hebben.

Om een tekstvak te verplaatsen, als het tekstgereedschap nog actief is, kan door je muisaanwijzer op de rand van het tekstvak te plaatsen, je krijgt dan een kruispijl. Klik en sleep vervolgens naar de gewenste plaats.

Je kan op dezelfde manier ook het tekstvak verslepen met het pijlgereedschap. Je selecteert dan het pijlgereedschap en gaat op de rand van het tekstvak staan. Vervolgens sleep je het tekstvak naar de gewenste plaats.

Je kan ook de tekst nog aanpassen indien je dat zou willen. Je dubbelklikt dan op je tekstvak, en de teksttool word automatisch geactiveerd en je staat met je cursor in de tekst op de plaats waar je geklikt hebt.

Tekst opmaken

Onze animatie moet er natuurlijk ook aantrekkelijk kunnen uitzien. Daarom moeten we onze tekst kunnen opmaken. In grote lijnen zijn er twee methoden. Selecteer alvast de tekst die je zal willen opmaken.

  • Selecteer de tekst
  • Ga in het menu "Text", daar kan je een aantal basisdingen aanpassen zoals lettertype, lettergrootte, ...

Je hebt wel een hele hoop meer keuzes bij de properties. Deze vind je normaal onderaan je scherm. Zorg er wel voor dat je de tekst hebt geselecteerd.

  • In de kader met Static Text, kun je het type van je tekstvak aanpassen. Zie hiervoor de uitleg eerder in de cursus
  • Naast de A kan je het lettertype aanpassen, de lettergroote en de kleur. Je kan ook kiezen om je tekst in het vet of cursief te zetten, en op dezelfde lijn kun je ook nog de uitlijning van je tekst kiezen.
  • Als je op dit teken klikt, kun je enkele tekstopties aanpassen (Format Options). De marges binnen het tekstvak zijn hiervan het belangrijkste.
  • gebruik deze knop om de richting van je tekst aan te passen.
  • Hier kan je de letterafstand aanpassen. Een hoger getal betekend dat de plaats tussen de letters groter zal worden. Een negatief getal betekend dat de letter tegen elkaar gedrukt zullen worden.
  • Hier kan je het type tekst aanpassen. Je hebt de keuze tussen Normal, Superscript en Subscript.
  • Flash kan op verschillende manieren tekst aanmaken in je document. Hier kun je die manier kiezen. Voor de meeste gevallen kun je dit gewoon op standaard laten staan.
  • Hier kun je tot in detail de grootte van je tekstvak aanpassen.
  • In deze kader kan je een hyperlink typen. Dit is handig als je een reclameanimatie maakt. Als mensen dan op de tekst klikken volgen ze ook de hyperlink.

Oefening 1 Met Videogids!

  • Open een nieuw Flash CS3 document
  • Neem het tekstgereedschap en plaats het ongeveer in het midden van het podium.
  • Typ als tekst: "Dit is mijn eerste Flash-bestand!" in Verdana, 16 punt.
  • Centreer je tekst binnen de tekstframe en plaats de tekst in het blauw.
  • Zet de achtergrondkleur in het zwart.
  • Vergroot de afstand tussen je letters naar 8.
  • Sla je oefening op in je oefenmap met als naam: "Oef1.fla"

Oefening 2

  • Open een nieuw Flash CS3 document en maak het podium 200x100px groot.
  • Maak bovenaan in het midden een tekstframe. Plaats hierin in het zwart je naam.
  • Maak de tekstframe zo groot dat de randen van de tekstframe gelijk lopen met de randen van het podium.
  • Centreer je tekst binnen het tekstframe
  • Doe ditzelfde twee keer net onder je naam. Typ in de eerste tekstframe je adres en huisnummer en in de tweede tekstframe typ je de postcode en de gemeente.
  • Selecteer de huisnummer, en zet hem in superscript.
  • Je zou nu ongeveer het volgende resultaat moeten bekomen:
  • Sla je oefening op in je oefenmap met als naam: "Oef2.fla"

Objecten tekenen in Flash

Inleiding

Verschillenden lijnen en vormen tekenen gaat heel eenvoudig binnen Adobe Flash. We zullen in de volgende deeltjes per gereedschap bespreken waarvoor we het kunnen gebruiken. Belangrijk is om steeds in het oog te houden in welke modus je een object tekent! Belangrijk om te onthouden is dat getekende objecten steeds een rand of lijn (Stroke) en een vulling (Fill) hebben. Deze kunnen een afzonderlijke kleur hebben.

Deze knop is de knop om object-drawing op en af te zetten. Wat wil dit nu concreet zeggen.

  • Object drawing op: De figuur of vorm die je tekent komt als een apart figuur op je podium terecht. Alle figuren/vormen die al op het podium stonden, blijven behouden. In dit geval worden de rand en de vulling van een figuur samengenomen tot één figuur, maar je kan ze nog wel afzonderlijk bewerken! Dit heeft bij een aantal van de volgende functies een ander effect!
  • Object drawing af: De figuur die je tekent verwijderd alles wat al op dezelfde plaats op het podium stond. Hiermee kan je dus gaten snijden in bepaalde figuren.

Dit hier links is een voorbeeld van een afgeronde rechthoek. Daarna is er nog een rechthoek over getekend zonder object drawing. Vervolgens is de nieuwe figuur verplaatst en laat het een witte vlakte achter waar het oorspronkelijk stond

Het Potloodgereedschap (Y)

Met het potloodgereedschap kun je lijnen tekenen zoals je dit in het echt zou doen. Je kan deze lijnen achteraf nog altijd bijwerken. Dit gereedschap herkent ook eenvoudige vormen. Een cirkel kan je met de losse hand tekenen, en deze tool maakt er een mooie ronde cirkel van.

Je kan trouwens de Shift-toets ingedrukt houden om perfecte verticale of horizontale lijnen te tekenen. Belangrijk om weten is dat het potloodgereedschap strokes tekent, en dus geen fill!

Deze tool heeft ook nog een aantal opties, die handig kunnen zijn bij het maken van je animatie.

  • Straighten: Zorgt ervoor dat alle lijnen die je tekent recht gemaakt worden. Op deze manier kun je rechte driehoeken, vierkanten en ruiten maken.
  • Smooth: Zorgt ervoor dat alle lijnen afgevlakt worden. Je krijgt dan mooie vloeiende lijnen.
  • Ink: Zorgt ervoor dat de lijnen een beetje rechter worden gemaakt en iets vloeiender worden.

De mate waarin Flash de lijnen aanpast, kan je instellen via Edit, Preferences, Drawing. De keuzelijst Recognize shapes gebruik je voor de vormherkenning van eenvoudige figuren zoals cirkels, vierkanten, enz.

Als je de opmaak van een lijn wilt wijzigen, dan moet je de lijn eerst selecteren met het selecteergereedschap. De dikte van de lijn staat in punten. 1pt is ongeveer 1/3 van een millimeter.

De opmaak van de lijn kan je aanpassen bij de properties.

Bij de properties kan je de kleur aanpassen, de dikte van de lijn, het type van lijn, etc.

Bij Cap (deksel) kan je de eindpunten van je lijnen aanpassen/kiezen, er dus bij wijze van spreken een deksel op plaatsen. Je kunt kiezen tussen:

  • None: Je lijn heeft geen extra einde.
  • Round: Je zet een rond deksel op de eindpunten van je lijn. Je krijgt hierdoor een langere lijn.
  • Square: Je zet een vierkant deksel op de eindpunten. Je krijgt hierdoor een langere lijn.

Bij Join kan je kiezen hoe de lijnen er moeten uitzien als ze andere lijnen kruisen.

  • Miter: Een gepunte hoek.
  • Round: Een afgeronde hoek.
  • Bevel: Een gepunte hoek met een afgerond vlak.

Oefening 3 Met Videogids!

  • Open een nieuw Flash document
  • Teken vanaf links onderaan in het podium naar rechts een rechte lijn (met de Shift-knop!) van grootte 40 in het groen.
  • Zet op deze lijn een ronde Cap (Round Cap).
  • Teken nu met de losse hand een bloem met deze tool. Gebruik hiervoor een iets donkerder groen en zet de lijn in grootte 5 voor de bloemsteel, voor de blaadjes kies je een gele kleur, zelfde grootte. Stel de potloodgereedschap zo in dat het de lijnen vanzelf vlotter maakt (Smooth)
  • Teken in het midden in het paars een bol. Doe dit door het potloodgereedschap op de stand Ink te zetten.
  • Sla je oefening op in je oefenmap met als naam: "Oef3.fla"

Oefening 4

  • Open een nieuw Flash document
  • Teken een rechts stippellijn van links naar rechts. 1,5pt in het wit.
  • Neem de teksttool en typ: "RECLAME". Plaats deze tekst net boven de stippellijn. Verdana 16.
  • Verander de achtergrondkleur in het zwart.
  • We gaan hier later verder aanpassingen aanbrengen. Sla je oefening op in je oefenmap met als naam: "Oef4.fla"

Oefening 5

  • Open een nieuw Flash document
  • Teken zelf een huis met de losse rand. Gebruik hiervoor het potloodgereedschap. Experimenteer hoe je het beste het huis kan tekenen door de eigenschappen van het potloodgereedschap aan te passen.
  • Een heel simplistisch voorbeeld
  • Sla je oefening op in je oefenmap met als naam: "Oef5.fla"

Lijnen en vormen tekenen

Om lijnen te tekenen kun je het lijngereedschap selecteren (Line, N). Klik vervolgens op het podium op de gewenste startplaats, en sleep tot aan je eindpunt. Laat dan je muisknop los. Je kan je lijnen ook in een hoek van 45 graden draaien door de Shift-toets ingedrukt te houden tijdens het slepen. De lijnopmaak kan op dezelfde manier worden aangepast als bij het potloodgereedschap. Het lijngereedschap tekent net als het potloodgereedschap enkel een stroke.

Om rechthoeken en vierkanten te tekenen, kan je het rechthoekgereedschap selecteren. (Rectangle tool, R). Je klikt op een plaats in het podium, en hou de muisknop ingedrukt tijdens het slepen. Laat vervolgens los om je rechthoek te tekenen. Om vierkanten te tekenen hou je tijdens het slepen de Shift-toets ingedrukt. Je kan de opmaak aanpassen bij de properties. Let op, een rechthoek bestaat steeds uit twee elementen: Een vulling (Fill) en een rand (Stroke). Je kan één van de twee uitschakelen als je dit zou willen. Dit geld trouwens voor alle andere vormen ook.

Je kan ook je hoeken afronden bij het tekenen van rechthoeken. Dit kan je doen in het kadertje links, dat je kan vinden bij de Properties eens je het rechthoekgereedschap hebt geselecteerd. Een 0 waarde betekend geen hoeken afronden. Een positieve waardes geven mooie afgeronde hoeken. Negatieve waarden geven een afgesneden hoek. Hoe hoger/lager de waardes, hoe groter het effect.

Voorbeeld:

We kunnen ook andere vormen tekenen. Deze tools zitten verborgen. Om deze tools te kunnen selecteren, moet je op het zwarte pijltje klikken rechts onderaan de knop van het rechthoekgereedschap

Met het rechthoekgereedschap (Rectangle tool) maakten we hierboven al kennis. Alle andere vormen moeten op dezelfde manier ingevoegd en opgemaakt worden. Andere vormen zijn:

  • Het ovaalgereedschap (Oval Tool, O) dient om ovalen te tekenen. Als je tijdens het slepen de Shift-toets ingedrukt houd, dan kan je perfecte cirkels tekenen.
  • Het veelhoekgereedschap (PolyStar Tool) dient om veelhoeken te tekenen.

De primitieve tools bespreken we verder, nu gaan we eerst even dieper in op de Oval Tool en de PolyStar Tool.

Met het ovaalgereedschap ken je ook enkele andere leuke dingen doen dan gewoon ovalen en cirkels tekenen. Zo kun je kiezen om stukken weg te laten, en dus geen volledige ronde te maken. Dit kan je instellen bij de properties, nadat je het ovaalgereedschap hebt geselecteerd.

In dit voorbeeld start Flash met het tekenen van de cirkel bij 140° en stopt met tekenen bij 120°. Wil je een volledige cirkel, dan kun je best zowel start hoek (start angle) als de eind hoek (end angle) op 0 zetten.

Je kan ook kiezen om een stuk vanuit het midden van de cirkel blanco te laten. Ook dit kan je instellen bij de properties.

In dit voorbeeld hebben we 40% van de binnenkant weggevaagd. Je kan deze optie instellen met een waarde van 0 (volledige schijf) tot 99 (een dunnen cirkel).

Het veelhoekgereedschap kan eigenlijk twee verschillende objecten tekenen, veelhoeken en sterren. Dit kan je aanpassen bij de knop options bij de properties van het veelhoekgereedschap. Dan openen de tool settings:

  • Bij de stijl (Style) kan je kiezen tussen veelhoeken (polygon) of ster (star).
  • Bij het aantal zijden kan je instellen hoeveel zijdes het figuur moet hebben. Het maximum aantal zijden is 32.
  • Bij de ster punt grote kun je instellen hoe scherp je de punten zijn van je sterren. Een lagere waarde maakt diepere punten, waardoor je sterren er heel scherp uitzien. Een hogere waarde zorgt voor kortere punten. Deze optie heeft geen nut als je voor veelhoek (polygon) hebt gekozen.

Buiten deze gereedschappen heb je ook nog de primitive tools. Je hebt een primitive tool voor rechthoeken en een primitive tool voor ovalen. Deze tools gedragen zich als een gewone tool gemaakt met object-drawing. Het grote verschil zit hem echter in de aanpassingsmogelijkheden. Bij deze primitieve tools is het namelijk mogelijk om de figuren na het tekenen nog aan te passen. Dit kan bij de gewone figuren niet!

Je kan dus na het tekenen van een primitieve rechthoek nog de hoeken afronden zoals je dat wenst en bij de primitieve ovalen kan je nog de begin- en eindhoek instellen, en een deel van de binnenkant (innerradius) weglaten.

Oefening 6 met videotutorial!

  • Open een nieuw Flash document
  • Teken een lijn van een willekeurige grootte.
  • Teken vanuit het uiterste linkse punt van de lijn een nieuwe lijn naar boven met een hoek van 45°. Hou daarvoor de SHIFT-toets ingedrukt.
  • Neem de polystar Tool (veelhoekgereedschap) en teken een driehoek. Doe dit door de opties (Options) aan te passen naar 3 zijden (3 sides.). Stel eerst in dat er een zwarte rand moet zijn, en een rode vulling!
  • Sleep de rode vulling uit de vorm. Je ziet nu duidelijk dat de figuur uit twee delen bestaat. Een stroke (rand) en een fill (vulling).
  • Sla je oefening op in je oefenmap met als naam: "Oef6.fla"

Oefening 7

  • Open een nieuw Flash document
  • Maak pacman van het bekende videospel na in Flash op een zwarte achtergrond. Maak gebruik van de Primitive Oval Tool.
  • Teken de 3 gele bolletjes. Zorg ervoor dat er een gat in het midden zit. Hiervoor gebruik je de inner radius functie.
  • Sla je oefening op in je oefenmap met als naam: "Oef7.fla"

Oefening 8

  • Open een nieuw Flash document
  • Maak deze eenvoudige banner na. Maak gebruik van de Rectangle Tool en de Text Tool.
  • Sla je oefening op in je oefenmap met als naam: "Oef8.fla"

Het penseelgereedschap (Brush, B)

Het penseelgereedschap kan je tekenen zoals met de verfkwast, kleurstrepen aanbrengen. Bij het penseelgereedschap is echter geen omtrek of rand aanwezig, maar enkel een vulling (Fill). Je kan de dikte, de vorm en de kleur van het gereedschap wijzigen bij de opties die verschijnen in het gereedschapspaneel na het selecteren van het penseelgereedschap. Ook bij de properties kan je na het selecteren van de tool alle instellingen aanpassen.

Met de linkse tool kan je de grootte van je penseel aanpassen. Met de rechter tool kan je de vorm van je penseel aanpassen.

Hiermee kan je de modus van het penseelgereedschap instellen. Je kan bijvoorbeeld kiezen om alleen lege plekken op te vullen. Kortom, met de penseelmodus kan je instellen hoe het penseel zich moet gedragen bij interactie met andere objecten. Voorbeelden:

  • Normal: De vulling komt overal waar je schildert als je object drawing opzet. Staat object drawing af, dan tekent hij op de lege plekken in het podium.
  • Fills: Maakt het mogelijk vullingen en valken te vullen, zonder aan de lijnen te komen. (Bij het lossen van de muisknop verschijnen de lijnen opnieuw).
  • Behind: Maakt het mogelijk om de achtergrond te kleuren, zonder aan eventuele objecten te raken.
  • Selection: Er wordt dan alleen getekend binnen een geselecteerd gebied.
  • Inside: Netjes binnen de lijnen kleuren is hiermee geen probleem.

Oefening 9 met videotutorial

  • Open een nieuw flash-document.
  • Teken een groot blauw vierkant met een dikke groene rand (grootte 6) zonder object-drawing!
  • Neem je brush tool, zet deze in een rode kleur en neem een vrij dikke borstelgrootte.
  • Zet je brush tool op de stand normal en teken een verticale lijn helemaal links in de figuur. Doe hetzelfde met elk van de andere standen van je tool. Vergeet niet dat je voor de stand selection je eerst de figuur moet selecteren! Voor de stand inside moet je beginnen met tekenen binnen de figuur! Je resultaat zou er daarna ongeveer zo moeten uitzien:

Vierkant zonder object drawing - Vierkant met object drawing

  • Teken naast deze figuur een ander vierkant met rand, maar deze keer met object drawing!
  • Teken opnieuw de lijnen met de brush tool. Je ziet dat een aantal functies anders reageren.
  • Deze oefeningen was om zelf even kennis te maken met de eigenschappen van de brush tool. Het vraagt wel wat oefening voor je deze tool onder de knie hebt. Probeer dus zelf uit tot je zeker weet wat je met alle functies moet doen!
  • Sla je oefening op in je oefenmap met als naam: "Oef9.fla"

Oefening 10

  • Open opnieuw oefening 7
  • We gaan onze pacman een andere kleur geven. Kies zelf een kleur en gebruik de inside-modus van je brush tool. Geef ook de zwarte binnenkant van de bolletjes een nieuwe kleur met deze modus.
  • Selecteer de gele bolletjes zelf (dus zonder de rand) en gebruik de selection-modus van de brush tool om deze een andere kleur te geven.
  • Teken nu met de brush tool op stand paint normal in het blauw een oog voor onze pacman met de object drawing modus aan. Versleep hierna even het oog, en je zal zien dat er aan de figuur van pakman niets veranderd is.
  • Doe nu hetzelfde maar dan zonder object drawing. Versleep opnieuw het oog en je merkt dat waar je het oog getekend hebt, er een stuk uit pacman is gesneden.
  • Ga enkele stappen terug (Edit - Undo of de snelkoppeling Ctrl + Z) tot je terug pacman hebt, met het oog gemaakt met object drawing
  • Sla je oefening op in je oefenmap met als naam: "Oef10.fla"

De verfemmer (Paint Bucket, K)

De verfemmer kunnen we gebruiken om de vulling (Fill) van objecten te veranderen. Als je een gesloten vorm hebt getekend met je penseelgereedschap of potloodgereedschap, kan je de lege vlakte daartussen ook met de verfemmer opvullen. De kleur kan je kiezen bij de properties.

Een optie die bij de verfemmer hoort is de Gap Size optie. Hiermee kan je ervoor kiezen om niet perfect gesloten figuren toch te vullen. Flash berekent dan zelf een grens tot waar hij de figuren gaat vullen. Je kan zelf instellen hoe groot de gaten mogen zijn die hij zal opvullen. Je kan kiezen tussen smal, medium of large gaps. Dit is vrij relatief natuurlijk, want wat is klein? Dit is een kwestie van oefening.

Belangrijk om te weten is dat de zoom functie hier invloed op heeft! Hoe verder je uitzoomt in je podium (en hoe kleiner je figuur zal worden), hoe gevoeliger de figuur zal worden voor de gaps (gaten). In en uitzoomen kan rechts boven het podium door het percentage aan te passen, of door gebruik te maken van de toetsencombinatie Ctrl + = (inzoomen) of Ctrl + - (uitzoomen)

Oefening 11 Videotutorial!

  • Open opnieuw oefening 10
  • Selecteer de verfemmer, kies voor een gele kleur en klik op onze pacman. Deze krijgt nu een gele kleur.
  • Het oog van pacman moet zwart worden, selecteer dan voor je verfemmer een zwarte kleur en klik in het oog van pacman.
  • Kleur ook de bolletjes volledig geel, dus zowel de rand als de binnenkant van de bolletjes.
  • Sla je oefening op in je oefenmap met als naam: "Oef11.fla"

Oefening 12

  • Open oefening 12.fla
  • Er staat al een figuur getekend. Vul deze figuur met een groene kleur door gebruik te maken van de smal gap functie. Je zal hiervoor moeten uitzoomen totdat het werkt!
  • Zoom terug in tot 100% (ware grote) en neem een rode kleur en stel je verfemmer in op de medium gap functie. Zoom opnieuw stap voor stap uit tot dit werkt.
  • Zoom terug in tot 100% (ware grote) en neem een blauwe kleur en stel je verfemmer in op de large gap functie. Zoom opnieuw stap voor stap uit tot dit werkt mocht dit nog nodig zijn.
  • Als je dit voldoende hebt ingeoefend, maak je inhoud terug wit. Je merkt dat er door het gebruik van de verfemmer niets veranderd aan je stroke (rand) alleen aan je fill (vulling)
  • Sla je oefening op in je oefenmap met als naam: "Oef12.fla"

De inktpot (Inkt Bottle, S)

Met de inktpot kan je randen (Strokes) toevoegen aan je vullingen (Fills). Heeft het geselecteerde object al een rand, dan gaat Flash deze rand aanpassen aan de settings opgegeven bij deze tool.

  • Selecteer de inktpot
  • Kies een gewenste kleur, en controleer ook of de properties staan zoals je ze wil.
  • Klik op het object.

Oefening 13 met videotutorial!

  • Open een nieuw flash bestand.
  • Teken ongeveer volgende figuur na met de brush-tool.
  • De brush-tool tekent enkel een Fill. Er is dus nog geen Stroke aanwezig. De inktpot zal dus zelf een stroke (rand) tekenen. Selecteer hiervoor de inktpot, en kies een felblauwe kleur met als grootte 3. Stel in dat de rand een stippenlijn is.

Verwijder deze tekening helemaal en teken een lijn (grootte 3) met het potloodgereedschap. Zoals gezegd geweest is bij het potloodgereedschap, tekent het enkel een stroke! Als je de inktpot gebruikt, zal dus heel de lijn worden aangepast. Selecteer de inktpot, en kies een rode kleur met een haarlijn (hairline). Klik op de figuur. Je krijgt dan normaal gezien het resultaat zoals hieronder.

Dit waren tot nu toe allemaal figuren met ofwel een stroke, ofwel een fill. Tijd om even een figuur te bekijken die beiden heeft. Verwijder opnieuw alles op het podium. Teken een vierkant met een gele fill en een zwarte stroke (grootte 2). Selecteer vervolgens de inktpot en verander de kleur van de stroke van zwart naar rood, grootte 4. Je zou het onderstaande resultaat moeten krijgen.

Oefening 14

  • Open opnieuw "oefening11.fla".
  • Geef een groene stroke van grootte 4 aan de pacmanfiguur en het oog van pacman. Geef een rode stroke, type hairline, aan de gele bolletjes.
  • Sla je oefening op in je oefenmap met als naam: "Oef14.fla"

Het pengereedschap (Pen tool, P)

Met het pengereedschap kan je op eenvoudige wijze rechte of gebogen lijnen tekenen (strokes). Je tekent eigenlijk Bézier curves, genoemd naar de franse wiskundige Pierre Bézier (foto) die ze voor het eerst beschreef. Je kan hiermee mooie curven tekenen die mooi in elkaar overlopen. Om met het pengereedschap te werken, moet je het pengereedschap activeren. Wat je daarna moet doen, hangt er vanaf of je rechte lijnen wil tekenen, of curves.

Dit is het moeilijkste gereedschap om onder de knie te krijgen. Het is even wennen, maar eens het gewoon bent lukt het wel. Geef niet op!

Rechte lijnen tekenen

Met het pengereedschap geselecteerd moet je:

  • De properties instellen naar wens;
  • Een beginpunt aanklikken;
  • Een ander punt aanklikken, het pengereedschap zal deze punten dan verbinden tot een lijn.
  • Blijf dit doen tot je het gewenste resultaat hebt, Flash zal lijnen blijven koppelen.
  • Om te stoppen met lijnen te trekken kun je:
  • Dubbelklikken op het laatste punt van je pad. (Bij de laatste lijn die getrokken moet worden); of Klikken op het pengereedschap in de Tools; of Ctrl + Shift + A indrukken of Ctrl + klik buiten het pad

Rechte lijnen aanpassen

Je kan rechte lijnen buigen naar eigen wil.

  • Selecteer het pengereedschap;
  • Hou de ctrl-toets ingedrukt en klik op het punt in de lijn. Versleep nu de lijn, hou hiervoor je ctrl-toets ingedrukt!
  • Je kan ook hoekpunten omzetten naar boogpunten. Selecteer het gewenste punt met het subselectiegereedschap en versleep het punt terwijl je Alt ingedrukt houdt. Het hoekpunt wordt vervangen door een boogpunt met een dubbele raaklijn. Zie afbeelding

Gebogen lijnen tekenen

Om gebogen lijnen te tekenen moet je de bézier-grepen gebruiken. Dit doe je als volgt:

  • Selecteer het pengereedschap
  • Klik op het podium en sleep in de richting waar de boog moet starten. De buik van de boog zal dus in die richting komen.
  • Je klikt een beetje verder, op het punt waar je wilt dat dit deel van de boog eindigd. Je houdt je muisknop ingedrukt. Je hebt nu twee keuzes Of Je sleept in de tegenovergestelde richting van het eerste punt. Je krijgt dan een mooie boog. Of Je sleept in dezelfde richting als het vorige punt. Je krijgt dan een S-vorm

Je kunt trouwens de shift-toets ingedrukt houden om met hoeken van 45° te werken.

Gebogen lijnen aanpassen / raaklijnen aanpassen

  • Selecteer het pengereedschap;
  • Sleep de raaklijngrepen van een punt terwijl je de Ctrl-toets ingedrukt houdt;
  • Wil je één boogpunt onafhankelijk van de andere raaklijn aanpassen, dan moet je de Alt-knop ingedrukt houden terwijl je het gewenste raaklijnpunt versleept naar de gewenste positie.

Ankerpunten verwijderen

  • Selecteer het pengereedschap;
  • Klik op het pad dat je wilt aanpassen;
  • Plaats je muisaanwijzer op een hoekpunt naar keuze. Naast het pennetje komt nu een min-teken te staan.
  • Klik op het hoekpunt. Het hoekpunt zal nu worden verwijderd.

Je kan ook ankerpunten verwijderen door het met het subselectiegereedschap te selecteren en op delete te drukken.

Ankerpunten toevoegen

  • Selecteer het pengereedschap;
  • Klik op het pad dat je wilt aanpassen;
  • Plaats je muisaanwijzer tussen twee curvepunten, op de plaats waar je een ankerpunt wil gaan toevoegen. Er verschijnt dan een plus-teken naast het pennetje;
  • Klik op het pad. Er wordt nu een curvepunt toegevoegd op de geselecteerde plaats.

Ankerpunten in hoekpunten veranderen

  • Selecteer het pengereedschap;
  • Klik op het pad dat je wilt gaan wijzigen;
  • Plaats je muisaanwijzer op een curvepunt. Er verschijnt een invoegteken naast het pennetje;
  • Klik op het curvepunt. Het curvepunt werd nu omgezet in een hoekpunt. De gebogen lijn word daarom ook afgeplat.

Oefening 15 Met videotutorial.

  • Open een nieuw Flash document
  • Selecteer het pengereedschap en selecteer bij de properties een rode stroke. Klik op een plaats op je podium en klik vervolgens rechts hiervan op een andere plaats. Je hebt nu een rechte lijn getekend tussen die twee plaatsen.
  • Ga met je muiscursus nu naar beneden en teken onder het rechtse punt nog een punt, ook hier komt een lijn te staan.
  • Ga vervolgens vanuit dit laagste punt naar links, tot net onder het oorsprongelijke beginpunt en klik.
  • Klik tenslotte op het beginpunt, te trekt dan een lijn vanuit je laatste punt links onder naar het beginpunt.Als je met je muis op het beginpunt staat, komt er naast je cursor een klein cirkeltje. Dit betekent dat de pen een gesloten vorm zal tekenen. Je hebt nu een vierhoek.
  • Zoals gezegd tekent het pengereedschap enkel een stroke. We kunnen ons gemaakt vierkant nu nog opvullen met een fill via de verfemmer. Geef onze getekende vierhoek een orange fill.
  • Dit is het resultaat
  • Teken onder deze figuur een curve. Dit doe je door met de pen de muisknop ingedrukt te houden en de muis naar boven of onder te slepen. Naar waar je sleept zal je curve beginnen. Wij kiezen hier voor naar boven te slepen.
  • Klik wat verder naar rechts opnieuw in het podium en hou de muisknop ingedrukt. Sleep je cursor naar onder en laat de muisknop los. Je krijgt nu een mooie curve.
  • Oefen in dit bestand verder met de pen-tool totdat je kan voorspellen hoe de curve getekend zal worden. Bekijk opnieuw de instructievideo als iets niet echt duidelijk zou zijn.
  • Sla je oefening op in je oefenmap met als naam: "Oef15.fla"

Oefening 16

  • Open oefening16.fla. Je ziet daar een curve getekend met de pen-tool.
  • Selecteer de pen-tool en klik op de curve. Deze veranderd in een groene kleur als je het goed geselecteerd hebt.
  • Ga met je cursos naar het hoogste puntje van elke boog en voeg hier een nieuw ankerpunt in. (cursor heeft een +-teken).
  • Ga vervolgens ga vervolgens met je cursus naar de oorspronkelijk getekende ankerpunten, en verander deze in hoekpunten. (cursor heeft een vinkje)
  • Verwijder het derde ankerpunt/hoekpunt (het einde van de eerste boog).
  • Resultaat tot hier toe:
  • Klik in het midden van de rechte lijn en voeg een nieuw ankerpunt toe.
  • Klik met je muis op het ankerpunt staan tot je opnieuw het vinkje aan je cursor krijgt. Klik en sleep nu met de muis naar beneden. Je krijgt dan dit resultaat.
  • Klik met je linkermuisknop op het vierde ankerpunt/hoekpunt terwijl je de Alt-knop ingedrukt houdt. Je ziet dan in plaats van je cursor een vinkje. Sleep je muis naar beneden en laat de muisknop dan los. Je hebt nu de raaklijnen van een bestaand ankerpunt veranderd. Dit kan heel handig zijn bij het tekenen van langere curven, of om kleine aanpassingen te maken. Je podium ziet er dan als volgt uit.
  • Sla je oefening op in je oefenmap met als naam: "Oef16.fla"