[FLASH] preloader

We gaan een preloader maken op een manier dat we deze voor elk project kunnen gebruiken met een minimum aan aanpassingen.

Eerst en vooral gaan we een container op de scene plaatsen, waar we onze site in kunnen inladen: Teken een vierkant op de stage en selecteer deze volledig. Zet om naar een movieclip en noem deze container. Geef hem ook onmiddellijk een instance name: container.

Extra info: De naam container is niet zomaar gekozen. In de “flashwereld” is dit een veelgebruikte naam om een movieclip aan te duiden waar men iets anders in inlaadt. Dit kunnen zowel foto’s als swf’s zijn.

Noem de laag waar de movieclip op staat ook container, zodat je weet op welke laag de container staat.

Dubbelklik op de container en delete het vierkant. Keer terug naar de scene. Je hebt nu een lege movieclip “container” waar we straks onze site zullen inladen. Het registratiepunt van deze movieclip zal de linkerbovenhoek van de site zijn. Hou hiermee rekening wanneer je de container positioneert op de stage.

Maak een nieuwe laag aan en noem deze actions. Nu gaan we eerst een movieclip loader aanmaken. Dit gebeurt op dezelfde manier als we een variabele aanmaken:

//maak een niewe MovieCliploader aan

var myMovieClipLoader:MovieClipLoader = new MovieClipLoader();

Extra info: de naam myMovieClipLoader is zelf gekozen, maar beschrijft wel goed wat het is. Ook deze manier van naamgeven is in de “flashwereld” algemeen aangenomen.

We gaan nu een listener creëren. Een listener is een object, dat we kunnen toevoegen aan de moviecliploader. De listener zal dan controleren wat de status is van de moviecliploader. Hiervoor hebben we verschillende functies ter beschikking: bv onLoadComplete(), onLoadInit(), onLoadProgress, ...

//maak een nieuwe Listener aan

var myListener:Object = new Object();

Extra info: ook hier is de naam zelfgekozen.

Nu gaan we de listener aan de de moviecliploader koppelen zodat de listener weet naar wie hij moet “luisteren”.

//koppel myListener aan myMovieClipLoader

myMovieClipLoader.addListener(myListener);

Dan gaan we een functie maken die wordt uitgevoerd op het moment dat de site ingeladen wordt. Deze functie zal elke keer uitgevoerd worden wanneer er vooruitgang is in de download.

//creëer hier de fuctie die moet uitgevoerd worden wanneer er vooruitgang is in de download.

myListener.onLoadProgress=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

{

}

We gaan deze functie even van ontleden:

myListener.onLoadProgress

Omdat we de myListener gekoppeld hebben aan de myMovieClipLoader zal de myListener in actie treden elke keer we iets inladen via de myMovieClipLoader.

De myListener gaat beginnen “luisteren” naar de status van het ingeladen object (foto of swf). Elke keer er vooruitgang is in de download gaat de onLoadProgress geactiveerd worden.

=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

We koppelen aan de onLoadProgress een functie, zodat deze functie kan uitgevoerd worden, wanneer de onLoadProgress geactiveerd wordt.

Tussen de haakjes gaan we de elementen definiëren die we in de functie gaan gebruiken.

Wanneer we iets inladen in onze container, kan het nuttig zijn als we onze container kunnen aanspreken. We kunnen dit doen via “container” omdat we de movieclip deze instance name gegeven hebben. Maar als we in de functie container gaan gebruiken als aanspreekpunt, kunnen we de functie alleen gebruiken als we iets inladen in de container mc. Daarom kunnen we beter tussen de haakjes definiëren, dat de movieclip waar we iets gaan inladen - in dit geval container – aangesproken wordt binnen de functie als mc.

Tussen de accolades gaan we dan de acties plaatsen die moeten uitgevoerd worden als er vooruitgang is in de download. Om dit even te testen plaatsen we tussen de accolades:

//deze code dient om te controleren of de download lukt

trace(mc + “ wordt geladen: Er is al “ + bytesLoaded + “ kb ingeladen van de “ + bytesTotal + “!”);

Als we nu de movie testen zal de movie nog altijd niet ingeladen worden omdat we nog nergens de echte download gestart hebben. Daarom voeren we volgende code toe:

