• De afgelopen dagen zijn er meerdere fora waarop bestaande accounts worden overgenomen door spammers. De gebruikersnamen en wachtwoorden zijn via een hack of een lek via andere sites buitgemaakt. Via have i been pwned? kan je controleren of jouw gegeven ook zijn buitgemaakt. Wijzig bij twijfel jouw wachtwoord of schakel de twee-staps-verificatie in.

Flash tutorial [ Deel 1 ] bewegende icon maken

Status
Niet open voor verdere reacties.

Erikk

Heeft veel posts
Lid geworden
18 dec 2005
Berichten
11.160
Waarderingsscore
279
[hand]Macromedia Flash. praktische tutorial.

In deze tutorial ga ik je laten zien wat je met macromedia flash kan doen en hoe je dit doet. Door een praktisch voorbeeld zal ik de meeste tools en functies van het programma gaan gebruiken en daardoor jou laten zien wat je met elke tool kan doen, hoe je een filmpje opzet en vervolgens opslaat in een bepaald formaat.

Erikk zei:
nou hoor ik je denken. kan je niet gewoon een tutorial maken waarbij je van elke tool uitlegd hoe die werkt en wat je ermee kan. NEE dat doe ik niet want dat zou veeeeeel te groot worden (dat wou ik eerst wel doen). als je graag een tutorial wil waar je alle basis tools en functinaliteiten leert dan moet je de tutorials op deze site maar eens downloaden:
http://www.freeflashtutorials.com/.
De gozer die het inspreekt is wel super irritant maar het is verder wel een goede tutorial.

1. wat gaan we maken.
in deze tutorial gaan we deze smilie namaken ---> :busted: in het groot. (lekker makkelijk maar alle elementen komen erin voor).

Naast deel1(dit topic) zullen er nog 2 komen zodat ik zoveel mogelijk opties van flash kan bespreken.
Na deze tutorials kan jij zelf ook met flash omgaan en weet je grote deels alle basis principes/tools van flash.
Succes!!

In deze tutorial zal ik zoveel mogelijk gebruik maken van afbeeldingen. De afbeeldingen worden gedownload van imagshack en kunnen daarom wat langer duren om te laden.
[/hand]
 
Laatst bewerkt door een moderator:
Macromedia flash. 2 [tutorial]

[hand]2. het gezicht maken

Oke we beginnen met het maken het gezicht. elke afbeelding die we gaan maken beginnen we op een nieuwe layer in de TIMELINE. we gaan de eerste layer 'gezicht' noemen.

-dubbelklik op de naam van de eerste layer. verander nu de naam in "Gezicht".
-klik enter. (de naam is nu verandert.)

naamloos7xv.jpg


nu gaan we het gezicht tekenen. klik in het eerste frame van de net aangemaakte layer.

kies vervolgens voor de 'circle tool' in de linker toolbar. maak in het middelste gedeelte nu een rondje door met je muisknop te slepen en los te laten. zoals je ziet zal er nu een rondje worden getekend in de vorm die jij aangaf. de kleuren van de cirkel zullen de standaard waarden hebben die jouw programma neemt. de kleuren kun je nog veranderen in het onderste "properties menu" selecteer hiervoor eerst het object waar je de kleuren van wilt veranderen.(bijvoorbeeld de binnenste kleur van de cirkel of de rand van de cirkel). in het properties menu kan je nog meer dingen veranderen zoals de lijndikte bijvoorbeeld.

verwijder nu weer de getekende cirkel van je scherm selecteer hiervoor in de toolbar de zwarte muis. en click and drag over de afbeelding heen. als alles geselecteerd is druk je op delete.

we gaan de cirkel nu weer opnieuw maken maar dan op een wat simpelere manier. (zorg ervoor dat je in de timeline weer de eerste frame in de 'gezicht' layer hebt geselecteerd.) selecteer weer het 'circle' tool. ga nu in dezelfde toolbar naar colors
colortool5aa.jpg
. selecteer hier voor 'lijn' de kleur zwart en voor 'opvulkleur' de kleur geel.
maak nu weer een cirkel op je werkgedeelte. maar houd nu tijdens het slepen de SHIFT knop ingedrukt. (je krijgt nu een perfecte cirkel.).
nu hebben we de vorm van het gezicht.
de cirkel die we nu hebben is geheel solid/plat van kleur. maar we willen eigenlijk een beetje diepte in het gezicht. daarom gaan we een relief toepassen op de kleur.

