Flashs Undervurdert Grafisk Symbol

Flash er undervurdert "Graphic" Symbol
en
Del
4
Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Jeg kan ikke fortelle deg hvor mange artikler og tutorials jeg har kommet over på hvordan du bruker symboler i Flash som umiddelbart avvise grafisk symbol som ikke har noen praktisk hensikt, henvise det som bare et trinn over gruppere elementer. Denne artikkelen vil forsøke å fjerne denne myten ved å vise at det grafiske symbolet faktisk har noen ganske kule og praktiske funksjoner og vite hvordan og når man skal bruke dem er et fint verktøy å ha når du lager animasjoner i Flash.
Republisert Tutorial

Hver noen uker, vi besøker noen av våre lesernes favoritt innlegg fra hele historien til området. Denne opplæringen ble første gang utgitt i oktober 2011.

jeg først begynte å bruke Flash med versjon MX. Og gjennom alle forbedringer og nye funksjoner i hver utgivelse, er en ting som har vært konstant det grafiske symbolet. Men hva har også holdt seg konstant, overraskende nok, er hvor mange Flash-brukere ikke vet hva det grafiske symbolet faktisk gjør. Et sted langs linjen, har dette symbolet fått en dårlig rap som å være helt ubrukelig. Hvis du noen gang lurt på hva hensikten med det grafiske symbolet er og hvorfor pokker Adobe fortsetter å holde det i Flash, er denne artikkelen for deg.

Grunnleggende

Vi begynne med det mest kjente og grunnleggende ting du kan gjøre med det grafiske symbolet som er iboende i alle Flash symboler. Akkurat som filmklipp og knapper, en grafisk symbol kan ha fargeeffekter brukt til det som alfa og tint, bli brutt fra hverandre i sine omfattende elementer via CMD /CTRL-B, og selvfølgelig har sine egenskaper motion-tweened.
< p> Jeg vet at det er langt fra en åpenbaring, men jeg nevner disse attributtene, fordi jeg tror det er viktig å huske på at et grafisk symbol i sin kjerne er akkurat som alle andre Flash symbol, men med sin egen unike sett av funksjoner.



Animasjon misoppfatninger

En av de største misforståelsene om det grafiske symbolet er at det ikke kan inneholde animasjon - eller, hvis den gjør det, vil Flash bare ignorere det under kjøring. Ikke bare er det helt usanne, men i virkeligheten grafiske symboler er svært kraftig og fleksibel når det gjelder å skape tidslinjen animasjon.

Akkurat som et filmklipp, kan et grafisk symbol inneholde nøstede animasjoner oppå nestede animasjoner av andre grafiske symboler og filmklipp. Det er symbolet på valget brukes av de fleste profesjonelle Flash animatører, spesielt når det gjelder å skape komplekse tidslinjen animasjon med massevis av vektor eiendeler. La oss se hvorfor.



Animasjon og Properties Panel

Den sanne kraften i det grafiske symbolet ligger innenfor Properties panelet. Det er der du kan styre animasjonen inne i et grafisk symbol, som er en av de skjulte, ukjente juveler i Flash. Tilnærmingen at jeg er i ferd med å detalj er virkelig en animasjon teknikk omtales av mange som den Chris Georgenes metoden.

Hvis du ikke er kjent med Chris Georgenes, han er en respektert Flash animatør som utforme dette tilnærming til å animere med grafiske symboler, og jeg var heldig nok til å ta en figuranimasjon kurs han var instruktør. Jeg anbefaler deg å lese opp på mange av hans Flash animasjon teknikker og triks.

Det er nok bakgrunnsinformasjon så la oss få cracking med godsakene. Når du oppretter en grafisk symbol ( Endre> Convert to Symbol
), har du tre alternativer for håndtering hvordan symbolet vil spille sin animasjon; å se dem, med symbolet valgt, gå over til panelet Egenskaper og se under Looping kategori

