Flash
editie 2007-2008
rd
Inhoud Hoofdstuk 1 Inleiding ........................................................................................................... 5 Afbeeldingen in flash. ....................................................................................................... 5 1.1.1
Bitmap ................................................................................................................. 5
1.1.2
Vector afbeelding ................................................................................................. 6
HOOFDSTUK 2 DE WERKOMGEVING ....................................................................................... 8 2.1 Het menu ..................................................................................................................... 8 2.2 Toolbox ....................................................................................................................... 9 2.3 time line ...................................................................................................................... 9 2.4 Stage ..........................................................................................................................10 2.5 property inspector .......................................................................................................10 2.6 Wat men dient te onthouden .......................................................................................11 Hoofdstuk 3 Tool panel ........................................................................................................12 3.1 selecteren van objecten ...............................................................................................12 3.2 subselect tool ..............................................................................................................12 3.3 line tool ......................................................................................................................12 3.4 pen tool ......................................................................................................................13 3.5 text tool ......................................................................................................................13 3.5.1 verschillende soorten textvakken .............................................................................14 3.5.2 tips voor het werken met de tekst tool .....................................................................14 3.6 arrow tool ...................................................................................................................14 3.6.1 objecten selecteren ..................................................................................................14 3.6.2 object van vorm veranderen .....................................................................................15
2
rd
3.7 de flash manier van tekenen .......................................................................................15 Hoofdstuk 4 Kleuren In Flash ..............................................................................................16 4.1 solid............................................................................................................................16 4.2 gradient ......................................................................................................................18 4.3 Tekst en kleuren .........................................................................................................18 Hoofdstuk 5 Beweging is gezond .........................................................................................19 5.1 hoe laten we iets bewegen op ons beeld ......................................................................19 5.1.1 algemeenheden ........................................................................................................19 5.1.2 in het begin…. .........................................................................................................20 5.1.3 Tweening(Motion) ...................................................................................................20 5.1.4 opmerkingen in verband met motion tweening ........................................................21 Hoofdstuk 6 Motion Guide ...................................................................................................24 6.1 wat is een motion guide ..............................................................................................24 6.2 hoe werkt dat ..............................................................................................................24 Hoofdstuk 7 Masking ...........................................................................................................25 7.1 wat is masking ............................................................................................................25 7.2 werkwijze ...................................................................................................................25 7.3 de tekst blijft zichtbaar (uitbreiding). ........................................................................26 7.4 volglicht effect ...........................................................................................................26 Hoofdstuk 8 Shape Tweening...............................................................................................27 8.1 Werkwijze ..................................................................................................................27 8.2 opmerkingen bij shape tweening .................................................................................27 8.3 Woorden in shape tweening ........................................................................................28 8.4 easing .........................................................................................................................29
3
rd
8.5 blend ..........................................................................................................................29 8.5 kleuren .......................................................................................................................29 8.6 Woorden .....................................................................................................................29 Hoofdstuk 9 Knoppen ..........................................................................................................30 9.1 Eenvoudige knop ........................................................................................................30 9.1.1 begin fase ................................................................................................................30 9.1.2 knoppen op de scene plaatsen ..................................................................................31 9.2 Knop met tekst ...........................................................................................................31 9.2.1 werkwijze ................................................................................................................31 9.3 toestand Hit ................................................................................................................32 9.4 eerder gemaakte knoppen veranderen. ........................................................................32 9.5 een knop met geluid ...................................................................................................33 Hoofdstuk 10 Action Scripts ................................................................................................34 10.1 Types van scripts ......................................................................................................34 10.2 het action panel ........................................................................................................34 Hoofdstuk 11 Publiceren van ons werk ................................................................................36 11.1 Formaten ..................................................................................................................36 11.2 tabblad flash .............................................................................................................37 11.3 Tabblad HTML .........................................................................................................38
4
rd
Hoofdstuk 1 Inleiding Als gebruiker van een computer, en wie is dat niet in deze tijd, kent u zeker het gebruik van Internet. Uit u vorige studies blijkt dat voor het maken van deze pagina’s welke gebruikt worden op Internet, men een speciale taal nodig heeft, HTML. Het spijtige van deze HTML is echter dat ze gebukt gaat onder nog wat beperkingen. Het is uitstekend geschikt tot het maken van statische webpagina’s, het leggen van linken tussen deze pagina’s, tabellen, layers en nog een paar andere mogelijkheden. Het moment echter dat u dynamische pagina’s wil ontwerpen zakt het kaartenhuisje in elkaar. De meest eenvoudige animatie is echter niet mogelijk in HTML en dan spreken we nog niet van het weergeven van animatie videobeelden of geluid en veelkleurige actie knoppen. Als een ontwerper pagina’s wil tonen die niet kunnen gelezen worden door HTML maakt hij gebruik van bepaalde plug-in om de browser een beetje aan te passen en eventueel die bijkomende mogelijkheden te geven. Zo is het bijvoorbeeld mogelijk om door plug-in een pdf bestand te lezen in HTML of zelfs dynamisch is te laten verschijnen. Om dynamische pagina’s te maken zullen wij gebruik maken van macromedia flash. Macromedia, nu samen in de Adobe groep, is een firma was en is 1 van de hoofdspelers in het maken van webpagina’s. men denkt maar aan Dreamweaver, Firefox en zo verder. Flash is een community driver. Dat wil zeggen dat vele programma makers tips en trucs kunnen uitwisselen. Eén van de grote pijlers in flash is het gebruik van vector tekeningen (vector graphics). Daar zult u het nut nog wel van ondervinden.
Afbeeldingen in flash. 1.1.1 Bitmap We kunnen stellen dat er twee soorten grafische types bestaan. Namelijk vectors en bitmaps. Bitmaps zijn de meest voorkomende tekeningen en zijn om zo te zeggen de huis tuin en keuken gebruik. Een bitmap die werkt met pixels. In de lessen pc technieken zullen we zien dat een beeldscherm opgemaakt wordt door pixels. Deze zijn opgemaakt in rijen en kolommen. Al deze pixels te samen vormen het uiteindelijk beeld. Als u uw computer ingesteld hebt u uw beeldscherm een bepaalde grootte gegeven bijvoorbeeld 1020 x 800. Dat in feite is de grote van het raster van uw pixels. Een bitmap houdt nu bij op welke plaats een pixels staat en welke kleur hij heeft. Dus in feite weet hij dat er op plaats 830x200 een pixel staat die rood is. En op een andere plaats ik zeg maar zoiets 1001 x 200 een gele. Zoals u wel begrijp is een beeld mooier hoe beter de scherpte is
5
rd
van het beeld. Natuurlijk is dat door de leugenfactor van ons oog, maar bekijk maar een foto op het scherm hoe scherper hij is hoe beter hij is. Daarom is het belangrijk dat we veel pixels gebruiken. Vroeger was de standaard van een beeldscherm 800 x 600. Nu komen we al aan 1280 x 1024. Dus als we uitreken is het aantal pixels van 480000 naar 1310720 gegaan. Dus als we nu op ieder knooppunt een pixel beschrijven en wetende dat iedere beschrijving een grote heeft van 8 bit + 8 bit we een serieuze bandbreedte zullen beslaan per foto.
1.1.2 Vector afbeelding In tegenstelling tot bovenstaande zullen we in deze opstelling niet pixel per pixel van een tekening opslaan. Een vector tekening bevat enkel een omschrijving van de figuur. Dit bestandje zal enkel vertellen hoe een figuur in elkaar zit en het is aan de computer die figuur te tekenen. Nemen we bijvoorbeeld eens een cirkel. met bitmap zouden we hebben: Rij1 pixel1x1 is wit pixel2x1 is wit pixel3x1 is wit dit tot dat we pixel 320 x1 bereiken Rij2 pixel 1x2 is wit pixel 2x2 is wit en zo verder tot we gans de tekening hebben Met vector zouden we hebben: Circle(200px) Fill Color: Gradient Gradient Type: Radial Colors: White Black line Color: None U ziet de grootte van het bestand is zeer klein ten opzichte van onze bitmap. Nog en voordeel van deze is de gemakkelijke schaalbaarheid. Omdat de computer een figuur zal ontwerpen volgens onze beschrijving, is het makelijker nauwkeurige figuren te maken
6
rd
De twee bovenstaande cirkels zullen hoewel de ene het dubbele van de ander is maar dezelfde bestandsgrootte hebben. Als we dat echter in bitmap proberen zal men bemerken dat de grootte van het bestand merkelijk groter is. Er is echter 1 adertje namelijk bitmap is wel aan te raden voor het tonen van foto’s. De foto wordt meer levensecht getoond. Daar we meestal onze webanimatie zo licht mogelijk maken, en dit om verschillende redenen, zullen best steeds vector foto’s gebruiken. Een bitmap foto heeft steeds het achtervoegsel BMP. Voor vector fotos hebben we .JPG (JPEG = Joint Photographic Expert Group) .GIF (Graphic Interchange Format) .PNG (Portable Network Graphics)
7
rd
HOOFDSTUK 2 DE WERKOMGEVING menu
layers
frames
toolbox scene
panels
property inspector
Als je in flash wil werken zal je eerst de ontwikkelomgeving tegen komen. Dit zal een beetje gewenning nodig hebben. Maar het zal na een tijd allemaal wel duidelijk worden. Uiteraard zullen we alles deel per deel bekijken en uitleggen.
2.1 Het menu Dit menu bevat de meest gebruikte functies. Wanneer we verder in de cursus geraken, zal je deze functies en hun werking terdege uitgelegd worden.
8
rd
2.2 Toolbox 9
18
8 7 6 5 4 3 2 1
17 16 15 14 13 12 11 10
1
arrow: selecteren en verplaatsen
10 subselect: punten op lijnen te selecteren
2
line: rechte lijnen tekenen
11 lasso: objecten te selecteren in gelijk welke vorm
3
pen (bezier) vrij tekenen en nadien bewerken
12 text: om tekst te typen
4
oval: tekenen van cirkel objecten
13 rectangle: om rechthoeken te tekenen
5
prencil: vrije lijnen tekenen
14 brush: opvullingen te schilderen
6
free transfer: objecten te veranderen
15 fill transfer: fill van bitmaps te veranderen
7
ink bottle: lijnen toevoegen aan opvullingen
16 paint bucket: tussen twee lijnen te kleuren
8
Dopper: maak mogelijk een kleur te selecteren
17 eraser: hier kan je lijnen of opvullingen wisselen
9
zoom: selecteren om in te zoomen
18 hand: volledig een figuur verplaatsen
2.3 time line Bekijk de time line als een stukje film waarin elk filmstukje een frame is in de film. In flash zal je op elk stukje film iets laten gebeuren, waardoor het geheel een soort animatie wordt. Het is ook dankzij die timeline dat we tweening kunnen doen. Dit is de vorm van objecten veranderen op een bepaald punt in de tijd. Zie later
9
rd
2.4 Stage
de stage
work area
De animatie gemaakt in de stage is altijd zichtbaar voor de kijker de work area, is een werkplaats die verborgen blijft voor de kijker De stage is de plaats waar de objecten (figuren en tekst) geplaatst worden. Rondom is een grijze band of work area. Als er iets gebeurt in deze omgeving is dit niet te zien voor de kijker. Dat kan belangrijk zijn zal we in een animatie iets tevoorschijn willen laten komen.
2.5 property inspector Dit geeft de eigenschappen van het object dat op dat moment actief is. Het is zo dat deze inspector verschillende gedaanten kan aannemen, dit volgens het object waar men aan werkt.
10
rd
scene
Keyframe
Object
Tekstvak
2.6 Wat men dient te onthouden Elke animatie heten we een movie. Elke movie kan uit verschillende scenes bestaan. Standaard is er altijd 1 scene aanwezig. Een scene kan onderverdeelt worden in layers (later). Ook van deze is er standaard een aanwezig. Het aantal layers in een scene is onbeperkt.
11
rd
Hoofdstuk 3 Tool panel Falsh beschikt over een ‘toolbox die verschillende gereedschappen bevat welke we kunnen gebruiken.
3.1 selecteren van objecten In flash hebben symbolen eigenlijk 2 lagen. Namelijk: fill of vulling stroke of rand. Omdze afzonderlijk te selecteren maken we gebruik van de arrow tool. Om beide te selecteren moet je dubbelklikken met de arrow tool.
3.2 subselect tool
teken een cirkel, door deze cirkel, door deze cirkel aan te duiden met het subselect tool zal je verschillende puntjes zien verschijnen op deze cirkel. Als je op een zogenaamd kruispunt met je tool staat kan je deze bijvoorbeeld uittrekken. Zie boven.
3.3 line tool Met dit kan je een lijn tekenen. Om een rechte lijn te tekenen kan men de shift toets in gedrukt houden. Alvorens je een lijn tekend kunnen we best eens kijken naar de property inspector.
12
rd
De verschillende onderdelen daarin zijn: Stroke Color : kleur van de lijn Stroke Heigt: dikte van de lijn, uitgedrukt in pixels Stroke Style: stijl van de lijn. Er bestaat ook nog Custom, daar hebben we verschillende eigenschappen van de lijn. We gaan daar niet dieper op in.
3.4 pen tool
Voor meer nauwkeurig werk kan men gebruik maken van de pen tool. Dit zullen we later nog wel gebruiken, en dan kan je de mogelijkheden ervan exploreren. De figuur toont de custom op de property inspector voor de pen tool.
3.5 text tool Met de text tool kan je een rechthoek tekenen die een tekst kan bevatten. Deze rechthoek is zoals een tekstvak in word.
De eigenschappen in onze property inspector zal gedurende de cursus wel duidelijk worden. Die zijn overigens bijna het zelfde als in word. Enkelmoeten we wel eens stilstaan bij het gedeelte static. Met flash kan men een tekst ook dynamisch laten veranderen. Bij voorbeeld in een weerbericht. Een andere mogelijkheid is een in optie Input text. Dit wordt gebruikt bij
13
rd
het maken van invulformulieren in flash. Merk op dat het veld variable name, enkel voorkomt als men dynamisch of input veld gebruikt. Dat is normaal immers bij deze twee moet je in het programmeren dit veld kunnen benoemen om er iets aan te veranderen. Bij statisch is dat niet zo direct nodig.
3.5.1 verschillende soorten textvakken Het werken met een tekstvak is zoals al eerder vernoemd niet heel moeilijk. Je duidt het aan op de scene met de tool welke we nodig hebben, en plaatsen de tekst erin. We hebben twee soorten: Variabele lengte: Men plaats de cursor op de scene en begint te typen. De lengte zal automatisch aangepast worden Vaste lengte In dit geval maakt men met de cursor na het aanduiden van het tekst tool een rechthoek. In dat geval zal je tekst maar de grote hebben van die rechthoek.
3.5.2 tips voor het werken met de tekst tool - dubbelklik op^het tekst vak als het arrow tool is geselecteerd om over te gaan naar de tekstbewerking modus. Dan wordt de tekst tool automatisch geselecteerd. - hebt per ongeluk op de stage geklikt terwijl de tekst tool aangeduid was, en je eigenlijk geen tekst wou toevoegen? Door gebruik te maken ESC kan je het tekst vak verwijderen. - om een tekst vak te verwijderen selecteert u het met het arrow tool, klikt 1 maal op het tekstvak en dan op de delete toets op het toetsenbord. - om een tekst uit te lijenen selecteer eerst het tekstvak met de arrow tool en dan in de property inspector kan amen de juiste uitlijning aan duiden.
3.6 arrow tool 3.6.1 objecten selecteren Meestal als men iets tekent is het niet direct perfect. De afmetingen zijn niet juist of het staat niet op de goede plaats. In beide gevallen moet men het object vooreerst selecteren. Men kan dit op 2 manieren. Dubbelklik: op het te selecteren object zal men met dubbelklikken Kader: men kan ook met de linkermuisknop ingedrukt een kader ronde het object tekenen en het object selecteren.
14
rd
3.6.2 object van vorm veranderen Gebruik kan men ook een figuur veranderen van vorm. Er zijn3 functies toegewezen aan de arrow tool. Gewone pijl: daarbij kan men door dubbelklikken selecteren Pijl met gebogen lijn, geeft aan dat u in het midden van een lijn segment bent, door slepen kan je dan de vorm veranderen Pijl met een hoek dit zegt dat het aan het einde van een lijn segment bent. U kunt dan die lijn langer of korter maken.
3.7 de flash manier van tekenen De wijze waarop flash omgaat met getekende objecten is wel enigszins anders dan een gewoon teken programma
Bij tekenen van een rechthoek met daarin een cirkel. Als we de cirkel verplaatsen dan zal er een hap uit de rechthoek genomen worden. Dus de onder liggende figuur blijft niet intact. Dat kan voor maar ook nadelen hebben. Let daarop.
Verdere tools zullen we bespreken volgens dat we ze zullen gebruiken. De bovenstaande zijn de meest voorkomende gebruiksvoorwerpen.
15
rd
Hoofdstuk 4 Kleuren In Flash We kennen in flash 2 soorten kleuren, namelijk: solids (vaste)
Gradient(met overgang)
4.1 solid Fill
stroke
de figuur bestaat uit een stroke (de omlijning) en een Fill de kleurvulling
stroke Fill
Voor de fill kleuren kan men ook beroep doen op de color mixer
16
rd
stroke
fill
kleur
Stroke
de kleur van de rand van et object
Fill
kleur van de vulling
Fill Style
de versschillende soorten vulling, solid, linear, radial deze zijn gradient
Black and White
enkel zwart en wit als kleur
Swap Colors
kleur van fill en stroke veranfderen
Alpha
dichtheidsgraad van de kleuren
Ook is het mogelijk met de RGB waarden een kleur samen te stellen. Dit wordt in de praktijk veelvuldig gedaan. Er bestaan immers verschillende schakeringen van een kleur. RGB Rood waarde 0 tot 255
Groen waarde 0 tot 255
Blauw waarde 0 tot 255
vb de waarde 255,0,255 geeft roze Hexadecimaal Rood waarde 0 tot FF
Groen waarde 0 tot FF
vb #99FF66 zal licht groen geven (steeds # ervoor) De alpha waarde is het procent zichtbaarheid van de kleur
17
Blauw waarde 0 tot FF
rd
4.2 gradient Dit zijn overgangskleuren. We hebben terug 2 soorten namelijk Linear gradient Radial gradient
Linear
radial
Het enige verschil is dat ze kunnen gaan bij linear van de ene zijde naar de andere en bij radial van binnen naar buiten
4.3 Tekst en kleuren Er is een principieel verschil tussen de kleur vormen. Men kan bijvoorbeeld gradient colors enkel gebruiken bij vector afbeeldingen. Dat is jammer immers het zou een mooi effect kunnen geven bij tekst. Natuurlijk hebben we daar terug een mouw aan gepast: neem een nieuwe scene zet er een stukje tekst in (vb: KA Eeklo) selecteer die tekst ga naar de menubalk bij modify en kies voor break apart nu ziet u dat de tekst in iedere letter in aparte vakjes staan. ga nogmaals naar modify en break apart nu zien we dat de letters gerasterd zij. het feit dat ze gerasterd voorgesteld worden duid aan dat ze een vector afbeelding zijn. In dit geval gaan we naar het color mixer panel en kiezen voor gradient color
linear
18
radial
rd
Hoofdstuk 5 Beweging is gezond 5.1 hoe laten we iets bewegen op ons beeld Het idee om flash te gebruiken is een bepaalde animatie in onze webpagina te maken. Animatie stellen we meestal voor als beweging. Dus het zich verplaatsen van een object van links naar rechts of boven naar onder of omgekeerd zouden we graag verkrijgen. Hoe we dat doen gaan we terug naar gans het begin namelijk nar de uitleg van de onderdelen van flash. We spraken daar van de time line en van frames. Zoals we weten van teken filmpjes is het bewegen van een beeld een methode om met een redelijke snelheid, uitgedrukt in frames/s, veranderende plaatjes te laten zien. Door de traagheid van ons oog zullen we geen onderbreking zien in die frames en denken dat er een film afspeelt.
5.1.1 algemeenheden Voordat we beginnen met onze ‘film’ moeten we enkele begrippen nader bekijken. We weten dat de time line bestaat uit verschillende frames. Een frame wordt belangrijk het moment dat we een keyframe er van maken. Dit kan gebeuren door onze cursor op het frame te plaatsen en in het menu insert – keyframe aan te duiden. Een ander en meer gebruiksvriendelijke methode is als onze cursor op het frame staat op F6 te drukken. Als tweede begrip hebben we dat een object maar kan gemanipuleerd worden het moment dat het een symbool is. Dat doen we door ons object te selecteren en het om te vormen naar symbool door op F8 te drukken of terug insert – convert to symbol.
naam van het symbool
tekening animated button filmpje
19
rd
U kunt de tekening een naam geven. Dat is wenselijk als je met meerdere layers gaat werken. Button gaan we later gebruiken om geanimeerde knoppen te maken. En movie clip wordt gebruik als we een filmpje willen maken met flash. Genoeg theorie nu de praktijk.
5.1.2 in het begin…. We gaan terug naar ons begin van de uitleg over de frames. Open een nieuwe scene teken een bol (kleur speelt geen rol) op de scene. zorg dat die bol een grafisch symbool wordt (F8). plaats uw cursor op frame1 in de time line. Merk op dat frame1 al een keyframe is. plaats uw cursor in frame 2 en maak er een keyframe van (F6), en verplaats uw figuur plaats uw cursor in frame 3 en herhaal het zelfde. Dit kan je nog een paar maal herhalen Dan zet je de cursor terug op het eerste frame en druk je op enter. U merkt op dat uw figuur verspringt van de ene plaats naar de andere. We kunnen daar uit afleiden dat om een element te laten veranderen van positie of eigenschap men nood heeft aan een keyframe. Men merkt op dat de beweging die men maakt niet vloeiend is. Het gaar in schokjes. In het concept flash hebben ze daarvoor de tweening ingebracht.
5.1.3 Tweening(Motion) Het begrip tweening in Flash betekent dat je tussen twee of meerdere keyframes in een layer een beweging of vervorming van vorm, plaats of kleur van een object laat uitvoeren. We doen terug het zelfde: open een nieuwe scene teken een bol (kleur speelt geen rol) op de scene. zorg dat die bol een grafisch symbool wordt (F8). plaats uw cursor in frame 30 En maak er een keyframe van verplaats uw tekening op een andere plaats. plaats uw cursor op het begin keyframe en druk op de rechter muisknop. Duid aan create motion tween aan. Op dat moment zal er een purperen band komen met een volle pijl in. Druk je nu op enter zal je zien dat het object zich verplaatst naar de nieuwe plaats in een
20
rd
vloeiende lijn. Let op als er in de plaats van een volle pijl een onderbroken lijn staat is er een fout. Meestal ben je vergeten van er een grafisch symbool van te maken. Er zijn hier een paar belangrijke aspecten: - steeds een grafisch symbool maken. - vergeet niet het gebruik van keyframe.
5.1.4 opmerkingen in verband met motion tweening Motion tweening is dus altijd te herkennen aan de paarse kleur. Veranderen van eigenschappen Het is ook volstrekt mogelijk eigenschappen van objecten te veranderen tijdens een motion tween. Neem een nieuwe scene. plaats er een bol op en maak het een grafisch object (F8) zet uw cursor op frame 30 en maak er een keyframe van (F6). duid in uw paneel de free transfer tool aan en verklein de bol maak er nu een motion tween van en bekijk het resultaat. Easing van een object Het is mogelijk de snelheid van een object te laten veranderen in een animatie. Bij voorbeeld als een object botst op een oppervlak dan zal de terugsprong in snelheid verminderen. Hoe doen we dat: Plaats op een nieuwe scene een bal en maak deze grafisch. op frame 15 maak je een keyframe en verplaats deze bal(schuin) naar de onderkant van uw scene. vervolgens maak een keyframe op 30 en verplaats de bal schuin iets hoger. herhaal dat een paarmaal waarbij je een interval van keyframes van 15 maakt. uiteindelijk zal de bal eindigen op de onderkant van de scene volgens de fysica zal de bal in snelheid traagrapbotsraptraagvaltraagrapbots enz. zijn hoe kunnen we dat nu in onze animatie maken? In onze property inspector kunnen we die snelheid regelen:
21
rd
snelheid
Door het veranderen van de ease functie kunnen we de snelheid aanpassen. Vergeet terug niet dat enkel aanpassingen kunnen gebeuren bij keyframe. De aanpassingen zijn als volgt. Easing positieve waarde (1 tot 100)
eerst snel, dan traag
negatieve waarde (-1 tot -100)
eerst traag, dan snel
geen easing (1)
de beweging gaat geleidelijk
Roteren van een object In motion tween is het ook mogelijk van een object te laten roteren. Een bal die men laat roteren is niet zo zichtbaar daarom gaan we deze oefening bekijken met een ovaal. We gaan nu ook werken met een tweede layer. Daarvoor gaan we in het menu en bij Insert voegen we een nieuwe layer toe. In deze layer maak je een ovaal en plaats die op de scene. door F8 maak je er een grafisch symbool van. plaats je cursor op frame 20 en maak er een keyframe van (F6) in dat keyframe verplaats je de ovaal naar rechts ga op frame 1 staan en maak een motion tween beweging
in de property inspector zien we onderaan een beweging paneel (Rotate). Als we deze open klappen zien we de verschillende bewegingen. We duiden CW (clock wise) aan en als aantal maal 1. Daardoor zal ons object 1 maal naar rechts draaien.
22
rd
Rotate CW
CCW
Clock Wise:
counter clock wise
in wijzerzin
tegen wijzerzin
Auto rotatie in de gemakkelijkste richting
De opties “orient to path” “ en” motion pad” komen later tersprake. Onzichtbaar maken van een object Op sommige momenten kan je zien dat een object waziger en waziger wordt en verdwijnt van het scherm. Dat kunnen we ook verkrijgen in flash, en wel op en eenvoudige manier. Neem een nieuwe scene. plaats daar een vierkant op gevuld met de zwarte kleur. maak deze figuur grafisch(F8) zorg voor een keyframe op frame 30 (F6). Op dat frame selecteer je het vierkant maak een motion tween in de property inspector zal je nu een vak color zien met ernaast een getal plaats in het vak alpha en 0% als alfa waarde. Laat de animatie lopen en je ziet het vierkant verdwijnen.
Zorg er voor dat er een begin en einde aan de motion tween is.
23
rd
Hoofdstuk 6 Motion Guide 6.1 wat is een motion guide Tot nu toe hebben we steeds een soort van rechte verbindingen gemaakt waar ons object langs moet lopen. Veronderstel nu een object loopt zigzag over de scene of langs een bepaalde weg. Dit moeten we ook kunnen voorstellen. Dit verzorgen we nu door gebruik te maken van een motion guide
6.2 hoe werkt dat We nemen een nieuwe scene we plaatsen daarop een vierkant, maken er een grafisch beeld van (F8) we plaatsen op frame nr 30 en maken er een keyframe van (F6), en we verplaatsen ons vierkant naar rechts. we voegen een guide layer toe, dit door het speciale teken aan te duiden guide layer
bijvoegen guide layer
we nemen ons teken tool pencil (potlood), en we tekenen een pad van de plaats waar ons object staat, naar waar het object nu stond op frame 1. we maken een motion tween en drukken op enter. Het object zou normaal ons getekend pad moeten volgen. Opdat ons object de normale positie tijdens de verplaatsing zou volgen hebben we nu die aanduiding oriented to pad wat wil zeggen volgens de weg dat ons object zal volgen
24
rd
Hoofdstuk 7 Masking 7.1 wat is masking Masking technologie is bedoeld om en doorschijnend effect te maken. Dat komt ongeveer overeen om een zoeklicht op je animatie te laten schijnen.
7.2 werkwijze We nemen een nieuwe scene daar zorgen we voor een vak, met blauwe achtergrond. In dat vak zetten we in witte letters een tekst vb. K.A. Eeklo. Plaatsen een keyframe op bv frame 30. nu zorgen we voor een tweede layer, let wel we moeten zorgen dat die layer voor de layer staat die we gaan ‘masken’. in die layer zetten we een bol van de grootte van onze tekst. We maken die bol grafisch en we zorgen dat we een keyframe zetten o layer 30. We zorgen tevens dat op dat keyframe de bol aan de andere kant staat van onze tekst. We zorgen voor motion tween in die layer. drukken op enter en zien dat de bol over onze layer gaat. Tot nu toe nog niet speciaals. we plaatsen onze cursor op de duiding bol en drukken op onze rechtermuis knop (RMK). in het snel menu duiden we mask aan. En drukken terug op enter. je kan zien dat er een tekst te zien is de grote van de bol die we over de tekst lieten schijnen
25
rd
7.3 de tekst blijft zichtbaar (uitbreiding). Verwijder de masking op de layer bol. Maak een extra layer en plaats hem onderaan de bestaande layers. Kopieer de inhoud van de layer tekst naar de nieuw gemaakte layer. Zorg dat die beide layers exact boven elkaar staan (x en y waardes moeten identiek zijn). Zorg dat beide tekstvakken van een andere kleur zijn.
7.4 volglicht effect Dit is het zelfde als het vorige, echter 1 verschil, u hebt nu geen extra layer tekst maar een tweede bol. De extra bol blijft zichtbaar en de eerste bol dient voor de masking. Het lijkt als een zoeklicht op de tekst
26
rd
Hoofdstuk 8 Shape Tweening Met tweening kunnen we nog een tweede soort bereiken namelijk shape tweening. Met shape tweening creëren we een soort morphing effect, ofwel het object transformeert naar een ander.
8.1 Werkwijze We maken een nieuwe scene. daarop tekenen we een vierkant plaats op frame 30 een keyframe en men tekent daar een bol van ongeveer dezelfde grootte van het vierkant in frame 1 kiezen we in de property inspector voor een shape tween bekijken het resultaat als we op enter drukken.
8.2 opmerkingen bij shape tweening Een eerste en belangrijke opmerking is dat men hier de figuren niet moet omvormen tot grafische beelden met F8. Als het niet luk dan is het meestal die fout.men maakt. tweede opmerking is dat men niet mag vergeten van een shape tweening te maken. Dit kan men controleren daar de tweening op dat moment groen is in de plaats van purper. Dit
27
rd
bekomt men in de property inspector.
derde opmerking is dat shape tweening is enkel mogelijk met vector afbeeldingen
8.3 Woorden in shape tweening We herinneren ons nog dat een vector afbeelding steeds bestaat uit 2 onderdelen. Nl: een fill (de vulling van het object) een stroke (de rand rond een object) Tekeningen, zoals rechthoeken en cirkels zijn automatisch verctor afbeeldingen. Dit is niet het geval met tekst. Als we dat willen gebruiken zullen we terug een truck moeten uitvoeren. Deze truck hebben we reeds eens gedaan, we breken het woord in stukjes, die we nadien teug breken (zie 4.3). Maak een neiuwe scene plaats daar een woord in (vb is wetenschap) selecteer dat woord en ga naar modify brak apart. doe dit andermaal en we hebben de mogelijkheid gemaakt. We zien dat de letters gearceerd staan. Op 30 plaats je een keyframe, verwijder het woord en plaats en nieuw woord in de plaats, liefst met evenveel letters (bij gebrek aan inspiratie heb ik maar schapweten genomen). terug doe je 2 maal break apart. plaats nu een shape tween en bekijk het resultaat
28
rd
8.4 easing Natuurlijk kunnen we terug easing instellen. Herinnert u nog. Deze is volledig gelijklopend met de motion tweening. Easing positieve waarde (1 tot 100)
eerst snel, dan traag
negatieve waarde (-1 tot -100)
eerst traag, dan snel
geen easing (1)
de beweging gaat geleidelijk
8.5 blend Blenden of vermengen (to blend) geeft de mogelijkheid te regelen hoe de vormen zich vermengen om uiteindelijk de finale vorm aan te nemen.
8.5 kleuren Zoals je de vormen van een object kunt laten veranderen kan je ook de kleur ervan veranderen. U zorgt enkel dat het voorwerp een andere kleur krijgt in het einde keyframe
8.6 Woorden Zet in frame 1 2 vierkantjes. Plaats een key frame op 30 en plaats de letter K A in de plaats van de vierkantjes. Maak een shape tween. Vergeet niet eerst de letters te breken! test dit uit!
29
rd
Hoofdstuk 9 Knoppen Wat veelvuldig gebruikt wordt in flash zijn knoppen. We kunnen zelfs actionsscripts aan de knoppen verbinden. Dit zullen we later bekijken.
9.1 Eenvoudige knop 9.1.1 begin fase We nemen een nieuwe scene dan gaan we in de menubalk naar ‘Insert’ en kiezen daar ‘new symbol’.
op dat symbool duiden we Button aan en geven dit een naam (ie testknop).
op onze time line zien we 4 mogelijke posities verschijnen welke de knop kan hebben. UP
rustfase van de button
OVER
wanneer de muiswijzer boven de knop zweeft
DOWN
als de knop is ingedrukt
HIT
het aan klikken van de knop. In normale toepassingen komt die toestand niet voor Later meer daarover
30
rd
We tekenen nu bij de positie up een rechthoek en geven die een kleur. plaats keyframe (F6) bij over en down. Bij de positie over geven we de knop een andere kleur. zouden we willen we kunnen bij over en down een andere kleur kiezen, immers het is keyframe en de eigenschappen kunnen bij deze veranderen.
9.1.2 knoppen op de scene plaatsen Toen we ons symbool maakten hebben we iets eigenaardig kunnen opmerken. In feite werkten we met de knop zelf en niet met de knop op de scene. We keren terug naar onze scene en laten de knop nu zo hij is. Om terug te keren naar de scene, zien juist onder onze time line de aanduiding scene en naam van de knop. we duiden onze scene aan en op dit moment zien we onze lege scene (dus zonder knop). Dat is logisch want we hebben de knop wel gecreëerd maar nog niet gebruikt. Door deze knop te maken hebben we een object gemaakt en geplaatst in de bibliotheek (libary) van flash. Om deze nu op de scene te krijgen. U kunt uw knop simpel op de scene slepen. om te kontroleren als onze knop überhaupt werkt kunnen we de mogelijkheid enable simple buttons aanvinken. Deze vinden we in ons menu bij ‘control’, ook door ctrl+ alt + B.
9.2 Knop met tekst We kunnen ook een stukje tekst op onze kop zetten.
9.2.1 werkwijze We maken in een nieuwe scene een nieuwe knop aan.
we tekenen een rechthoek, en voor het fun maken we er afgeronde hoeken van. Dit is eenvoudig. We hebben in ons werkpaneel een mogelijkheid om de hoeken af te ronden, namelijk
Als we dit aandrukken hebben we de mogelijkheid onze rechthoek aan te passen.
31
rd
u ziet met deze tool kunnen we de hoeken van een rechthoek afronden. We zetten deze bvb op 10. Dan tekenen we een rechthoek en plaatsen er een tekst in
we plaatsen op druk ook een keyframe (F6) en veranderen de tekst in
plaats dit op een scene en testen!
9.3 toestand Hit De gebruiker krijgt deze toestand bijna nooit te zien. Het is een interne afhandeling van de feiten. Flash bepaald aan de hand van keyframe hit of een muisklik binnen of buiten een knop gevallen is. Dit is heel belangrijk voor buttons die uitsluitend uit tekst bestaan. Als hieraan geen hit toestand gekoppeld is betekend dat enkel de tekst zelf aanklikbaar is, daardoor zal de gebruiker redelijk goed moeten mikken. Meestal wordt een rechthoek rond de tekst getrokken. Deze wordt gekenmerkt met de hit toestand. Daardoor zal de rechthoek niet zichtbaar zijn maar de plaats erin zal wel mogelijkheid geven aangeklikt te worden.
9.4 eerder gemaakte knoppen veranderen. Is een knop na een bepaalde tijd niet meer naar uw zin, of de knop dat je in een animatie geplaatst hebt draagt je tevredenheid niet meer weg dan kan je hem ook veranderen Open de liberay klik met je RMK op de knop die je wilt bewerken in het menu kies je voor edit je bent terug in de ontwerp fase en je kan veranderen wat je wil
32
rd
9.5 een knop met geluid Maak een nieuwe scene plaats er een knop op de gekende wijze
zet de nodige keyframe op onderdeel over om de geluiden onder te brengen hebben we een tweede layer nodig. We maken die aan en noemen hem geluiden. We maken ook van over een keyframe we gaan een geluid toevoegen als we over de knop gaan. Daarom gaan we naar het menuonderdeel Window common Libary Sounds. we openen onze bibliotheek van geluiden en nemen een geluid (ie Brick Fall) en plaatsen deze op de scene. Zorg wel dat het geluid enkel start in de frame over!. We plaatsen nu onze knop op de scene en proberen hem uit. Natuurlijk moet je in dit geval over luidsprekers beschikken.
33
rd
Hoofdstuk 10 Action Scripts Bij uitgebreide projecten zal men veelal gebruik maken van interactiviteit, ingebouwd in de movie. Het reageren op muisklikken zelf de volgorde van een movie palen enz.. Dit zullen we verkrijgen van gebruik te maken van action scripts.
10.1 Types van scripts Er bestaan 2 soorten actions
Frame action
Object action
deze worden toegepast op een bepaald keyframe. Wanneer de movie aan en bepaald keyframe komt wordt de actie uitgevoerd
deze actie wordt uitgevoerd bij een bepaald object. Dit zal meestal een knop zijn
Voorbeeld: normaal wordt een movie steeds na elkaar afgespeeld. Met de stop actie op het laatste keyframe zal de movie beëindigd worden
vb: klik op een knop om naar een bepaalde webpagina te gaan
10.2 het action panel
34
rd
Dit paneel vind men juist boven het property paneel. Dit paneel heeft 2 verschillende modes waarin het kan toegepast worden namelijk de nomale mode (normal mode) en de expert mode (Expert mode) in de eerste mode zal de actie bepaald worden door het programma, in de tweede mode (meestal gebruikt door programmeurs) zal men eigen code kunnen schrijven. Hier zullen we ons beperken tot de normale mode. instantienaam
parameters
scriptcode opdrachtenlijst
We hebben verschillende soorten actions. Ieder met zijn parameters. We kunnen nu testen wat we met welke scripts kunnen doen
35
rd
Hoofdstuk 11 Publiceren van ons werk <we hebben nu reeds geruime tijd geprobeerd om iets te maken in flash. Het is nu normaal dat we dat aan de buitenwereld willen laten zien. Dit gebeurt hoofdzakelijk door gebruik te maken van het net en zijn mogelijkheden. We onderscheiden daarin 2 methoden, ,namelijk de animatie neemt een volledig scherm in zoals we het kennen in intro van een website Animatie neemt maar een deel van het scherm in. Als een animatie een volledig scherm inneemt kan je het beter publiceren als HTML-betand.
11.1 Formaten Via het menu ‘file (bestand) publish settings
36
rd
In het venster van publish settings wordt bepaald naar welke formaat de flash animatie wordt gepubliceerd op het moment dat u het programma de op dracht geeft. De srtandaard instelling is dat flash een movie publiceert naar een swf bestand en een HTML bestand. Er zijn, zoals u ziet echter nog verschillende mogelijkheden.
11.2 tabblad flash
optie
werking
version
hier kiest menvoor welke flash versie de movie geschikt moet zijn. Oudere versies ondersteunen niet altijd de nieuwere versies
load order
hier bepaald men de order van het inladen van de verschillende frames. We hebben bottom up en topdown mogelijkheden. De werking hiervan is maar van tel bij oudere modem verbindingen
generate size report
maakt een flash size rapport
37
rd
protect from inport
beveiliging. Aangevinkt kan men de swf bestanden niet downloaden van het internet
compres movie
enkel bekent vanaf flash 6. Deze maak dat het flash bestand nog kleiner is in grootte
JPEG quality
dit geeft uiteindelijk een betere kwaliteit. Dar staat tegen over dat et bestand ook groter wordt
Audio Stream
dit toont de opties van de streaming van het geluid
override Sound Setting
hierdoor worden alle instellingen in de common libary voor het geluid genegeerd.
11.3 Tabblad HTML
38
rd
optie
werking
template
bij de standaard instelling flash worden in HTML de juiste tags gebruikt. andere templates zijn ook mogelijk
Dimensions
hier stelt men de waarden in van de afmetingen welke uw flash movie heeft in en browser. Deze bepalen enkel het kijkvenster in de browser
PlayBack
deze opties bepalen hoe je movie getoond wordt in de browser. Paused at start. Wanneer de gebruiker met de muis klikt, zal de movie starten. loop is de standaard werking. De movie loopt tot dat de gebruiker hem stopt. Dispaly menu deze geeft dat het flash menu getoond wordt. Bij uitschakeling wordt alleen de optie about flash getoond
Quality
hiermede wordt de kwaliteit van de movie in de browser ingesteld
Window Mode
deze optie werkt enkel vanaf Explorer 4.
HTML aligment
Deze optie werkt vergelijkbaar met HTML aligment
Scale
werkt met de optie dimensions show all zorgt dat de ganse movie te zien is waarbij de verhoudingen bewaard blijven no border maakt dat de movie exact in het gegeven gebied past zonder vervormingen exact fit zorgt dat de movie in het gebied getoond wordt eventuele vervormingen zijn mogelijk no scale zorgt er voor dat de movie niet gewijzigd wordt wanneer de afmetingen van het venster van flash aangepast worden
flash aligment
deze optie geeft hoe de movie wordt uitgelijnd binnen het gebied voorzien voor de movie.
Merk op dat hier op ok klikken enkel de settings instelt en niet de movie publiceert. Indien gewenst kies je voor publish. In dit geval komen er drie bestanden op je schijf namelijk
39
rd
Extensie verklaring . fla
werk bestand van de animatie
.swf
filmpje zelf
.html
filmpje in HTML formaat
We hebben hier een kleine inleiding in flash trachten te geven. Natuurlijk is ver van volledig en zijn er nog 10-tallen mogelijkheden die we niet besproken hebben. Veel zal ook nog in de lessen komen, maar we hebben een uitgang punt.
Bibliografie. Basiscursus flash MX van academic service isbn 90 395 2065 8 cursus van Mr Snauwaert aan IVO- Brugge Dynamisch Webdesign van Patricia Bosselaar Pearsun Education isbn 90 430 0461 8
40
