Cuepoint Eksempel 1: Video med pige, der skriger

For bedre at forstå hvordan min video bruges i Flash, bør du se videoen som den er uden effekter.
Du kan se videoen på Youtube her:

I den version jeg har lavet har jeg givet videoen en tegneserie-agtig skær, ikke blot ved at putte filmen ind i en tegneserie-ramme, men ved også at grafisk illustrere pigens skrig med et Batman TV-serie agtig “Waaaaaaaaah”.
Se den nye version af video’en her:

I tegneserie-eksemplet loader jeg en helt “ren” video ind i Flash og definerer med ActionScript 3.0 tider og navne på nogle ASCuePoints, der bliver mine markører i videoen.
Her er et eksempel på mit første ASCuePoint:

Som det nok kan gennemskues af dette, vil jeg gerne have at:
- efter 1 sekund
- skal funktionen reactToCuepoint afvikles.
Funktionen placerer min grafik et nogenlunde tilfældigt sted på videoen i et afgrænset tidsrum.

Kigger man på alle mine ASCuePoints..

..vil man se, at de alle hedder “scream” undtaget det sidste cuepoint, der hedder screamveryshort.
Det er fordi funktionen reactToCuepoint læser dette navn, og viser den grafik der passer til. Læser funktionen “scream” vises den almindelige “Waaaah” grafik, men læser den “screamveryshort” vises en anden, længere type “Waaaaaaaaaah” grafik, der stemmer overens med, at pigen alligevel efterhånden er ved at miste stemmen.

Kort om cuepoints og Flash Video

Cuepoints markerer som skrevet et bestemt sted i ens video. Det kan være et kapitel, en scene eller en handling som i ovenstående eksempel. Brug af cuepoints er et kraftfuldt værktøj, når du vil synkronisere din video med animationer, tekst, musik eller f. eks. vil registrere progress i Google Analytics
Cuepoints kan tilføjes på flere måder, det kan tilføjes som kode som i ovenstående indlæg, eller det kan tilføjes i selve videoen, som følgende eksempel vil vise.

Cuepoint Eksempel 2: Styr på musikken i en quiz

For nylig skrev jeg om en musik quiz jeg havde lavet i ActionScript 3.0, men jeg fik aldrig beskrevet teknikken bag.
Vil du prøve quiz’en og se hvordan den fungerer, kan du læse dette Creedence Clearwater Revival quiz indlæg.

Quiz’en går kort fortalt ud til at lytte til et medley over gode Creedence Clearwater Revival sange. Når man hører en sang, skal man fortælle titlen på den. 5 sekunder før medley’et skifter til en ny sang, advares man, så man er sikker på at nå at give sit svar. Når medley’et skifter til en ny sang, får man nye svarmuligheder. Og så videre..

Inden jeg skulle lave quiz’en overvejede hvilken form for styring jeg havde brug for til quiz’en.
Jeg ville gerne vide:
- hvornår musikken i medley’et skiftede fra sang til sang, så jeg kunne vise de nye svarmuligheder
- 5 sekunder før medley’et skiftede fra sang til sang, så jeg kunne advare om at tiden var ved at løbe ud
- når medley’et sluttede, så jeg kunne lave en status på antal rigtige


I billedet her ses lidt af den lyd jeg har redigeret og gemt som Flash Video fra Soundbooth. Øverst ses nogle markører, bla. en, der hedder Marker 02. Denne markør er med til at markere, hvornår sang 2 starter.

For at dette skulle kunne fungere besluttede jeg at lave en video uden visuelt indhold og kun indeholdende lyd. Dette klarede jeg ved at redigere min musik i Soundbooth, indsætte de cuepoints jeg havde brug for og så eksportere lyden som en Flash Video fil (.flv). Ved så at loade min video i Flash og kun bruge lyden, ville jeg kunne styre min quiz ved hjælp af de cuepoints jeg havde oprettet.

