Lektion 7, del 1, kapitel 15 Filter och Transformationer

Transkript

1 Lektion 7, del 1, kapitel 15 Filter och Transformationer Inlärningsmål Att kunna använda filter för att åstadkomma specialeffekter Att kunna kombinera filter för att nå önskad effekt Att kunna åstadkomma animerade övergångar mellan webbsidor Att kunna manipulera filter dynamiskt med JavaScript Inledning Med hjälp av filter kan man åstadkomma många grafiska effekter som ger liv åt webbsidor. Filter är specifika för respektive webbläsare och finns både för Internet Explorer 4 - och Netscape 6 -. Boken behandlar bara filter för IE därför begränsar även vi oss till detta. Effekter av detta slag och mycket mer avancerade kan åstadkommas med hjälp av t.ex. program som Flach men efter som att jag inte kan förutsätta att ni har tillgång till dessa hemma så behandlas inte dessa. Filter och transformationer tillför inget nytt material till en webbsida men det gör sidan mycket mer intressant och fångar besökaren. Filter och transformationer specificeras med CSS filter egenskap och kan appliceras på block element som p och div med flera. De kan även appliceras inline element som på strong och em om dessa har hight och width egenskaperna satta. Filtret flip Filtren flipv och fliph spegelvänder en text eller bild horisontellt eller vertikalt. Filtret appliceras med style = filter: fliph. Detta visas i exempel Filtret croma Med filtret croma kan man göra om valfri färg i ett bildobjekt till transparent. Filtret initieras med filter: croma. Man anger bara aktuell färgs hex kod som i figur Filtret definieras på rad 35 i style elementet för bildobjektet. Värdet hämtas sedan dynamiskt från en list box och kopplas till filtret i funktionen på raderna Filtret mask

