Flash op de vak

dinsdag 22 juni 2010

Les 8

Sorry dames......de laatste bijeenkomst.

Eerst wil ik even stil staan bij het huiswerk..........wie wil er wat laten zien?

Iemand het aquarium gemaakt?

Vanavond gaan we nog even een paar leuke dingen doen met text.

Flash is uitermate geschikt voor tekst effecten.

Eerst kijken we naar de 3d tool.
-type een text en converteer die naar een movieclip
-maak op frame 60 een nieuw keyframe
-maak tussen frame 1 en 60 een motion tween
-ga op frame 15 staan en selecteer de 3d rotation tool, verander wat parameters
-Doet dit ook op frame 30 en frame 45
-Bekijk je movie.
Ik heb een aantal tutorials opgezocht, een paar doen we er samen......de rest is oefenwerk.

http://www.flashperfection.com/tutorials/HorseFly-Text-Presentation-93270.html
http://www.flashperfection.com/tutorials/Mask-Text-Effect-39547.html
http://www.graphicmania.net/creating-3d-text-animation-in-flash-cs4-by-rafiq-elmansy/
http://www.smartwebby.com/Flash/flash_animation_tutorials/text_effects_flash.asp

Tevens wil ik jullie nog even laten zien hoe je je filmpje het best kan distribueren.

dinsdag 15 juni 2010

Les 7

We hebben vorige week even snel gezien hoe je in Flash een eenvoudige website kunt maken.

Je gebruikt de knoppen om naar een frame te springen, op dat frame staat dan een nieuwe pagina.

Hoe doen we dat?
http://www.youtube.com/watch?v=Qn3mDxDqQ1o&feature=related

Een volledige beschrijving vindt je hier:
http://www.republicofcode.com/tutorials/flash/simple_website/

Vanavond wil ik even kijken naar een nieuwe animatie tool in CS4, namelijk de bone tool.

De bone tool kan worden gebruikt om IK (Inverse Kinematics) animaties te maken.
Inverse watte:
http://en.wikipedia.org/wiki/Inverse_kinematics

Nu moet wel gezegd worden dat de bone tool nog vrij beperkt is, maar je kan er wel hele leuke resultaten mee verkrijgen.

Hier wat filmpjes:
http://www.digitalcoding.com/video-tutorials/flash/Adobe-Flash-CS4-Bone-Tool-Tutorial.html

Nu even zelf doen:
http://www.kirupa.com/developer/flashcs4/using_bone_tool_shapes_pg1.htm

Als er nog tijd is, wil ik ook even naar de Deco tool kijken:
http://www.youtube.com/watch?v=JxrV7rWLOy0&feature=related

http://www.youtube.com/watch?v=z-gW4LqH1GM&feature=related

dinsdag 8 juni 2010

Les 6

Op de een of andere manier is er een les verdwenen.
Zo is de vorige les over ActionScript, gewoon weg????
Ik zal deze nog bijwerken, zodat het toch allemaal nog klopt.

We gaan vanavond een simpele site maken, ook om nog eens stil te staan bij actionscript.

Eerst maken we een preloader, zo'n balkje wat laat zien hoeveel data er nog geladen moet worden:
Preloader
http://www.republicofcode.com/tutorials/flash/preloader_bc/

Site
http://www.republicofcode.com/tutorials/flash/simple_website/

dinsdag 18 mei 2010

Les 4

Nu nog wat dingen over lagen en de library:

-Plaats objecten zoveel mogelijk op hun eigen laag, dat maakt bewerken veel makkelijker.
-Maak voor elk object wat je gaat besturen(klikbaar maken of annimeren) een symbool aan in de library. Dit houdt alles overzichtelijk en je kan zoveel instances maken als je wilt zonder de flash film zwaarder te maken. De library wordt niet mee gecompileerd in je film, dus maak je niet druk over hoe groot de library wel of niet wordt. Als je bij voorbeeld movie clip hebt, waar vervolgens een onderdeel zich anders gedraagd dan een ander.............omzetten naar symbool. Hiermee voorkom je ook dat er tweens in de library terechtkomen...........Die horen daar NIET.

-Als je een instance van een library object wilt gebruiken op de stage, sleep je hem uit de library op de stage en geeft hem een eigen tijdlijn..........et voila de instance gedraagt zich hetzelfde als het moeder object in de library.

Er zijn 3 soorten symbols:

-graphic de meest eenvoudige, gewoon een grafisch plaatje zonder bewegingen of interactieve eigenschappen.

-Button Hier maak je klikbare objecten mee

-Movie clip Het meest uitgebreide symbol. Heeft zijn eigen tijdlijn die onafhankelijk van de hoofdtijdlijn is. Deze tijdlijn kan weer een onbeperkt aantal tweens, lagen enz bevatten.

Ok we zijn nu redelijk bekend met de tekengereedschappen en de verschillende symbolen........op 1 symbool hebben we nog niet behandeld.

De button.

