[FLASH] De Tools

a. De zwarte pijl

wordt gebruikt om:

a. selecties te maken:
- wanneer je één maal klikt op een lijn of vulling wordt deze geselecteerd
- een dubbelklik selecteert de hele figuur
- bij klikken en slepen wordt er een rechthoek getekend. Alles wat zich
volledig binnen deze rechthoek bevindt wordt geselecteerd.

b. vormen te manipuleren:
- wanneer je met de pijl bij een niet geselecteerde tekening komt, verandert het symbooltje onder de pijl van selectiekader in een lijn. Als je dan klikt kan je de vorm van de lijn manipuleren

c. om geselecteerde objecten te verslepen

Options

a. Magneet
Wordt aangetrokken door objecten.

b. Rechte en kromme lijn
wanneer een vectoriele vorm geselecteerd is kan je de lijnen ronder of rechter maken.



b. De witte pijl

wordt gebruikt om:

de punten van de paden van de vectoriele vormen te verplaatsen



c. De Rechte lijn

wordt gebruikt om:

Rechte lijnen te tekenen

Properties:
- kleur van de lijn kiezen
- lijndikte kiezen
- lijnsoort kiezen
- custom opent venster met nog meer specificatiemogelijkheden

d. De Lasso

wordt gebruikt om:

willekeurige selectievelden te tekenen. Alles wat binnen de getekende figuur valt, wordt geselecteerd.

e. Opties

a. magic wand tool en properties
b. teken uw selectieveld met rechte lijnen


f. De Pen

wordt gebruikt om:

via een pad een vectoriele vorm te tekenen

Properties:
- kleur van de lijn kiezen
- kleur van de vulling kiezen
- lijndikte kiezen
- lijnsoort kiezen
- custom opent venster met nog meer specificatiemogelijkheden


g. De Tekst
wordt gebruikt om:
teksten, dynamische tekstvelden en input-tekstvelden in te voegen.

Properties:
a. keuze tussen statische tekst, dynamische tekst of input tekst.

a.1 Statische tekst:
gewone tekst

a.2 dynamische tekst:
tekst die wordt opgeslagen in een variabele.

a.3 input tekst:
tekst die door de bezoeker van de site wordt ingevuld.

b. tekstspecificaties

c. tekst selecteerbaar maken / tekst opnemen als basic html / zwarte rand weergeven en witte achtergrond aan het tekstveld

d. mogelijkheid om een link te leggen naar een andere webpagina op een geselecteerd woord of een geselecteerd gedeelte van de tekst.


h. De Cirkel

wordt gebruikt om:
Ovalen te tekenen.


i. Het Vierkant

wordt gebruikt om:
Rechthoeken, veelhoeken of sterren te tekenen.
Als je voor de veelhoek kiest, kan je bij de opties knop in het properties paneel instellen of je een veelhoek of een ster wil tekenen + het aantal hoeken of punten instellen.


j. Het Potlood

wordt gebruikt om:
vrij lijnen te tekenen

Er zijn 3 opties:
- De getekende lijnen worden herlijd naar rechte lijnen (straighten)
- De getekende lijnen worden herlijd naar mooie curves (smooth)
- De lijnen woren niet aangepast (ink)


k. Het penseel

wordt gebruikt om:
vrij vullingen te tekenen

optie 1 bepaalt of je gewoon kleurt, een vulling kleurt, ergens achter kleurt, een selectie kleurt of binnen de lijnen kleurt.

optie 2 dient om een vulling te blokkeren, zodat je ze niet zomaar kan veranderen.

optie 3 bepaalt de grootte van je penseel

optie 4 de vorm van je penseel

optie 5 dient om met druk te tekenen


l. Het Transform tool

wordt gebruikt om:
objecten te vergroten, verkleinen, vervormen, roteren

Wanneer je een object selecteert (als de transform tool actief is) verschijnt er een witte cirkel. Hierrond kan je het object laten draaien. Als je dit punt verplaatst, zal het object dus anders roteren.

De zwarte vierkantjes zijn selecteerbaar en dienen om het object te vervormen. De vakjes op de hoeken vervormen het object zowel horizontaal als verticaal, de vakjes in het midden van een zijde vervormen het object maar in een richting.

Als je shift indrukt tijdens het vervormen, behoudt het object de juiste verhoudingen.
Als je shift indrukt tijdens het roteren, worden er sprongen gemaakt van 45°.


