LYSGAARD & PARTNERE Flash Presentation

Transkript

1 IT university of Copenhagen Design, communication & media FLASH Course autumn 2001 Advanced multimedia production at the Internet FLASH LYSGAARD & PARTNERE Flash Presentation by: Morten Bach Jensen Morten Bach Jensen has a background as a blacksmith and holds a Bachelor degree in Engineering from the Engineering College in Esbjerg (1994) as well as a diploma in Marketing. Before starting his postgraduate studies at the IT university of Copenhagen Morten worked at severel positions including Product Manager at Danfoss A/S, Business America & Asia at Grundfos Management a/s and Account Director at advertising agency Kunde & Co.

2 IT-højskolen i København LYSGAARD & PARTNERE flash presentation Side Indholdsfortegnelse Indledning 1 Produktionens baggrund 2 Målgruppebeskrivelse 3 Design kriterier 4-5 Teknisk gennemgang 5-6 Konklusion 6 Bilag: Storyboard Flow-chart Morten Bach Jensen (e2001) 0

3 IT-højskolen i København LYSGAARD & PARTNERE flash presentation Indledning Denne produktion og rapport er udført i forbindelse med et 4-ugers-kursus i avanceret multimedieproduktion til Internettet (Flash) E2001, af: Morten Bach Jensen, mbj@it-c.dk, IT-højskolen i København, DKM E2001. Vejleder: Marius Hartmann, hartmann@it-c.dk Kurset og eksamensformen er beskrevet på: Rapporten er vedlagt en CR-R hvorpå der findes følgende: - I kataloget SWF produktionen i publiceret udgave med start i filen index.html. - I kataloget FLA produktionens kildefiler. - I kataloget Dokumentation findes nærværende rapport i filen FLASH_rapport.doc, samt storyboard og flow-chart i filen story_flow.ppt. Ligeledes findes filen LYSPAR.html, der giver adgang til at se video materialet der danner udgangspunkt for produktionen, rapporten udarbejdet i forbindelse med video produktionen, samt Lysgaard & Partneres hjemmeside. - I kataloget Dokumentation/projektbeskrivelse findes i filen KLIK_MIG.html projektbeskrivelsen, som er godkendt forud for projektets opstart. Produktionen kan ligeledes ses online på følgende URL: Det samlede omfang af produktionen, inklusive rapport, er en uges arbejde for en person, svarende til ca. 40 timer. Morten Bach Jensen (e2001) 1

4 IT-højskolen i København LYSGAARD & PARTNERE flash presentation Produktionens baggrund Produktionen tager udgangspunkt i en CD-R videoproduktion udført af undertegnede for Lysgaard & Partnere (se vedlagte CD-R: /Dokumentation/LYSPAR.html). Lysgaard og Partnere tilbyder human-ressource-udvikling, og salgsprocessen for et sådant produkt er i stor udstrækning bundet op på muligheden for at få adgang til den personlige præsentation (se nedenstående figur). Tlf. kontakt til 100 emner Send mate riale Tlf. kont. Send mate riale Tlf. kont. Pers. møde/ præs. for 5 emner Flere møder 1 emne som ny kunde 5 % hit 20 % hit 1 % total hit CD-R video præsentationen skal bidrage til at bringe den personlig præsentation ind i slagsprocessen på et tidligere tidspunkt. Samtidig er videoproduktionen tænkt som en case på om een mand, eet kamera og een computer kan forestå sådanne produktioner, og om man derved ville kunne tilbyde sådanne produktioner til en overkommelig pris. I denne produktion er det forsøgt at omsætte det eksisterende video materiale til en flash - præsentation, der kan integreres med Lysgaard & Partneres eksisterende hjemmeside (se vedlagte CD-R: /Dokumentation/LYSPAR.html). Det har været vigtigt for mig, at forsøge mig med integrering af video, lyd, billede og animation i flash, for derved at gøre brugeren player uafhængig (Windows media, Real & Quick Time), og samtidig give mulighed for at lave alt på én platform, frem for at skulle stykke tingene sammen via avanceret javascript eller SMIL etc.. Videoen er nonlineær i sin fortælleform (additive dramaturgi) og bør derfor fint kunne overføres til Internettet. Videoproduktionen lider tydeligt af de begrænsede produktionsbetingelser, og det har været målet at peppe indtrykket op. Morten Bach Jensen (e2001) 2