Når du klikker på Alternativer drop-ned, vil du bli presentert med tre alternativer å velge mellom. Loop , Play Once og Single Frame. Også under rullegardinlisten, vil du se et lite innspill feltet merket First ". Før vi kommer til det, la oss forstå de tre looping alternativer - men hold det litt input-feltet i bakhodet når vi går gjennom hvert alternativ som det vil all knytte sammen

. Merk: Hvis du ikke ser alternativer felt, klikker du bare på pilen til venstre for Looping å avsløre rullegardin

Loop. Loop er standardinnstillingen for hver ny grafisk symbol som er opprettet. I utgangspunktet er dette alternativet vil stadig sløyfe enhver og all animasjon som er nestet inni den. Så med andre ord, vil symbolet tidslinje spille gjennom dens varighet og deretter starte på nytt, akkurat som et filmklipp.

Play Once: Denne innstillingen er ganske selvforklarende også. Det vil spille symbolet tidslinje gang gjennom og så stoppe. Tenk på det som det grafiske symbolet måte å legge en stop () handling på den endelige rammen av sin tidslinje

Single Frame. Enkel ramme gjør det mulig å vise bare en viss ramme innenfor symbolet tidslinje. Mens symbolet tidslinje er faktisk spiller når den er satt til Loop eller Play Once, Single Frame alternativet bare hopper tidslinjen til en bestemt ramme innenfor symbol og forblir der. Jeg liker å tenke på det som grafisk symbol versjon av hjelp gotoAndStop (ramme). Så hvordan er dette gjort? Hvis du minner om at lille innspill feltet merket "første" som jeg fortalte deg å huske på et par avsnitt tilbake, du er på vei i riktig retning.



Første Frame Input Feltet

Selv om svært tvetydig og enkelt ubemerket, er dette feltet, der all moroa skjer for styring av tidslinjen for et gitt symbol. Dette er en av mine favoritt-funksjoner i grafisk symbol fordi du kan målrette en bestemt ramme på symbolet tidslinje ved å skrive en ramme nummer i tekstfeltet.

Når et grafisk symbol først opprettes, den første rammen inngang feltet er satt til 1 som standard - som merket med en inne i feltet. Dette betyr ramme 1 på symbolet tidslinje vil være den første rammen animasjonen vil begynne på. Det er der etiketten Først kommer inn; Tenk på det som den første rammen du ønsker å vise eller det første bildet du ønsker å spille fra. Så hvis du har et symbolsett til Single Frame og type 6 i den første rammen feltet, vil det vise hva som er på ramme 6. Hvis den medfølgende rammenummeret er tomt eller hvis symbolet ikke engang at mange rammer i sin tidslinje , så ingenting vil vise.

Du kan også bruke den første rammen feltet med Loop og Play Once alternativer. Hvis du angir et symbol for å spille en gang og skriv i en bestemt ramme nummer i tekstfeltet vil det starte fra denne rammen. Det samme gjelder hvis du setter den til loop. Symbolet skulle begynne å sløyfe starter med rammenummeret du angav i tekstfeltet. Husk imidlertid at hvis du skrev i 6, vil den begynne å sløyfe fra ramme 6, men når det kommer til slutten av tidslinjen det vil fortsette å ramme en i sin vanlige måte.



Men det er fortsatt ikke Animere

Nå, hvis du tok det på deg selv å prøve noe av dette ut i Flash, er du antakelig lurer på hvorfor animasjonen isn ' t å spille på den måten jeg har blitt beskriver. Åpne opp filen som heter looping_basics.fla
i kilden pakken. Dobbeltklikk på grafisk symbol som er på scenen for å ta en titt på animasjonen som er inne i den. Du vil se to lag som spenner over 239 rammer på tidslinjen, med en ny keyframe på begge lag hvert 30. rammer (dvs. hvert sekund). Så hvis du skrubbe stykket hodet, vil du se at vi i utgangspunktet har en 8-sekunders animasjon der på hver andre nummeret i trinn sentrum av en og sirkulære bakgrunnen skifter farge. For all del ikke noe fancy.