m. Het Fill Transform tool

wordt gebruikt om:
De vulling van een vectoriele tekening te veranderen van richting, schaal, etc.
Wordt alleen maar duidelijk bij een gradient vulling.


n. Het Inktflesje

wordt gebruikt om:
Een outline aan een vulling te geven, of een andere kleur aan een outline te geven.


o. De verfpot

wordt gebruikt om:
Een vulling aan een outline te geven, of om de kleur van een vulling te veranderen.


p. Het pipet

wordt gebruikt om:
Een kleur te selecteren.


q. De gom

wordt gebruikt om:
vectoriële tekeningen weg te gommen.

optie 1: dient om ofwel normaal, ofwel vullingen, ofwel lijnen, ofwel selecties, ofwel binnen de lijnen te gommen.

optie 2: dient om de volledige vulling weg te gommen.

optie 3: grootte + vorm van de gom.

r. Het handje

wordt gebruikt om:
Een ander deel van het werkblad te bekijken door met uw muis te klikken en te slepen (space bar toont ook het handje, als er geen tekst geselecteerd is).



s. Het vergrootglas

wordt gebruikt om:
In en uit te zoomen.
Zolang je de alt-toets van je toetsenbord indrukt, schakelt de zoom tool automatisch over naar de zoom-out.

[FLASH] Buttons

Voor deze tutorial ga ik ervan uit dat je de tekentools van flash onder de knie hebt.
Anders kan je deze hier bekijken

Ik ga twee werkwijzen uitleggen om een button te maken in flash. De eerste is de eenvoudigste, maar de tweede werkwijze wordt nu aangeraden om te gebruiken. Ik ga ze eerst even uitleggen en nadien zal ik de voor- en nadelen opsommen.

1e manier (verouderd)
Teken een rechthoek op de stage. Door op de rechthoek te dubbelklikken wordt hij volledig geselecteerd (ook de omlijning). Kies Modify - Convert to symbol of druk F8. Nu krijg je een popup scherm waar je kan kiezen uit 3 verschillende symbolen: graphic symbol, movieclip en button. Kies voor button en geef een naam (bv but1). Je zal zien dat op de stage rond je rechthoek een blauwe kader is verschenen. Dit is om aan te geven dat het object dat je geselecteerd hebt een symbool is.

Als je nu dubbelklikt op de rechthoek, zal je zien dat we in de button gaan. Als je naar de tijdlijn kijkt, zie je 4 frames: Up, Over, Down en Hit. De Up-frame wordt weergegeven als er niets met de button gebeurt. De Over-frame wordt weergegeven wanneer we met de muis over de button gaan. De Down-frame als we de linkermuisknop ingedrukt houden. De Hit-frame wordt nooit weergegeven, maar bepaalt welk deel van de button aanklikbaar is. Voeg een keyframe in bij de over-frame (rechtermuisknop op frame klikken en insert keyframe kiezen). Verander de kleur van de rechthoek op de over-frame. Voeg ook een keyframe in op de Down-frame. Verander ook daar de kleur van de rechthoek. Als je nu de movie test (Ctrl + Enter) zal je zien dat, wanneer je met de muis over de rechthoek gaat, deze van kleur verandert. Als je klikt op de button en de knop ingedrukt houdt, zie je dat de kleur opnieuw verandert. Nu keren we terug naar de stage (klikken op Scene 1 linksbovenaan om uw scherm) om een actie op onze button te plaatsen.

Open het action paneel (F9 op het toetsenbord). Nu moet je er op letten dat links bovenaan het action paneel "Actions - Button" staat. Als er "Actions - Frame" staat moet je 1 maal op de button klikken om hem te selecteren. Typ of kopieer volgende code in het action paneel:

on(release){
trace("button is ingedrukt en weer losgelaten");
}

Als je nu de movie test (Ctrl + Enter) en je klikt op de button zal je zien dat de tekst tussen aanhalingstekens getraced wordt.
Alle acties die tussen de {} geplaatst wordt zal worden uitgevoerd op het moment dat de rechtermuisknop wordt ingedrukt en losgelaten boven de button.

Je kan ook meerdere events tussen de () plaatsen:
on(release,releaseOutside){
trace("button is ingedrukt en weer losgelaten");
}

Dit zal er voor zorgen dat de acties tussen {} worden uitgevoerd op het moment dat de button wordt ingedrukt en weer losgelaten boven de button, en ook wanneer de muisknop wordt losgelaten naast de button.