in het rechtermenu staat het menu 'color'. open die window door erop te klikken. klik vervolgens op het gele deel van het gezicht zodat het geselecteerd is (het color menu "rechts" gaat nu over het geselecteerde deel van het gezicht.). oke nu gaan we even wat aanpassingen maken in de instellingen van het gele deel van het gezicht via het COLOR menu.

doe het volgende:
-zorg ervoor dat het "vulkleur" is geselecteerd
-klik dan rachtbovenin op radial.
- de klueren zullen mischien nu weer terug springen naar zwart wit.
- er zijn nu in de gradiantbar twee pijltjes bijgekomen. als je hieropdrukt kun je de kleuren kiezen. kies hier geel en geel.
-klik nu 1maal op het rechter pijltje. en vervolgens op de kleur balk daarboven de kluer iets donkerder maken door het pijltje naar beneden te trekken.(ietjes).
- je hebt nu een geel gezicht met een gradient.

gradientmaken1px.jpg


de plaats en groote van de gradient kun je ook nog aanpassen. druk in de linker toolbar op de gradient knop
gradienttool5wc.jpg

en klik verolgens op het gele deel van het gezicht. je krijgt nu een soort van omheining die je kan verplaatsen en stretchen. zodat de gradient van het object veranderd.
gradienttoolgebruiken1nr.jpg
.


Volgende deel is het maken van de zonnebril.

als je nou de zonnebril bovenop het gele object zou gaan tekenen zou je de bedekte delen van het gele object gaan wissen. daarom gaan we op een nieuwe layer verder.
maak weer een nieuwe layer aan met de naam "zonnebril".
om een nieuwe layer moet je op de new layer knop drukken.
newlayer9ox.jpg

en selecteer de eerste frame van die layer. omdat we alleen op deze layer willen werken gaan we de "gezicht layer" opslot zetten. druk bij de "gezicht" layer op het slotje.
opslot4su.jpg


bij het maken van de zonnebril ga je kennis maken met het werken aan vector punten.
selecteer de vierkant uit de toolbar(kies voor lijn kleur geen kleur(het witte doorgestrreepte vakje) en voor vulkleur de kleur zwart). maak een vierkant (de zonnebril in de orginele smillie is rond dat weet ik maar op deze manier leer je de tools beter kennen) op de manier zoals hieronder.

zonnebril9gu.jpg


nu gaan we zonnebril vorm geven.
selecteer de zwarte pijl in de toolbar en ga dan met de muis baar de linker boven hoek van het zwarte vierkant. als je in de buurt komt van een hoek komt er een hoektekentje bij je muis te staan. dit betekend dat je de hoek dan kan veranderen(dit is een vectorpunt). versleep de hoek zoals hieronder.
hoekveranderen5kx.jpg

doe hetzelfde met de rechterboven hoek. zodat je een trapezem vormige vierhoek krijgt.

nu gaan we wat rondingen in het glas maken.
wanneer je met de muis (indien je de zwarte muis uit de linker toolbar hebt geselecteerd) over een zijde heen gaat komt er een half cirkel tekentje bij je muis, dit betekend dat je die zijde een ronde vorm kan geven
[/hand]

 
Laatst bewerkt door een moderator:
Macromedia flash. 3 [tutorial]

[hand]ga nu met je muis over de linker zijde van het zwarte vierkant totdat er een cirkel vormig tekentje bij je muis komt. als dat er komt houd je je muis ingedrukt en sleep je je muis in de linker richting zodat er een mooi rond vorm onstaat. speel hier maar een beetje mee totdat je een goede vorm krijgt.
doe hetzelfde met de andere zijde. totdat je ongeveer het zelfde hebt als hieronder.
rondingenbril0tk.jpg


nu gaan we een steel maken aan de linkerkant. selecteer de "lijn tool" uit de linker toolbar. maak en zorg dat de magneet optie is ingedrukt.(zie afbeeldingen hieronder).

