Globale linker

Flash

ActionScripting

For å demonstrere ActionScripting skal vi nå lage en liten animasjon hvor vi ber brukeren om å velge mellom to knapper med forskjellig farge (rosa og blå). Resultatet av klikkingen vil være forskjellig, avhengig av hvilken knapp brukeren klikker på.

Vi kan legge Actions på 3 steder i Flash

Action styres fra Action panel. Her skriver du inn all Action kode. Action paletten finner du under Window > Actions (ALT+CTRL+A ), eventuelt kan du også høyreklikke og velge Frame Action fra kontekstmenyen, eller klikke i hurtigmenyen nederst til høyre på skjermbildet. Dobbelklikke på den aktuelle KeyFramen er også ett alternativ.

I Action paletten finner vi en oversikt over alle brukte koder. Kodene er organisert i mapper som gjør det enkelt for oss som brukere og finne frem i kodene. De mest brukte kodene finner vi øverst. En trenger derfor ikke være en erfaren programmerer for å bruke Actions i Flash.

For å plassere koden på Action-«skrivebordet», dobbelklikk eller dra den Actionen du ønsker til Action-«skrivebordet».

En animasjon kan, akkurat som en film, bestå av flere scener. Når animasjone spilles av, vil den spille av animasjonen scene for scene, om ikke vi bestemmer noe annet.

Scenes

Scener er altså individuelle deler av en animasjon som kan sees som en uavhengig del av filmen. Det at vi kan dele animasjone inn i flere forskjellige logiske deler, er en stor hjelp når det gjelder å organisere animasjonen effektivt.

Flash-animasjoner kan være stooore, kompliserte ting, men de kan også være svært enkle små animasjoner. Til de enkle små, trenger vi antakeligvis ikke å dele opp animasjonen i flere scener. men har du en svæææær animasjon, kan jeg love deg at det lønner seg å ta fram regisørstolen, og planlegge animasjonen med flere scener.

For å gi et eksempel. Noen Flash-designere bruker Scener omtrent som en webdesigner vil dele opp siten sin i flere sider. For hver ny side er det en ny scene. Du lager en front-side i Flash, og for hver av undersidene (knappene) har du en ny scene.

Scene 1Alle Flash animasjoner starter som default med en scene. Du kan se hvilken scene du jobber med ved å løfte blikket og se i øvre venstre del av skjermen, over Timeline'n.

Du kan sette inn eller slette scener etter behov ved å velge Insert > Scene eller Insert > Remove Scene. Eventuelt kan du bruke Scene paletten.

  1. Scene palettenHer finner du en oversikt over alle scenene dine. Dobbeltklikk på scenenavnet for å gi nytt navn. Klikk på «klapper'n» for å gå til ønsket scene
  2. Kopier en scene
  3. Legg til scene
  4. Slett scene

Husk at Flash spiller av Scene s i den rekkefølgen de opptrer i i Scene paletten, så pass på organiseringen.

Movie Explorer

Edit SceneEn annen måte å hoppe mellom de forskjellige scenene er å bruke Edit Scene knappen øverst i høyre del av skjermen

Movie Explorer knappenDet er nok en metode for å bestemme hvilken scene du vil redigere, og det er ved hjelp av Movie Explorer knappen som du finner i nederste høyre del av vinduet.

Movie ExplorerDa får du opp en boks med oversikt over alle scenene, alle symboler som er brukt i hver scene, hvilke Frames det skjer noe viktig i. I det hele tatt en totaloversikt over viktige elementer i animasjonen.