Als je on( typt in het actiepaneel krijg je automatisch een dropdown lijst met de mogelijkheden die tussen de () kunnen gezet worden.

WOORDEN ALS BUTTON
Typ nu een woord op de stage bv FLASH. Selecteer dat woord en converteer dat naar een button (F8 op het toetsenbord). Dubbelklik op FLASH om in de button te gaan. Voeg een Keyframe in op de tweede frame (F6 of rechtermuisknop op de frame en kies insert keyframe)
Verander het woord van kleur. Als je nu de movie test zal je zien dat enkel de letters de button activeren. Bij een fijn lettertype is dit niet handig, daarom kan je best op de hit-frame een keyframe plaatsen en een rechthoek tekenen over de tekst. Deze rechthoek gaat nooit zichtbaar zijn, maar zorgt er wel voor dat de button gemakkelijk aanklikbaar is.


INVISIBLE BUTTON
Keer terug naar de stage (klikken op Scene 1 linksbovenaan om uw scherm) en teken een rechthoek. Converteer deze naar een button (F8) en dubbelklik om in de button te gaan. Selecteer de eerste frame door er 1 maal op te klikken. Sleep deze frame nu naar de hit-Frame. Op de eerste 3 frames staat er nu niets meer. Als je nu terugkeert naar de stage (klikken op Scene 1 linksbovenaan om uw scherm) zal je zien dat de rechthoek een transparante blauwe kleur heeft gekregen. Dit wil zeggen dat de button niet zichtbaar gaat zijn in de movie, maar wel aanklikbaar. Als je de movie test (Ctrl + Enter) zal je de button niet zien, maar wanneer je erover gaat, krijg je wel het handje.

2e manier (wordt nu aangeraden om te gebruiken)
Open een nieuw document. Teken een rechthoek op de stage, selecteer hem (dubbelklikken) en kies Modify - Convert to symbol of druk F8. Opgelet! kies nu niet voor button, maar voor movieclip in het popup window. Ook al gaan we een button maken, we vertrekken van een movieclip. Dubbelklik op de rechthoek om in de movieclip te gaan. Voeg een layer toe (klik op het + icoontje links onder de layers) en noem deze acties. De andere layer noem je rechthoek. Ga op de eerste frame staan van de acties-laag en typ:
stop();
Een movieclip wordt automatisch afgespeeld in flash. We moeten dus een stop zetten om te vermijden dat hij alle frames achter elkaar gaat afspelen.
Voeg nu een keyframe toe op frame 2 van de rechthoek-laag. Verander hier de rechthoek van kleur. Keer terug naar de stage (klikken op Scene 1 linksbovenaan om uw scherm).

Selecteer de movieclip die je gemaakt hebt door er 1 maal op te klikken. Onderaan in het properties paneel kan je een instance name geven (links). Deze naam zal ervoor zorgen dat je de movieclip kan aanspreken. Geef als instance name: button1. Zorg ervoor dat er geen leestekens of spaties in de naam staan (uitgezonderd _) of dat de naam niet enkel uit cijfers bestaat.

Voeg ook op de stage een 2de laag toe en noem deze ook acties. Selecteer de eerste frame van de laag acties en open het actie paneel. Voeg nu volgende code toe:

button1.onRollOver= function () {
this.gotoAndStop(2);
}
button1.onRollOut=button1.onDragOut= function () {
this.gotoAndStop(1);
}

Ook hier kan je verschillende acties tussen de {} plaatsen.

Voordeel (met dank aan Dauntless):

- Het is een beetje meer werk in het begin, maar als je nadien een actie moet toevoegen, of je moet iets aanpassen aan de code van de buttons, staat de code allemaal gegroepeerd op 1 frame. Je moet dus niet gaan zoeken naar de code op de buttons zelf.

- je kan handlers als functies definieren en deze toevoegen en verwijderen wanneer je wilt:
function foo()
{
}
this.onRelease = foo;
delete this.onRelease;
this.onRelease = foo;

- De scope van een onRelease is veel duidelijker dan die van een on(release)
- Je moet uiteindelijk tóch de goede versie leren
- AS in de vorm van on(release) is dus heel moeilijk te debuggen
- ...

Welkom

Welkom op mijn blog. Hier ga je tutorials vinden over flash en photoshop. Als er bijkomende vragen zijn over een bepaalde tutorial kan je deze posten in de comments.