Det gode ved denne løsning var også, at jeg præcist ville kunne reagere, når medley’et skiftede sang. Havde jeg tilføjet mine cuepoints i ActionScript 3.0 var det kommet til at tage lang tid at gætte sig frem til, præcist hvornår medley’et skiftede sang.

Lignende indlæg

Fandt du ovenstående interessant, kunne du måske også have interesse i:
Dette indlæg omkring kommunikation fra Flash til JavaScript og retur.
Dette indlæg omkring hvordan man matematisk omregner sekunder til formatet hh:mm:ss.
Dette indlæg omkring lyd og video og optagelserne af en jazz duo.
Dette indlæg omkring en ActionScriptet animation, der blev brugt som levendegørelse af logo.

Credits

Fremragende tutorial omkring ActionScript 3.0, skrevet af Jody Hall.
Esben Hindhede og Maria Bøge Sørensen for grafisk input til video’en med den skrigende pige.

Prøv quiz’en her

Quiz’en her går ikke kun ud på at navngive 8 numre med Creedence Clearwater Revival, men er samtidig en mulighed for at nyde dette lækre mix af 8 store CCR-hits. God fornøjelse med både musikken og quiz’en :O)
(Husk lyd!)

Credits

Fremragende tutorial omkring ActionScript 3.0, skrevet af Jody Hall.
Creedence Clearwater Revival – køb deres musik gennem iTunes.

Optagelserne

De timers film jeg fik var skudt hist og pist under en fotosession, der dækkede MeToos efterår 2010 og forår 2011 kollektioner, samt NEXT LEVELs efterår 2010, forår 2011 og Jeans Guide kollektioner. Optagelserne er ikke optaget professionelt, men både håndholdt og tilfældigt som et tillæg til fotografierne. Heldigvis var der masser af materiale at blande sammen, så der var materiale nok til de 5 små film af ca. 1 minuts varighed.

Filmene

Alle filmene kan ses herunder. Mine personlige favoritter er MeToo forårs kollektionen og NEXT LEVELs Jeans Guide. MeToo forår fordi ungerne er for søde, især ham, der er fantastisk optaget af nisserne. Og NEXT LEVELs Jeans Guide fordi pudekamp altid er fascinerende.
Men kig selv, der er masser af fine detaljer og klip i de forskellige film.

Redigering og musik

Filmene er redigeret i og exporteret fra Premiere, der fint opfyldte de behov jeg havde for simpel timeline redigering.
De to stykker musik er udvalgt fra audiojungle.net og understøtter fint stemningen og budskabet for de forskellige kollektioner.

Lignende indlæg om film

Hvis du synes om ovenstående kunne du måske også have interesse i:
- En dokumentarfilm optaget i Helsinki i 2005, der dækker VM i håndværksfag.
- En kort musikvideo med en skizofren guitarist, der spiller duo med sig selv.
- En kunstfilm fra Hernings natteliv, filmen er lavet udelukkende af stillbilleder.
- En viral film om hvordan børn morede sig i gamle dage.

Credits

Musik til MeToo: Jazzy Children’s song
Musik til NEXT LEVEL: NS-Pop Music

Eksempel på kommunikationen i det endelige eksempel

Her kan ses hvordan interaktion med det øverste felt påvirker Flash’en nedenunder:

Sådan kommunikeres der til og fra JavaScript

Min kollega ønskede, at han bare kunne smide sit info som JavaScript-variabler i den .html-fil, der embeddede Flash’en, og at jeg så selv derfra skulle stå for læsning og håndtering af info.
I det konkrete eksempel skulle jeg indledningsvist loade et billede og dernæst løbende læse et sæt koordinater, der ville flytte mit billede rundt.
Det gav mig følgende JavaScript, først en funktion jeg kan kalde, der svarer med hvilket billede, der skal loades i Flash:

Og her funktionen, der returnerer koordinater for hvor markeringen er placeret:

Tilbage var så bare at registere/godkende kommunikationen fra JavaScript-funktionerne i ActionScript,

oprette de to funktioner, der skulle kunne kaldes fra JavaScript,

og

og så kalde JavaScript-funktionerne:

Mens den første funktion kun kaldes en gang, da billedet kun loades en gang, kaldes den anden funktion 24 gange i sekundet. På den måde får Flash’en hele tiden nye koordinater at arbejde med fra JavaScript, og derfor er billedets placering hele tiden opdateret i Flash’en.
Desuden virker det overraskende smooth, jeg har endnu ikke oplevet en hakkende eller langsom opdatering af billedets placering i Flash’en, hvilket jo er et stort plus.

Credits

Kevin Steffer for JavaScript’et
Esben Hindhede for design-rettelser

Konverter tal i sekunder til timer, minutter og sekunder

Idag sad jeg så pludseligt selv med en opgave, hvor jeg fik brug for denne type matematisk løsning.
Jeg skulle lave en video, og når jeg requestede længden på videoen fik jeg den i sekunder.
Længden på videoen var 102 sekunder, og dette skulle jeg lave om til timer, minutter og sekunder som dette: 00:01:42

Konverteringen i ActionScript 3.0

Her kan ses, hvordan jeg løste opgaven, i min secsMinsHours.fla har jeg følgende ActionScript:

Altså tallet 102 sekunder.
Dette tal giver mere mening, når det fortælles i timer, minutter og sekunder, derfor kalder jeg metoden secsMinsHours i nedenstående class, der så returnerer tallet til mig i timer, minutter og sekunder.

MathStuff.as class:

Kommentér endeligt på løsningen, jeg er rookie-programmør og det kunne sikkert sagtens laves endnu bedre.

Lignende indlæg

Synes du om ovenstående, så prøv også at læs:
Hvilke funktioner jeg har lavet til min ArrayStuff class og hvordan jeg bruger dem.

Credits

Udvikler Allan Iversen
Website: Project Euler

HDR

HDR står for High Dynamic Range. Og ordet beskriver meget godt teknikken bag. Mens det menneskelige øje kan opfatte et kontrastforhold på 10.000:1 kan et digital-kamera typisk kun registrere et kontrastforhold på 400:1. Derfor kan fotografer godt stå med en lidt flad fornemmelse efter eksempel vist at have fotograferet en smuk solnedgang, mens billedet kun delvist gengiver denne.
HDR er en teknik, der gengiver i vores eksempel vil resultere i et billede, hvor detaljerne i skyggerne på træet bevares og samtidigt bevarer solnedgangen uden at den brænder ud. Altså et billede med et høj dynamisk kontrastforhold; HDR.

Teknikken bag HDR

Teknikken er forholdvist simpel.
Med et kamera på stativ tager man en række billeder med forskellige lukketider.
De billeder, der tages med kort lukketid vil komme til at gengive vores sol pænt, mens de billeder, der tages med lang lukketid bevarer detaljer i billedets mørke områder. I vores tilfælde har vi taget 7 billeder med lukketider på hhv. 1/200, 1/400, 1/800, 1/1600, 1/3200, 1/6400 og 1/8000 sekund.

Her kan ses hvordan vores billede kom til at se ud med den længste lukketid; 1/200 sekund:

Billedet her bevarer træet fint og grønt, hvorimod solen i baggrunden er helt brændt ud.

Her kan ses hvordan vores billede kom til at se ud med den korteste lukketid; 1/8000 sekund:

Og her er træet nærmest en stor skygge, hvorimod solnedgangen er ganske smuk.

Vi har nu taget vores 7 billeder og vha. funktionen File / Automate / Merge to HDR Pro i Photoshop CS5 smeltet disse sammen til et billede.
Dette er endt ud med et billede, der viser langt mere, end et normalt fotografi ville kunne.
Her er det endelige resultat – Klik på billedet for at se det i en stor version:

Bemærk hvordan træet og forgrunden stadig er synlig og i farver, mens solnedgangen er ægte rød og smuk og skyerne detaljerede.

Skulle dette billede være taget uden brug af HDR, ville det være kommet til at se således ud:

Stadig et smukt motiv, men uden den røde glød over solnedgangen og et træ, der mere er skygger end detaljer.
Billedet her et taget med en lukketid på 1/1600 sek.

Billeddata

For alle 7 billeder gælder:
Kamera: Nikon D3
Blænde: 2.8
Brændvidde: 24 mm
ISO: 3200

Lignende indlæg

Fandt du dette interessant, bør du måske læse videre her:
Indlægget om førstehåndsindtrykket af Canon EOS 550D og tilhørende billedeksempler.
Indlægget om en film lavet af stillbilleder fra mit kamera.
Indlægget om hvordan beskæring af billeder gør dem meget bedre.

Credits

Stig Meyer Jensen for viden, lyst og grej til at dette kunne færdiggøres.
Wikipedia for info omkring HDR.
Fotostart.dk for inspiration og gode tema-artikler.

Billedet er af 3-årige Sylvester, der fascineret kigger efter de sæbebobler, han lige har skudt med sin nye sæbebobbel-pistol.

Beskæring

Jeg synes jeg kan komme rigtigt langt med beskæring af de billeder jeg tager. Typisk beskærer jeg for at fjerne elementer i billedet, der tager fokus væk fra mit motiv. En god beskæring er også altid med til at forstærke billedets komposition.
I tilfældet med dette billede har jeg fået følgende ud af beskæringen:
- Jeg har skåret billedet, så Sylvester og de 4 sæbebobler udgør motivet, væk er lidt af bunden og meget af den ligegyldige højreside af billedet.
- Jeg har skåret billedet, så Sylvester nu står placeret efter “rule of thirds”. Det er med til at henlede opmærksomheden på mit motiv.
- Jeg har skåret billedet, så Sylvester nu kigger ind i billedet istedet for ud af det. Det gør billedet mere kraftfuldt.

Her er et eksempel på det beskårede billede, og hvordan Rule of thirds fungerer sammen med billedet:

Og her ses det endelige resultat, billedet er nu velkomponeret og langt mere spændende at betragte:

Et lignende eksempel på beskæring

For god ordens skyld følger her et lignende eksempel på brug af beskæring.

Billedet her er et silhuet selvportræt jeg har taget en solrig aften i juni 2010.

I tilfældet med dette billede har jeg fået følgende ud af beskæringen:
- Jeg er kommet tættere på mit motiv, der derfor fremstår stærkere.
- De 2 steder, hvor broerne krydser skinnerne er placeret efter “rule of thirds” og får dermed beskuerens naturlige opmærksomhed.

Her er det beskårede billede:

Andre eksempler på beskæringer

Nogle gange er jeg kommet for tæt på mit motiv, og kan derfor ikke beskære ind til hovedmotivet i billedet efter “rule of thirds”.
I følgende eksempel er der motiv i næsten hele billedet, og alligevel kommer det til at fremstå en smule stærkere efter en beskæring.
Se det originale billede her:

Billedet er et portræt af en glad mor og en glad datter.

Her ses det endelige billede, hvor den ligegyldige højre side og den ligegyldige bund er skåret fra. Billedet er skåret rigtigt tæt på moderen og datteren, men det betyder også, at den meget forstyrrende hvide bh-strop er væk fra billedet, så der nu er gået all-in på 100% familie glæde.

Prøv dig frem med beskæring

Inden du kasserer et billede, der umiddelbart virker kedeligt bør du prøve at beskære det, for at se om du kan få motivet til at stå stærkere. Det gælder faktisk også billeder, der umiddelbart virker OK, prøv dig frem med lidt beskæring. Beskæring er ikke altid løsningen, og dygtige fotografer er så opmærksomme på deres motiver, at der tænkes komposition hver gang, der tages et billede. Alligevel er det et forsøg værd. Det kan styrke dine billeder rigtigt meget.

Lignende indlæg

Fandt du dette interessant, bør du måske læse videre her:
Indlægget om førstehåndsindtrykket af Canon EOS 550D og tilhørende billedeksempler.
Indlægget om en film lavet af stillbilleder fra mit kamera.

Credits