lijntool--->
magneetenlijntool7oj.jpg
<---magneetoptie

trek nu een lijn vanaf het meest linker punt van de zonnen bril(de lijn snapt automatisch aan de zonnebrillijn) en de rand van het gezicht. totdat je hetzelfde als hieronder hebt.

linkerbrilmerlijn6qa.jpg


selecteer vervolgens alles op de zonnebril laag(zorg ervoor dat de zwarte muis in de linker toolbar is geselecteerd en dan click en drag over het gebied dat je wilt selecteren).
copyeer dat gebied door ctrl C. druk nu op ctrl shift V en het eerder gekopieerde deel is nu in precies dezelfde plek geplakt(je ziet dus niet echt verschil).(deselcteer het niet) als je nu op pijltjes toets naar rechts druk dan zie je het geplakte deel langzaam verscuiven(als je grotere stappen wilt verschuiven moet je de shift toets in houden). als je het geplakte deel genoeg hebt verschoven nar links dat je de twee delen goed apart ziet dan kun je hetvolgende gaan doen: ga in de bovenste (deselcteer het figuur niet) menubalk naar modify/transform/spiegel horizontaal. het geplakte figuur is nu horizontaal gespiegeld en voila je hebt je rechter deel van je zonnebril. zet het geplakte/gespiegelde deel in plaats(tegen de rechter deel van het gezicht) met de pijltjes toetsen. totdat je het onderste figuur hebt.

zonnebrilgespiegeld8tp.jpg


nu hebben we twee stukken van de zonnedril maar hebben we nog geen tussen/verbindingdeel. die gaan we nu maken. selecteer weer de "lijn tool" in de linker toolbar en zorg ervoor dat de magneet tool weer is aangezet. trek nu een lijn tussen de twee zonnebril stukken zoals hieronder.

zonnebrilgeheel6ls.jpg


oke nu gaan we de mond maken. selecteer de lijn tool in de linker toolbar. kies zwart voor de lijn kleur. maak een lijn onder de zonnebril. en geef hem een kleine ronding naar beneden. zoals hieronder:

metmond8pf.jpg

nou dat was het gezicht. volgende stap is het maken van een pet.![/hand]
 
Laatst bewerkt door een moderator:
Re: Macromedia flash. [tutorial]

[hand]3. DE pet maken.

We beginnen weer met het maken van een nieuwe layer in de timeline. dus maak maar een nieuwe layer aan en noem hem "pet". (je weet nu als het goed is hoe je een nieuwe layer moet aanmaken).

het belangrijkste wat je in dit deel gaat leren is het toevoegen van extra vector punten. verder ga je nog kennis maken met de fill tool.

we beginnen met het maken van een vierkant. selecteer de vierkant tool en trek een vierkant boven het gezicht. zoals hieronder:

vierkantvoorpet5dk.jpg

nu gaan we de kap maken. hiervoor gaan we een extra vector punt toevoegen in de onderste zijde van het vierkan. (Selecteer de zwarte muis in de rechter toolbar) ga met je muis naar het middelpunt van de onderste zijde van de vierkant. als je dicht genoeg op de lijn zit met je muis dan zou je een rondje als symbool moeten krijgen bij je muispointer. als je nu aan de lijn zou gaan trekken(niet doen nog) dan zou je de lijn een ronding geven tussen de twee vector punten waar hij tussen zit(de linker en rechter onderhoek). wat wij willen echter is een nieuw vector punt maken zodat we een extra hoe krijgen. dit kun je doen door (nog steeds met je muis op de midden van de onderste zijde van het vierkant gericht) op ctrl te drukken en dan met je muis omlaag te gaan. nu heb je een extra vector punt gemaakt en heb je een vijfhoek. zoals hieronder.:
newvectorpoint1cc.jpg

verplaats de linker en rechter punt naar de zijkant van het gezicht. en geef de twee zijde vervolgens een ronding totdat je het hebt als de afbeelding hieronder.:
krommelijnenpet5we.jpg

plaats de bovenste hoeke iets naar beneden en maak de bovenste en linker en rechter zijde iets rond zoals hieronder:
petomtrek8ye.jpg