2 Med filtret mask applicerat på en bild kan man skapa en mask där bakgrunden till ett element är en solid färg och förgrunden är transparent till en bild eller en färg bakom bilden. Filtret initieras med filter: mask (color = #nnnnnn). Detta visas i figur Filtren invert, gray och xray Dessa tre filter är ganska enkla filter som kan appliceras på bilder eller text. Invert inverterar helt enkelt bildens färger. Gray gör om färger till gråskala och xray skapar en illusion av en röntgen bild. I figur 15.4 appliceras filtren på en bild hc.jpg. Filtret shadow Ett enkelt filter som ger djup till din text genom att lägga till en skugga. Detta visas i figur 15.5 i boken. Initieras med filter: shadow (direction = gradtal, color = färg). Filtret alpha Med filtret alpha kan man skapa toningar från en start färg till en slutfärg. Initieras med filter:alpha ( style = , opacity= nn%, finishopacity= nn%) där 0 betyder likformig toning, 1 betyder linjär toning, 2 betyder cirkelformad toning och 3 betyder rektangulär toning. Opacity anger från vilken procentsats som toningen skall börja och finishopacity anger vid vilken procentsats toningen skall sluta. Filtret kan även ta argument för startx, starty och finichx, finichy. Dessa anger var toningen skall starta och sluta. Figur 15.6 visar exempel på användning av detta filter. Filtret glow Detta filter skapar en aura kring text. både färg och intensitet kan anges för filtret.. Initieras med filter:glow ( color = färg, strength = intensitet 0-255). Filtret blur Detta filter suddar ut element i en bestämd riktning.. Initieras med filter:blur( add = true false, direction = riktning, strangth = intensitet). Detta visas i figur15.8. Filtret wave Med filtret wave kan man skapa våg former i texten (eller bilden).. Initieras med filter:wave(add = true false, freq = frekvens, phase = schiftning). Visas i figur 15.9.

3 Filtren dropshadow och light Dessa filter är mer avancerade och ger en större effekt på elementet. DropShadow ger en skugga bakom elementet. Light ger en illusion av att man belyser elementet med en lampa. Figur visar en intressant användning av dessa filter tillsammans där skugga och ljuskälla följer muspekeren. Det är funktionen run som dynamiskt ändrar på parametrarna för filtren. I detta fallet använder man en punkt ljuskälla eligt rad 16 i scriptet. Vidare sätts först x och y koordinater sedan höjden över objektet där ljuskällan befinner sig. Nästa tre argument anger RGB värden för ljuset och det sista värdet anger ljusstyrkan. Figur visar ett exempel på användning av flera ljuskällor, denna gång koniska. Filtret blendtrans Med detta filter kan man åstadkomma fade effekter för ett element. Filtret tar ett argument duaration som anger hur lång tid toningen skall ta. Detta visas först på ett enkelt sätt i figur och sedan på ett betydligt intressantare sätt ifigur15.3. Filtret reveeltrans Detta filter ger flera sätt att göra ett stegvis utbyte av två element. Visas i figur Prova och se. Sammanfattning Dessa filter ger var för sig ganska begränsade effekter men om man kombinerar flera filter kan intressanta effekter åstadkommas. Om man dessutom använder sessa med andra ActiveX objekt kan funktionaliteten utökas ytterligare.

4 Del 2, Structured Graphics Control Detta är ytterligare en activex kontroll som stöds från version 5.5 av IE. Denna gången avsedd för grafiska effekter. Denna activex är ett gränssnitt mot direct animations som använd i många videospel. Enkla former Eftersom att detta är en kontroll definieras den med ett klass id. Ett antal parametrar ger olika grafiska former. I figur 17.1 demonstreras i sin enklaste form, de flesta av de grafiska former som kan åstadkommas med detta object. På rad infogas Structured Graphics ActiveX Control och ges ett id shapes för att man skall kunna referera till det sedan. Den första delen av parametrar anger egenskaper för de linjer vi skall använda för att rita upp våra former. På rad anger vi det första param elementet SetLineColor metoden (linjefärg), idetta fall svart (0,0,0).Notera att elementen namnges i den ordning de skall anropas (Line0001, Line0002, osv). På rad anger man typ av linje med parametern SetLineStyle. Man anger två egenskaper, linjetyp och width. Linjetyp 1 ger en heldragen linje, typ2 en streckad och typ 0 en osynlig. På rad anger man med SetFillColor färg för ytor som skall fyllas med färg. På rad anger man med SetFillStyle hur ytan skall fyllas, en etta anger att fyllningen skall vara solid. Det finns 14 olika fyllnads varianter Number Fill Style 0 None 1 Solid fill 2 None 3 Horizontal lines 4 Vertical lines 5 Diagonal lines 6 Diagonal lines 7 Cross-hatch 8 Diagonal cross-hatch 9 Horizontal Gradient 10 Vertical Gradient 11 Circular Gradient 12 Line Gradient 13 Rectangular Gradient 14 Shaped Gradient Fig Fill styles available for the SetFillStyle method. Tabell från läroboken

5 På rad skapas den första grafiska formen med metoden oval. Alla grafiska former som ritas up med denna kontroll har en tänkt box som omger objektet. Denna box storlek anges av ett antal attribut som anges i en parameterlista. För objektet oval anges först x-y koordinater för ovalen sedan i nästa par anges höjd och brädd för boxen. Den sista parametern anger medurs vridning av objektet i grader. Detta ser ut enligt följande: value = "Oval( 0, -175, 25, 50, 45 )". Koordinater anges relativt mittenn av ActiveX kontrollens yta på sidan. På rad skapas nästa figur arc (del av en cirkel). Arc tar 7 parametrar, förutom x och y koordinater, höjd och brädd så tar den startvinkel i grader längd i grader och avslutar som tidigare med rotation i grader. På rad kommer nästa figur pie (en fylld tårtbit). Den tar samma argument som arc. På rad skapas en polygon. Det första argumentet anger antalet hörn i polygonen därefter anges alla hörn som x och y koordinater. Den sist angivna punkten förbinds automatiskt med den första. Nästa figur rect (rektangel) skapas på rad 37-38, De första parametrarna anger x och y koordinater, nästa två ger höjd och brädd och den sista rotation i grader. Figuren roundrect på rad är i stort sett lika rect men har rundade hörn. Den har två ytterligare argument, brädd och höjd i pixlar för rundningen. På raderna anges en textkontroll med metoderna SetFont och Text. SetFont anger vilken font och storlek texten skall ha och Text placerar den på sidan. Argumenten för SetFont är först font typ i klartext, sedan tecken storlek i punkter följt av fethetsgrad ( ) för texten, kursivering (0 eller 1), understrykning (0 eller 1) och genomstrykning (0 eller 1). Text har argumenten x och y koordinater och rotation. På raderna 47 till 50 visas figuren PolyLine men först anropas SetLineStyle igen för att ange avvikande formatering till denna figur. PolyLine fungerar som Polygon men sluter inte automatiskt figuren utan den förblir öppen. Argumenten är de samma som för polygon.

6 Arc Oval Pie Rect Polygon RoundRect PolyLine Text Dessa figurer kan sedan manipuleras med hjälp av JavaScript man kan t.ex. göra förflyttningar med hjälp av Translate som i figur 17.3, rotera med Rotate som i fig I figur 17.5 och 17.6 visas hur man skapar interaktion med användaren genom att fånga upp mus eventen och processa dessa. Slutligen visas i fig 17.7 hur man skalar objekten med Scale. Studera exemplen Avslutning Om man använder dessa objekt gärna tillsammans med andra så kan man åstadkomma många bra effekter. Dessa blir dock aldrig lika lätta att använda som om man hade använt t.ex. Flach