Etter at du har kjerne av animasjon, tilbake til hovedtidslinjen, klikk på grafisk symbol og sjekk egenskaper panelet for å sørge for at symbolet er satt til Loop og en i første rammen feltet. Nå teste ut filmen.

Hva er det som skjer her? Vår symbolet ikke animere selv om vi har den satt til Loop. Rett om nå kan det være lurt å si at du fortalte meg så om Flash bare ignorerer et grafisk symbol animasjon. Før du gjør det, la oss komme til bunns i dette.



Det handler om tidslinjen

Dette er den vanligste fallgruve de fleste mennesker opplever når de oppretter en animasjon inne i en grafisk symbol. Og det er nok grunnen til at symbolet er tenkt som ubrukelig. Du oppretter en animasjon på den grafiske tidslinje plasser deretter symbol på hovedtidslinjen akkurat som du ville gjort med et filmklipp. Men når du går å eksportere filmen, symbolet bare sitter der statisk på scenen. Det er der den misforståelse ligger. Vi forventer grafisk symbol til å oppføre seg akkurat som et filmklipp

Trikset til grafisk symbol er at det er tidslinje drevet Anmeldelser - noe som betyr sin egen tidslinje faller sammen med tidslinjen symbolet er plassert på. Så hvis det er plassert på scenen, må det like mange rammer på hovedtidslinjen som det har på sin egen tidslinje for å spille av animasjonen i sin helhet. Med andre ord, mens et filmklipp vil spille uavhengig av tidslinjen, et grafisk symbol vil bli spilt bare så langt som sin overordnede tidslinjen vil tillate det.

I et nøtteskall, trenger en grafisk symbol rammer.
Gi det litt Frames

Hvis du går tilbake til vårt eksempel i Flash, grunnen til vår grafiske symbolet ikke spiller er fordi det er bare en ramme på hovedtidslinjen. Så la oss legge til noen rammer. Bare for demonstrasjonsformål, gå å ramme 30 og legge rammer. Nå gå til ramme 60 og gjøre det samme. Ser du hva som skjer her? Så gå å ramme 90. Veldig kult, ikke sant? Hold legge så mange rammer som du ønsker og teste filmen. Du bør se animasjonen begynner å spille, avhengig av hvor mange frames du har på hovedtidslinjen. Husk vårt symbol har 239 rammer på sin tidslinje, så for å se hele animasjon, det må være det samme beløpet på hovedtidslinjen

Merk:. Husk dette prinsippet vi har diskutert doesn 't bare gjelde for hovedtidslinjen. Tidslinjen at det grafiske symbolet er faktisk plassert på vil diktere sin avspilling. Så for eksempel hvis grafikken er inne i en filmklipp, trenger du rammer på filmklipp tidslinje for å gjengi grafisk animasjon. Prøv det ut selv.

Automatisk avspilling

Som du sikkert lagt merke til fra eksempelet fil, kan du faktisk se det grafiske symbolet animere som du skrubbe tidslinjen fra scenen. Ja, veldig kul. Dette bringer oss til en annen unik funksjon som skiller en grafisk symbol fra et filmklipp, og du vil sannsynligvis finne det å være den mest nyttige. Siden det grafiske symbolet tidslinje drevet, er en fordel med at det å ha animasjonen automatisk oppdatere innen Flash. Så lenge du har rikelig mengde rammer på tidslinjen der symbolet er plassert, kan du alltid se grafisk symbol animere levende.



Case Study: Ansiktsuttrykk

La oss utforske disse teknikkene litt mer for å gi deg en ny titt på hvordan du kan innlemme et grafisk symbol i et prosjekt. Åpne opp filen som heter facial_expressions.fla Hotell som er i kilden pakken. Du vil bli møtt med en hyggelig smilende ansikt på scenen som var en del av en illustrasjon for en animert figur jeg laget for noen år tilbake.