nu hebben we de omtrek van de pet maar we willen ook een inhoud hebben. die gaan we nu maken.

trek een lijn van de onderste linker zijde de onderste rechterzijde. en maak vervolgens de lijn iets krom.(zorg hierbij dat de magneet optie in de linker toolbar is ingeschakeld) zoals hieronder:
petonderkant0ze.jpg

nu ga je iets leren over de fill tool. we gaan het kapje gedeelte van de pet inkelueren zodat hij zwart is. in de linker toolbar staan twee emmertjes(net als het emmertje in paint en photoshop). het linker emmertje is voor lijn fills. het rechter emmertje is voor het opvullen van ruimtes tussen lijn.(het emmertje vult geen delen die niet omringt zijn. in tegen stelling tot paint). dus als wij het kap gedeelte van de pet willen laten opvullen met zwart dan kan dat.

nou laten we dat eens doen. selecteer het rechter emmertje uit de linker toolbar. en kies voor fill kleur de kleur zwart.

ga nu met je muis boven het kap deel van de pet staan en klik met je muis. als je alles goed hebt gedaan (inclusief het maken van de lijn met de magneet optie ingeschakeld) dan zou de ruimte nu opgevuld moeten zijn met de kleur zwart. zoals hieronder:
kapzwart4ov.jpg


de rest van de pet ga ik even in vogel vlucht doen. omdat je de basis nou zou moeten kunnen en dus ook de rest van de pet.

maak een lijn(zwart) van net iets boven de linker onderzijde tot net iets boven de rechter onderhoek. geef deze lijn een kleine ronding omhoog. vul deze ruimte op met het rechter emmertje met de kleur licht blauw. vul de rest van de pet op met de kleur donker blauw.
totdat je het onderste hebt:
gehelepet5kp.jpg

nu moet die nog iets van een soort badge hebben op zijn pet. maak een donkergeel rondje met zwarte rand net iets in de lichtblauwe balk. zoals hieronder.:
metbadge3ok.jpg



nu hebben we de pet klaar en kunnen we verder met het alarm boven ze hoofd.
[/hand]





 
Laatst bewerkt door een moderator:
Re: Macromedia flash. [tutorial]

[hand]4. Het alarm maken.

in dit hoofdstuk gaan we het alarm op zijn hoofdmaken.

eerst maken we een nieuwe layer aan op de timeline. noem deze layer "alarm". en zetten we de andere lagen weer opslot.(eerder hebben we geleerd dat je dit doet door het slotje aantevinken op die layer).

dit keer gaan we de layer die we net aan hebben gemaakt achter een voorgaand aangemaakte layer plaatsen. namelijk achter de "pet layer". druk op de "alarm" layer en houd je muis ingedrukt. sleep nu de layer in de "pet" layer. nu staat de "alarm" layer onder de "pet" layer. hierdoor zal alles wat je op de "alarm" layer maakt achter de afbeeldingen op de "pet" komt te staan.

selecteer de "alarm layer" eerste frame. en maak een vierkant boven de pet(met een zwarte lijn en een rode fill color). zet de hoeken van dit vierkant op de lijnen van de pet. zodat het lijkt alsof het vierkant vast zit aan de pet. maak vervolgens de bovenstelijn iets rond. zoals hieronder:
alarmbasis3xb.jpg


nu gaan we nog een gradient toevoegen aan het rode gedeelte.(net als we dat met het gezicht hebben gedaan.)
klik op het rode gdeelte. en in het color menu in de rechter menus kies je voor fillcolor en voor liniar. dan krijg je weer die twee pijltjes (als je niet meer weet hoe dit werkt moet je even terug lezen in het gezicht maken hoofdstuk). kies bij de twee pijljes voor rood. en maak vervolgens de rechter pijl iets donkerder door het darkness optie erboven.
zodat het hierop lijkt.:
alarmgradient7rd.jpg


dat was het alarm gedeelte in het volgende hoofdstuk gaan we het animatie deel maken.
[/hand]
 
Laatst bewerkt door een moderator:
Re: Macromedia flash. [tutorial]

[hand]5. De animatie maken.