Als je iets klikbaar wil maken in Flash, moet je daar een button voor maken.
Een button heeft 4 staten:
Up De normale staat v.d. button
Over Als je er met de muis overheen gaat
Down Als de button is ingeklikt
Hit Het klikbare gedeelte v.d. button
Als je een actie aan een button wil hangen, doe je dat met actionscript.

Action script is de taal van Adobe voor internet en flashtoepassingen.

Wat is Actionscript:

http://en.wikipedia.org/wiki/ActionScript

Je kunt actionscript vrij makkelijk toevoegen middels het Actions window.

Basisintro in programmeren:
http://www.webklus.nl/cursus/lessen/les.php?viewles=1&page=8

Uitgewerkte button:
Ik ga er van uit dat je een ActionScript 2.0 file hebt gestart.
Ook heb je een kleine annimatie gemaakt, bijvoorbeeld bewegende bal

Invoegen nieuw symbool graphic ball, gr_bal.Teken een cirkel en vul hem met een radiale gradiant.
Invoegen nieuw symbool movieclip bewegende bal, mc_bewbal.
Maak een nieuwe laag bal en sleep gr_bal uit de library.
Maak een geleider laag, en plaats daarop een rechte lijn.

Neem je pijltjestool en ga naar de lijn toe, je pijltje verandert in een pijltje met een half rondje.
Maak nu een mooi parabool vorm.
Plaats op frame 1 de bal op de ene kant van de geleider.
Dubbelklik op frame 30, slecteer ook frame 30 van de geleider laag en voer een hoofdframe in.

Plaats nu de bal aan de andere kant van de geleider.
Klik op de bal laag en maak een Bewegings Tween.

Test de movieclip door op enter te drukken, je ziet nu een bal de baan van de geleider beschrijfen.

OK dat was deel 1, de annimatie, nu verder met de knop.

Invoegen nieuw symbool knop play, btn_play.
Selecteer de text tool en type het woord Play.
Kies het Boven frame en voeg nieuw hoofdframe in, verander de kleur van het woord.
Kies het Omlaag frame en voeg nieuw hoofdframe in, verander de kleur van het woord.
Kies het Actief frame en voeg nieuw hoofdframe in, geef het actieve gebied van de knop aan
De knop is nu af.

Nu gaan we de 2 samen brengen.

Ga naar de scene, als het goed is heb je nue een lege tijdslijn met een laag en een lege stage.
Noem de eerste laag Actions.
Ga op frame 1 van de Actions laag staan druk op de rechtermuisknop en kies handelingen.
Er komt een nieuw venster op, het Handelingen venster “Actions”
Aan de linkerkant maak je de submapjes;
“global function” en vervolgens “Timeline control” open.
Klik aan de linkerkant dubbel op het woord “Stop”. Dit Actionscript is klaar, je zet de film stop, zodat niet onmiddellijk de hele tijdslijn afgespeeld wordt.

Klik het Actionscript venster weg.
Maak een nieuwe laag, en noem die “knop”.
Ga op frame 1 van de laag “knop” staan en sleep de knop op de stage.
Neem de pijltjes toets, klik op de knop “Play”
Klik rechtermuisknop en selecteer “Handelingen”
Aan de linkerkant kies jen nu voor “on”, daarna “release”.
Tussen de accolades plaats je GotoAndPlay, en tussen de haakjes 30
Maak een nieuwe laag “bal” aan.
Ga op frame 30 staan en selecteer alle lagen

Voeg een nieuw hoofdframe in.
Plaats op de laag bal op frame 30 “mc_bal.”
Plaats op frame 60 op alle lagen een nieuw hoofdrame.
CTRL+ALT+ENTER
Voila, de bewegende bal.

dinsdag 27 april 2010

Les 3:

Weg gaan vanavond verder waar we verleden week gebleven waren:
Filmpje:
http://www.layersmagazine.com/motion-tools-in-flash-cs4-part-1.html

Wellicht ook nog:
http://www.layersmagazine.com/motion-tools-in-flash-cs4-part-1.html

Verder gaan we aan de hand v.d. handout een workshop doen....we gaan een speeltuin maken.

maandag 19 april 2010

Les 2

Jawel.....ik heb iemand gevonden die de vorige les in 5 minuten samenvat:

Hier in het kort nog eens de basistools:

	Dit is de Selection tool hier kan je alles mee selecteren en alles mee verslepen.
	Dit is de Subselection tool hiermee kan je deselecteren.
	Dit is de Line tool, hiermee kan je lijntjes maken.
	Dit is de Lasso tool hiermee kan je ook dingen selecteren maar dan na eigen keuze bijv een rondje.
	Dit is de Pen tool hier kan je kromme lijntjes mee maken.
	Dit is de Text tool hiermee kan je tekst tekst maken.
	Dit is de Oval tool hier kan je cirkels mee maken.
	Dit is de Rectangle tool hier mee kan je vierkanten mee maken maar als je er dubbel op klikt dan kan je de hoek grote ingeven.
	Dit is de Pencil tool hiermee kan je tekenen.
	Dit is de Brush tool hiermee kan je dikke lijnen mee maken.
	Dit is de Free Transform tool hiermee kan je de vorm veranderen van een figuur.
	Dit is de Fill Transform tool hiermee kan je in sommige gevallen de belichting veranderen.
	Dit is de Ink Bottle tool hier kan je lijnen mee inkleuren.
	Dit is de Paint Bucket tool met deze tool kan je de kleur veranderen van een figuur.
	Dit is de Eyedropper tool hier kan je een kleur mee copieeren.
	Dit is de Eraser tool dit spreekt voor zich de bekende gum.

	Hiermee kan je inzoomen.
	hiermee kan je de omlijningskleur veranderen en de vulkleur.