5 IT-højskolen i København LYSGAARD & PARTNERE flash presentation Målgruppe beskrivelse Lysgaard & Partneres primære målgruppe er personaleafdelingerne i virksomheder, der opererer på både konsument- og producentmarkedet. Da Lysgaard & Partnere er en nystartet og relativ lille virksomhed, er der naturligt sat begrænsninger i størrelsen af virksomhederne, følgende karakteristika kunne opsættes for målgruppen: Demografiske karakteristika Organisatoriske karakteristika Indkøbs karakteristika Virksomheder og institutioner med mellem 30 og 300 ansatte, eller selvstændige divisioner/sektioner. Primært virksomheder på Sjælland. Demografiske data for de personale ansvarlige kunne være: - Videregående samf./humanistisk eller handelshøjskole uddannelse Ligeligt fordelt mellem mænd & kvinder Organisationen har en personale-ansvarlig/afdeling. Organisationen og ledelsen er modnet i den forstand, at man tror på, at human-ressource-udvikling kan gøre en forskel. Medarbejderne er et at kompetenceområderne i virksomheden, og er væsentlige for virksomhedens succes. Man vælger seriøsitet frem for underholdning. Virksomheden investerer min DKK (eller er villig til at investere) i human-ressource-udvikling årligt. M.h.t. adgang til mediet må der, eftersom der er tale om virksomheder, forventes relativt gode forhold for målgruppen (højhastighedsforbindelse). Samtidig må man forvente, at målgruppen har relativt god maskinkraft til rådighed. Af en målgruppe med videregående uddannelse, der benytter IT i deres hverdag, virker det samtidigt som fornuftigt at forvente et Internet kendskab over begynder niveau. Og at man derfor eksempelvis godt vil kunne downloade en flash- player, hvis man skulle tilhøre den marginal gruppe, der ikke har den endnu. Morten Bach Jensen (e2001) 3

6 IT-højskolen i København LYSGAARD & PARTNERE flash presentation Design kriterier Det grundlæggende design er stjålet fra Lysgaard & Partneres eksisterende hjemmeside ( /Dokumentation/LYSPAR.html). Det meget rolige og funktionelle grid-baserede-design, det beskedne farvevalg, Lysgaard & Partneres logotype, sat i en bredgadeagtig eurostyle; holder alt sammen tingene nede på jorden. Hvis man skulle lave en tryksag for Lysgaard & Partnere er det lige før man kan lave den med udgangspunkt i én staffage farve og raster af denne. Efter at have besøgt Lysgaard & Partneres hjemmeside sidder man tilbage med et indtryk af en seriøs virksomhed,der vægter det konsulentprægede højt. Det er ikke mange gange, man bliver overrasket. Video- og lydmaterialet der har været udgangspunkt for produktionen hører ligeledes til i den meget rolige og seriøse ende ( /Dokumentation/LYSPAR.html). Og det er fint på denne måde. Human-ressource-udviklingsbranchen har brug for et seriøst alternativ. For at tilføre præsentationen dynamik har jeg arbejdet med både speak, baggrundsmusik og effektlyde. Baggrundsmusikken er for at spare holdt i to 20 sekunders loops. Både musik og effektlyde er fra kilder, hvor der ikke er ophavsret. Samtidig er der tilføjet en yderligere dimension med flyvende tekst movieclips, kontrasten imellem de to tekst farver er meget høj og skulle give rum. Det er ikke afgørende, at man læser teksten, men mere, at den fremstår som et billede, der komplementere de andre hændelser. Jeg har valgt en sans serif skrift, da jeg i forhold til det generelle design ikke kunne se det anderledes, fonten hedder Thesis og er for mig lidt flot, forfinet og fræk i formen, samtidig med at den bibeholder nogle af de web Verdaniske dyder. Når man taler om at tilføre produktion dynamik, kunne det være fristende at bryde formsproget endnu mere, end det er gjort. Hvorfor ikke driste sig ud over griddet en gang imellem, og hvad med flere runde former, måske endda afskårne. Jeg viste Peder Lysgaard, det nuværende resultat, og hans reaktion var fint, men måske lidt for levende, det var svar nok for mig, der var allerede rigelig dynamik i produktion. Morten Bach Jensen (e2001) 4