Hvis du klikker på symbolet, vil du se det er en grafisk med et bibliotek navn uttrykk
, og at den er satt til Single Frame 1. Gå på symbolet, og du ' ll se tre lag: øyne
, munnen Hotell og hodet
, som hver inneholder grafiske symboler. head
laget inneholder alle de andre elementene som utgjør denne lille fyren smilende ansikt, og hvis du låse opp lag og dobbeltklikk på symbolet du vil se er alle grafiske symboler også. For vårt formål, men vi kommer til å fokusere på de grafiske symboler for munn og øyne. Gå inn på munnen
symbol, og du vil se det inneholder ulike munnen figurer på ulike punkter på tidslinjen, og det samme gjelder for øynene. La meg påpeke at venstre og høyre øyne er forekomster av de samme symbol.

Gå inn både munn og øyne symboler og ta en titt rundt. Du vil merke at jeg har et ramme etiketter
lag tilsvarer hver ansiktsuttrykk, og at jeg valgte å sette hver av dem på en keyframe som er 10 rammer fra hverandre. Det er ingen grunn til å ha tidslinjen satt opp som dette annet enn at det er min egen måte å prøve å holde det rent og organisert. Jeg ville nok ikke bruke ramme etiketter i Action (selv om jeg kunne hvis jeg konvertert min grafikken til et filmklipp) men å ha en etikett for hver nye uttrykket lar meg kjenne på et øyeblikk hvor en bestemt uttrykk er på tidslinjen. Og dessuten gi meg litt plass slik at etikettene kan faktisk bli lest, bare gjør det lett for meg å huske hvor en ny munn eller øyne uttrykk oppstår på tidslinjen 10 rammen gap mellom hver keyframe.

Nå hopper tilbake ett nivå til det uttrykk
grafisk hvor vi bare har våre tre lag i munn, øyne og hode, og begynne å bruke disse symbolene for å lage noen animasjon. Det er mange forskjellige måter du kan sette ting opp her, avhengig av hva du ønsker å gjøre, men la oss bare holde det enkelt og gjøre vår mann blink.

Sett inn en ny ramme på alle tre lagene. Sjekk at både munn og øyne symboler er satt til Single Frame 1 og deretter sette inn en ny keyframe på øynene
laget og satt begge øynene til Single Frame 10.

Gå tilbake til scenen , gi deg selv om 45 eller så rammer, lage en ny keyframe på ramme 30 og endre en i første rammen
feltet til en 2. Husk dine nøkkel bør settes til Single Frame. Nå teste det ut og fyren skal blinke. Jeg vet det er ikke noe fancy, men poenget her er ikke så mye om hva som kan lages med det grafiske symbolet, men heller om det praktiske og fleksibiliteten det gir deg. Vi får til mer på dette i litt, men forhåpentligvis dette eksempelet har dine tannhjul snu.



Når ville du bruke en Graphic Over et filmklipp?

Personlig, noe gang jeg jobber med et prosjekt som krever å skape mange tidslinjeanimasjoner, vurderer jeg å bruke det grafiske symbolet. Enhver Flash bruker som noensinne har brukt utallige timer fiksing og triksing med mange filmklipp som alle inneholder sine egne animasjoner har trolig kjørt inn i en situasjon der de skulle ønske de kunne fastslå hvor noe var oppstått på en bestemt filmklipp tidslinje fra et annet sted i filmen. Fra min egen erfaring, har det vært mange ganger hvor jeg har en animasjon inni en filmklipp og ønsker å bruke det innenfor et annet klipp, men for å vite når et visst punkt i min animasjon ble nådd slik at jeg kan ha noe annet skje. Jeg måtte ty til en langtekkelig prosess for å hoppe frem og tilbake mellom filmklipp og teller rammer slik at jeg kunne finne ut hvor du skal plassere det på at andre klippets tidslinje. Ved hjelp av min animasjon som grafisk ville tillate meg å se alt uten å måtte eksportere hele min film.