Vanavond gaan we kijken naar symbolen, library en instances.........om vervolgens onze eerste annimaties te maken.

http://help.adobe.com/nl_NL/Flash/10.0_UsingFlash/WSd60f23110762d6b883b18f10cb1fe1af6-7deea.html#WSd60f23110762d6b883b18f10cb1fe1af6-7deda

Animatie....... vindt plaats middels de timeline.

Naast de timeline vinden we de layers, oftewel de lagen:
Adobe Flash - Lagen

Flash kent net als Adobe Photoshop lagen. Het is dan ook handig als je in Flash aan de gang gaat om alles over meerdere lagen te verspreiden in verband met animaties etc. De lagen in Flash vindt je aan de bovenkant van het scherm.

Lagen

Door met je muis op een laag te klikken en door de linkermuisknop vast te houden sleep je een laag omhoog of omlaag en zet je ze in de gewenste volgorde. Een nieuwe laag maak je aan door met de rechtermuisknop op een laag te klikken en te kiezen voor "Insert layer".

Lagen

Daarbij heb je dan nog een aantal extra opties op de lagen zoals het onzichtbaar maken en het op slot zetten van een laag zodat deze niet te bewerken is. Hiervoor klik je op 1 van de puntjes onder het oog om de laag onzichtbaar te maken. Zodra je hierop klikt komt er een kruis tevoorschijn. Onder het slot symbool zet je de laag op slot.

Lagen

Opracht:
-Maak 2 lagen
-Geef de lagen een naam
-Plaats op elke laag een symbool
-Verander de hiearchie van de lagen

Zo.....genoeg over lagen.....terug naar de TimeLine:

Hier kunnen wij objecten laten bewegen, dit gebeurt dmv keyframes.

Eenvoudig gezegd worden keyframes gebruikt wanneer er op het object veranderingen gebeuren gedurende de tijd zoals grootte, kleur, rotatie,.. Frames gebruiken we wanneer we gebruik maken van een statisch object zoals een achtergrond die niet verandert.
Keyframe en frame tutorial:
http://bit.ly/aY0eqH

Animaties in flash, maak je met behulp van tweens. Er zijn 3 soorten tweens:

-Shape tween (vorm tween), deze wordt gebruikt om van de ene vorm naar de andere te veranderen.
-Motion tween (beweging tween), deze wordt gebruikt om objecten te laten bewegen(kleur vernaderingen, eases, opacity etc.).
-Classic tween (de "oude" bewegings tween), in sommige speciale gevallen wordt deze nog gebruikt.

Workshop Shape Tween:
http://help.adobe.com/nl_NL/Flash/10.0_UsingFlash/WS58E1E1A4-9296-4b75-AB74-D9D545892556.html

Workshop Motion Tween:
http://help.adobe.com/nl_NL/Flash/10.0_UsingFlash/WSDAFF999A-D539-4eae-92BC-473E243B527B.html

Filmpje:
http://www.layersmagazine.com/motion-tools-in-flash-cs4-part-1.html

Wellicht ook nog:
http://www.layersmagazine.com/motion-tools-in-flash-cs4-part-1.html

dinsdag 13 april 2010

Les 1

Les 1

Welkom bij de eerste flash les op de VAK.

Mijn naam is Jean Schouten, 39

Docent Flash, Webdesign, Web voor kinderen, electronische muziek en Gamemaker.
Verder ben ik gek van analoge synthesizers.......kijk maar eens op:
http://www.youtube.com/user/jenamu6?feature=mhw5

Mailadres:
jschouten@delft.nl

Genoeg over mij....wie zijn jullie?

-Graag even je naam en interesses.
-Heb je al eerder met flash gewerkt, zo ja wat heb je er mee gedaan.
-Waarom heb je voor deze cursus gekozen?

wat gaan we in deze cursus doen?:
Les1
INTRODUCTIE
(Wat is Flash, en wie zijn wij?)
1e kennismaking met het programma

Les2
TIMELINE
Het gebruik van de time line en onze eerste animaties.

SYMBOLS en de library

Les3
TEXT
Workshop text animatie

Les4

Workshop annimatie

Les5

Workshop annimatie

Les6

ACTIONSCRIPT

Alleen dat wat je nodig hebt om dingen klikbaar te maken.

Les7

Workshop site maken

Les8

Workshop site maken II

en distributie.