Bygg sajten i flash html - Del 1 Drömmer du om en egen sajt? Glöm kodknackande och krångliga html-editorer. Gör som proffsen och skapa en sajt med animeringsprogrammet Flash. Text Andreas Weidman, (artikeln är publicerad i Internetworld 10/2003) Flash Del 1 - Bygga siten i Flash Del 2 - Preloader Del 3 - Optimera sajten Del 4 - Uppdatera sajten smidigt Del 5 - Html i Flash Del 6 - Javascript och andra finesser Med en egen sajt på nätet kan du göra dina kompositioner tillgängliga för hela världen. Du kan publicera resultaten från matcherna i fotbollsföreningen eller helt enkelt använda sidan för att förstärka ditt ego. Vilket innehåll du än väljer är det lätt att bli avskräckt av själva hemsidessnickrandet. För många betyder det ändlösa rader av programmeringsspråk som mest liknar ryska eller så innebär det att använda ett komplicerat konverteringsprogram som man aldrig fattar. Hemsidor kan man nämligen bygga i både ordbehandlingsprogram och konverteringsprogram som Dreamweaver, alternativt genom att skriva koden för hand. Ett annat alternativ är att använda Flash. Det är ett lättanvänt program som skapades för att göra animeringar. Idag är Flash också det bästa alternativet för interaktiva hemsidor möjligheterna är oändliga. Ser likadan ut för alla Med en sajt byggd i Flash vet du att den ser likadan ut för alla besökare, oavsett deras webbläsare, operativsystem, skärmstorlek och övriga inställningar. Allt som behövs för att se Flashapplikationer är en Flashplayer som man hämtar gratis hos tillverkaren Macromedia om man inte har den. Undersökningar visar dock att majoriteten av surfarna har version 5. Därför är det i nuläget smart att göra hemsidan för den versionen och inte den senaste, Flash MX 6.
Skillnaden är att ett fåtal funktioner inte fungerar, men för hemsidan i exemplet behövs inte dessa ganska avancerade funktioner. Innan du börjar För att kunna hänga med i den här skolan är det bra om du vet lite hur programmet fungerar. Sätt dig gärna ner och experimentera lite först. Var inte rädd att klicka dig fram och prova alla funktioner. I programmet ingår några tips på hur man gör. Kolla också in tidigare skolor i Flash på vår sajt, www.internetworld.se/webbskolan. Du bör också ha en klar bild av vad din hemsida ska innehålla. Ska den handla om din hobby vattenskotrar eller ska den kanske presentera dig och ditt företag? Skriv ner på ett papper vilka länkar du vill ha och skriv några texter kring varje område. När du känner dig redo kör vi vidare! Förberedelser 1. Starta programmet Lär känna arbetsområdet, verktygen och panelerna. (Se bilden Översikt.) Viktigast är Timeline, tidslinjen, som ligger nästan högst upp. Den visar vårt innehåll. Ovanför, i Properties, gör vi våra inställningar och under Tools till vänster finns verktygen. Nedre delen av fönstret är vårt arbetsområde och det är reserverat för vår kreativitet.
2. Gör inställningar Vi börjar med att ställa in hemsidans attribut som vi vill ha dem. Klicka på arbetsområdet och gå sedan in under Properties. Under Size väljer vi storleken 800 x 400 px, under Background väljer vi vit, Frame Rate, hastigheten på animeringar, ställer vi till 21, och under Publish väljer vi Flashplayer 5. Nu är vi redo att köra igång! 3. Skapa ett arbets-dokument I Timeline (tidslinje) motsvarar varje Frame (ruta) ett blankt papper. För att kunna arbeta med pappret måste det finnas en liten rund ring i rutan. Om den saknas högerklickar du i rutan och väljer Insert Blank Keyframe. (Se bild Tidslinjen.)Nu kan du lägga in innehåll för just den här sidan genom att skapa något på arbetsytan. Vill du skapa en sida till högerklickar du på nästa ruta och väljer återigen Insert Blank Keyframe. Vill du däremot ha samma innehåll i nästa ruta väljer du istället Insert Frame. Detta kan vara bra när du till exempel vill låta en menyrad ligga på samma ställe på alla sidor. Vill du i nästa ruta istället ha exakt samma innehåll men kunna ändra lite, till exempel vid en animation, högerklickar du och väljer Insert Keyframe.
4. Lägg till lager Du kan även lägga till olika lager med olika innehåll. Du lägger till ett lager genom att klicka på symbolen med det vita pappret under det första lagret, eller genom att högerklicka på Layer 1 och välja Insert Layer. (Se bild Lager.) Nu är grunden lagd. En hemsida tar form Nu kan vi alltså börja fylla vår hemsida med innehåll. 5. Välj lager Klicka på Layer 2 för att välja vilket lager vi ska jobba i. Normalt är Flash inställt för att hjälpa dig att rita och placera saker efter ett osynligt rutmönster. Det kan ibland vara störande och du kan stänga av det genom att klicka på Snap to objects under View i menyraden.
6. Skapa sidmall Rita nu en ram precis innanför kanten runt sidan med verktyget Rectangle Tool i panelen Tools. Markera därefter färgen inne i ramen och tryck på Delete. I samma lager lägger du även allt som ska finnas med på samtliga sidor, till exempel logotype och menyrad. För att lägga in logotypen väljer du Import under File och sedan bilden du vill ha. Därefter placerar du bilden där du vill ha den. Är bilden för stor kan du förminska den med hjälp av verktyget Free Transform Tool i Tools-panelen. Använd ritverktygen för att rita upp hur det ska se ut, och textverktyget för att skriva in de länkar som ska finnas på sajten. I det här exemplet har vi fyra länkar. 7. Lås lager Vi ska nu låta det här lagret visas på alla sidor på sajten. Det gör vi genom att högerklicka på ruta fyra i tidslinjen och välja Insert Frame. Nu spänner en grå ruta över fyra rutor. Nu kan vi tillfälligt låsa detta lager för att inte råka flytta på något när vi jobbar med resten av sajten. På varje lager finns en liten prick som ligger under hänglåssymbolen överst. Om du klickar på pricken är lagret låst och upprepa för att låsa upp. 8. Lägg in bild Då är du redo att lägga in lite innehåll på din sida. Välj Layer 1. I ruta ett ska vi göra startsidan, i ruta två länk nr 2, i ruta tre länk nr 3 och så vidare. Hur det ska se ut väljer du själv. Här ska vi ha en bild och en text på varje sida. På startsidan importerar du en bild på samma sätt som du importerade logotypen tidigare och placerar den på lämplig plats. Om du vill kapa bilden väljer du Break Apart under Modify. 9. Lägg in text Du väljer textverktyget för att lägga till text. För att ändra typsnitt går du till Properties som hela tiden ändras beroende på vilket verktyg du använder. Rita och ändra så som du vill ha din layout. Nästa sida skapar vi som tidigare nämnts genom att högerklicka på ruta två i tidslinjen och välja Insert Blank Keyframe. På samma sätt som tidigare lägger vi in bilder och text på de resterande sidorna. Vill du behålla samma utseende på alla sidor och enbart byta ut texten kan du när du högerklickar välja Insert Keyframe och sedan ändra texten så som du vill ha den. Nu har vi bestämt hur sajten ska se ut, och nu måste vi säga åt programmet hur den ska fungera. Det gör vi genom programmering i Flashs inbyggda programspråk actionscript eller flingo som det också kallas.
10. Välj kodläge Du hittar panelen för actionscript genom att välja Windows och sedan Actions. Panelen har två lägen: Normal och Expert Mode. (Se bild Actionspanelen.) I Normal-läget kan du klicka fram färdiga skript ur ett bibliotek, men för att kunna klistra in egen kod måste du ställa om till Expert Mode. I den ljusblå rutan med en pil väljer du Expert Mode. Du kan nu programmera hur rutorna i tidslinjen ska fungera och vart knappar ska länkas. Hur det går till kommer vi till snart.
Skapa knappar För att besökaren ska kunna röra sig på sajten måste det finnas knappar. Knapparna lägger du i det översta lagret, så vi får låsa upp det igen och välja Layer 2. 11. Skapa knappar En knapp skapar du genom att i det här fallet markera en ritad fyrkant som är ungefär lika stor som en länk i menyn. Sedan väljer du Insert>Convert to Symbol, och väljer alternativet Button. (Se bild Göra en knapp.) Här finns även en kvadrat med en massa prickar på som avgör var knappens centrum ligger. Klicka på den längst till vänster i mitten och klicka på OK. Du har nu skapat en knapp. När du nu dubbelklickar på knappen ändras tidslinjen och det finns fyra rutor. Up betyder hur den ska se ut när musen inte vidrör den, Over när man rör vid den, Down när man klickar på den och Hit är den yta som man kan röra vid. Dubbelklicka på den grå rutan i ruta ett i tidslinjen och dra den sedan med musen till rutan under Hit. Den visas sedan som ljusblå när du arbetar med filen och är osynlig när sidan är publicerad.
12. Skapa aktivitet Vill du att något ska hända när man håller musen över länken högerklickar du i rutan under Over och väljer Insert Blank Keyframe. Här kan man nu rita en pil eller liknande. Tänk på att krysset som ligger till vänster är kanten längst till vänster på knappen när du placerar din pil, du kan därför lägga den förslagsvis lite till vänster om krysset. För att gå tillbaka från knappens tidslinje väljer du Scene 1 i botten på tidslinjen eller dubbelklickar på ett tomt område på skärmen. Nu är knappen som sagt markerad med en ljusblå färg. Vi placerar ut knappen med hjälp av musen och piltangenterna. Snart ska vi kopiera knappen till alla länkar men först lite programmering. När du har panelen Actions öppen markerar du knappen genom att klicka på den. För att se till att knappen går tillbaka och stannar på ruta ett i tidslinjen när man släpper den skriver du följande i dialogrutan Actions: on(release){_root.gotoandstop(1)} Nu kan du klicka på knappen igen och kopiera den och klistra in med Edit>Copy och Edit>Paste. Kopiera så du har fyra knappar och placera dem ovanpå dina länkar. Nu får du markera varje knapp och ändra i koden så att den hoppar till rätt siffra. Du byter helt enkelt ut ettan mot två, tre eller fyra. 13. Stoppa filmen Om du skulle publicera filen nu, skulle Flash visa varje sida i en följd utan att du klickade. Det beror på att Flash tror att du har gjort en film. För att förhindra det markerar vi ruta ett i Layer 1 på tidslinjen. I dialogrutan Actions stannar vi filmen genom att skriva: stop(); 14. Publicera Nu är sajten klar för publicering. Om du inte har sparat din fil, gör det nu. Välj därefter File>Publish Settings. Här finns flera alternativ att välja på. Under fliken Formats ska Flash och html vara markerade. Under fliken Flash och Html duger stadardinställningen bra. Välj sedan OK. Är du redo? Klicka nu på File>Publish Preview>Default. Nu ska din webbläsare öppnas och visa din hemsida. Hurra! Ett html-dokument och en Flashfil sparas i samma katalog som du sparat din sida i. 15. Ut på internet För att lägga ut sidan på Internet behöver du ett webbhotell och ett ftp-program. Gratis webbhotell finns att hitta på Internetworlds webbsajt, www.internetworld.se. Gratis ftp-program kan du ladda ner från exempelvis www.download.com. Sedan är det bara att ladda upp html-filen som du döper om till index.html (för att
webbhotellet ska veta vilken fil som ska visas först) och Flashfilen i formatet swf som också exporterades. Den ser ut som den vanliga arbetsfilen (med röd logo) fast här med blå logga. Sajten är klar att besöka. Nu har du lärt dig grunden i hemsidesskapande med Flash. Men det finns mycket mer att lära. Med Flash kan du göra i princip hur avancerade hemsidor som helst, det enda som stoppar dig är din fantasi. Du kan göra tuffa bildspel, interaktiva forum, 3d-världar och mycket, mycket mer. Vi kommer att ta upp många spännande funktioner i webbskolan under vintern. Vi visar bland annat hur du optimerar din hemsida, skapar avancerade preloaders, gör dina egna uppdateringsfunktioner och annat smått och gott. Missa inte det! Hämta filer på nätet Du hittar den färdiga filen på Internetworlds sajt, www.internetworld.se/webbskolan/ flash1.zip. Med hjälp av den förstår du lättare hur allt fungerar. Ladda ner den och använd den tillsammans med artikeln. Du kan också ha den som utgångspunkt för egna ändringar.
Det här behöver du; Flash mx 2004. Programmet du behöver heter Macromedia Flash MX och finns att ladda ner på www.macromedia.com/software/flash/download som en 30 dagars testversion. Den har alla funktioner som det riktiga programmet. Fullversionen kostar från 1 500 kronor. Checklista - Ställ in bakgrundsfärg, sidstorlek och hastighet. - Dela upp innehållet i olika lager. - Lägg knappar vid menyn. - Lägg till keyframes. - Placera innehållet. - Skriv kod till knapparna. - Skriv en stop kod i första framen. - Publicera. Här kan du läsa mer om Flash Flashhjälp på svenska Forum på svenska med exempelfiler och lektioner i Flash. www.communen.com Störst och bäst Den största och i många fall bästa sidan med Flashexempel på engelska. www.flashkit.com Mångsidig med bra innehåll En vettig sida om Flash med nyheter, lektioner och forum. www.kirupa.com Hjälp av tillverkaren Tillverkaren av programmet har mängder med information och hjälp om Flash. Du hittar bland annat vanliga frågor och svar, exempelfiler och färdiga insticksfunktioner som du kan använda tillsammans med till exempel Dreamweaver. www.macromedia.com Många exempel Mängder av Flashkurser för alla kunskapsnivåer. virtual-fx.net/vfx/tutorial.php
Gör en snygg laddsida - DEl 2 Alla smarta sajter i Flash har en. Och du vill inte vara sämre. I tio steg visar vi hur du gör din egen avancerade laddsida. När du besöker en webbplats som skapats i programmet Flash kan du mötas av en tom skärm och texten "laddar". Det är både fult och rätt frustrerande, eftersom du inte vet hur lång tid det tar innan sidan har laddat färdigt eller om den ens fungerar. I första delen av Flash-skolan lärde du dig grunderna för att bygga en sajt i Flash. I den här andra delen hjälper vi besökarna på din sajt genom att skapa en så kallad preloader, eller laddsida, som visar hur snabbt hemsidan laddas in. Vi använder dessutom streaming, strömmande teknik, för att göra vänte-tiden kortare. Vår laddsida ska visa så mycket information som möjligt. Vi ska kunna visa hur stor den totala filen är, hur mycket som laddats in och hur lång tid det är kvar i procent. Du kan själv välja vilka delar du tycker är viktigast att ha i din laddare. För dig som har glömt bort eller missat den första delen finns artikeln och exempelfilerna på vår hemsida, www.internetworld.se/webbskolan. Där hittar du också exempelfilerna till den här lektionen. I skolan som följer här bygger vi vidare på det du skapade i del 1. Om du är nybörjare behöver du läsa igenom första delen för att bättre kunna hänga med. 1. Skapa utrymme Nu ska du alltså bereda plats för din laddsida. I tidslinjen (Timeline) gör du det före allt innehåll så att sidan laddar in först och kan ge information till besökaren snabbt och smidigt. För att göra detta måste du flytta innehållet i alla nyckelrutor i tidslinjen ett steg fram, och på så vis skapa en tom ruta allra först i tidslinjen där din laddsida ska ta plats. Markera alla rutor i tidslinjen med musen. När detta är gjort tar du tag i det markerade området och drar det ett steg åt höger. Det kan hända att varningsrutan Resolve Library Conflict dyker upp, med två olika val. Flash undrar om det ska kopiera innehållet eller flytta det. Båda valen ger i det här fallet samma resultat, men välj för säkerhets skull Replace Existing Items. Du har nu en tom ruta i både layer 1 och layer 2 allra längst till vänster.
2.Ändra i koden Tanken är att filmen ska stanna på laddaren och sedan gå vidare till sidan. Du behöver därför dels flytta stoppkoden till ruta ett, dels ändra vart länkarna ska gå. Eftersom du har flyttat allt ett steg måste du alltså ändra alla länkars kod till en ruta framåt. Ta fram actionscriptfönstret. Det hittar du under menyn Window och sedan Actions om den inte redan finns framme. I ruta två i lager ett hittar du koden stop();. Ett litet a visar att rutan innehåller kod. Klicka på rutan och titta efter koden i din action-script-ruta. Markera hela raden kod och radera den. Skriv in samma kodrad i ruta ett istället. I det här exemplet väljer vi ruta ett i layer 2, tittar i actionscript fönstret och skriver: stop(); Du har nu sagt åt Flash att stanna på den allra första rutan. Ändra länkarna genom att ställa dig på ruta två i tidslinjen och välj en av våra länkknappar. De är markerade som ljusblå fyrkanter. Välj den första och se i actionsfönstret att den innehåller koden: on(release){_root.gotoandstop(1)}
Eftersom du har flyttat allt innehåll ett steg ändrar du siffran 1 i koden till 2. Gör likadant med alla länkarna. Nu är du redo att börja skapa! 3.Skapa grafik Du bestämmer själv hur din preloader ska se ut. Det du ska tänka på är att göra den så lättladdad som möjligt. Det betyder att du helst struntar i stora bilder och grafik. Du ska skriva en text som säger att sidan laddar, göra rutor för dina siffror samt göra en så kallad Progressbar, som visar hur stor del av sajten som laddats. En progressbar kan vara allt från ett litet streck som går från vänster till höger till ett glas som fylls upp till toppen. Vi ska här använda oss av ett streck. Men börja det hela med att designa laddsidan. Lägg en text med textverktyget. Den har A som symbol och du hittar den under panelen Tools. Här skriver du till exempel Laddar information.
4. Visa laddtid En progressbar är alltså i detta fall ett streck som visar hur mycket som laddats in. Det ger besökaren en översikt av hur fort nedladdningen går och hur mycket som är kvar. Det hela sköts med programmering, men du måste dock rita för hand. En progressbar kan se ut lite hur som helst. I det här exemplet ritar vi en rektangel gör den i valfri höjd och längd. Markera ifyllnadsfärgen och gör det till en symbol genom att trycka snabbkommandot F8 på tangentbordet. Välj Movieclip och klicka i en prick längst till vänster på den lilla kvadraten som visar var symbolens center ska ligga.
5. Gör informationsrutor Nu vill du ge information om hur mycket det är kvar att ladda i kilobytes, total mängd kilobyte och procent laddat. Du visar här för besökaren hur filen laddas. För att kunna visa den informationen krävs till att börja med några dynamiska textrutor. Börja med att sätta ut några sådana. En dynamisk textruta är ett förbestämt textfält. Till den kan du skicka text eller uträkningar med siffror. Välj textverktyget. Titta under panelen Properties och hitta snabbt en ruta där det nu förmodligen står Static text. Välj istället Dynamic text. Dra musen till arbetsytan och håll ner vänster musknapp. På så sätt drar du upp ytan på textfältet. Se till att du gör den tillräckligt lång för att få plats med all text du vill få in. Om den skulle visa sig bli fel storlek kan du alltid dubbelklicka på den och dra i den lilla fyrkanten för att ändra storlek på den. Vi ritar totalt ut två sådana textfält. I exemplet har vi valt att lägga de under varandra. För att kunna skicka information till dessa dynamiska textfält måste Flash veta till vilken ruta som vad ska skickas. Hjälp programmet med detta genom att döpa dessa rutor. Du döper textfälten genom att helt enkelt markera en ruta och skriva in valfritt namn i rutan Var: som står för variabel i panelen Properties. I exemplet döper vi våra textfält för enkelhetens skull till text1 och text2. Nu är det dags att få lite liv i vår preloader!
6. Skapa action Du ska nu väcka liv i din skapelse med hjälp av lite programmering. Du markerar din Progressbar och öppnar panelen Actions. Här ska du lägga in lite kod både för vår Progressbar och för all uträkning för resterande information som ska skickas till textfälten. Koden du skriver in följer nedan. Med text markerade med // får du kommentarer kring koden, men de ska inte ingå koden. Det kan se lite krångligt ut med alla uträkningar, men egentligen är det standarduträkningar. onclipevent(enterframe){ //Hämtar infomation om filen.// total=_root.getbytestotal(); totalkb=math.round(total/1000); laddat=_root.getbytesloaded(); laddatkb=math.round(laddat/1000); //Räknar ut procent.// procent=math.round(laddatkb/(totalkb/100)); _root.text1=procent + "% har laddatsî //Reglerar vår progressbar.// this._xscale=procent;
//Räknar ut kilobytes.// _root.text2=laddatkb + " kb av " +totalkb +" kb har laddats"; //Kollar om det har laddats färdigt.// if(laddat==total){_root.gotoandstop(2);} } 7.Lär känna din kod För att du bättre ska kunna förstå koden går vi igenom den rad för rad. Är du redo? Då kör vi! Den första raden är en standardrad som alltid används när man programmerar ett Movieclip och betyder i princip: Använd denna kod vid Enterframe, alltså hela tiden. Du kan istället skriva till exempel îloadî om du vill att koden bara ska köras en gång. onclipevent (enterframe){
I följande fyra rader hämtar du information om totala antalet bytes som filen har samt hur mycket som har laddats in (getbytestotal/loaded). Math.round rundar helt enkelt av det talet och sedan delas det med 1000 för att omvandlas till kilobyte istället. _root är sökvägen till det som ska kollas, vilket i detta fall är grundscenen, ungefär som skrivbordet i Windows. Det finns här även så kallade variabler (total, totalkb, laddat och laddatkb) vilket är valfria ord som lagrar resultatet av till exempel en uträkning. Du kan sedan använda det ordet för att räkna med resultatet när du vill. total=_root.getbytestotal(); totalkb=math.round(total/1000); laddat=_root.getbytesloaded(); laddatkb=math.round(laddat/1000); För att räkna ut procenten använder du återigen våra variabler, avrundning och sökvägen. Men den här gången skickar du slutresultatet tillsammans med lite text till _root.text1 vilket är sökvägen till ett av de dynamiska textfält du skapade tidigare. Det du skriver här syns alltså på skärmen sedan. procent=math.round(laddatkb/(totalkb/100)); _root.text1=procent + "% har laddatsî Här reglerar vi vår Progressbar, du vet den som visar hur mycket som laddats i procent. Här står i klartext att den här (rektangelns) skala horisontellt (_x) ska vara lika mycket som procent som vi räknade ut tidigare. this._xscale=procent; För att räkna ut kilobytes och skicka det till text2 använder vi sökvägen, variabler och egen text. _root.text2=laddatkb + " kb av " +totalkb +" kb har laddats"; Den här raden kollar om det har laddats färdigt. Om variabeln laddat och variabeln totalt är lika mycket hoppa till ruta 2 i grundscenen. if(laddat==total){_root.gotoandstop(2);} } Det var väl inte så svårt? Oftast kan en klunga kod se lite läskigt ut men är ofta ganska logisk, även om komplicerade matematikfunktioner inte alltid är så kul. Eftersom koden är uppdelad i olika sektioner kan du ta bort någon funktion, till exempel kilobyteräknaren. Då raderar du bara det avsnittet.
8.Färdig laddare Du har nu skapat en preloader som fungerar som ett Smartclip. Det betyder att du kan lägga in preloadern i vilken Flashfil som helst och den fungerar på direkten om den ligger allra först i filmen. Vill du sätta in den någon annanstans kan du enkelt göra det, men kom ihåg att ändra den näst sista raden som kollar om det laddats färdigt. Här får du ändra tvåan till den ruta som du vill att den ska hoppa till när den är klar.
9. Snabba på laddningen Har du gjort en väldigt stor webbplats eller en lång animation som tar mycket lång tid att ladda kan du använda dig av vad som brukar kallas för streaming. Det innebär att Flash bara laddar in så mycket du önskar, vilket brukar vara de första sidorna, och låter resten laddas medan besökaren är inne på sajten. I en animering på fem minuter låter du alltså preloadern ladda in kanske en minut. Medan besökaren tittar på den första minuten hinner resterande fyra minuter laddas in. Det gör att väntetiden för sidan minskar kraftigt och du kan bestämma helt och hållet hur mycket du vill ladda in och hur mycket som ska streamas. Allt du behöver göra är en pytteliten ändring i koden. På rad två i koden i vår progressbar ligger total= _root.getbytestotal(); Skriv själv in hur mycket som ska laddas. Om filen är totalt 500 kb ( 500 000 bytes) och du vill att 100 kb (100 000 bytes) ska laddas in i början blir koden istället total=100 000; Hur enkelt som helst! Du skriver alltså bara in hur mycket du vill ska laddas istället för att Flash kollar hur stor den är totalt. Flash laddar sedan in en ruta i taget från tidslinjen från vänster till höger medan besökaren tittar på de första. Bra va!
10. Publicera din laddsida Din preloader är nu helt klar. När du exporterar din nya fil och lägger ut den som din hemsida följer den automatiskt med (friska upp minnet i Flash-skolan del 1). Så här blev resultatet. En bild av hur sidan laddas och hur lång tid det är kvar. I nästa nummer går vi vidare och optimerar bilder och grafik på vår Flashsajt. Hämta filer på nätet Vill du hellre ser hur vi har gjort innan du själv börjar bygga kan du hämta exempelfiler till den här delen i Flash-skolan på www.internetworld.se/webbskolan/flash2.zip
Snabba upp din hemsida! - Del 3 Många drar sig för att besöka hemsidor som tar för lång tid att ladda och fortsätter raskt till någon annan sajt. Ett sätt att hjälpa surfarna är att visa den preloader, laddsida, som du lärde dig att skapa i förra delen av Flashskolan. I den ser besökaren hur stor sajten är och hur snabbt den laddas. Du ska nu gå ett steg längre och faktiskt minska filstorleken så att sajten går fortare att ladda. Du optimerar den för bästa prestanda och för besökarnas skull. Optimering är ett viktigt steg i att göra hemúsidor och du får garanterat fler och gladare besökare om du optimerar rätt. För att kunna hänga med i den här webbskolan behöver du programmet Flash samt tidigare publicerade delar av skolan. Du hittar de tidigare artiklarna och deras exempelfiler på vår sajt. Adressen är www.internetworld.se/tjanster/webbskolan. Den här delen skiljer sig lite från de tidigare eftersom vi tar upp vissa tekniker som vi inte använder i exempelúfilen. Vilka av våra tips du ska använda beror på vilket innehåll du skapar på din sajt. Experimentera med optimeringsteknikerna allteftersom du behöver dem. Lycka till! 1. Optimera alla bilder Hemsidor innehåller oftast många bilder och de är förstås nödvändiga för att skapa innehåll och känsla på sajten. Problemet är att bilderna tar mycket plats räknat i kilobyte. Photoshop och liknande bildredigeringsprogram har ofta inbyggda funktioner som minskar filstorleken och därmed bildkvaliteten. Samma sak kan du göra i Flash. Där har du två sätt att komprimera bilderna på alla samtidigt eller en i taget. Om du är stressad eller har många bilder som du vill optimera snabbt, kan du ställa in kvaliteten för alla bilder på en gång. Börja med att välja File och sedan Publish Settings. Då visas en ruta där du kan göra diverse inställningar. Under fliken Flash hittar du JPEG Quality och där ställer du in en kvalitet på mellan 0 och 100. Ju lägre siffra du väljer, desto mer komprimeras bilderna. Inte så svårt, eller hur?
2. Optimera enskilda bilder Det andra sättet att optimera är att ställa in kvaliteten på varje bild separat. Det kanske bara finns en riktigt stor bild på sajten och då kan det räcka att dra ner kvaliteten på just den. För att göra det går du in under menyn Windows och väljer sedan Library. Nu visas ett bibliotek med alla bilder, symboler och ljud som används på din hemsida. Leta rätt på bilden i listan, markera den och tryck sedan på den runda, blå symbolen som du hittar längst ner i fönstret. Rutan Bitmap Properties öppnas. Avmarkera Use document default quality så att du själv kan ställa in bildens kvalitet.
3. Optimera grafik Det är inte bara fotografier som går att optimera i Flash. Även den grafik som är tecknad kan optimeras så att filen blir mindre i storlek. Att kunna optimera grafik är ett måste, speciellt om du pysslar med tecknad film eller stora illustrationer. I en illustration som är gjord på dator bildas osynliga ankarpunkter vid kanter och kurvor. Ju färre ankarpunkter en illustration har, desto mindre blir den också i kilobyte. Det vi ska göra är alltså att låta Flash minska antalet ankarpunkter och räta ut kurvorna en aning. Du avgör själv hur mycket och om resultatet ser bra ut. Allt du behöver göra är att markera hela den illustration som ska optimeras, klicka på Optimize i menyn Modify. På samma sätt som med de vanliga bilderna kan du nu ställa in kvaliteten på det du ritat. Låg siffra ger låg kvalitet. När du klickar på OK visar Flash i en ruta hur mycket filen har minskat.
4. Hastighet för pc och mac Av någon outgrundlig anledning fungerar Flash lite olika för pc och mac. Om du har ställt in hemsidans/animationens uppspelningshastighet (Framerate) på en pc kan det bli en helt annan hastighet på mac. Skillnaden kan faktiskt bli ganska stor och generellt sett går det oftast långsammare på mac. Men problemet är på inget sätt olösligt. Som tur är ger vissa hastigheter samma resultat på båda datortyperna. Se alltså till att optimera hastigheten så att den fungerar både på mac och pc. I tabellen till höger ser du hur olika hastigheter motsvarar varandra på de två plattformarna. Som framgår av tabellen fungerar allt bra upp till 10 i Framerate. Då börjar det skilja något. Ofta används 12 som lägsta Framerate i Flash och det är också standardúinställningen. Tabellen visar också att för pc ger talen 13 16, 21, 31 och 59 snarlik hastighet på mac. Men skulle du välja 58 som Framerate kommer det att gå hälften så snabbt på en mac. För att din hemsida/animation ska se likadan ut på mac som på pc ska du alltså välja en Framerate som överensstämmer bra. Själva inställningen gör du under Framerate i panelen Properties längst upp. Den visas om du klickar på en tom yta på arbetsområdet.
5. Smarta tips Det finns en rad enkla tips som kan hjälpa dig att minska storleken på en fil. Vissa saker påverkar filstorleken mer än andra och det är bra att lära sig vad man ska tänka på. Undvik till exempel toningar så långt det är möjligt. Det är snyggt att använda det som ifyllnadsfärg, men filen blir mycket större än om du använder bara en ifyllnadsfärg. Att gruppera grafiska objekt minskar filstorleken. Med gruppera menas att du binder ihop grafik eller bilder. För att göra en grupp markerar du de objekt du vill gruppera och väljer Group i menyn Modify. Där finns även valet Ungroup ifall du vill lösa upp gruppen igen.