Da er vi klare til å ta fatt på litt arbeid igjen. Og det første vi skal gjøre er å bruke knappen Button på førstesiden, hvor brukeren altså skal velge mellom to forskjellig fargede knapper. Basert på hva brukeren klikker på skal han/hun bli bragt til en side som forteller hvilken knapp han/hun klikket på.

  1. Vi fortsetter å jobbe med knappeanimasjone vår.
  2. Vi skal ha en knapp i scene, trekk ut en Instance av Button til fra Library paletten.
  3. Plasser de ved siden av hverandre.
  4. Marker den ene og fra Effects paletten velger du Tint, og en rosa farge.
  5. Marker den andre, og gi den en blå farge ved hjelp av Effects paletten.
  6. Lag et nytt layer som du kaller Text, på dette layeret skriver du «Pick your favorite color»
  7. Ta fram Scenes paletten (Window > Panels > Scenes), dobbeltklikk på Scene 1 og føy til Buttons. Det skal da hete Scene 1 buttons.
  8. Lag en ny Scene ved å klikke på +tegnet i Scenes paletten, og kall det Scene 2 Choice.
  9. Klikk én gang på Scene 2 Choice for å gå dit
  10. Her har vi en ny tom scene, og den ser da ganske lik ut som det alltid har gjort, med Timeline og det hele.
  11. Gi default layer navnet text. Lag et nytt og kall det labels
  12. Nå skal vi legge til 30 frames med ingenting. Trickset vi bruker da, er å klikke, holde og markere frame 2 i labels-layeret, og trekke ned til frame 30 i text-layeret. Med alle framene markert, trykk F5.
  13. I Frame 1 i text-layeret skriver du inn «You selected pink»
  14. I Frame 15, legg inn et Blank Keyframe (F7) og skriv inn «You selected blue»
  15. I Frame 1 i labels-layeret legg inn et Keyframe, i Frames paletten skriver du inn pink i tekstboksen for label.
  16. I Frame 15, legg inn et Blank Keyframe (F7), og skriv inn blue som navn i Frames paletten.

Ved å gi forskjellige deler av animasjonen ekslusive navn, kan vi lett finne igjen disse når vi etterhvert skal begynne med ActionScripting.

Vi vil at brukeren skal få beskjeden «you clicked pink» når han/hun har trykket på den rosa knappen og «you clicked blue» år han/hun klikket på den blå. For å få til dette må vi legge til en action på de to knappene som forteller hva som skal skje når den ønskede handlingen inntreffer.

Hvis du nå prøver å forhåndsvise animasjone, vil du et kort øyeblikk se det som skal være forsiden, så kommer emeldinge om at vi har klikket på den rosa, også meldingen med blå, osv, osv. Vi må få stoppet den slik at vi rekker å faktisk gjøre et valg.

  1. Gå tilbake til Scene 1 og legg til et nytt layer som du kaller halt.
  2. Marker Frame 1 i det nye layeret og velg Window > Actions, eller dobbeltklikk på Frame 1

Klikk for å se Actions paletten Da dukker Actions paletten opp (Klikk på øyet ved siden av for å se på den). Her har vi alle muligheter, dere. Den kan se litt skremmende ut, sånn i begynnelsen, men med litt øvelse vil dette bli din beste venn.

  1. Dobbeltklikk på Stop

Det forteller Flash, stå her og vent på eventuelle nye instruksjoner.

Den lille a'en forteller at her er en actionI Frame 1 har det nå dukket opp en liten a i halt-layeret. Det betyr at her er det en action.

Det neste vi vil fortelle Flash er at når brukeren klikker på en knapp, skal han/hun bli bragt til en bestemt del av animasjonen vår i scene 2.

  1. Klikk og marker den rosa knappen
  2. I Actions paletten dobbeltklikker du på On Mouse Event, da dukker det opp litt tekst i vinduet ved siden av, og to kolonner med muse-handlinger nederst i paletten. La den stå på Release. (Det betyr at når brukeren har klikket på, og slipper opp musetasten vil noe skje)
  3. Nederst i Actions palettenDobbeltklikk så på Go To. Nederst i Actions paletten velger du:
  4. Gå til Scene 2, Frame label med navn pink, stå der og vent.
  5. Klikk og marker den blå knappen.
  6. I Actions paletten dobbeltklikker du på On Mouse Event, da dukker det opp litt tekst i vinduet ved siden av, og to kolonner med muse-handlinger nederst i paletten. La den stå på Release. (Det betyr at når brukeren har klikket på, og slipper opp musetasten vil noe skje)
  7. TekstdelenDobbeltklikk så på Go To. Nederst i Actions paletten velger du nesten det samme, bare bytt ut pink med blue. Da vil det se slik ut i tekstdelen av Actions paletten:

Nå kan du forhåndsvise nå. Husk å trykke F5 for å laste siden på nytt i browseren, hvis du vil prøve om igjen, for vi har ikke laget noen knapper som tar oss tilbake til førstesiden. Det kan du kanskje prøve selv? Eventuelt kan du legge til en Action på nest siste Frame i hver bolk (pink og blue) i Timelinen som tar oss tilbake til scene 1. Husk i såfall at du må ha en Keyframe å putte actionet i i Timelinen. Og at du må forandre scriptet på knappene slik at det sier, gå til scene 2, Frame label med navn pink og spill av.

Neste sideGå til neste side hvor vi skal se mer på ActionScripting.