//start hier de eigenlijke download

myMovieClipLoader.loadClip("site.swf","container");

Extra info: “site.swf” moet je vervangen door de naam van de site die je wil inladen.

We gebruiken dus de myMovieClipLoader om de site.swf in te laden in de container. Omdat we aan de myMovieClipLoader de myListener gekoppeld hebben, wordt de download geobserveerd door de myListener.onLoadProgress functie.

Nu moet je ervoor zorgen dat je deze preloader-file in dezelfde map bewaart als een site die je gemaakt hebt.

Het document van je preloader maak je best even groot als dat van je site, met hetzelfde aantal frames per seconde, dezelfde achtergrondkleur, ...

De container movieclip plaats je linksboven ((0,0).

Nu zou de site moeten ingeladen worden in de container. In het outputvenster zou zoiets moeten verschijnen:

_level0.container wordt geladen: Er is al 70625 kb ingeladen van de 81858!

_level0.container wordt geladen: Er is al 81858 kb ingeladen van de 81858!

Je ziet dat de mc in de code vervangen is door de instance name van de container. Dit zorgt ervoor dat wanneer we een tweede container zouden maken om iets anders in te laden, we dezelfde code kunnen gebruiken. We zouden alleen dit moeten toevoegen:

//start hier de eigenlijke download van de tweede swf

myMovieClipLoader.loadClip("site2.swf","container2");

Extra info: deze code moet je dus niet toevoegen, het is enkel een voorbeeld van hoe je twee swf-en zou kunnen inladen in twee verschillende containers in dezelfde movie.

Wanneer je je flashmovie test, is de site natuurlijk al ingeladen op je pc, want hij staat al in dezelfde map. Je kan de download gaan simuleren door een tweede maal op Ctrl + Enter te duwen. Dan gaat flash doen alsof de in te laden swf nog niet op je pc staat en hij ingeladen wordt. Op deze manier kan je ook locaal op je pc zien wat je bezoeker online zal te zien krijgen.

Als je deze simulatie wil instellen kan je dit doen door in de preview op view te klikken en dan op download settings. Hier kan je dan kiezen welke internetverbinding je wil simuleren.

De site wordt al ingeladen en we hebben een functie om het proces te bekijken. Nu moeten we deze functie nog koppelen aan een preloader. Als eerste preloader gaan we een dynamic tekstveld plaatsen op de stage. Een dynamic textfield omdat we uiteraard de inhoud van textfield willen veranderen. We gaan hier namelijk het percentage in weergeven dat al gedownload is.

Om dit te kunnen moeten we natuurlijk een instance name geven aan het dynamic textfield: preloader_text

In onze onLoadProgress functie voegen we tussen de accolades volgende code toe:

//bereken percentage

percentage=Math.round((bytesLoaded/bytesTotal)*100);

preloader_text.text=percentage + " % is ingeladen";

Eerst berekenen we het percentage dat al gedownload is. Dan gebruiken we het percentage om een zin te construeren die in het textfield wordt getoond.

Voor alle duidelijkheid even de volledige code die we tot nu toe hebben:

//maak een niewe MovieCliploader aan

var myMovieClipLoader:MovieClipLoader = new MovieClipLoader();

//maak een nieuwe Listener aan

var myListener:Object = new Object();

//koppel myListener aan myMovieClipLoader

myMovieClipLoader.addListener(myListener);

//creëer hier de fuctie die moet uitgevoerd worden wanneer er vooruitgang is in de download.

myListener.onLoadProgress=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

{

//deze code dient om te controleren of de download lukt

trace(mc + " wordt geladen: Er is al " + bytesLoaded + " kb ingeladen van de " + bytesTotal + "!");

//bereken percentage

percentage=Math.round((bytesLoaded/bytesTotal)*100);

preloader_text.text=percentage + " % is ingeladen";

}

//start hier de eigenlijke download

myMovieClipLoader.loadClip("site.swf","container");

Nu gaan we een animatie toevoegen die het reeds geladen deel visueel gaat voorstellen.

We gaan eigenlijk een animatie maken van 100 frames: 1 frame per ingeladen percentage.

Hiervoor teken ik een balk met outline op de stage (zie voorbeeld) op een nieuwe laag. Noem deze laag preloader_anim. Selecteer de rechthoek door erop te dubbelklikken (zodat de outline mee geselecteerd is). Converteer naar een movieclip en noem deze preloader_anim. Geef ook als instance name preloader_anim.

Dubbelklik op de rechthoek om in de movieclip binnen te gaan. Selecteer de vulling van de rechthoek. Cut (Ctrl+X) en maak een nieuwe laag, die je onderaan plaatst. Paste in place (Ctrl + Shift + X) en noem deze laag vulling. De andere noem je outline.

Plaats een keyframe op frame 100 op de vulling laag en plaats een frame op frame 100 van de outline laag.

Op de eerste frame van de vulling laag selecteer je de vulling. Duw deze met de transform tool plat tot een smalle lijn aan de linkerkant van de outline.

Selecteer nu de eerste frame en kies in het propertiespaneel voor shape tween.

Voeg een laag actions toe en plaats een stop op de eerste frame.

Keer terug naar de scene.

In de onLoadProgress function accolades plaatsen we onder de code die er al in staat:

//zet de animatie op de frame die hoort bij het reeds gedownloade percentage

preloader_anim.gotoAndStop(percentage);

In deze movieclip kan je eender welke animatie van 100 frames gebruiken als preloader voor je site.

Dan moeten we natuurlijk nog de actie toevoegen die ervoor zorgt dat je iets kan uitvoeren op het moment dat je site gedownload is.

//creëer hier de functie die moet uitgevoerd worden wanneer een element is ingeladen via de myMovieClipLoader

myListener.onLoadComplete=function()

{

//dit kan eender welke actie zijn die je wil uitvoeren op het moment dat je site is ingeladen.

gotoAndStop(2);

}

Voor alle duidelijkheid nog één keer alle code:

//gebruikte variabelen:

var percentage:Number = new Number();

//maak een niewe MovieCliploader aan

var myMovieClipLoader:MovieClipLoader = new MovieClipLoader();

//maak een nieuwe Listener aan

var myListener:Object = new Object();

//koppel myListener aan myMovieClipLoader

myMovieClipLoader.addListener(myListener);

//creëer hier de fuctie die moet uitgevoerd worden wanneer er vooruitgang is in de download.

myListener.onLoadProgress=function(mc:MovieClip,bytesLoaded:Number,bytesTotal:Number)

{

//deze code dient om te controleren of de download lukt

trace(mc + " wordt geladen: Er is al " + bytesLoaded + " kb ingeladen van de " + bytesTotal + "!");

//bereken percentage

percentage=Math.round((bytesLoaded/bytesTotal)*100);

preloader_text.text=percentage + " % is ingeladen";

//zet de animatie op de frame die hoort bij het reeds gedownloade percentage

preloader_anim.gotoAndStop(percentage);

}

//creëer hier de functie die moet uitgevoerd worden wanneer een element is ingeladen via de myMovieClipLoader

myListener.onLoadComplete=function()

{

//dit kan eender welke actie zijn die je wil uitvoeren op het moment dat je site is ingeladen.

gotoAndStop(2);

}

//start hier de eigenlijke download

myMovieClipLoader.loadClip("site.swf","container");

[FLASH] Masking layers

- Open een nieuw document.

- Importeer een foto op de eerste frame.

- Voeg een frame toe op frame 20.

- Voeg een layer toe boven de layer met de foto en noem deze mask.

- Op de eerste frame van deze layer teken je een rechthoek die de hele foto bedekt.

- Voeg een keyframe toe op layer 20

- Op de eerste frame van de mask layer transformeer je de rechthoek tot een platte balk die

je boven de foto plaatst

- Klik op de eerste frame van de mask layer en kies onderaan in het properties paneel voor

shape tween.

- Klik met de rechtermuisknop op de mask layer en kies mask in de drop down menu.

- Je zal zien dat de onderliggend layer automatisch masked layer wordt.

- Test de movie (control - test movie in het menu of ctrl + enter op het toetsenbord). De delen

die gekleurd worden op de mask layer worden weergegeven op de masked layer.

- Je kan de animatie ook vervangen door tekst en bv. wolken op de masked layer laten

bewegen.

- Tip: In een masker layer gebruik je best geen omlijning voor je figuren, alleen maar

vullingen.

Toepassing:

- Open een nieuw document

- Importeer een foto op frame 1

- Voeg een layer toe en noem deze mask

- Teken een cirkel op deze nieuwe layer

- Selecteer de cirkel door erop te dubbelklikken

- Zet de cirkel om naar een movieclip ((F8 of Convert-to-symbol in het modify menu) in

het popup window geef je de naam mask + let er op dat het registratiepunt in het

midden staat

- Geef de movieclip de instance name cirkel

- Klik met de rechtermuisknop op de layer mask (zorg ervoor dat deze layer boven de andere ligt) en kies mask in het drop down menu.

- Voeg nu een layer toe en noem deze actions.

- Klik op de eerste frame in de action layer en voeg de volgende acties toe:

cirkel._x=_xmouse;

cirkel._y=_ymouse;

Mouse.hide();

- Voeg een keyframe in op frame 2 van de action layer

- Op deze frame plaats je de volgende actie: gotoAndPlay(1);

[FLASH] shape tweening

- Teken een cirkel op de tijdlijn

- Plaats een keyframe op frame 40

- Delete de cirkel op deze keyframe en teken in de plaats een vierkant

- Klik op de eerste keyframe en selecteer onderaan in het properties panel bij de optie tween: shape

- Test de movie

- Als alles goed verloopt verandert de cirkel in het vierkant op een mooie manier

- Als we de animatie willen bijsturen kan je gebruik maken van shape hints

- Deze plaats je op de eerste keyframe en worden automatisch op de volgende keyframe van de shape tween toegevoegd (klik op modify – shape - add shape hint)

- Je zal zien dat er een rood cirkeltje met een a in verschijnt

- Dit plaats je op de rand van de cirkel

- Op de volgende frame plaats je het rode cirkeltje aan de andere kant op het vierkant

Je zal zien dat de animatie anders verloopt indien je het rode cirkeltje verplaatst, we kunnen de animatie nu gaan controleren.

[FLASH] dynamische navigatie

Waarover gaat deze tutorial juist:
We gaan een navigatie maken, die ervoor zorgt dat, wanneer er op een button gedrukt wordt, een outro wordt afgespeeld. Als de outro klaar is, gaan we pas naar de nieuwe pagina.

Het principe:
Om dit te kunnen bereiken gaan we op het moment dat we een button aanklikken dus niet onmiddellijk naar de juiste pagina gaan, maar gaan we in een variabele opslaan welke button er nu juist geklikt is. Als dat gebeurt is, gaan we de "outro" van de huidige pagina laten afspelen. Als de outro klaar is, gaan we naar de nieuwe pagina gaan. Dit doen we door te kijken welke pagina is opgeslagen in de variabele.

Aan de slag:
Eerst gaan we onze navigatie maken. Verander de naam van layer 1 in navigatie (dubbelklikken op de naam van de layer). Teken hierop een rechthoek. Dubbelklik in het midden van het vlak om hem volledig te selecteren (inclusief de omlijning). Kies in het menu modify - convert to symbol (of druk F8 op het toetsenbord). In de popup die nu verschijnt kies je voor movieclip (Als je meer uitleg wilt waarom we hier geen button gebruiken verwijs ik je door naar deze tutorial). Als naam geef je button_nav en klik ok.

Selecteer de movieclip en geef hem een instance name, bv button1 (dit kan je doen onderaan het scherm in het propertiespaneel). Selecteer de movieclip. Druk nu Alt in op het toetsenbord en sleep nu de movieclip naar beneden. Als je nu je muis loslaat voor je de Alt-toets loslaat zal je zien dat je een kopie hebt van je movieclip. Selecteer de kopie en verander de instance name naar button2. Dit herhaal tot je je gewenst aantal buttons hebt. Met de Align tool kan je alle buttons mooi op een rijtje zetten en op dezelfde afstand van elkaar (let erop dat to stage uitgevinkt is). Als de align tool niet op je scherm te zien is, kan je deze openen in het menu window - design panels - align.

Maak nu een nieuwe layer aan die je button tekst noemt. Hierop plaats je boven elke button de juiste tekst: home, pagina 1, pagina 2, ....

Maak nog een nieuwe laag aan en noem deze actions (deze plaats je best altijd bovenaan). Op de eerste frame plaats je volgende acties:

button1.onPress=function(){
welkepagina="home";
animated_pages.play();
}

button2.onPress=function(){
welkepagina="pagina1";
animated_pages.play();
}

button3.onPress=function(){
welkepagina="pagina2";
animated_pages.play();
}

...

Maak nu een nieuwe layer aan en noem deze animated pages en plaats deze onderaan.
Teken hierop een rechthoek.
Converteer deze rechthoek naar een movieclip en noem deze pages (F8 op het toetsenbord of modify - convert to symbol). Geef deze ook een instance name pages (selecteer de mc en onderaan je scherm in het properties paneel kan je aan de linkerkant een instance name geven aan je mc).
Converteer deze movieclip nog een keer naar een movieclip en noem deze animated_pages.
Geef ook deze mc een instance name: animated_pages.

Dubbelklik 1 x op de movieclip zodat je in de mc animated_pages zit (opgelet: niet 2 x dubbelklikken, want dan zit je in de mc pages). Hier gaan we de animaties maken (een intro-animatie en een outro-animatie). We beginnen natuurlijk met de intro animatie.

Plaats een keyframe op frame 40. Op frame 1 zet je het vierkant links van de stage ( in de grijze achtergrond dus). Klik op frame 1 in de tijdlijn. Nu kan je onderaan je scherm in het propertiespaneel een motion tween aanmaken. Er staat tween met daarachter een drop down menu. Kies daar motion tween.
Op frame 80 plaats je ook een keyframe. Daar plaats je het vierkant rechts van de stage.
Op frame 40 maak je ook een motion tween aan.

Voeg nu een nieuwe layer toe en noem deze actions.
Plaats op frame 40 een keyframe en dan deze code:

stop();

Op frame 80 plaats je een keyframe en deze code:

pages.gotoAndStop(_root.welkepagina);

Deze laatste code gaan we even ontleden:

pages.gotoAndStop:
pages is de instance name van de pages movieclip. we gaan dus de tijdlijn aansturen van de pages movieclip met instance name pages.
gotoAndStop zal er dus voor zorgen dat de tijdlijn van de pages movieclip naar een bepaalde frame gaat en daar stopt.

(_root.welkepagina):
_root zorgt ervoor dat we gaan kijken naar iets dat buiten de movieclip staat, meer bepaald op de stage. Als er op een button wordt geklikt, wordt er een variabele aangemaakt. Deze bevindt zich op de stage, dus moeten we daar dan ook de informatie gaan ophalen. Ik ga hierover nog een tutorial schrijven (paden in flash). Dus als je het niet goed begrijpt, kom later nog eens kijken op deze blog of zoek even in google naar paden + flash...
welkepagina is een variabele. In een variabele kan je een waarde opslaan. Op de eerste button die we aangemaakt hadden, gaven we de waarde "home".
Eigenlijk staat er dus: "tijdlijn van movieclip pages: ga naar de frame met label home en stop daar."
Afhankelijk van welke button laatst aangeklikt is, zal de movieclip pages naar een andere frame springen. Met dezelfde code bereiken we dus een ander resultaat.

Voor we dit kunnen testen moeten we eerst nog de pagina's aanmaken in de movieclip pages + de labels toevoegen. dubelklik dus op de movieclip pages zodat je in de movieclip gaat. Links boven de tijdlijn moet nu staat: scene 1 - animated_pages - pages
Voeg een keyframe toe op frame 10. Delete het vierkant op frame 10 en teken een cirkel.
Voeg een layer toe en noem deze labels. Selecteer de eerste frame van deze layer en in het properties paneel kan je nu een label name toevoegen. Typ daar home. Op frame 10 van deze layer plaats je een keyframe en vul je pagina1 in bij frame label.
Maak nu een 3de layer aan die je actions noemt. Op de eerste frame van deze layer plaats je een stop(); action.

[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.