7 IT-højskolen i København LYSGAARD & PARTNERE flash presentation I bilaget ses storyboardet for produktionen. Storyboardet er lavet før produktionen gik i gang, og består af prototypebilleder fra photoshop og tekst. Til storyboardet hører en To make ready list, der er mit personlige produktionsværktøj. Jeg har ud fra det eksisterende design valgt at reducere det areal, hvor fortællingen foregår (Story window i storyboardet), dette for at det relativt lille videoområde (120x90 px i 760x420 px window) ikke skal blive for anonymt. Teknisk gennemgang Streaming media er et af de områder, der til stadighed udvikler sig på nettet. De fleste eksperter på området er enige om, at det er væsentligt ikke bare at overføre traditionelt TV til Internettet der skal mere til. Et område der har været pustet meget op indenfor streaming media er corporate presentations eller produkt præsentationer etc. Et område, hvor der er brug for synkronisering af billeder, animationer, video og lyd. De værktøjer,der hidtidigt har været tilgængelige,er event stream (fx mediacleaner), SMIL programmering, avanceret JavaScripting og senest SMIL editoren Icontrol fra og Microsofts nye plugin til powerpoint (Producer). Alle værktøjer der kun med besvær fungerer optimalt, og så kræver de alle, at brugeren har en specifik player. For mig var det en udfordring at afprøve flash som integrationsplatform for billeder, animationer, lyd og billeder. Video kan ikke direkte implementeres i flash og må derfor importeres som enkelte billeder. Det sætter naturligt begrænsninger for hvor meget og hvor stort video, der kan implementeres. For at lette konverteringsprocessen fra video til flash, er programmet Wildform Flix anvendt ( Jeg har anvendt en kvalitet på 120x90 pixels med 6 billeder i sekundet 70% kvalitet (Flix setting). Lydsporet har jeg ikke haft igennem flix, og det anbefaler jeg, at man undlader. Samtidig er det MEGET vigtigt at sætte sin video størrelse ned til det ønskede (120x90 px) i premiere eller cleaner, den scalling som flix selv laver dur ikke! Morten Bach Jensen (e2001) 5

8 IT-højskolen i København LYSGAARD & PARTNERE flash presentation Når lyd og billede spor ligges separat ind i Flash virker det som om at man er bedst tjent med at anvende streaming lyd, for at opnå sync. Derved kan der desværre også ved lave båndbredder, hvor preloaderen er i brug kombineret med uhæmmet hyperklikning risikeres at 2 film spiller samtidigt (på trods af unload, stopallsound etc. kommandoer) På trods af det har jeg valgt at anvende streaming lyd på speaken. Produktionen er implementeret med en navigations film (index.swf) og seks film der loades ind i denne, ingen af de seks film (der er mellem sekunder) er over 300K. Sammenlignet med traditionel streaming media synes jeg ikke,det er slemt. Det var egentligt min ide at baggrundsloade alle filmene mens den første film afviklede, men på lave båndbredder (modem / single ISDN), overbelaster det simpelthen. Derfor vil man ved tryk på en film eventuel blive opholdt kort af en preloader, men med målgruppens båndbredde situation, anser jeg det ikke for at være et væsentligt problem. Alle kildefiler kan ses på den vedlagte CD-R i kataloget FLA, desuden kan man danne sig et overordnet overblik vha. vedlagte flow-chart. I fla filerne er koden kommenteret, og visse steder, har jeg ladet den oprindelige kode (med baggrunds load af filmene) stå udkommenteret. Konklusion For præcist fire uger siden havde jeg ingen anelse om hvordan flash fungerede, her 12 undervisnings dage og en uges produktion arbejde senere, synes jeg, at det er ikke så ringe endda (Jysk). Flash har for mig vist sig som en god legeplads for integration af billeder, lyd, video og animation, og jeg har svært ved at se, hvordan jeg til nettet skulle kunne opnå et lignende udtryk via en anden platform. Jeg synes endda at det udtryk, der er opnået i flash præsentationen er væsentligt peppet op i forhold til video udgangspunktet (/Dokumentation/LYSPAR.html) Og personligt er jeg meget godt tilfreds med resultatet. Morten Bach Jensen, mbj@it-c.dk IT-højskolen i København, Fredag d. 21. December 2001 Morten Bach Jensen (e2001) 6

9 Version 1.0 Story Board LYSGAARD & PARTNERE Corporate Presentation FLASH

10 BASIS LAYOUT OG NAVIGATION Link Fra Navigation: Farveskift ved mouse-over & press. klik lyd ved Press. STORY WINDOW NAVIGATION

11 DE FIRE UDGANGSPUNKTER Video i venstre hjørne med speak som tekst ved siden af. Under billede MC hvor LP s logo genereres Speak der passer til billedet. Mit navn er Peder Lysgaard Jeg er grundlæggeren af LP Baggrunds Musik: Amadillos Loop 1. None Ovaler (som i navigations ovalen ) med de fire udgangspunkter, der vokser når det enkelte område omtales i speaken. For at opnå succesfuld læring indenfor human ressources har vi fire faste udgangspunkter som vi. Baggrunds Musik: Amadillos Loop 1. Zoom lyd når cirklerne vokser

12 STÆRKE PROCESKONSULENTER Video i venstre hjørne med speak som tekst ved siden af. Under billede MC med gode ord til emnet. Speak der passer til billedet. Vores form for Human ressource udvikling, den kræver stærk og.. Amadillos Loop 2. None 4-6 stills fra LP s kontor der looper herover MC med LP konsulenternes baggrunde (kommunikation, idræt, management etc. Etc.) Hos LP tager vi vores egen medicin og det gør vi fordi at vi ved at vores medarbejdere er vores vigtigste ressource. Amadillos Loop 2. None

13 TEORETISK BALLAST Video i venstre hjørne med speak som tekst ved siden af. Under billede MC med gode ord til emnet. Speak der passer til billedet. Et hvert udviklingsforløb hos LP har sit afsæt i en teoretisk ramme, og det er afgørende for at vi kan levere. Amadillos Loop 1. None Kursist vs. Konsulent figuren som animeret MC. Herover MC med gode ord. Hvis vi skal se lidt på et traditionel lærings forløb, har man en Amadillos Loop 1. Effekt lyd på pil. Zoom lyd på cirkler der vokser.

14 UNIKKE ØVELSER 4-6 stills med glade mennesker på arbejde der looper, herover MC med emne områderne som der haves unikke øvelser indenfor (kommunikations forløb, stress management etc. etc.). Vi har unikke øvelser til teambuilding, vi har det til ledelseudvikling Amadillos Loop 2. Dias projekter lyd på teksten med de enkelte emne områder. Video i venstre hjørne med speak som tekst ved siden af. Under billede MC med gode ord til emnet. Formålet med alle de forløb vi har det er selvfølgeligt at deltagerne skal kunne tage sig mest muligt med hjem og relatere det til.. Amadillos Loop 2. None

15 DET ALTERNATIVE MILJØ 4 stills med billeder af skov, strand, loft, kælder. Herover MC med tekst synkroniseret til stills. Det alternative miljø det kunne fx være skoven Amadillos Loop 1. Lyd der passer til stills skovlyd strandlyd loftlyd kælderlyd. Video i venstre hjørne med speak som tekst ved siden af. Under billede MC med gode ord til emnet. Speak der passer til billedet. Det alternative miljø det er dog kun rammerne for det vi arbejder med. Amadillos Loop 1. None

16 PRODUKT PORTEFØLJE 4-6 stills med PL der holder foredrag og som looper (måske skal alle stills være i monotone?? Marius). Herover MC med gode ord til emnet. Ud fra vores filosofi har vi sammensat en bred produktportefølje.. Amadillos Loop 2. None MC med produktportefølje cirklen, hvor det enkelt område fremhæves og skifter farve synkroniseret ift. Speaken. Vi laver ledelsesudvikling, vi laver teambuilding. Amadillos Loop 2. Dias projekter lyd når der skiftes område i produktportefølje cirklen.

17 TO MAKE READY LIST Outside Flash graphics: Navi_oval Lyspar_logo Kursists_konsulent_pile Produkt_cirkel Video: De_fire ( Mit navn er Peder ) Stærke ( Vores form for human ) Teoretisk ( Et hvert udviklingsforløb hos LP ) Unikke ( Formålet med alle de forløb ) Alternative ( Det alternative miljø der er dog kun ) Txt: De_fire_txt ( Mit navn er Peder ) Stærke_txt ( Vores form for human ) Teoretisk_txt ( Et hvert udviklingsforløb hos LP ) Unikke_txt ( Formålet med alle de forløb ) Alternative_txt ( Det alternative miljø der er dog kun ) Stills: Stærke_pic_1 (-6) Unikke_pic_1 (-6) Skov_pic Strand_pic Loft_pic Kælder_pic Produkt_pic_1 (-6) Sounds: On_press_klik_knap_lyd (pagefor) Zoom Arrow Dias_projector Skov Strand Loft Kælder De_fire_speak ( Mit navn er Peder ) Stærke_speak ( Vores form for human ) Teoretisk_speak ( Et hvert udviklingsforløb hos LP ) Unikke_speak ( Vi har unikke øvelser til ) Alternativ_speak ( Det alternative det kunne fx være ) Produkt_speak ( Ud fra vores filosofi.. ) Music: Amadillos_loop_1 Amadillos_loop_2

18 Version 1.0 Flow Chart LYSGAARD & PARTNERE Corporate Presentation FLASH

19 INDEX.swf Data Content Navi Hvid baggrund defire staerke teoretisk unikke alternative produkt Frame labels on_press_klik_knap_lyd (sound) oval_navi (MC), ovalknap (button), langknap (button), logo (MC) LoadMovie DeFire2.swf LEVEL 5 LoadMovie staerke2.swf LEVEL 10 LoadMovie teoretisk2.swf LEVEL 15 LoadMovie unikke2.swf LEVEL 20 LoadMovie alternative2.swf LEVEL 25 LoadMovie produkt2.swf LEVEL 30 Preloader Data/count Under_Animation Film TXT Animation Baggrunds_Musik Preloader Data/count Under_Animation Film TXT Stills Baggrunds_Musik Preloader Data/count Under_Animation Film TXT Animation Baggrunds_Musik Preloader Data/count Stills Film TXT Under_animation Baggrunds_Musik Preloader Data/count Stills Film TXT Under_animation Baggrunds_Musik Preloader Data/count Stills Speak Cirkel Baggrunds_Musik Start Counter (MC) Logo_tween (MC) = 291 frames Film_defire (MC) = 24 sek. TXT_scroll (MC) 4_ovaler_fade_in (MC), spil_igen (button) Amadillos_loop1, slider (MC) Start Counter (MC) Under_ani (MC) = 336 frames Film_staerke (MC) = 28 sek. TXT_scroll (MC) Staerke_stilla_mc (MC) Amadillos_loop2, slider (MC), spil_igen (button) Start Counter (MC) Under_ani_teoretisk (MC) = 376 frames Film_teoretisk (MC) = 31 sek. TXT_scroll (MC) Animation_teoretisk (MC [spil_igen (MC)]) Amadillos_loop1, slider (MC) Start Counter (MC) Stills_unikke (MC) = 313 frames Films_unikke (MC) = 26 sek. TXT_scroll (MC) Unikke_under_ani (MC) Amadillos_loop2, slider (MC), spil_igen (button) Start Counter (MC) Stills_alternative (MC) = 281 frames Films_alternative (MC) = 23 sek. TXT_scroll (MC) BagAni_alternative (MC) Amadillos_loop1, slider (MC), spil_igen (button) Start Counter (MC) Still_produkt (MC) = 322 frames Produkt_speak (sound) = 27 sek. Cirkel (MC) Amadillos_loop2, slider (MC), spil_igen (button)