Anubis Creations

Flash site

Written by Administrator

Voor we beginnen proberen we eerst enkele leuke idee�n, en afbeeldingen te verzamelen voor hoe we onze site er wensen te laten uitzien. Ik heb gekozen voor een site met een width van 550px en een height van 400px.
Dus als we een leuke achtergrond vinden moeten we zorgen dat we hem kunnen importeren op een max grootte van 550px op 400px. Ook bijkomende afbeeldingen moet je zorgen dat deze evenredig zijn qua afmetingen.

We gaan van start.

1.
We openen Flash MX of hoger, en openen een nieuw bestand.
[Afbeelding: 1.png]

Waarschijnlijk zal je volgend schermpje zien verschijnen. Zien we dit niet kunnen we dit op volgende manieren oproepen. Onderaan de properties inspector openen door op het pijltje te klikken en dan dubbelklikken op Size.
Ofwel door bovenaan in onze balk Window-->Properties en dan dubbelklikken op size, of gewoon Ctrl+F3.
[Afbeelding: 2.png]

In dit scherm kunnen we verscheidene zaken van onze movie instellen:

- De Width ( breedte ) en Height ( hoogte ).

- De Background Color ( achtergrondkleur van de flashmovie( Deze kan later eventueel altijd ingesteld worden als transparent in je website)).
- De Frame Rate ( Het aantal Frames per seconde dat de flash movie zal afspelen (snelheid)). Deze is hier nu niet van toepassing daar we niet echt met animaties werken op �t momment.
- De Pixels. ( Hier kan je kiezen in welke afmetingen je wil werken ( net zoals bij Photoshop ))
Nadat de juiste instellingen ingegeven zijn drukken we op ok en zien we in het midden van ons scherm ons werkveld staan ( Dit word ook stage genoemd ).

2.
Vervolgens gaan we ervoor zorgen dat de nodige afbeeldingen geimporteerd worden in Flash. En doen dit op volgende manier.
[Afbeelding: 3.png]

We krijgen nu een scherm dat voor ieder van ons bekend zal zijn en zoeken naar de gewenste afbeeldingen en drukken dan op openen. Deze zijn nu geimporteerd in de library van flash, deze openen we op volgende manier.
Window-->Library, ofwel klikken we gewoon F11. We krijgen nu onderstaand schermpje, en merken dat de nodige afbeeldingen hierin staan. Als je nu een selecteert zal je de afbeelding zien verschijnen in het schermpje van deze library.
[Afbeelding: 4.png]

3.
Nu gaan we beginnen met het echte werk, we zien bovenaan de Timeline staan zoals onderstaand voorbeeld.
[Afbeelding: 5.png]

Dit is het scherm waar de controle van de ganse movie, of in dit geval site afspeelt.
We zien boven een soortgelijk oogje en slotje zoals in Photoshop ( deze hebben de zelfde functies )
Als we op het oogje klikken zal de geselecteerde Layer ( laag ) onzichtbaar zijn tijdens de bewerking, Het slotje ernaast zal de geselecteerde laag op slot gezet worden en zal je niet per ongeluk deze instellingen veranderen terwijl je een andere laag bewerkt. Het vierkant icoontje ernaast kan je kiezen tijdens een bewerking, en dan zal de geselecteerde inhoud als outline weergegeven worden ( de lagen krijgen hier allemaal hun eigen aparte kleurtje )
Dan aan de rechterzijde zien we een balk met witte en grijze vakjes, dit is onze timeline met verschillende frames.
Het liniaal geeft u een overzicht op welk frame u juist bezig bent.
Onderaan zien we nog icoontjes die ik later meer uitgebreid zal uitleggen, de twee belangrijkste op dit moment zijn het icoontje voor het toevoegen van een nieuwe laag