Tips: Selv når jeg bruker et filmklipp for en tidslinje animasjon, jeg noen ganger midlertidig satt det som et grafisk i egenskapsvinduet så jeg kan se animasjonen avspilling mens andre gjenstander er animere rundt det. Da kan jeg få en bedre følelse av den samlede timing og gjøre noen tilpasninger; når jeg er ferdig, setter jeg den tilbake for å fungere som et filmklipp.

For å gjøre dette, klikker du bare på symbolet, går du til toppen av panelet Egenskaper og klikk på rullegardinlisten. Dette er hvor du kan endre symbol oppførsel på fly, vippe det mellom et filmklipp og grafikk. Dette er svært nyttig når du ønsker å bruke samme symbol som både et filmklipp og en grafisk hele prosjektet. Merk:. Denne teknikken vil ikke fungere hvis du prøver å endre mellom et filmklipp og en knapp eller mellom en grafisk og en knapp



praktisk bruk

Her er noen annen praktisk bruker om når du bør kanskje vurdere å bruke et grafisk symbol:

animerte presentasjoner: Foredrag er prosjekter hvor finner jeg meg selv bruker grafiske symboler mest. De fleste flash presentasjoner pleier å være tung på animasjon og synkronisering grafikk til et manus. Den grafiske symbolet egner seg godt til slike prosjekter som er i lineær i naturen og har begrenset brukermedvirkning.

Synkronisering lyd med en animasjon: Dette er en forlengelse av det forrige punktet. Hver gang du vil finne synkronisering mellom en lyd og en animasjon, kjører lyden sammen din animert grafisk symbol vil gi deg den type kontroll. Mange voice presentasjoner som jeg har vært involvert i har ansatt animerte grafiske symboler.

Character animasjon: Når du skal lage intrikate animasjoner med vektorgrafikk som har mange lag, er det grafiske symbolet er veien å gå. Mange tegneserie animasjoner har blitt gjort med blits og jeg vil satse på noe som hvis du skulle undersøke FLA de ble laget i, vil biblioteket bli pakket til randen med grafiske symboler. Akkurat som ansiktsuttrykk, skaper sekvenser for walk sykluser og leppe synkronisering sekvenser er ideelle arbeidsplasser for bruk av grafisk symbol.

Opprette flere varianter av et symbol: Vi har allerede berørt dette begrepet i hele artikkelen, men jeg tror det er verdt nærmere forklaring. Hvis du husker i vårt ansiktsuttrykk eksempel fra tidligere, ble munn og øyne grafisk brukt til å huse alle våre forskjellige munn og øyne former for enkel animeringen. Vel, noen ganger bruker jeg det grafiske symbolet for å bare holde en haug med tilsvarende filmklipp som er bare litt annerledes, eller hva jeg liker å referere til som positurer.

I noen tilfeller, jeg er ikke ute etter å sekvens disse utgjør for en animasjon som i ansiktsuttrykk eksempel, men å opptre som en innehaver av mine elementer, som vil forenkle prosessen med å få tilgang til dem senere. Jeg synes det er mye lettere å referere til hver positur hvis de er alle på hvert sitt sted inne i en grafisk stedet for å sile gjennom en lang filmklipp tidslinje med mange lag. Alt jeg trenger å gjøre er å målrette rammenummeret til en jeg ønsker inne i den første rammen feltet som vi gjorde i ansiktsuttrykk eksempel. Og hvis jeg trenger å kontrollere noen av mine positurer med Actionscript, jeg bare slå min grafisk inn et filmklipp.



Begrensninger

