Director MX Tutorial 8

Transkript

1 Director MX Tutorial 8 Innehållet i denna tutorial: Skapa och manipulera bilder med Imaging Lingo Imaging Lingo skapa och manipulera bitmap bilder Director erbjuder genom Imaging Lingo möjlighet att manipulera bitmap-bilder på lite olika sätt, det är också möjligt att skapa en helt ny bild. Detta sker genom att man påverkar en bitmaps image object. Image object är en representation av en bitmap i minnet och det finns tre typer av image object ett image object som är knutet till en cast member, ett image object som existerar självständigt i minnet oberoe av någon castmember, referensen till den finns då lagrad i en variabel det image object som representerar Stage För att referera till ett image object i första respektive tredje fallet skriver man följande uttryck: member(whichmember).image eller sprite(whichsprite).member.image (the stage).image För alla typer av image object gäller att man kan lagra referensen till ett det i en variabel: myimage = member(whichmember).image Observera att variabeln myimage innehåller enbart en referens ("pekare") till image objektet, det innehåller INTE själva objektet. Ett image objekt har ett fåtal egenskaper som beskriver dess dimensioner och färgdjup. Image objektens egenskaper (properties): Property Beskrivning depth Bitdjupet som kan vara 1,2, 4, 8, 16 eller 32 bitar width Bredden i pixlar height Höjden i pixlar rect Objektets rect som är relaterat till bilden: rect(0, 0, width, height) usealpha Anger om bilden skall använda sin alfakanal eller ej. Antar värdet 1 eller 0 Inget av dessa properties hos ett image objekt kan förändras med undantag av usealpha. Ifall man vill förändra ett image objekts storlek och/eller bitdjup får man skapa ett nytt image object med den önskade storleken respektive bitdjupet och kopiera över objektet till den nya image object. För att kunna arbeta med image objekts på olika sätt finns det en uppsättning funktioner: Funktion Parametrar Beskrivning Barbro Funseth

2 image() bredd, höjd, färgdjup Returnerar ett nytt image object duplicate() Returnerar en kopia av ett image object crop() rect Beskär bilden enligt angiven parameter draw() rect, modifier list Ritar en linje, oval eller rektangel i bilden fill() rect, modifier list Ritar en fylld oval eller rektangel i bilden copypixels() SourceImage, destinationrect, sourcerect, modifierlist Kopierar en specificerad del av en bild till en specificerad del av annan bild. Destinationen i bilden kan också anges som en quad (destinationquad) createmask() Skapar ett 8-bitars objekt som används som mask för att definiera vilken del av en bild som copypixels skall kopiera creatematte() Skapar ett 1-bitars objekt som används som mask för att definiera vilken del av en bild som copypixels skall kopiera extractalpha() Skapar en 8-bitars gråskalebild från en bilds alfakanal setpixel() x, y, color Ändrar färgen på den pixel som finns vid angiven koordinat getpixel() x, y Returnerar färgen på den pixel som finns vid angiven koordinat setalpha() 8-bitars image object Ändrar en bilds alfakanal till den angivna image objektet trimwhitespace() Avlägsnar det vita område som eventuellt finns runt en bild Tre av de här kommandona kan som sista parameter ta en property list som anger vad kommandot kan förändra i bilden och det är draw(), fill() och copypixels(). Parametrarna i modifierlist för funktionerna draw() och fill() #color Anger den färg som skall ifyllas en figur respektive färgen på den linje som draw() ritar upp. Parametern anges med ett rgb-värde. #bgcolor Anger färgen på konturlinjen hos den figur som draw() ritar upp. Parametern anges med ett rgb-värde. #shapetype Anger vilken figur som skall kommandon skall rita upp, dessa kan vara #rect, #oval, #roundrect eller #line #linesize Tjockleken på den linje som ritas resp konturlinjen hos en figur. Parametern anges i pixlar Parametrarna i modifierlist för funktionen copypixels() #color Färg som ger samma effekt som när man applicerar en förgrundsfärg på en sprite. Parametern anges med ett rgb-värde. 2 Barbro Funseth 2005

3 #bgcolor #ink #bllevel #dither #usefastquads #maskimage #maskoffset Färg som ger samma effekt som när man applicerar en bakgrundsfärg på en sprite. Parametern anges med ett rgb-värde. Ink-effekt som skall appliceras på de pixlar som kopieras. Parametern anges med siffra eller symbol, tex 40 respektive #Lighten. Nivå av transparens som skall användas, anges med intervallet 0 till 255. #bllevel kan ersättas med #bl och anges då med intervallet 1 till 100. Anger om färgen på kopierade pixlar skall anpassas till mottagande bilds palett. Används när man kopierar pixlar från en 32-bitars bild till en 8-bitars eller 16-bitars bild. Parametern kan ha värdena TRUE eller FALSE Anger om en snabbare (mindre noggrann) beräkning eller en långsammare (mer noggrann) beräkning skall ske när kopiering sker till en destination som angetts med quad. Parametern kan ha värdet TRUE eller FALSE Det maskobjekt eller matteobjekt skapat med createmask() respektive creatematte(), som skall användas för att kopiera ast en del av angivet område i bilden. Anger maskens position relativt till övre vänstra hörnet på den bild som är källan (sourceimage). Parametern anges som point och det förinställda värdet är (0,0) Barbro Funseth