in dit hoofdstuk gaan we de animatie in de sirene maken. je zult gaan leren over het gebruik van masks, symbolen maken en een motion tween maken.

we beginnen weer met het maken van een nieuwe layer. verplaats deze layer onder de "pet layer" maar boven de "alarm" layer. noem de layer "licht mask". maak er vervolgens nog 1 aan en plaats deze onder de "licht mask" layer. doe vervolgens echter muis knop op de "licht mask " layer. en kie in het snelmenu voor de optie mask. de "licht mask" layer wordt nu een mask laag. en de layer die masked is is de "licht laag" dit is ook te zien op de manier hoe hij wordt weergegeven. namelijk zo:
mask7mc.jpg


Uitleg mask layer zei:
een mask layer zorgt ervoor dat alle afbeelding gedeeltes die buiten de mask afbeelding valt niet worden weergegeven. wanneer je dus op een gemaskerde laag een afbeelding plaatst die maar half in de mask valt. dan wordt dus maar de helft daadwerkelijk in je uiteindelijke afbeelding weergegeven.

dus we hebben nu een mask laag en een gemaskerde laag. (unlock de lagen, haal de sloten icons weg, de andere lagen mogen wel locked zijn).
kopier het rode deel van het alarm.
ga vervolgens naar de eerste frame van de "licht mask laag" en druk op CTRL SCHIFT V . door de schift knop in te houden tijdens het plakken wordt de afbeelding op precies de zelfde plek geplakt als vanwaar hij is gekopieerd. je hebt nu de afbeelding in de mask laag geplakt. deze afbeelding wordt nu gebruikt als mask voor de "licht layer". alle tekeningen op de "licht layer" die niet onder de net geplakte afbeelding zitten worden niet weergegeven.
lock nu alle lagen behalve dat van layer "licht".

nu gaan we het licht zelf maken. dit wordt het geanimeerde deel. het plaatje dat we zodadelijk gaan maken laten we straks van de linker kant naar de rechter kant lopen. waardoor het lijkt alsof de sirene afgaat.

maak een wit viekantje zonder lijn erom heen.(doe dit op de "licht layer" eerste frame). zodat je dit hebt.:
sirenelichtgroen0um.jpg
ik heb het deel dat wit moet zijn even groen gemaakt zodat je het kan zien.

selecteer het witte vlak dat je net hebt gemaakt. en druk vevolgens op F8. je krijgt nu een venster om een symbool van je object te maken. kies bij naam voor "licht" en bij type voor "graphic". nu heb je een symbool gemaakt. die je links onderin ook in je library zal zien staan.

het witte object is nu een symbool. nu kunnen we hiermee een motion tween maken op de timeline en kunnen we properties als alpha gaan veranderen.

eerst gaan we in de properties balk(onderin beeld) kiezen voor de optie color/alpha. dit is de doorzichtigheid van het symbool. kies voor 50 %.

nu gaan we dan echt beginnen aan de animatie zelf.

eerst gaan we het aantal frames instellen. selecteer van elke layer de 20ste frame. en klik op rechtermuisknop/insert frame. zoals je nu zult zien komen er allemaal frames bij in de timeline. elke frame representeert een moment in je filmpje. omdat we hebben gekozen voor een gewone frame neemt deze de inhoud van de eerste frame over. waardoor je op elke frame op 1 layer de inhoud hetzelfde hebt.
zoals hieronder:
framestimeline8jp.jpg

je kan nu de animatie gaan maken.
druk op het laatste frame van de "licht layer" doe hier rechtermuisknop/convert to keyframe.
een keyframe heeft zijn eigen instellingen en afbeelding. en neemt in tegenstelling tot een gewoon frame niet de instellingen en afbeeldingen van de vorige keyframe over.
(nog steeds de laatste frame van layer"licht" geselecteerd). selecteer het witte symbool en verplaats deze naar rechts naast het alarm. zoals hieronder:
lichtrechts0na.jpg

klik vervolgens op 1 van de frames (niet de buitenste keyframe) op de "licht layer" en doe rechtermuisknop/create motion tween.
je krijgt nu een pijl tussen de twee keyframes. je hebt nu een animatie gemaakt. druk maar eens op CTRL ENTER en kijk naar de animatie in werking.