, en het schermpje dat je ziet met 12.0fps ( dit is de snelheid van de movie ( of frames per seconde die tevoren hebt ingesteld in de properties inspector).

4.
We gaan nu ons eerste layer ( waar je het zwarte vlak ziet met Layer 1 ) dubbelklikken en noemen dit Tekstveld, en selecteren daarna het eerste frame.
[Afbeelding: 7.png]

5.
we selecteren onze afbeelding in de library en slepen deze naar de gewenste plaats op de stage. Deze kunnen we na het plaatsen nog wat bij corrigeren door middel van onze pijltjes toetsen.
[Afbeelding: 8.png]

6.
We zetten deze laag even op slot door op het stipje te klikken ter hoogte van het slot en drukken nu op het icoon

om een nieuwe laag aan te brengen.
Deze noemen we Navigatie. En selecteren terug het eerste frame van deze layer.
[Afbeelding: 9.png]

Nu selecteren we de text tool vanuit onze toolbar.
[Afbeelding: 10.png]

En gaan nu op de gewenste plek de nodige teksten aan brengen voor de navigatie van de site waar we daarna de buttons van gaan maken. De instellingen voor het lettertype zullen te zien zijn onderaan in je properties inspector die zal openen zodra je de plaats selecteerd waar je wenst in te typen. De grootte van het lettertype kan je wijzigen door middel van de schuifregelaar.
[Afbeelding: 11.png]

In de hoek van het tekstveldje zie je een vierkantje, door deze te verslepen kan je uw tekstveld wat meer aanpassen naargelang de groote van de tekst. Wil je uw ingevoegde tekst een beetje verplaatsen dan selecteren we even onze arrow tool [Afbeelding: 13.png]

en dan kan je hem even op zijn gewenste plek zetten.
[Afbeelding: Flashsite12.png]

Dit proces herhalen we telkens tot we alle nodige teksten hebben voor de navigatie en krijgen dan ongeveer volgend vb.

Ziezo dat ziet er al een beetje als een site uit vind je niet?

7.
Wat we nu eerst gaan doen is de verschillende pagina's maken op het tekstveld.
We doen deze navigatie layer op slot en doen het slotje van het tekstveld even weg.
Selecteer nu terug frame 1 van het tekstveld en neem terug je Text tool.
Bovenaan de afbeelding die we als tekstveld gebruiken gaan we nu het woord Home zetten.
[Afbeelding: 14.png]

8.
Nu vervolens gaan we naar onze timeline en selecteer je op deze layer frame 10, en klikt met de rechter muisknop en kiest insert keyframe.
[Afbeelding: 15.png]

Je krijgt nu onderstaand vb.
[Afbeelding: 16.png]

U merkt eveneens dat nu enkel het tekstveld zichtbaar is , en de navigatie niet.
Dit komt omdat je enkel om frame 10 een keyframe zichtbaar hebt van de tekstlayer, en gaan we van de navigatielayer op layer 50 bv. Een gewoon keyframe plaatsen en dit door eerst de navigatie layer te selecteren en op frame 50 met de rechtermuis te klikken en insert frame te kiezen.
[Afbeelding: 17.png]

9.
We gaan terug naar onze tesktlayer en selecteren nu frame 10, dubbelklikken dan het tekstje home, en veranderen dit in about.
Wederom gaan we naar de timeline en klikken we rechts en kiezen zoals in 8. insert keyframe.
Selecteer frame 20, en dubbelklik op de tekst About. Deze veranderen we in Guestbook, dan op frame 30 een keyframe plaatsen en terug de tekst veranderen naar Contact.Dan een keyframe op frame 40 en verander naar Links. Nu juist nog een enkel keyframe op frame 50 plaatsen.
Nu krijg je dit.
[Afbeelding: 18.png]

10.
Wat we vervolgens eerst gaan doen is de 5 verschillende keyframes voorzien van een label ( dit moeten we doen zodat de actie die we in de buttons gaan verwerken straks verwijzen naar deze verschillende labels ( pagina�s ).
Dit doen we als volgd, we selecteren frame 1 van het tekstveld en in de properties inspectior geven we als naam in Home zoals onderaan het voorbeeld
[Afbeelding: 19.png]

Dit gebied heeft nu een labelnaam gekregen en je zal merken dat er nu een rood vlaggetje zal staan op frame1 met daarachter de naam van het label.
[Afbeelding: 20.png]

Dit gaan we nu doen voor elk keyframe, selecteer frame 10 en geef dit als labelnaam About, frame 20 Guestbook, frame 30 Contact, en als laatste frame 40 Links.
Je krijgt nu dit.
[Afbeelding: 21.png]

11.
Het enige dat we nu aan deze labels moeten toevoegen is een Stop action, zodat als de movie wordt afgespeeld hij niet zomaar naar het volgende label springt maar op deze pagina ( label ) zal blijven staan.
Hoe doen we dit??? Heel eenvoudig hoor.
We selecteren op frame 9 van het label home, plaatsen hier weer een keyframe zoals in 8. en openen ons action paneel. Dit kan door onder de properties inspector het actions paneel te openen of door window-->actions, of gewoon door F9 te drukken.
Wat we nu doen is aan de linker zijde dubbelklikken op het woordje stop ( deze zal dan gelijk aan de rechterzijde verschijnen in het tekstveld ).
[Afbeelding: 22.png]

Dit herhalen we op elk laatste frame van elk label. Je zal merken daar waar je een actionscript hebt geplaatst er een a tevoorschijn komt op de betreffende frame.
[Afbeelding: 23.png]

Zo de aparte pagina's zijn klaar. Nu de interactiviteit gaan maken ( Buttons )

12.
We zetten eerst onze layer van het tekstveld op slot en openen terug de layer van de navigatie.
We nemen de selection tool en klikken op het woordje Home. Je ziet een blauwe rand verscheinen rond dit woordje. Omdat dit gewoon nog een tekstje is moeten we er eerst een button van maken om deze te kunnen doen werken.
Dit doen we door te klikken op Insert-->Convert to symbol, of klikken F8. Er opent nu volgend schermpje.
[Afbeelding: 24.png]

We selecteren hier Button en geven als naam in Homebutton, en drukken op OK.
We zien dat er in het blauwe selectie veld van het woord Home nu een klein viziertje staat, dit wil zeggen dat het tekstveldje nu een symbool is geworden.
[Afbeelding: 26.png]

13.
We dubbelklikken nu dit sybool en komen dan boven in de timeline het volgende tegen.
[Afbeelding: 27.png]

We zijn nu even in de timeline van de Homebutton terecht gekomen.
Hier zien we dat we 4 frames hebben waar we een Up, Over, Down, en Hit state kunnen ingeven.
De Up state laten we hetzelfde en copieren even de frame in de Up state en plakken die in de Over state.
Dit doen we door rechts te klikken en Copy frames te nemen.
[Afbeelding: 28.png]

we gaan dan op de frame staan van de Over state en klikken terug rechts en kiezen nu Paste Frames.
We selecteren deze frame van de Over state en dubbelklikken op onze Home button, De tekst word nu terug veranderbaar, en kunnen dan de kleur van deze tekst wat aanpassen.
[Afbeelding: 29.png]

Als deze klaar is gaan terug even de Up frame copieren en deze past'n in de Down State.
Deze moeten we niet aanpassen op dit momment ( Als je wil mag je dit doen, maar raad het even af, omdat het anders iets te verwarrend gaat worden!!!).
Nu selecteren we de Hit state en zetten hier een Keyframe ( zie 8.)
Met de frame van deze hit state geselecteerd nemen we de Rectangle tool en kiezen een willekeurige kleur.
[Afbeelding: 30.png]

en maken een rechthoekje over het woordje Home ( Dit is dan het gebied dat zal reageren waneer de muiscursor over deze button zal gaan of wanneer er zal op geklikt worden ).
[Afbeelding: 32.png]

Deze button is normaal klaar buiten de nodige action script, maar die doen we straks.
Selecteer nu terug onder de timeline Scene_1 om de timeline van deze buttron te verlaten.
We herhalen deze handelingen vanaf 12. tot hier voor alle links ( maak er buttons van, en geef de nodige instellingen net zoals bij de Home button, maar geef ze allen een duidelijke naam van symbol )

14.
De buttons zijn klaar, nu de nodige actionscripts toevoegen om ze te navigeren naar de nodige pagina's.
Wat we nu doen is gewoon even de home aanklikken met onze selection tool, openen het action paneel en geven volgende instellingen in.
[Afbeelding: 33.png]

Dubbelklik op het woordje on in het scherm ernaast kan je dan keuzes maken en kiest de optie release.
[Afbeelding: 34.png]

Klik nu in de linker kolom op het woordje goto en geef rechts volgende instellingen mee.

[Afbeelding: 35.png]

Je ziet bij type dat je de keuze Frame label neemt omdat deze pagina's een label hebben meegekregen, en bij Frame neem je dan de keuze van de desbetreffende label die je moet hebben.

Deze acties zijn klaar.

Selecteer nu de volgende button en doe hier net hetzelfde voor de actionscript als met de Home button, maar kies hier voor Frame: About.
Dan de volgende buttons ook.
Sluit vervolgens het action paneel.

We gaan nu onze Site uittesten. En drukken hiervoor op Ctrl + return.
Als je een vb krijgt als dit, heb je zeer aandachtig gevolgd en zal voor u het maken van een eventuele Flash site geen problemen geven.

Sla uw site op en klik nu Bestand-->Publish, nu zal er een swf bestand gemaakt worden van uw site ( deze word gezet in de zelfde map.)

Commentaar

Alleen geregistreerde gebruikers mogen commentaar plaatsen!

Last Updated ( Tuesday, 09 June 2009 )