4 Skapa bilder med Imaging Lingo Med funktionen image() kan man skapa ett nytt bildobjekt (image object), funktionen allokerar ett utrymme i minnet för objektet och returnerar en referens till objektet. Referensen kan man lagra i en variabel men man kan också hänföra det direkt till en castmedlem. Denna kan vara en redan befintlig medlem eller vara en helt ny medlem som man skapar. Funktionen behöver tre parametrar: bredd, höjd och bitdjup. Bredd och djup anges i pixlar, bitdjupet kan vara 1, 2, 4, 8, 16 eller bitar ger förutom tillgång till hela färgomfånget även en alfakanal för transparens. För att skapa en bild som är 300x200 pixlar och som har miljontals färger skriver man enligt följande: myimage = image(300, 200, 32) Om man använder bitdjupen 2, 4 eller 8 kan man använda ännu en parameter i funktionen, denna parameter specificerar en palett som kan vara en av Directors inbyggda paletter (tex #grayscale, #web215) eller en egefinierad palett som då finns som en castmedlem. Om man använder bitdjupet 32 kan man också använda ytterligare en parameter i funktionen, med denna parameter anger man bitdjupet i alfakanalen som kan sättas till antingen 0 eller till 8, den förra anger att man inte vill ha någon alfakanal, den senare att man vill ha en alfakanal. Övning I denna övning skall du skapa ett helt nytt bildobjekt, du skall rita en enkel figur och slutligen lägga bildobjektet i en castmember som du också skapar. Allt detta kommer du att utföra med hjälp av Message-fönstret. Skapa en ny Director-movie. Öppna Message-fönstret och börja med att skapa ett nytt bildobjekt med image-funktionen och lagra objektet i en variabel. Skriv följande. myimage =image(300,200,32) och avsluta med att trycka på Return-tangenten. Det ligger nu ett image object i minnet och referensen till detta är lagrat i variablen myimage. Om du nu skriver put myimage (och trycker på Return-tangenten) kommer du att få adressen till den sektion i minnet där objektet finns. Referensen ser ut i stil med detta: <image:148498a8> Nu skall du lägga till en enkel geometrisk figur till den nyskapade bilden, det skall vara en fylld oval med kontur i avvikande färg. Detta gör du med fill-kommando. Här har jag angett färgerna med hexadecimala tal, givetvis går det att använda de vanliga RGB- 4 Barbro Funseth 2005

5 värdena Skriv i Message-fönstret föjande och avsluta med att trycka på Return-tangenten. (Obs uttrycket skall skrivas på en a rad!) myimage.fill(rect(50,55,250,175),[#color:rgb("#99ccff"), #bgcolor:rgb("006600"),#shapetype:#oval, #linesize: 2]) Eftersom bilden bara existerar i minnet så ser vi den inte och den kommer att försvinna så snart vi avslutar Director. För att den skall sparas måste den läggas till en castmember. Det går att lägga in bilden i en existerade castmedlem men det går också att skapa en helt ny medlem. Skapa en ny medlem som är av typen bitmap genom att skriva följande kommando i Message-fönstret. mybitmap = new(#bitmap) En ny medlem dyker nu upp i castbiblioteket, den hamnar i första lediga plats. Om man vill kan man i new-kommandot också ange en specifik postion i castbiblioteket för den nya medlemmen. Den nya bitmap-medlemmen som ligger i castbiblioteket är helt blank eftersom dess image object inte innehåller någonting. För att kopiera över vårt image objekt till den nya bitmapmedlemmen skriver du i Message-fönstret: mybitmap.image = myimage Nu syns den nytillverkade bilden i castbiblioteket. Barbro Funseth

6 Manipulera bilder med Imaging Lingo Det mest intressanta med Imaging Lingo är de möjligheter som finns att manipulera befintliga bilder vilket innebär att man med copypixels() kommandot kan kopiera över en vald del av en bild till en annan bild. Detta kan användas bland annat till att skapa olika effekter i programmet, till exempel kan man tillverka egna transitionseffekter. Det är i stort sett bara den egna fantasin som sätter gränser för tillämpningarna! Syntaxen för copypixel-kommandot är targetimage.image.copypixels(sourceimage.image, targetrect, sourcerect) eller targetimage.image.copypixels(sourceimage.image, targetquad, sourcerect) CopyPixel-funktionen kan ta en fjärde parameter som är en property list. Med denna modifierarlista kan man till exempel ange den mask man vill använda ifall man vill kopiera över en bilddel som skall ha en annan form än rektangulär. Se tabell tidigare i denna tutorial för en översikt över vad mer denna modifierarlista kan innehålla. Det område i en bild som skall vara källa anges alltid i form av en rect medan det område i bilden som är målet kan anges antingen som en rect eller som en quad. Koordinaterna för den rect som skall vara källa är relaterade till den medlem som är källan. Motsvarande gäller för det område som är målområde, koordinaterna för dennas rect eller quad är också relaterade till den medlem som är målbilden. Detta oavsett om bilderna ifråga finns representerade som sprites på stage eller enbart finns i castbiblioteket. Om målområdet (targetrect) är större eller mindre än källområdet (sourerect) kommer den kopierade delen att skalas upp respektive skalas ner så att den passar in i målområdet. En sprites position relateras till Stage som således utgör det koordinatsystem som spriten placerats in i. En sprite har en rect som anger koordinaterna för dess sidor. Koordinaterna för sidorna anges alltid i ordningen vänster sida (left), övre sida (top), höger sida (right), nedre sida (bottom): rect (left, top, right, bottom). Positionerna för vänster och höger sida anges med värden från x-axeln och positionerna för övre och nedre sida anges med värden från y-axeln. Koordinaterna för en rect kommer således att skrivas rect(x 1, y 1, x 2, y 2 ) sprite(whichsprite).rect 6 Barbro Funseth 2005

7 Med en sprites quad anges koordinaterna för dess hörn. Ett hörns position anges som en point med ett värde från x-axeln och ett värde från y-axeln. sprite(whichsprite).quad En quad består av en lista med fyra pointvärden. Första positionen i listan anger koordinaterna för spritens övre vänstra hörn, andra postionen i listan anger koordinaterna för övre högra hörnet, tredje positionen i listan anger koordinaterna för nedre högra hörnet och fjärde positionen i listan anger koordinaterna för det vänstra nedre hörnet Koordinaterna för en sprites quad kommer således att skrivas: [point(x 1, y 1 ), point(x 2, y 1 ), point(x 2, y 2 ), point(x 1, y 2 )] En sprites position på stage anges också med propertiet loc. Denna positionsangivele gäller alltid mitten på spriten när det gäller bitmap medlemmar och vektor medlemmar. För sprites med shapes och textmedlemmar däremot gäller loc-angivelsen det övre vänstra hörnet. Värdet på loc anges som ett pointvärde: point(x, y) sprite(whichsprite).loc sprite(whichsprite).loch sprite(whichsprite).locv Det går också att få fram enbart x-koordinaten eller y-koordinaten för spritens position med hjälp av loch respektive locv. Dessa värden anges som ett vanligt numeriskt värde. Barbro Funseth

8 En castmedlems rect anger koordinaterna för medlemmens sidor relaterat till medlemmen själv. Medlemmen kan sägas utgöra ett eget koordinatsystem. Värden för x 1 och y 1 kommer därför alltid att vara 0. Det generella uttrycket för en medlems rect kan därför skrivas rect(0, x 2, 0, y 2 ) Värden för x 2 och y 2 kommer att vara samma som värdena för medlemmens bredd respektive höjd. sprite(whichsprite).member.rect member(whichmember).rect Kopiera en del av en bild till en annan bild Övning Öppna Startfil_waterlily.dir som finns i mappen DMX_Material_8. Viktigt att observera; när man arbetar med att förändra bilders image object så kommer dessa förändringar i bilden att vara beståe och förändringen blir oåterkallelig ifall man då sparar sin directorfil. Det här kan vara en källa till besvär medan man testar ut ett kopieringsförfarande, för att återställa bilden måste man antingen importera den på nytt eller återgå till senast sparade version av direcorfilen (Revert-kommandot i File-menyn. Det senare förutsätter förstås att man inte råkar spara directorfilen efter det man förändrat bilden. För att slippa dessa problem kan man se till att man sparar en kopia av bildmedlemman vid starten av programmet och sedan att man kopierar tillbaka denna till bilden när programmet slutar. I detta program har jag lagt in ett behavior på spriten med bilden på dammen som duplicerar bildmedlemmen vid startsprite och återställer den vid Sprite. På stage finns en knapp med etiketten Kopiera, när man klickar på denna knapp skall bilden av näckrosen kopieras in i bilden av dammen. Vi skall börja med att skriva ett behavior med en mouseup-handler för denna knapp som skall använda kommandot targetimage.image.copypixels(sourceimage.image, targetrect, sourcerect) Markera knappen och gå till Property Inspector och välj nytt behavior som du kan kalla kopiera. Öppna behavioret och skriv en mouseup-handler. För att copypixels-kommandot inte skall bli så oöverskådligt skall vi använda oss av lokala variabler och vi börjar med att deklarera dessa. Vi behöver fyra stycken; en som lagrar målbilden, en som lagrar källbilden, en som lagrar destinationen i målbilden och en 8 som lagrar vilken del av källbilden som skall kopieras. Barbro Funseth 2005

9 lokala variabler och vi börjar med att deklarera dessa. Vi behöver fyra stycken; en som lagrar målbilden, en som lagrar källbilden, en som lagrar destinationen i målbilden och en som lagrar vilken del av källbilden som skall kopieras. Målbilden är bilden av dammen: targetimg = member("damm").image Källbilden är bilden av näckrosen: sourceimg = member("näckros").image Destinationen är ett fast värde på en rect som i storlek är samma som källbildens rect. targetrect = rect(128, 147, 198, 217) Hela källbilden skall kopieras så vi skall använda medlemmes hela rect som källområde: sourcerect = member("näckros").rect Därefter skriver vi kopieringkommandot och använder de lokala variblerna för de olika parametrarna: targetimg.copypixels(sourceimg, targetrect, sourcerect) Hela mouseup-handlern skall se ut såhär: on mouseup me targetimg = member("damm").image sourceimg = member("näckros").image targetrect = rect(128, 147, 198, 217) sourcerect = member("näckros").rect targetimg.copypixels(sourceimg, targetrect, sourcerect) Provkör programmet och klicka på knappen. Näckrosbilden kommer nu att kopieras till en position strax ovanför knappen. Som du ser så kopieras hela bilden - både blomman och bakgrunden. Ibland är det inte önskvärt att allt i källbildens rect kopieras över. Det finns två sätt att lösa detta; a) man kan använda en mask för att definiera vad som skall kopieras av källområdet b) man kan använda en källbild som har en alfakanal som anger transparent område i bilden Bilden på näckrosen har en alfakanal som anger att bakgrunden skall vara transparent. Alfakanalen för bilden är avstängd och används inte och vi skall nu aktivera alfakanalen så att vi får transparens i bilden. Markera medlemmen "näckros" i castbiblioteket, gå till Property Inspector och välj fliken Bitmap. Bocka för alternativet Use Embedded Alpha. Provkör programmet igen och klicka på knappen. Den här gången kopieras näckrosen utan bakgrund! Nu skall vi ändra i programmet: man skall i stället för att klicka på knappen, klicka direkt i bilden för att kopiera in näckrosen. Och näckrosen skall kopieras in på den punkt där man klickar. Barbro Funseth

10 där man klickar. Ta bort knappen från stage, vi behöver den inte längre, behavioret som skall sköta om kopieringen skall vara knutet till spriten som innehåller bilden på dammen. Den spriten har redan ett behavior så du kan öppna det och lägga till en mouseup-handler. Du kan kopiera den från knappens behavior och klistra in i dammens behavior. Vi behöver ändra targetrect så att den beräknas utifrån den position där musen klickats. Vi vet att näckrosbildens längd och bredd är 70 pixlar, vi kan då få fram målområdets rect genom att dra ifrån respektive lägga till hälften av längd resp bredd från muspositionen: rect(the mouseh - 35, the mousev - 35, the mouseh + 35, the mousev + 35) Den ändrade mouseup-handlern skall då se ut enligt följande: on mouseup me targetimg = member("damm").image sourceimg = member("näckros").image targetrect = rect(the mouseh - 35, the mousev - 35, the mouseh + 35, \ the mousev + 35) sourcerect = member("näckros").rect targetimg.copypixels(sourceimg, targetrect, sourcerect) Provkör programmet och klicka på olika ställen på stage: näckrosen hamnar nu där du klickar! Vi skall göra ytterligare en modifiering i mouseup-handlern så att näckrosen får olika storlek beroe på var man klickar på bilden. Perspektivet i bilden skall avgöra näckrosens storlek; när man klickar högre upp på bilden ( = längre bort på dammens yta) skall näckrosen bli mindre och när man klickar längre ner på bilden (= närmare på dammens yta). Vi skall göra en enkel beräkning baserat på muspositionens y-koordinat för att bestämma målområdets storlek så att det överensstämmer något så när med perspektivet: n = (the mousev + 150)/10 targetrect = rect(the mouseh - n, the mousev - n, the mouseh + n, \ the mousev + n) Hela mouseup-handlern skall nu se ut såhär: on mouseup me targetimg = member("damm").image sourceimg = member("näckros").image n = (the mousev + 150)/10 targetrect = rect(the mouseh - n, the mousev - n, the mouseh + n, \ the mousev + n) sourcerect = member("näckros").rect targetimg.copypixels(sourceimg, targetrect, sourcerect) Provkör programmet och klicka på olika ställen på stage: näckrosen får olika storlek beroe på var man klickar! 10 Barbro Funseth 2005

11 Vanligtvis kopierar man från en bild till en annan, men det kan ju hända att man skulle vilja kopiera inom samma bild dvs att källbilden och målbilden är samma bild. Här måste utfärdas en varning: det är inte lämpligt att direkt kopiera en del av en bildmedlem till en annan del av samma bild. Om man vill göra detta bör man först skapa en kopia av bildens image object med duplicate-kommandot och lagra referensen till detta i en variabel. Därefter kopierar man från originalbilden till duplikatet. Sedan kopierar man över hela duplikatets image object tillbaka till originalbildens image object. Kopiera text till en bild Det är inte bara bitmap-bilder som har ett image object, också text och vektorbilder har ett image object. Även om text och vektorgrafik är beskrivna som vektorer så måste texten respektive vektorbilden ritas upp på skärmen i form av en bitmapbild. Detta innebär att man kan kopiera över hela eller delar av en texts image object till en bitmapbilds image object. Man behöver inte använda någon mask för att maska av textens bakgrund eftersom textens image object har en alfakanal. Övning I denna övning skall du tillverka ett program där man kan kopiera en text till en bild i runtime, dvs man skall kunna skriva in en text i ett redigeringsbart textobjekt och samtidigt skall texten dyka upp i en bild genom att bilden av texten kontinuerligt kopieras över till bilden medan man skriver. Öppna Startfil_copyText.dir i mappen DMX_Material_8. Textobekt och bilder finns redan utlagda i programmet. För att åstadkomma kopieringen av texten till bilden behöver vi ett behavior som skall vara knutet till textobjektet. Markera textobjektet och välj nytt behavior i Property Inspector. Öppna det nya behavioret. Eftersom vi är inne i själva bilden och manipulerar denna så vill vi försäkra oss om att kunna återställa målbilden till den ursprungliga versionen. Därför sparar vi en kopia av bilden och lagrar denna i ett property. Det finns ytterligare ett skäl till att vi behöver ha en kopia av ursprungsbilden, eftersom vi skall skriva i realtid och kunna ändra i texten och detta skall återspeglas i målbilden så måste det som kopierats in kunna "raderas" från målbilden innan den senaste versionen av texten kopieras in. Om vi inte gör detta kommer varje version av texten att kopieras ovanpå varandra i bilden vilket ger en viss förvrängning i bilden, till exempel om man vill ha viss transparens så kommer denna att försvinna vid upprepade överlagringar. Dessutom kommer text som tas bort i textobjektet fortfarande att finnas kvar i bilden och ny text som skrivs in kommer att kopieras ovanpå den tidigare kopierade texten. Barbro Funseth

12 Börja med att deklarera propertiet som skall lagra ursprungsversionen av målbilden: property prestoreimg In en beginsprite handler gör vi så en kopia av målbilden med hjälp av funktionen duplicate() och lagrar referensen till kopian i prestoreimg. Samtidigt ser vi till att textobjektet skall gå att redigera genom att sätt dess property editable till TRUE. on beginsprite me sprite(me.spritenum).editable = TRUE prestoreimg = duplicate(member("mirror").image) Koperingen av texten till spegeln skall ske på en keyup händelse så vi skall skriva en handler för denna händelse. För att det skall bli mer överskådligt använder vi oss av lokala variabler, myimage och mytext för att lagra referenserna till de två image objekten vi skall arbeta med. Därefter utför vi kopieringen i två steg; det första är att vi återställer spegeln till ursprungsversionen ("raderar"), i det andra steget kopierar vi över akturell text till bilden. Vi modiferar också den kopierade textbilden genom att ge den en viss transparens, vi anger en nivå på #bllevel som är 80. Detta för att stärka illusionen av spegelbild. on keyup me myimage = member("mirror").image mytext = member("text").image myimage.copypixels(prestoreimg, myimage.rect, mytext.rect) myimage.copypixels(prestoreimg, myimage.rect, mytext.rect, \ [#bllevel : 80]) Sist av allt skall vi se till att "städa" upp vid avslut, detta gör vi i en Sprite-handler där vi tömmer textobjektet och återställer spegelbilden till ursprungsversionen: on Sprite me member("text").text = "" member("mirror").image = prestoreimg Provkör programmet och testa att skriva in text. Speglar visar ju en omvänd bild så för att stärka illusionen av speglad text skall vi se till att ändra i koden så att den kopierade textbilden spegelvänds. För att åstadkomma detta måste vi ange destinationen med en quad istället för en rect och i denna quad skall de vänstra punkterna byta plats med de högra. För att få fram point-värdena för quaden utgår vi från värdena för destinationens rect. Det skulle bli rätt svåröverskådligt om vi skrev in värdena för quaden direkt i copypixels kommandot så vi använder oss av mellansteget med en lokal variabel. Vi deklarerar en lokal lista, beräknar värdena för quadens points en i taget och lägger in dem i denna lista allteftersom, beräkningen ser ut såhär: mirrorlist =[] 12 Barbro Funseth 2005

13 mirrorlist[1] = point(mytext.rect.right, mytext.rect.top) mirrorlist[2] = point(mytext.rect.left, mytext.rect.top) mirrorlist[3] = point(mytext.rect.left, mytext.rect.bottom) mirrorlist[4] = point(mytext.rect.right, mytext.rect.bottom) Lägg till detta i scriptet före det andra copypixels-kommandot. Ändra också destinationsområdet mytext.rect till mirrorlist som anger destinationen som en quad istället: Den ändrade keyup-handlern skall nu lyda så här: on keyup me myimage = member("mirror").image mytext = member("text").image myimage.copypixels(prestoreimg, myimage.rect, mytext.rect) mirrorlist =[] mirrorlist[1] = point(mytext.rect.right, mytext.rect.top) mirrorlist[2] = point(mytext.rect.left, mytext.rect.top) mirrorlist[3] = point(mytext.rect.left, mytext.rect.bottom) mirrorlist[4] = point(mytext.rect.right, mytext.rect.bottom) myimage.copypixels(mytext, mirrorlist, mytext.rect, [#bllevel : 80]) Det slutgiltiga behavioret skall i sin helhet se ut enligt föjande. property prestoreimg on beginsprite me sprite(me.spritenum).editable = TRUE prestoreimg = duplicate(member("mirror").image) on keyup me myimage = member("mirror").image mytext = member("text").image myimage.copypixels(prestoreimg, mytext.rect, mytext.rect) mirrorlist =[] mirrorlist[1] = point(mytext.rect.right, mytext.rect.top) mirrorlist[2] = point(mytext.rect.left, mytext.rect.top) mirrorlist[3] = point(mytext.rect.left, mytext.rect.bottom) mirrorlist[4] = point(mytext.rect.right, mytext.rect.bottom) myimage.copypixels(mytext, mirrorlist, mytext.rect, [#bllevel : 80]) on Sprite me member("text").text = "" member("mirror").image = prestoreimg Testa programmet, texten visas nu spegelvänt i spegeln. Det går som synes alldeles utmärkt att kopiera över en texts image objekt till en bitmaps image object så att texten läggs till bilden. Däremot går det INTE att göra det omvända dvs kopiera över Barbro Funseth

14 en bitmaps image object till en texts image object och på så vis få en bild att överlagras på texten. Emellertid kan man använda sig av textobjektets alfakanal för att skapa en bild av texten. Textobjekt använder sig nämligen av en alfakanal för att åstadkomma kantutjämning hos texten och man kan extrahera denna alfakanal och skapa en mask av den som man sedan använder i copypixels kommandot. Övning Öppna Startfil_copyText2.dir i mappen DMX_Material_8. I denna övning skall du skriva ett behavior som skall omvandla texten som matas in av användaren till en bildversion av texten. Detta behavior skall finnas på textobjektet. Skapa ett nytt behavior för den sprite som innehåller textobjektet (sprite 1). Vi kommer att behöva ett property som skall lagra ursprungsversionen av bilden som texten kopieras in i. Denna originalbild skall användas för att uppdatera bilden mellan varje tangentryckning; vi skall skriva i realtid och kunna ändra i texten och detta skall återspeglas i målbilden, därför måste det som kopierats in kunna "raderas" från målbilden innan den senaste versionen av texten kopieras in. Först av allt deklarerar vi detta property och i en beginsprite handler sparar vi en kopia av målbilden. Vi skall också se till att textobjektet är redigeringsbart: property porigimg on beginsprite me sprite(me.spritenum).editable = TRUE porigimg = duplicate(member("bild").image) Varje gång användaren trycker ner en tangent skall texten också dyka upp i en bild där en annan bild står för mönstret i texten; vi skall således använda en keyup handler. Vi varje keyup kommer vi att kopiera från bilden av gräset till den enfärgade bilden och skall då använda textobjektets alfakanal som mask för att ast kopiera över den del av bilden som svarar mot texten. Först "raderar" vi eventuell text från målbilden genom att återställa den till ursprungsversionen: member("bild").image = porigimg Därefter skapar vi en mask från senaste versionen av texten genom att extrahera textobjektets alfakanal: mymask = createmask(sprite(me.spritenum).member.image.extractalpha()) Därefter lagrar vi in referenserna till målbilden (den enfärgade bilden) och källbilden (bilden på gräs) i lokala variabler. Detta är inte nödvändigt men bidrar till att göra copypixels-kommandot mer överskådligt. 14 Barbro Funseth 2005

15 targetimg = member("bild").image sourceimg = member("grass").image Till sist kommer så copypixelskommadot: targetimg.copypixels(sourceimg, sourceimg.rect, sourceimg.rect, \ [#maskimage : mymask]) Hela keyup-handlern skall se ut såhär: on keyup me member("bild").image = porigimg mymask = createmask(sprite(me.spritenum).member.image.extractalpha()) targetimg = member("bild").image sourceimg = member("grass").image targetimg.copypixels(sourceimg, sourceimg.rect, sourceimg.rect, \ [#maskimage : mymask]) För att "städa upp" efter oss när spriten försvinner från stage skall vi återställa målbilden till den ursprungliga bilden samt tömma textobjektet på text: on Sprite me member("bild").image = porigimg sprite(me.spritenum).member.text = "" Behavioret i sin helhet skall nu se ut såhär: property porigimg on beginsprite me sprite(me.spritenum).editable = TRUE sprite(me.spritenum).member.text = "" porigimg = duplicate(member("bild").image) on keyup me member("bild").image = porigimg mymask = createmask(sprite(me.spritenum).member.image.extractalpha()) targetimg = member("bild").image sourceimg = member("grass").image targetimg.copypixels(sourceimg, sourceimg.rect, sourceimg.rect, \ [#maskimage : mymask]) on Sprite me member("bild").image = porigimg sprite(me.spritenum).member.text = "" Provkör programmet och skriv in ett lagom långt ord, tex GRASS, avsluta med ett mellanslag så att du får ut hela texten i bilden. Barbro Funseth

16 Flytta upp textobjektet till mitten på stage och flytta ner de bägge bildobjekten så att de hamnar ovanpå textobjektet. Kör därefter programmet och skriv in ett ord, nu får man illusionen att man skriver text med överlagrad bild! När man använder sig av muspositionen eller en annans sprites position på stage för att definiera källområdet som skall kopieras från medlemmen i en sprite på stage konfronteras vi med problemet att muspekaren eller spriten på stage refererar till stages koordinater och att dessa inte är direkt överförbara till medlemmens koordinater. Detta kan ast göras i det speciella fallet där spriten med medlemmen som skall man skall kopiera från, är placerad så att dess övre vänstra hörn har koordinaterna point(0, 0) samt att spriten inte är ner- eller uppskalad i förhållande till medlemmens storlek, i detta fallet korresponderar värdena på spritens koordinater direkt mot medlemmens egna koordinater. Vid andra placeringar av spriten och/eller andra skalförhållande hos spriten så måste stage-koordinaterna omräknas till medlemmens koordinater. Det finns emellertid en funktion i Lingo som man kan använda sig av som underlättar denna beräkning: mapstagetomember() Övning Öppna filen Startfil_photoalbum.dir i mappen DMX_Material_8. Denna fil är till stor del färdigställd, all grafik som används finns redan utplacerad. Även de behaviors som programmet använder är färdigskrivna och utplacerade med ett undantag; det behavior som skall ombesörja "fotograferingen". I programmet använder vi tre globala variabler; a) gorigpix som skall lagra en kopia av de blanka fotona, denna använder vi för att återställa fotoalbumet så att det innehåller blanka bilder när directorfilen avslutas. b) gactivecamera som är en boolean variabel som skall användas för att aktivera kameran; när man klickar på kameran skall en "sökare" synas med vilken man väljer ut ett bildutsnitt som skall bli ett foto i albumet. Kameran avaktiveras antingen när man tar ett kort eller när man klickar på kameran igen c) gphotos är en numerisk variabel som håller reda på vilken plats i fotoalbumet som den tagna bilden skall placeras. De tre variablerna deklareras och initieras i en startmovie handler i ett moviescript. Detta moviescript innehåller också en Movie-handler som "raderar" fotona i fotoalbumet genom att återställa dem till initialbilden, det tomma fotot. Denna moviehandler ser ut såhär: on startmovie global gphotos, gactivecamera, gorigpix gphotos = 1 gactivecamera = FALSE gorigpix = member("photoorg").image 16 Barbro Funseth 2005

17 on stopmovie global gorigpix repeat with n = 1 to 4 member("photo"&string(n)).image = gorigpix repeat Spriten med kameran har redan ett behavior som ändrar på variablen gactivecamera och spriten med sökaren är också redan försedd med ett behavior som ser till att den följer med musens rörelser, så dessa behaviors behöver du inte skriva Det osynliga området på Stage som begränsar sökarens rörelseomfång har det behavior som ombesörjer "fotograferingen", detta behavior har namnet "trig Camera". Förutom fotograferingen så styr detta behavior även när den aktiverade sökaren skall vara synlig på stage. Detta behavior är inte fullständigt, det saknar den mouseup-handler som skall ombesörja fotograferingen och du skall nu fylla i de saknade kommandona. Öppna behavioret "trig Camera", den innehåller följande kod: global gactivecamera, gphotos on mouseenter me if gactivecamera then sprite(6).member = member("sökare") cursor(200) if on mouseleave me if gactivecamera then sprite(6).membernum = 0 cursor(-1) if on mouseup me Eftersom foto skall bara kunna tas när kameran är aktiverad skall vi använda en villkorssats: if gactivecamera then if I villkorssatsen skall vi hantera kopieringen av det valda bildutsnittet. Först måste vi fastställa vilken bild som visas på stage, denna bild finns i sprite 1 och vi lagrar referensen till den i en lokal variabel: sourcepicture = sprite(1).member.image Därefter skall vi avgöra vilken placering i fotoalbumet som bildutsnittet skall ha. Här använder vi oss av variabeln gphotos för att avgöra vilken av de fyra bildmedlemmarna som skall vara målbilden. Det finns fyra medlemmar photo1, photo2, photo3 och photo4 Barbro som föreställer Funseth 2005 blanka foton. Referensen till målbilden lagrar vi i en lokal variabel: 17

18 använder vi oss av variabeln gphotos för att avgöra vilken av de fyra bildmedlemmarna som skall vara målbilden. Det finns fyra medlemmar photo1, photo2, photo3 och photo4 som föreställer blanka foton. Referensen till målbilden lagrar vi i en lokal variabel: targetpicture = member("photo"&string(gphotos)).image Rect för destinationen skall vara densamma som hela målbildens rect : destrect=member("photo"&string(gphotos)).rect Spriten med sökaren anger bildutsnittet och för att hitta detta bildutsnitt i den medlem som är källbilden måste vi göra en beräkning av sökarspritens rect relaterat till medlemmens egna koordinater. Vi måste vid denna beräkning ta hänsyn till att spritens position på stage varierar då ju användaren kan flytta den. Först gör vi en beräkning av spritens rect relaterat till positionen point(0, 0), denna får vi fram på följande sätt: triggerrect = rect(-member("sökare").width/2, - member("sökare").height/2, \ member("sökare").width/2, member("sökare").height/2) Därnäst måste vi hitta musens position relativt målbildens egna koordinater, detta gör vi genom att använda funktionen mapstagetomember() : loc = mapstagetomember(sprite(1), the mouseloc) Variabeln loc innehåller nu musens position omräknat till medlemmens eget koordinatsystem. Genom att addera detta värde till spritens rect som ju är relaterad till medlemmens övre vänstra hörn får vi fram koordinaterna för den rect i målbilden som skall kopieras. sourcerect = triggerrect + rect(loc, loc) Nu när vi fastställt målbild och källbild, målrect och källrect kan vi utföra kopieringskommandot: targetpicture.copypixels(sourcepicture, destrect, sourcerect) Innan vi avslutar villkorssatsen och även mouseup-handlern skall vi avaktivera kameran och räkna upp variabeln som hanterar placeringarna i fotoalbumet. Eftersom vi bara har fyra platser i albumet måste vi på något sätt hantera den situation som uppstår då vi har fyllt platserna. I detta fall tar vi till lösningen att vi börjar om från position 1 och ersätter de gamla bilderna med nya och detta gör vi genom att ändra gphotos till 1 om den är större än 4. Vi skall också återställa cursorn till normalcursor samt lägga till ett slutarljud för kameran. Eftersom det är ett litet effektljud kan vi använda oss av ljudkommandot puppetsound. gactivecamera = FALSE gphotos = gphotos + 1 if gphotos > 4 then gphotos = 1 sprite(6).membernum = 0 cursor(-1) puppetsound "cameraclick" Hela mouseup-handlern skall se ut såhär: 18 Barbro Funseth 2005

19 on mouseup me if gactivecamera then sourcepicture = sprite(1).member.image destrect=member("photo"&string(gphotos)).rect targetpicture = member("photo"&string(gphotos)).image triggerrect = rect(-member("sökare").width/2, - member("sökare").height/2, \ member("sökare").width/2, member("sökare").height/2) loc = mapstagetomember(sprite(1), the mouseloc) sourcerect = triggerrect + rect(loc, loc) targetpicture.copypixels(sourcepicture, destrect, sourcerect) gactivecamera = FALSE gphotos = gphotos + 1 if gphotos > 4 then gphotos = 1 sprite(6).membernum = 0 cursor(-1) puppetsound "cameraclick" if Spara programmet och provkör det. Ta lite olika foton på olika scenarior och titta i fotoalbumet på bilderna du tagit. Barbro Funseth

20 Kopiera från Stage till en bildmedlem Även stage har ett image object som representerar det som finns på stage. Det går således att kopiera hela eller en del av stage's image object till en bitmaps image object på samma sätt som man kopierar mellan två medlemmars image object. Detta förfarande det a alternativet om man vill kopiera en kombination av sprites eller om man vill kopiera från andra typer av medlemmar som till exempel video eller QTVR-medlemmar. Observera att dessa får då inte visas Direct to Stage. Övning I denna övning skall du kopiera en del av stage till en bild. Öppna Startfil_hats.dir i mappen DMX_Material_8. Grafiken finns utplacerad, samt några behaviors finns redan skrivna. Det är det behavior som finns på hattarnas sprites som ombesörjer att de kan flyttas samt att hattarna följeslagarsprites följer med simultant. Det finns en osynlig sprite placerad över det område på stage som skall kopieras och denna sprites rect definierar genom sin position på stage värdena för sourcerect. Denna sprite skall även ha det behavior som skall kopiera över valt område på stage till bilden av spegeln. Som vanligt skall vi spara en kopia av den ursprungliga bilden av spegeln, dels för att kunna återställa den vid avslut av programmet men också för att den återgivna spegelbilden skall kunna vara dynamisk. Vi skall också använda oss av en mask vid kopieringen därför att vi behöver maska av bilden som kopieras så att den passar in i spegelns ovala form. Masken skall tillverkas av en för detta avsedd bild med hjälp av kommandot createmask() och masken skall lagras i ett property. Eftersom mittpunkten på en mask alltid relateras till bildens övre vänstra hörn kommer den att vara förskjuten visavi den bild som skall avmaskas. Dess läge behöver därför korrigeras så att bilden och masken sammanfaller. En beräkning behöver därför göras för att fastställa storleken av korrigeringen och detta värde skall vi också lagra i ett property. Vi börjar med att deklarera dessa properties som vi skall använda: property porigimage, pmask, poffset Så tar vi itu med beginsprite-handlern och börjar med att tillverka en kopia av bilden på spegeln och lagra den i i porigimage: porigimage = member("mirror").image.duplicate() Därefter tillverkar vi masken och lagrar den i pmask pmask = member("mask").image.createmask() Slutligen beräknar vi hur mycket maskens position behöver korrigeras och lagrar detta värde i poffset: loc = point(member("mirror").width/2, member("mirror").height/2)\ 20 Barbro Funseth 2005

21 poffset = sprite(3).loc - loc Handlern ser nu ut såhär: on beginsprite me porigimage = member("mirror").image.duplicate() pmask = member("mask").image.createmask() loc = point(member("mirror").width/2, member("mirror").height/2) poffset = sprite(3).loc - loc Kopieringsförfarandet skall handhas av en exitframe-handler eftersom detta skall ske kontinuerligt över tid. För att kopiering inte skall ske när det inte är nödvändigt dvs när inget har förändrats på stage skall vi använda ett villkor för att styra när kopiering skall ske. Förändringar på stage kommer att inträffa när användaren flyttar på någon av hattarna så med andra ord så skall kopiering ske bara ske när musen är nertryckt. Vi kan alltså använda detta som villkor. Koden för kopieringen lägger vi i en egen handler benämnd mirror och kallar på den från exitframe handlern. on exitframe me if the mousedown then mirror(me) if Genom att på detta sätt placera kopieringskommandon i en egen handler kan vi kalla in denna från andra handlers i behavioret om det skulle behövas. I handlern mirror skall följande ske, för att spegeln inte skall överlagras med de upprepade kopieringarna och därmed förvrängas måste den raderas mellan varje kopiering dvs återställas till ursprungsversionen. member("mirror").image = porigimage vi lagrar referenserna till respektive image objekt som vi skall arbeta med i lokala variabler så att koden blir överskådlligare, dessutom lagrar vi också värdet på den rect som skall ange vilken del av stage som skall kopieras: soureimage = (the stage).image targetimage = member("mirror").image sourcerect = sprite(3).rect Eftersom bilden skall spegelvändas vid kopieringen så skall vi använda en quad för att definiera destinationen samt spegelvända denna. Quaden beräknas efter destinationens rect och vi lagrar värdena i en lista som vi sedan använder i copypixels-kommandot. mirrorlist =[] mirrorlist[1] = point(member("mirror").rect.right, \ member("mirror").rect.top) mirrorlist[2] = point(member("mirror").rect.left, \ member("mirror").rect.top) mirrorlist[3] = point(member("mirror").rect.left, \ member("mirror").rect.bottom) mirrorlist[4] = point(member("mirror").rect.right, \ member("mirror").rect.bottom) Barbro Funseth

22 member("mirror").rect.bottom) Slutligen skriver vi kopieringskommandot där vi förutom de tre obligatoriska parametrarna också använder en modifieringslista som fjärde parameter. I denna lista skall vi ange den mask som vi behöver använda, hur mycket dess position behöver korrigeras samt också en transparensnivå för att förstärka illusionen av spegling. targetimage.copypixels((the stage).image,mirrorlist,sourcerect, \ [#maskimage: pmask, #maskoffset: poffset, #bllevel:150]) Till sist behövs också en Sprite-handler för att städa upp och återställa spegeln till ursprungsversionen: on Sprite me member("mirror").image = porigimage Testa programmet, ta tag i en hatt och prova den på damen. Observera att spegelbilden inte dyker upp förrän man trycker ner musen. Vi behöver alltså göra en korrigering i koden så att spegelbilden syns från början, detta gör vi genom att kalla in handlern mirror i beginsprite-handlern genom att lägga till mirror(me) Hela behavioret skall nu se ut såhär: property porigimage, pmask, poffset on beginsprite me porigimage = member("mirror").image.duplicate() pmask = member("mask").image.createmask() loc = point(member("mirror").width/2, member("mirror").height/2) poffset = sprite(3).loc - loc mirror(me) on exitframe me if the mousedown then mirror(me) if on mirror me member("mirror").image = porigimage soureimage = (the stage).image targetimage = member("mirror").image sourcerect = sprite(3).rect mirrorlist =[] mirrorlist[1] = point(member("mirror").rect.right, \ member("mirror").rect.top) 22 Barbro Funseth 2005

23 mirrorlist[2] = point(member("mirror").rect.left, \ member("mirror").rect.top) mirrorlist[3] = point(member("mirror").rect.left, \ member("mirror").rect.bottom) mirrorlist[4] = point(member("mirror").rect.right, \ member("mirror").rect.bottom) targetimage.copypixels((the stage).image,mirrorlist,sourcerect, \ [#maskimage: pmask, #maskoffset: poffset, #bllevel:150]) on Sprite me member("mirror").image = porigimage Nu kan du provköra programmet och prova hattar. Barbro Funseth