Den grafiske symbolet er ikke uten sine begrensninger og ulemper. Mens grafisk symbol kan være svært nyttig i visse situasjoner, på ingen måte er jeg taler for det som en erstatning til filmklipp. I de fleste situasjoner vil et filmklipp være symbol på valg, og vil gjøre det bra selv for å skape flest tidslinjeanimasjoner. Her er noen ting å huske på når du bruker det grafiske symbolet:

Kan ikke bli styrt av Actionscript: Dette er et opplagt poeng, men det er en stor sak. I motsetning til et filmklipp, kan du ikke tildele et grafisk symbol en forekomst navn og noen skript du plasserer på sin tidslinje vil bli ignorert. Husk imidlertid at du fortsatt kan bruke et filmklipp som har Action på sin tidslinje som grafisk og det vil spille som normalt.

Kan ikke bruke filtre: For noen grunn, ikke Flash ikke tillate deg å bruke noen av filtre eller blandingsmodi til et grafisk symbol. For å komme rundt dette, kan du bare sette grafisk symbol inne i et filmklipp og deretter bruke filteret til klippet.

Classic tweening grafiske symboler med nestet animasjon kan være problematisk: Dette er en jeg har lært på den harde måten, og det er et problem som kan skje ganske enkelt uten at du selv å realisere. La oss si du har en grafisk symbol med en ganske involvert animasjon inni den, og du vil tween symbolet på hovedtidslinjen fra venstre til høyre over scenen som dine nøstede animasjon spiller. Du lager din første keyframe på tidslinjen, og du setter den til Play Once starter på ramme 1 i Properties panelet. Når du oppretter andre nøkkelbilde, vil Flash automatisk sette den til å spille en gang og oppdatere den første rammen feltet tilsvarende med riktig rammenummeret i rekkefølge.

Så bruker eksempelet ovenfor hvis ditt første keyframe er på ramme 10 på hovedtidslinjen og din neste keyframe er på ramme 40, det grafiske symbolet på denne rammen vil bli satt til å spille en gang med den første rammen feltet allerede satt til 30. Få det? Det er satt inn rammenummeret du slapp fra? Nå hvis du skulle legge til eller slette rammer innenfor tween, vil symbolet på at andre keyframe fortsatt har 30 sett som sin første rammen å spille fra dermed helt å kaste av rekkefølgen på din nestet animasjon. Det er bare noe å huske på; når du først lage nøkkelbilder, vil den første rammenummeret oppdatere riktig, men når du begynner å bevege nøkkel opp og ned i tidslinjen, vil ting bli kastet av.

Merk: Dette gjelder bare for klassiske tweens. Hvis du bruker metoden for å skape bevegelse tweens som ble introdusert i Flash CS4, vil dette ikke være et problem.



Konklusjon

Forhåpentligvis etter å ha lest denne artikkelen du har en annen oppfatning av det grafiske symbolet. Selv om det ikke kan være noe du kan se deg selv ved hjelp av alle som ofte, ting å huske på med det grafiske symbolet er at det handler om å vite når du skal bruke den. Som utvikler, vet jeg ikke bruker det så ofte, men jeg vet at jeg har det som et alternativ hvis situasjonen krever det. Som med de fleste ting i Flash, kommer det ned til et spørsmål om personlig preferanse. Hvis du velge og vrake din flekker med omhu, ved hjelp av grafisk symbol kan være praktisk og tidsbesparende.

Jeg vet at mange ble dekket i denne artikkelen, men den beste måten å virkelig forstå hva det grafiske symbolet kan gjøre er å bruke litt tid på å spille rundt med den i Flash. Endre looping alternativer, målrette ulike rammenummer for å starte animasjonen på og veksle frem og tilbake mellom å bruke det som et grafisk og et filmklipp å virkelig se hva som fungerer og hva som ikke virker. Så kanskje neste gang du treffer F8 og du har planer om å lage en tidslinje animasjon, husk det grafiske symbolet er kanskje ikke så unyttig likevel. Anmeldelser