als je de standaard instellingen hebt gebruikt die flash standaard gebruikt dan loopt het filpje eigenlijk te sloom. en zal de animatie te sloom gaan.
hiervoor gaan we de snelheid veranderen, de frame rate.
klik op :
framerate7at.jpg

en kies voor een frame rate van 20. probeer daarna nog eens CTRL ENTER en kijk of de animatie nu wel snel genoeg gaat. als hij hij niet snel genoeg gaat dan kun je hem nog sneller sneller totdat je tevreden bent.

dit was het einde van dit hoofdstuk. volgend hoofdstuk gaan we de afbeelding in verschillende formaten opslaan; gif en flash. maar eerst gaan we de afbeelding verkleinen zodat het op een echte smilie lijkt.
[/hand]


 
Laatst bewerkt door een moderator:
Re: Macromedia flash. [tutorial]

[hand]6. Afbeelding verkleinen tot smilie formaat
we hebben nu de animatie gemaakt op de afbeelding. maar de afbeelding die we nu hebben is wat aan de grote kant en het moet een smilie voorstellen dus dan hoort die klein te zijn.

voordat we de afbeelding gaan verkleinen tot de juiste maat gaan we eerst het tekenblad verkleinen. druk met de zwarte muis uit de toolbar geselecteerd op een blanco space binnen je werkruimte (1x klikken). en ga vervolgens naar de propertiesbalk een druk op de size knop. je krijgt nu een nieuw menu verander daar de dimensions naar 50 bij 50 en druk op OK. je tekenblad is nu verkleint naar 50 bij 50. je tekening blijft wel de zelfde grote. om de afbeelding te veranderen gaan we een andere tool gebruiken.

in flash heb je een tool (in de linker toolbar) waarmee je je afbeeldingen/objecten kan verkleinen. maar omdat je in 1 bepaald frame zit kan je niet zomaar het geheel verkleinen. als je dit namelijk zal doen dan maak je maar een deel van je animatie klein en het andere deel niet waardoor dus je animatie kapot gaat.

hiervoor heeft flash ook weer een optie. genaamd "onion skin" en "edit multiple frames". als je deze functies in schakelt dan kan je alle afbeeldingen op alle frames aanpassen.

schakel de functies in via de knoppen onder de timeline. zoals op de afbeelding hieronder:
onionskinby6.jpg

zorg er ook voor dat de haakjes die boven de frames zijn verschenen alle frames bedekken. verschuif de haakjes indien nodig.

Wanneer je een afbeelding verkleint dan verklein je alleen de vectorpunten. de lijn dikte blijft echter wel hetzelfde. als je een afbeelding verkleint kun je nadehand opzich wel weer de lijndikte verklienen maar dat is weer en heel gedoe.
binnen flash is hier een betere optie voor. selecteer alle frames en selecteer vervolgens de gehele afbeelding in je werkplek. ga vervolgens in het bovenste menu naar modify/shape/convert lines to fills. de lijnen in de afbeeldingen zijn nu geen lijnen meer maar ook fills oftewel vector gebasseerde opvullingen. en als je nu de afbeelding verkleint of vergroot dan stretched dit ook gewoon mee.


nu gaan we de afbeelding verkleinen.
selecteer alle frames doormiddel van CTRL-A. (klik eerst op 1 van de frames)

selecteer vervolgens de "free transform tool" uit de toolbar. --->
freetransformtoolhf8.jpg


en selecteer vervolgens alle afbeelding met de net geselecteerde tool. (let op!! doe dit wel door click en drag selecteren met de muis. niet met CTRL-A). nu alles is geselecteerd kan je via de vierkantjes de gehele afbeelding vekleinen. sleep het onderste rechter vierkantje van de selectie naar links boven (TIP: houdt shift ingedrukt terwijl je dit doet!!!!). verklein de afbeelding naar de grote van je tekenblad. en verplaats hem zodat je de juiste plek en groote hebt zoals hieronder:
smiliekleinyg2.jpg


je hebt nu de gehele animatie verkleint naar een smilie formaat. het enige wat nog rest om te doen is om je animatie op te slaan.
[/hand]

 
Laatst bewerkt door een moderator:
[hand]
8. De afbeelding opslaan.

