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