Wikipedia og Rule of thirds

Nummeret

Nummeret er af Muris Varajic og er mest af alt en intro til en simpel jazz-rundgang. Fra første gang jeg hørte nummeret var jeg meget opsat på at lære det, også selv om jeg vidste, at det ville tage et godt stykke tid at lære de tossede jazz-akkorder.

Indspilningen

Jeg optog først rytme-guitaren i Garageband, og derefter indspillede jeg lead-guitaren til rytmeguitaren, så jeg var sikker på, at de ville passe så godt sammen tempomæssigt, som muligt. Mine indspilningsmuligheder til Garageband var ikke optimale, men jeg synes nu alligevel jeg fik en acceptabel lyd ud af det.
Her kan man få en idé om de 2 færdige spor i Garageband:

Video

Efter at have indspillet (en del gange) og nu havde et acceptabelt lydspor, optog jeg to playback spor med video, et til hver guitar.
Faktisk var jeg nogenlunde igennem at have dubbet begge lydspor til videoindspilningerne og rodede med at finpudse de sidste videodetaljer i After Effects, da jeg opdagede, at jeg havde indspillet begge videospor med grimme hjemmesko på. Så jeg måtte lige starte forfra på videodelen!
Den færdige video kan ses i valgfri størrelse og kvalitet ved Vimeo, eller den kan ses direkte her på siden i en embedded version:

Inden jeg fik klippet de 2 film sammen i After Effects så de hver især således ud.
Først videoen af rytmeguitaren:

Og her er den del af videooptagelsen af leadguitaren, der bliver placeret ovenpå højre side af videoen med rytmeguitaren:

Den interaktive version af videoen

Med versionen af jazz duo’en uploadet til vimeo.com, havde jeg nu en færdig version af projektet, men jeg besluttede at lave en ekstra, alternativ visning af den også.
Meningen med denne ekstra version var at håndtere video’en i Flash, og styre lyden af video’en, således at man via et helt simpelt interface ville kunne slå enten den ene guitar til eller fra, og dermed høre den ene guitarist spille alene.

I denne interaktive version kan du selv være med til at bestemme, hvem af guitaristerne i jazz duo’en du vil høre.

Rent teknisk er det forholdsvist simpelt at skille lyden fra video’en ad, og dermed gøre den del af video’en interaktiv.
Først og fremmest er indspilningen af musikken lavet således, at rytmeguitaren ligger i højre side og lead-guitaren i venstre side af et stereo-spor.
Når man så vil styre sådan en lyd med ActionScript 3.0 i Flash betyder det, at man fortælle det SoundTransform Object, der styrer panning af ens NetStream ( = ens video) hvilken del af musikken, den skal spille. Skal den nøjes med at spille højre side, venstre side, eller skal den spille begge dele?

Det ActionScript 3.0 kode, der skal til for at styre netop denne del, kan snuppes her:

Lignende indlæg

Synes du videoen her var spændende, kan du måske få lidt ud af følgende:
- En kunstfilm fra Herning en fredag nat. Kunstfilmen her er lavet udelukkende af stillbilleder.
- En humoristisk film om, hvad børn gjorde i gamle dage, når de skulle underholde sig selv.
- En dokumentarfilm om den danske deltagelse ved konkurrencen World Skills 2005 i Helsinki, Finland.

Credits

Per Andersen fra Komo for ekspert-råd omkring After Effects.
Muris Varajic for det lækre jazz nummer.

Kameraets indstillinger:
Kammeraten og jeg bevæbnede os med en trefod og et Canon EOS 550D og efter en lille testtur i bilen, fandt vi frem til at følgende settings gav et tilfredsstillende billede:
Hvidbalance: Tungsten
Blænde: 3.5
Brændvidde: 18 mm
Lukketid: 1/15 sek.
ISO: 3200
Her er et eksempel på et af de billeder vi senere brugte til filmen:

Postredigering af billederne i After Effects:
Efter at have kørt den ønskede tur, sad vi tilbage med næsten 500 billeder, der skulle sættes sammen til en film.
Vi var umiddelbart tilfredse med materialet, og prøvede så at sætte det sammen, frame by frame, i After Effects.
Det tog en uhyggelig tid og en masse tålmodighed, men vi endte op med en film, sat sammen i et tempo, der var langsomt nok til, at man kunne følge med i, hvor i Herning filmen var optaget, men samtidigt hurtig nok til at filmen ikke blev kedelig.
Slutteligt blev filmen bearbejdet i After Effects med effekterne Levels og Selective Color for at fremhæve/skjule bestemte farver i filmen.

Den endelige version af filmen
Desværre så vi ikke meget liv i byen, den nat vi kørte, men vi synes at udtrykket i filmen var så spændende, at vi ville gøre den færdig alligevel.
Som sidste prik over i’et komplimenterede vi filmen med et stykke lækkert musik, der passede glimrende til tempoet i filmen.
Filmen er ikke ment som en film, der nødvendigvis skal ses til slut eftersom indholdet i filmen looper, men det skal gerne efterlade et kunstnerisk, anderledes indtryk.
Filmen kan ses direkte her, eller kan ses i valgfri versioner ved vimeo.com.
Husk lyd!


Tidligere relaterede projekter:
Hvis du er nysgerrig for at se mere lavet i samme stil, bør du se dette:
After Effects: Opbygningen af en viral film om gamle dage
Fotografi: Førstehåndsindtryk af Canon EOS 550D og billeder

Credits:
Runolfur Gudbjørnsson for inspirationen.
Stig Meyer Jensen for køreturen og kreativ sparring.
Audiojungle’s oconnel1 for musikken.

Se et eksempel på TextAnim, Tweener og BulkLoader sammen

Se dette eksempel jeg lavede for nyligt med både load, tekst og fades.

I banneret her ovenfor sørger:
- BulkLoader for at loade alt det indhold, der er med til at skabe Flash’en
- Tweener sørger for overgangene mellem billederne
- Mens TextAnim er med til at skrive teksterne på billederne.

Hvordan bruger man TextAnim

Som nævnt ovenfor har jeg tidligere lavet guides til både BulkLoader og Tweener, men jeg har endnu ikke lavet en til TextAnim.
Så her følger en demo af, hvordan jeg nogenlunde har brugt TextAnim i ovenstående eksempel.

Og her er koden, der skal til for at lave animationen. Jeg har kommenteret det meste af koden.

Som det kan ses af både eksemplet og koden, er det relativt simpelt at få sin tekst til at se meget mere spændende ud i Flash på denne måde.
Der er dog masser af muligheder herfra. Man kan f. eks tilføje lidt ekstra til de effekter man tildeler sin TextAnim.
Se denne lille variation:

Den eneste ændring fra det første eksempel til det næste er, at jeg har skiftet denne linie:

ud med dette:

Altså fader jeg ikke længere kun hvert ord i mit tekstfelt ind, men skalerer det også frem og tilbage på x-aksen.

Udskifter man tekstens farve med en et mønster fra et billede, kan man lave en anden variation af ovenstående.
Her er det mønster, der nu skal erstatte vores tekstfarve:

Det vil give os følgende TextAnim variation:

Detaljerne i alle 3 eksempler omkring TextAnim kan ses i .fla-filerne, som kan downloades her.

TextAnim er nemt, stabilt og skal prøves mere af

Jeg håber eksemplerne var til at forstå, og at TextAnim vil være en del af din bevidsthed, hvis du på et tidspunkt står med lidt småkedelig tekst i Flash.
Det er helt vildt nemt at sætte op, og virker både stabilt og slet ikke processortungt. Jeg vil ihvertfald forsøge at snige det ind i de næste par opgaver, for at få det mere ind under huden.

Credits

Guilherme Almedia for TextAnim.
Zeh Fernando for Tweener.
Arthur Debert for BulkLoader.
Helle Krogh Jensen for det oprindelige design af banneret.
Paw og Karsten for de ganske fantastiske Kawasaki billeder.