VIZhtm Side 1 av 12 Innhold Side MÅL 1 OPPGAVE / RESULTAT 1 BESKRIVELSE ØVING 6A 2 BESKRIVELSE ØVING 6B 9 BESKRIVELSE ØVING 6C 12 MÅL Når du har utført denne øvingen, skal du kunne: Benytte et kamera som skal bevege seg langs en kurve Sette på to materialer på et Beveled objekt Re-skalere tiden til 20 bilder Rendere 20 enkeltbilder av typen BMP med 8 bits fargedybde Benytte Animation Shop til å lage en animert gif fil Benytte Animation Shop til å sette på transparent farge Benytte Animation Shop til å sette på tidsforsinkelsen mellom bildene Benytte FrontPage/Word til å lage en HTML fil med bakgrunnsbilde, og en animert gif fil OPPGAVE / RESULTAT Det skal lages en animasjon i Autodesk VIZ Animation Shop benyttes til å lage en animert gif fil Og FrontPage benyttes til å lage en HTML fil som vist i bildet under Programmet Animation Shop som er en del av Paint Shop Pro fra Jasc SoftWare Test
VIZhtm Side 2 av 12 Oppgaven består av følgende: Det skal lages en 3D modell av logoen til HIØ sammen med teksten "HIØ" ved hjelp av Autodesk VIZ Sette inn et kamera og få dette til å bevege seg langs en kurve (sirkel) Sette på to materialer Det skal lages en animasjon som består av 20 bilder ved at kameraet roterer 360 rundt logoen slik at det ser ut som logoen roterer De 20 bildene skal lagres som 20 enkeltbilder med størrelser 200x200 piksler i BMP format Benytte Animation Shop til å lage en animert gif fil av de 20 bildene med transparent bakgrunn og en tidsforsinkelse mellom hvert bilde på 12/100 sekund Benytte FrontPage/Word til å lage en HTML fil Løsning Lag logo og tekst, kamera, bevegelse og til slutt 20 bilder 1 Start programmet Autodesk VIZ 42 2 Sett inn Logodwg Vi skal nå hente inn en DWG fil Her har jeg tegnet logoen til HIØ som tre polylines i AutoCAD Benytt nedtrekksmenyen, og, finn filen K:/VIZ/Logodwg, velg, nå kommer følgende dialogboks opp: Klikk OK (Logoen kan også lastes ned fra Internett som Logozip (KLIKK HER) )
VIZhtm Side 3 av 12 3 Lag Bevel Velg Logoen Klikk på du velger Klikk på, det kommer fram en lang liste og Modifier Stack får nå følgende innhold: Sett inn følgende : Bevel Start Outline 20, Level 1 Height 30, Level 2 Hight 30 Outline -50 Sett inn følgende : 4 Sett inn tekst med Bevel Velg, og, velg tekstfont og under Skriv inn teksten slik: Klikk og plasser teksten over logoen Teksten skal være valgt (det er den når den nettopp er lagd) Klikk på Klikk på, det kommer fram en lang liste og du velger Modifier Stack får nå følgende innhold: Sett inn følgende : Bevel Start Outline 20, Level 1 Height 30, Level 2 Hight 30 Outline -30 Sett inn følgende : 5 Roter 90 Roter både logo og tekst 90 om origo slik at skjermporten Front ser slik ut som figuren til høyre
VIZhtm Side 4 av 12 6 Flytt de to objektene slik at midtpunktet ligger i 0,0,0 For å finne midtpunktet til de to objektene kan vi lage en hjelpelinje med 2 vertex'er Øvre og nedre vertex på linjen plasseres slik at de angir vertikal utstrekningen på de to objektene I de to andre retningene plasseres linjen midt i objektene Nå flyttes alle tre objektene: Velg, velg alle de tre objektene, så, deretter, sett på (snap) slik ad den lyser Høyreklikk på, og velg og Nå kan du klikke å dra på midtpunktet på hjelpelinjen, og dra slik at dette punktet snapper til Grid punktet 0,0,0 Dette medfører at alle objektene flyttes dit du ønsker Til slutt kan du slette hjelpelinjen Slå av Velg kun linjen, og trykk på Del tasten 7 Sett inn et kamera Sett inn et kamera i skjermporten Top slik som du ser i figuren til høyre Velg, og klikk i skjermporten Top på det stedet der kamerahuset skal plasseres klikk deretter på "målpunktet" (Target) Vi kan forandre kameraets linsevinkel ved å klikke på knappen under slik at vi får vidvinkellinse: Kameraets "målpunkt" plasseres eksakt i origo, og kamerahuset plasseres langs neg y-akse 8 Sett inn en sirkel Sett inn en sirkel i skjermporten Top med senter i origo, og periferien ved kameraet Velg ved kameraet Klikk å dra fra origo (snap) og slipp ca
VIZhtm Side 5 av 12 9 Sett på en Transform Controller Vi skal nå sette på en "Transform Position Path" Controller på Camera01 Dette kan gjøres slik vi ser i figuren til høyre For å få til det klikker vi på slik at den blir gul Så klikker vi på, og det kommer fram en liste, vi velger Dette valget gjør at kameraet kan styres av en kurve (dvs sirkelen) Når vi har gjort dette forsvinner kameraet midlertidig 10 Knytt kameraet til sirkelen Vi skal nå knytte kameraet til sirkelen slik at det beveger seg langs denne Klikk på slik at denne blir gul, og klikk så på sirkelen Velg også, og Etter vi har gjort dette ser vi at kameraet plutselig flyttes til starten av kurven (sirkel) Vi ser også at kameraet nå har to nøkkelbilder 11 Endre sirkelens radius, og roter sirkelen 90 Vi ser nå at Camera01 er knyttet til et punkt på sirkelperiferien, dvs starten på kurven Vi kan teste med (Move) i skjermporten Top og flytte på sirkelen, vi ser at Camera01 følger med (Undo Move) Vi kan endre på sirkelradiusen slik at kameraets avstand endres Velg, velg sirkelen, og endre verdi på radius slik at vi får et fornuftig bilde i skjermporten Camera01 Vi ønsker nå å flytte på kameraet slik at det ikke rettes inn mot kanten av objektene (logoen og teksten), men at det rettes rett inn mot fronten av dem Se figuren til høyre Dette kan vi gjøre på to forskjellige måter Den ene er å rotere sirkelen -90 grader slik som vist på figuren Den andre måten er å endre på under Kontroller at kameraet beveger seg riktig ved å aktiver skjermporten Camera01 og klikk på Play
VIZhtm Side 6 av 12 12 Flytt logo og tekst litt ned Når du ser objektene (logo og tekst) rett forfra i skjermporten Camera01, ser bildet bra ut Dvs objektene er sentrert i bilde Når du ser objektene fra siden (feks i bilde 25), så ser det ut til at objektene ikke lenger er plassert midt i bildet Se figuren til høyre hvor teksten (øverst) ligger utenfor kanten på skjermporten mens logoen nederst har god plass Hvorfor er det slik selv om vi har vært nøye med å plassere kameraets"målpunktet" (Target) midt i de to objektene? Vi kan ordne opp i dette ved å flytte de to objektene litt nedover Gjør det 13 Fjern "kant" på logo Som du ser i bildet til høyre har den ytre ringen en "kant" nederst Dette er pga at den opprinnelige spline har vertexer som ikke er Bezier Vi skal nå velge de to vertexene (1 og 4) og forandre de fra til Dette gjør vi som følger: Velg objektet, klikk på Vi ser "Modifier Stack" slik: klikk på slik at den lyser Sett også på Velg vertex nr 1 ved å klikke på det Hold Ctrl nede å klikk på vertex 4, slik at vi har valgt begge disse punktene Høyreklikk over et av disse vertexene, det kommer opp en meny Vi ser har at har en hake foran seg Vi forandrer dette å klikker på, slik at de to punktene blir av denne typen Klikk på slik at den ikke lyser lenger (dvs vi går ut av dette undernivået) Til slutt klikker vi på øverste nivå i "Modifier Stack", nemlig Vi ser nå at logoen ikke lenger har "kanten" Se figuren til høyre
VIZhtm Side 7 av 12 14 Sett på materialene og Vi skal sette på på frontsidene og sidekantene, og sette på på baksidene på de to objektene logo og tekst: Vi henter inn de to materialene og plasser de i henholdsvis Slot 2 og Slot 3 materialeditoren Klikk å dra materialet i Slot 1 over på Logo og deretter på tekst Da vil det komme noen hvite trekanter i hjørnene på slot 1 som indikerer at dette materialet er benyttet i scenen, se figuren til høyre Velg Slot 1 slik at det lyser en hvit ramme i denne Klikk på og velg Det vises en liste på 10 Sub-materialer Vi skal ikke ha mer en 3 Klikk derfor på og velg 3 Sub-materialer Vi klikker og drar materialet i Slot 2 ( ), og slipper det i feltet under, slik som vist til høyre Vi velger Jeg har også skrevet Topp fordi vi ser i scenen at det er disse flatene som får farge På tilsvarende måte bestemmes Sub-materialene ID2 og ID3 Se figuren til høyre Vi ser at alle de 3 Slotene i materialeditoren er benyttet i scenen, slik: Slot 2 og Slot 3 inngår i Slot 1 15 Endre gullmaterialet slik at det skinner Vi skal nå endre gullmaterialet slik at vi får en speilende effekt ( glans ( ) ) og Velg Slot 2 ( ) og sett feks følgende verdier Endringene fører til svært liten virkning Men hvis vi samtidig endrer bildevirkningen (Maps Amount) slik: Da får vi en virkning fra til Dvs mye bedre effekt Vi må imidlertid være klar over at denne virkningen IKKE kommer frem på objektene i scenen For å få frem virkningen her må vi rendere scenen
VIZhtm Side 8 av 12 16 Sett på mapping-koordinater Når vi benytter materialene som inneholder bitmap (bilder), så bør vi sette på en modifyer på objektene Dette gjør vi for at bildene skal tilpasses objektene I vårt tilfelle er de to objektene (logo og tekst) forholdsvis ensartede og har samme materiale Vi setter derfor samme modifieren på begge objektene: Velg de to objektene (logo/tekst) Klikk på og velg i Under velger vi:,,, Størrelsen av disse verdiene har betydning for "finheten" i overflaten Dersom vi ønsker en annen "finhet" på bildet som vises i materialet på baksiden av objektene, må vi benytte en annen : Velg på nytt de de to objektene (logo/tekst), og sett på en ny modifier, slik at vi får en Modifier Stack slik som du ser i figuren vist til høyre Under velger v nåi:,,, og Vi ønsker nå at alle bildene i materialet skal benytte For å finne alle bildene som benyttes i, klikker vi i Slot 3 i materialeditoren, og klikker på Vi får nå opp et nytt vindu med en oversikt over alle bildene som inngår i dette materialet slik som du ser i figuren under Vi klikker på den første linjen som inneholder bilde, dvs slik at denne blir gul Vi ser nå i materialeditoren under, og velger På samme måte velger vi, og velger På samme måte velger vi, og velger Det siste problemet med den siste modifier som vi har definert til å være, er at den ligger i feil plan Dette kan vi se i scenen vår Vi vil derfor rotere dette 90 grader Det gjør vi ved å klikke på slik at den blir gul i Modifier Stack (se til høyre) Nå kommer det fram et aksekors midt i den flaten vi skal rotere i scenen Benytt og roter flaten 90 grader slik at den ligger parallelt med bakflaten på logo og tekst 17 Lengden på animasjonen skal forandres til 20 bilder Velg
VIZhtm Side 9 av 12 18 Sett bakgrunnsfarge ved rendering Vi ønsker å sette en bakgrunnsfarge som skiller seg klart fra de øvrige fargene i bildet Dette er fordi denne fargen skal skiftes ut med transparent farge (spesiell egenskap) Velg og sett feks på fargen slik 19 Prøverendering med justering Vi renderer et bilde med 200x200 piksler Vi legger merke til hvor godt objektene fyller bildet Dette kan vi justerer ved å endre størrelsen på sirkelen, slik at kameraets avstand justeres 20 Render 21 bilder som lagres som BMP filer Det skal renderes 21 bilder Disse lagres som 21 enkeltfiler i en egen mappe som du lager Dette fordi det da er lettere å hente dem når vi skal lage en animert gif fil Filene lagres med typen bmp med 8 bits fargedybde: Animerte gif filer klarer ikke flere farger en dette Øving 6b LAGE ANIMERT GIF FIL 1 Start programmet Animation Shop 3 som du finner under Start, Programmer, og Jasc Software 2 Hent inn 20 bmp filer Velg og
VIZhtm Side 10 av 12 I bildet som du ser over er det hentet inn 20 av de 21 bildene som ble lagd tidligere, dvs bilde 00 til 19, sortert i riktig rekkefølge
VIZhtm Side 11 av 12 3 Sett på transparent farge på alle bildene Velg nedtrekksmenyen Animation, og Replace Color og skift ut bakgrunnsfargen med transparent farge på alle bildene Velg verdi for Her må vi gjøre et kompromiss slik at vi ikke velger for liten verdi slik at det står igjen noe av bakgrunnsfargen, og heller ikke velger for stor verdi slik at vi fjerner noe av objektfargen 4 Lagre filen ov6gif Velg og angi ditt hjemmeområde på nettet, og filnavn ov6gif Filen ov6gif er nå lagret Dette er en animert gif fil som inneholder 20 bilder Denne gif filen er uavhengig av bmp filene
VIZhtm Side 12 av 12 1 Start programmet Word Øving 6c LAGE EN HTML FIL 2 Sett inn en bakgrunnsfarge, et bagrunnsbilde, eller et Tema For eksempel: Velg nedtrekksmenyen og Klikk på,,, og velg en tekstur 3 Sett inn den animerte gif filen og skriv inn litt tekst Velg nedtrekksmenyen,, og velg Skriv inn noe tekst og kopier bildet du nettopp satte inn slik at du får to eller flere forekomster av dette 4 Lagre filen feks: Ov6htm Klikk på lagre og velg og skriv filnavn, slik: 5 Test Finn filen du nettopp lagret i utforskeren og dobbeltklikk på den for å se om den fungerer som den skal