Nu de animatie klaar is kan je hem gaan opslaan in een animatie formaat.

zoals je mischien al wel zelf hebt ondervonden kan je je project opslaan als een .fla formaat. door op bestand/opslaan als. te drukken en dan opslaan. Als je dan dat opgeslagen bestand opent dan open je dat project gewoon in macromedia flash en kan je verder gaan werken aan je project. je hebt nu echter nog niet je animatie opgeslagen.

om je animatie op te slaan moet je eerst nog bedenken in welk formaat je wilt gaana opslaan. je kan namelijk wel gewoon opslaan in .swf (het flash animatie formaat) opslaan. maar dan heeft je gebruiker flash player nodig om die afbeelding te bekijken en dat is voor een smilie niet heel handig.
je zou hem ook kunnen opslaan als .gif formaat. die is door iedereen te zien. alleen is een nadeel hiervan dat het een groter bestand wordt dan een .fla bestand omdat alle frames als aparte plaatjes worden opgeslagen. ook word de kwaliteit een stuk minder.

in deze oefening gaan we ons smilie project opslaan in beide formaten.

8.1. opslaan in .swf formaat.
klik met je muis in een blanco deel van je werkgedeelte. ga naar de properties balk onderin en klik op publish/settings. er opent een nieuw scherm met alle mogelijke formaten.

Ga naar tablad "formats".

zorg dat er alleen een vinkje staat bij de optie " flash (.swf) " je kan dan nog een directory kiezen waar je het wilt opslaan door op het mapje te drukken en dan om op opslaan te drukken (de afbeelding is dan nog niet opgeslagen alleen de directory is bepaald).

als je naar het tablad van "flash" gaat dan kan je nog wat opties instellen.

als alles naar wens is ingesteld druk je op de knop "publish". nu wordt je animatie opgeslagen in .swf formaat in de opgegeven directory.
druk vervolgens op OK en dan ben je klaar.

zoek je animatie op en speel hem eens af. als je alles goed hebt gedaan (of mischien wel beter dan mij) dan krijg je ongeveer dit:
http://img243.imageshack.us/my.php?image=politiesmilievf2.swf ( <--- niet te zien als je geen flash player hebt)

8.2. opslaan in .gif formaat.
dit werkt hetzelfde als bij de .swf formaat. alleen moet je nu kiezen voor .gif. ook is het nu wel raadzaam om de opties in het "GIF" tablad een aantal opties aan te passen. zoals bij playback moet je kiezen voor animatie. en dan weer op publish drukken.

zoek je animatie weer op en speel hem af in bijvoorbeeld je internet browser. je krijgt dan ongeveer de animatie als hieronder:
politiesmilieqi4.gif


8.3. Opslaan in een ander formaat.
behalve de 2 voorgaande formaten kan je in nog een aantal formaten opslaan. bijvoorbeeld in jpeg, PSD, quicktime movie of in een static gif afbeelding.

je zou dus ook gewoon een afbeelding kunnen maken in flash die maar bestaat uit 1 frame en die helemaal geen animatie bezit.



[/hand]
 
Laatst bewerkt door een moderator:
[hand]
Dit was deel 1 van de flash tutorial. je kent nu de basis principes van flash en kan nu ook de basis tools toepassen.

in de volgende delen ga ik nog een aantal technieken uitleggen waaronder meer motion tween technieken en meer over werken met frames en layers.
ook over animaties met letters erin. over buttons en ander symbols. en uiteindelijk nog over een een gehele animatie maken in 1 frame of meerdere animaties in een andere animatie.

[/hand]
 
De tutorial is nu klaar en als iemand nog opmerkingen heeft mogen die nu gepost worden. (*)

deze post mag worden verwijderd als de tut wordt overgeplaatst naar de juiste deel forum.





(*) *mod-edit* : Omdat we de Tuts sluiten kunnen evtle reacties op en/of vragen over deze tut, gesteld worden in het vragengedeelte van het forum, bij Grafische en Design (verwijs er dan even bij naar deze tutorial)
 
Laatst bewerkt door een moderator:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan