Bygg sajten i flash html - Del 1

Storlek: px
Starta visningen från sidan:

Download "Bygg sajten i flash html - Del 1"

Transkript

1 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.

2 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, 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.

3 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 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.

5 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.

6 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.

7 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 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.

8 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, Gratis ftp-program kan du ladda ner från exempelvis Sedan är det bara att ladda upp html-filen som du döper om till index.html (för att

9 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, 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.

10 Det här behöver du; Flash mx Programmet du behöver heter Macromedia Flash MX och finns att ladda ner på som en 30 dagars testversion. Den har alla funktioner som det riktiga programmet. Fullversionen kostar från 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. Störst och bäst Den största och i många fall bästa sidan med Flashexempel på engelska. Mångsidig med bra innehåll En vettig sida om Flash med nyheter, lektioner och forum. 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. Många exempel Mängder av Flashkurser för alla kunskapsnivåer. virtual-fx.net/vfx/tutorial.php

11 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, 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.

12 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)}

13 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.

14 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.

15 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!

16 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;

17 //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){

18 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.

19 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.

20 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 ( bytes) och du vill att 100 kb ( bytes) ska laddas in i början blir koden istället total= ; 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!

21 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å

22 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 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?

23 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.

24 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.

25 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.

26 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.

Grunder. Grafiktyper. Vektorgrafik

Grunder. Grafiktyper. Vektorgrafik 2 Grunder All vår början bliver svår eller hur det nu brukar heta, och detta är något som gäller även Flash. För den som är ovan vid Flash gäller det säkert extra mycket, då det kan vara knepigt att förstå

Läs mer

Macromedia. Flash 8 Grundkurs. www.databok.se

Macromedia. Flash 8 Grundkurs. www.databok.se Macromedia Flash 8 Grundkurs www.databok.se Innehållsförteckning 1 Börja arbeta med Flash 8...1 Användningsområden...1 Bekanta dig med arbetsytan...2 Scen och tidslinje...3 Lager...3 Bibliotek...4 Verktygsfältet

Läs mer

Vilken version av Dreamweaver använder du?

Vilken version av Dreamweaver använder du? Sida 1 av 7 Lektion 1: sida 1 av 4 Till kursens framsida Sida 2 av 4» Lektion 1 Då ska vi sätta igång med den här kursens första lektion! Här kommer du att få lära dig hur man skapar och förbereder webbplatser

Läs mer

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna

Läs mer

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen.

6. Nu skall vi ställa in vad som skall hända när man klickar på knappen samt att markören skall ändra sig till en hand när markören är på knappen. Fiskar Arbetsbeskrivning knappmeny (Mediator 8) I detta exempel kommer du att lära dig Att göra en mastersida med knappar Att använda en mastersida på andra sidor Att använd funktionen Alignment Arbetsgång

Läs mer

Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering. Efter övningen förväntas du kunna:

Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering. Efter övningen förväntas du kunna: Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering Efter övningen förväntas du kunna: Skillnaden mellan: o Bildrutor och nyckelbildrutor; o

Läs mer

3. Hämta och infoga bilder

3. Hämta och infoga bilder Sida 1 av 8 Lektion 1: sida 4 av 4 «Sida 3 av 4 Till kursens framsida 3. Hämta och infoga bilder Nu vet vi ju hur man sätter in text i sin sida. Men hur gör man med bilder? Det är inte svårt alls! Det

Läs mer

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp

Lathund till Publisher TEXT. Skriva text. Importera text. Infoga text. Dra och släpp Lathund till Publisher TEXT Pekverktyget använder du när du ska markera en ram som du vill förändra på något sätt. Klicka på textverktyget. Placera muspekaren på den tomma dokumentytan, det spelar ingen

Läs mer

Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8)

Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8) Gran Canaria - Arbetsbeskrivning knapplänkar (Mediator 8) I detta exempel kommer du att lära dig Att skapa en ny presentation från början Att skapa en enkel knapp Att använda händelseinställningar, events

Läs mer

Macromedia Flash MX 2004

Macromedia Flash MX 2004 Mittuniversitetet ITM Telefon 0771-97 50 00 Erik Öberg Macromedia Flash MX 2004 Visuell kommunikation Detta exemplar tillhör: VT 2005 Laborationskompendium för Macromedia Flash Uppgift 1 Texthanteringen

Läs mer

Allta bilder du ritar med verktygen i verktygspanelen eller importerar är grafik.

Allta bilder du ritar med verktygen i verktygspanelen eller importerar är grafik. Lite teori bakom symboler och förekomster Centralt i Flash är begreppen grafik, symboler och förekomster. Allta bilder du ritar med verktygen i verktygspanelen eller importerar är grafik. Symboler kan

Läs mer

«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

«Sida 2 av 4 Till kursens framsida Sida 4 av 4» Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur

Läs mer

Workshop PIM 2 - PowerPoint

Workshop PIM 2 - PowerPoint Workshop PIM 2 - PowerPoint Varje ny sida i bildspelet kallas för en Bild. Foton och andra bilder som man lägger in kallas för Bildobjekt. All text skrivs i Textrutor. Växlingen från en bild till nästa

Läs mer

Mitt hus och jag steg för steg instruktioner

Mitt hus och jag steg för steg instruktioner Mitt hus och jag steg för steg instruktioner Till den här uppgiften behöver du ett foto på dig själv, ditt hus, en karta och en huvudlös figur. Se till att alla bilder ligger på samma ställe på din dator

Läs mer

12 Webb och kurshemsidor

12 Webb och kurshemsidor 12 Webb och kurshemsidor Många lärare använder sig av kurswebbsidor eller egna personliga webbsidor som ett ställe att samla information och dokumentation kring sitt arbete. Om du ska skapa en webbsida,

Läs mer

Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker

Läs mer

Lär dig POWERPOINT. Lars Ericson datorkunskap.com

Lär dig POWERPOINT. Lars Ericson datorkunskap.com Lär dig POWERPOINT Lars Ericson datorkunskap.com POWERPOINT D A Programmet Microsoft PowerPoint används till att skapa grafiska presentationer till bildspel, presentationer mm. När du öppnar upp PowerPoint

Läs mer

Manual för din hemsida

Manual för din hemsida Manual för din hemsida Dynamiska hemsidor är en lösning för att man på ett enkelt sätt skall kunna lägga till, ändra och ta bort sidor på sin hemsida. För att detta skall vara möjligt bygger lösningen

Läs mer

En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan

En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan En förladdare fångar användarens uppmärksamhet under tiden huvudfilmen laddas. Använd din kreativitet när du formger en förladdare och använd sedan ActionScript för att sätta den i arbete. 10 Ladda och

Läs mer

www.faltbiologerna.se

www.faltbiologerna.se Redigering av www.faltbiologerna.se sammanställt av Magnus Bjelkefelt, november 2011 reviderad oktober 2012 Innehållsförteckning 1. Logga in................................................... 2 1.1 Var

Läs mer

1. Uppdateringsmodul (CMS)

1. Uppdateringsmodul (CMS) Innehåll 1. Uppdateringsmodul (CMS)... 2 2. Artiklar... 3 2.1 Upprätta din första artikel... 4 2.2 Skapa innehåll i artikeln... 5 2.2.1 RUBRIK I ARTIKELN:... 5 2.2.3 INFOGA BILDER:... 7 2.2.4 CELLER...

Läs mer

Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet.

Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet. Programmets startmeny ser ut så här. För att få fram menyerna Avsluta, Inställningar och Användare måste du föra markören upp till det blåa fältet. Då du klickar på Användare öppnas denna bläddringslista.

Läs mer

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum! Hur du implementerar ditt Hosted Newsroom I den här guiden kan du läsa hur du skapar ert Hosted Newsroom ert pressrum på er egna

Läs mer

Styra olika typer av objekt som animering, video, ljud och Flashfilm

Styra olika typer av objekt som animering, video, ljud och Flashfilm Grunder och Filmklippsobjekt med animering Vi vill kunna visa olika typer av mediaobjekt i en och samma Flashfilm. Vi börjar med att titta på hur man kan visa och köra en animering samt stoppa och dölja

Läs mer

Miljön i Windows Vista

Miljön i Windows Vista 1 Miljön i Windows Vista Windows Aero Windows Aero (Aero Glass), som det nya utseendet eller gränssnittet heter i Vista, påminner mycket om glas och har en snygg genomskinlig design. Det är enklare att

Läs mer

Användarmanual för Content tool version 7.5

Användarmanual för Content tool version 7.5 Användarmanual för Content tool version 7.5 TM WEB Express AB Manual Content tool 7.5 Sid 2 INNEHÅLLSFÖRTECKNING 1 OM PUBLICERINGSVERKTYGET... 3 1.1 ALLMÄNT... 3 2 ÖVERSIKT... 3 3 ALLMÄNT OM WEBBSIDAN

Läs mer

Macromedia Flash MX 2004

Macromedia Flash MX 2004 Mittuniversitetet ITM Telefon 0771-97 50 00 Erik Öberg Macromedia Flash MX 2004 Visuell kommunikation Detta exemplar tillhör: VT 2005 Innehåll Inledning...0 Startsidan...0 Miljö...0 Verktyg...1 Uppgift

Läs mer

Användarmanual för Hemsida

Användarmanual för Hemsida Användarmanual för Hemsida Sida 1 av 44 Inledning Detta dokument är en användarmanual för redigerbara hemsidor utvecklade av. Du kan själv, i ett wordliknande gränssnitt, enkelt uppdatera din egen hemsida

Läs mer

SCRIBUS grund. Guide och uppgifter. ITlyftet Gunnar Markinhuhta. Sida 1

SCRIBUS grund. Guide och uppgifter. ITlyftet Gunnar Markinhuhta. Sida 1 SCRIBUS grund Guide och uppgifter ITlyftet Gunnar Markinhuhta Sida 1 Scribus grund del 1 Text och textramar Inställningar: 1. Gå till Fil/Inställningar 2. Välj Dokument 3. Ändra enheter till millimeter.

Läs mer

Dollar Street Beta Version 1.0 Manual

Dollar Street Beta Version 1.0 Manual Dollar Street Beta Version 1.0 Manual Dollar Street på Internet: 1. Gapminder AB Dollar Street hittar du på www.gapminder.com som en Gapminder produkt. Alla Gapminder produkter handlar om internationella

Läs mer

Arg-administratörens guide till Umbraco v 1.2.1

Arg-administratörens guide till Umbraco v 1.2.1 Arg-administratörens guide till Umbraco v 1.2.1 Logga in 1. Öppna en webbläsare och gå till inloggningssidan: https://www.sfog.se/umbraco/ 2. Skriv in följande användarnam & lösenord : 3. Klicka på Logga

Läs mer

Spela in och exportera din PowerPoint som en film via Premiere Elements

Spela in och exportera din PowerPoint som en film via Premiere Elements Spela in och exportera din PowerPoint som en film via Premiere Elements Microsoft Powerpoint är ett program som numer är välbekant för alla inom utbildningssektorn. Det som många inte känner till är att

Läs mer

Högskolan i Halmstad Multimedia och visuell kommunikation Övning 2 Adobe Flash, interaktiva knappar inklusive ljud och video

Högskolan i Halmstad Multimedia och visuell kommunikation Övning 2 Adobe Flash, interaktiva knappar inklusive ljud och video Högskolan i Halmstad Multimedia och visuell kommunikation Övning 2 Adobe Flash, interaktiva knappar inklusive ljud och video Efter övningen förväntas du kunna: Skapa interaktiva knappar för navigation

Läs mer

Adobe. Flash CS3. Grundkurs. www.databok.se

Adobe. Flash CS3. Grundkurs. www.databok.se Adobe Flash CS3 Grundkurs www.databok.se Innehållsförteckning 1 Inledning... 1 Utbildningsmaterialet... 1 Övningsfiler och mappar... 2 2 Arbetsytan...3 Starta Flash... 3 Skapa ett nytt dokument... 4 Bekanta

Läs mer

Frontpage 2002/XP (2)

Frontpage 2002/XP (2) Frontpage 2002/XP Frontpage 2002 eller Frontpage XP som det också kallas är ett hemsideprogram där du inte behöver kunna koda som annars är fallet om man gör en hemsida. Att snabbt, enkelt och snyggt kunna

Läs mer

Steg 1 Minnen, mappar, filer Windows 7

Steg 1 Minnen, mappar, filer Windows 7 Steg 1 Minnen, mappar, filer Windows 7 Maj -13 Liljedalsdata.se Liljedalsdata Steg 1 Sida 1 Inledning Välkommen till denna kurs. Att jobba med datorer är ofta som att jobba med matematik. Det nya bygger

Läs mer

Om man vill ändra färg inuti går det, men skuggan blir densamma.

Om man vill ändra färg inuti går det, men skuggan blir densamma. Visst är det roligt att kunna göra fina dokument, häften, affischer, inbjudningskort och annat skoj?! Och att få bilderna att hamna där du vill att de ska hamna, i rätt storlek och utan att andra saker

Läs mer

Laboration 0. Enhetsbokstaven anges med ett kolon efter och man läser ofta ut detta, exempelvis C:(sekolon).

Laboration 0. Enhetsbokstaven anges med ett kolon efter och man läser ofta ut detta, exempelvis C:(sekolon). Laboration 0 Laborationen är till för dig som inte är familjär med att navigera i filträd på en dator. Om du är van vid detta (vilket är det vanliga nu för tiden) så kan du bara snabbt titta igenom laborationen.

Läs mer

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.

Kom igång. Readyonet Lathund för enkelt admin. Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt. Kom igång Logga in Skriv in adressen till din webbsida följt av /login. Exempel: www.minsajt.se/login Nu dyker en ruta upp på skärmen. Fyll i ditt användarnamn och lösenord och klicka på "logga in". Nu

Läs mer

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E.

Word Grunderna 1. Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E. Word Grunderna 1 Om du kan det allra enklaste i Word, hoppa över uppgifterna A-E. A Starta programmet Word. Titta på skärmen efter en bild som det finns ett W på. Tryck med musknappen snabbt två gånger

Läs mer

Hur man lägger upp och redigerar dokument i Typo3.

Hur man lägger upp och redigerar dokument i Typo3. Hur man lägger upp och redigerar dokument i Typo3. Typo3 är ett så kallat CMS, Content Management System där du enkelt och smidigt kan lägga ut kursinformation och bilder. Detta verktyg är webbaserat vilket

Läs mer

Beställning till Husfoto. Handledning

Beställning till Husfoto. Handledning Beställning till Husfoto Handledning Datum: 13 mars 2012 Innehåll Inställningar... 2 Så här gör du en beställning... 4 Så här hämtar du materialet... 7 Hur sparas filerna?... 8 Support...11 Kortkommandon

Läs mer

Välj bort om du vill. 96 Internet och e-post. 2. Mail-programmet finns i datorn. 1. Skriv mail i sökrutan. Windows Live Mail i Aktivitetsfältet.

Välj bort om du vill. 96 Internet och e-post. 2. Mail-programmet finns i datorn. 1. Skriv mail i sökrutan. Windows Live Mail i Aktivitetsfältet. Välj bort om du vill Om du är nöjd med att ha din e-post på nätet, kan du lugnt hoppa över detta avsnitt. Har du tid och tycker att det är roligt, kan du testa att använda e-postprogrammet Windows Live

Läs mer

Det här dokumentet är tänkt som en minnesanteckning. programmet och är alltså inte tänkt att förklara allt.

Det här dokumentet är tänkt som en minnesanteckning. programmet och är alltså inte tänkt att förklara allt. Det här dokumentet är tänkt som en minnesanteckning från min genomgång av programmet och är alltså inte tänkt att förklara allt. Den förutsätter att du ska göra layout till den tidningsartikel du skrivit

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 2 Villaägarnas Riksförbund Sollentuna 2011 Innehåll Redigera befintlig sida... 3 Skriva text eller klistra in kopierad text... 5 Rubriker i brödtext...

Läs mer

Publicera taltidningen

Publicera taltidningen Publicera taltidningen Innehåll Publicera taltidningen...1 Två-stegs-raketen: Webbpubliceringen av taltidningen...1 Manual för publiceringsverktyget WaveFusion...2 Starta verktyget WaveFusion och skapa

Läs mer

Manual för. 2.4 KALAS Sitemanager

Manual för. 2.4 KALAS Sitemanager Manual för 2.4 KALAS Sitemanager 1. Introduktion Den här manualen skall hjälpa dig att komma igång så att du själv på ett enkelt sätt kan lägga till, redigera eller ta bort webbsidor på din webbplats.

Läs mer

Macromedia Flash MX 2004

Macromedia Flash MX 2004 Mittuniversitetet ITM Telefon 0771-97 50 00 Erik Öberg Macromedia Flash MX 2004 Visuell kommunikation Detta exemplar tillhör: VT 2005 Laborationskompendium för Macromedia Flash Publicera Flashfilmer Nu

Läs mer

Skapa mappar, spara och hämta dokument

Skapa mappar, spara och hämta dokument Skapa mappar, spara och hämta dokument Övningen görs på hårddisken i mappen Mina dokument 1a Starta programmet utforskaren 1 b Huvudgrupper i utforskaren 1c Expandera huvudgrupper, enheter och mappar Skapa

Läs mer

Guide till att använda Audacity för uttalsövningar

Guide till att använda Audacity för uttalsövningar Guide till att använda Audacity för uttalsövningar Victoria Johansson Humlabbet, SOL-center, Lund IT-pedagog@sol.lu.se 28 mars 2006 1 Inledning Audacity är ett program som kan användas för att spela in

Läs mer

APA för nybörjare. Innan du börjar. Översikt

APA för nybörjare. Innan du börjar. Översikt APA för nybörjare Den här texten är tänkt som en snabb introduktion hur du kan använda publiceringssystemet APA (Advanced Publication Application) för att redigera webbplatser. Texten kräver inga förkunskaper

Läs mer

Att använda Fraps. Victoria Johansson & Stefan Lindgren. Humanistlaboratoriet, Lunds universitet it-pedagog@humlab.lu.se, stefan.lindgren@humlab.lu.

Att använda Fraps. Victoria Johansson & Stefan Lindgren. Humanistlaboratoriet, Lunds universitet it-pedagog@humlab.lu.se, stefan.lindgren@humlab.lu. Att använda Fraps Victoria Johansson & Stefan Lindgren Humanistlaboratoriet, Lunds universitet it-pedagog@humlab.lu.se, stefan.lindgren@humlab.lu.se 2 februari 2009 Innehåll 1 Vad är Fraps? 2 2 Vad är

Läs mer

Adobe FLASH CS5 GRUNDER

Adobe FLASH CS5 GRUNDER Adobe FLASH CS5 GRUNDER Innehållsförteckning 1 Inledning...5 Adobe Flash Player... 5 Utbildningsmaterialet... 5 2 Arbetsytan...6 Starta programmet och öppna en fil... 6 Starta Flash... 6 Skapa en ny fil...

Läs mer

Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem.

Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Kap 03.indd 444 KAPITEL TRE Sidpanelen och gadgetar De är nya. De är smarta. Lär dig hur du använder dem. Gadgetar och den nya Sidpanelen är nog mina favoriter bland de nya funktionerna i Windows Vista.

Läs mer

Umgås på nätet KAPITEL 6. Chatta via webbläsaren

Umgås på nätet KAPITEL 6. Chatta via webbläsaren KAPITEL 6 Umgås på nätet Internet håller alltmer på att utvecklas till en parallellvärld med vår vanliga tillvaro. Man spelar spel över nätet, bygger upp virtuella världar med virtuella prylar och virtuella

Läs mer

http://office.microsoft.com/sv-se/word/ha100444731053.aspx

http://office.microsoft.com/sv-se/word/ha100444731053.aspx 1. Öppna Word 2007 i 97-2003 2. Vilken Explorer har jag 3. Inloggning med Explorer 8 4. Sökväg till sidan 5. Ha två fönster öppna 6. Stilar 7. Storleksändra 8. Inklistring av text 9. Bilder till startsidan

Läs mer

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1

PixlrGuiden - av AlizonWeb PIXLRGUIDEN. av AlizonWeb. Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 PIXLRGUIDEN av AlizonWeb Copyright Notice: Copyright AlizonWeb, All rights reserved. Sida 1 Innehåll Introduktion 3 Vad är Pixlr? 3 Fördelar med Pixlr 3 Om denna guide 3 Kapitel 1: Genomgång av arbetsyta

Läs mer

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19)

SORSELE KOMMUN. Handbok OEW. 28 sept 2012 Mari-Anne Englund Barbro Olofsson. Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Handbok i OEW 28 sept 2012 Mari-Anne Englund Barbro Olofsson Sorsele kommun Version 2012-09-28, rev 131101 1 (19) Använd det användarnamn och lösenord som du fått. Fungerar det inte hör av dig till Mari-Anne

Läs mer

Interaktiv skrivtavla Lintex ebeam

Interaktiv skrivtavla Lintex ebeam Interaktiv skrivtavla Lintex ebeam Paletten Pennan Kalibrera tavlan Öppna Powerpoint direkt via paletten Öppna Scrapbooken (lektionsplaneraren) Pilen bredvid tangentbordsknappen visar att det finns fler

Läs mer

Att skriva på datorn

Att skriva på datorn Att skriva på datorn Innehåll: Inledning 1 Tangentbordet 2 Att skriva i Word 4 Att skriva på Internet 7 Övningar 8 2 Inledning Välkommen till steg 2 av Internetkursen för nybörjare! Vid detta kurstillfälle

Läs mer

Administration av lagets arbetsrum lathund

Administration av lagets arbetsrum lathund Administration av lagets arbetsrum lathund 1: Logga in Öppna din webbläsare och gå in på nya Skuru-webben (www.skuruik.se/handboll). 1. Gå till ditt lags arbetsrum (du hittar laget antingen under Barn/Ungdom

Läs mer

ANVÄNDARGUIDE. ViTex

ANVÄNDARGUIDE. ViTex ANVÄNDARGUIDE ViTex ViTex snabbguide 1. Inläsning till ViTex från inskannat dokument via kopiatorn 2. Uppläsning i ViTex 3. Navigation & Zoner 4. Ändra inställningar 5. Kontakt och Support 1. Inläsning

Läs mer

I högskolans nätverk hittar du programmet PowerPoint genom Startmenyn, Huvudmeny XP, Kontorsprogram, Microsoft Office, Microsoft PowerPoint.

I högskolans nätverk hittar du programmet PowerPoint genom Startmenyn, Huvudmeny XP, Kontorsprogram, Microsoft Office, Microsoft PowerPoint. Microsoft PowerPoint I högskolans nätverk hittar du programmet PowerPoint genom Startmenyn, Huvudmeny XP, Kontorsprogram, Microsoft Office, Microsoft PowerPoint. Allmänt Det första du ser i programmet

Läs mer

Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer,

Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer, Om Publisher Publisher är ett program som passar bra att använda när du vill sammanställa bild och text för att skapa tillexempel broshyrer, affischer, nyhetsbrev eller flersidiga publikationer som en

Läs mer

Lathund för webbpublicering på Vi Ungas distriktswebbplatser

Lathund för webbpublicering på Vi Ungas distriktswebbplatser Lathund för webbpublicering på Vi Ungas distriktswebbplatser 1 1. Introduktion 3 2. Inloggning 3 3. Publicering av nyheter 4 4. Hantera nyheter 7 5. Snabblänkar 7 6. Sidor 8 7. Händelser 8 8. Distriktets

Läs mer

Skapa mapp. * Gör så här: Det finns många sätt att skapa mappar, men det enklaste sättet brukar vara följande.

Skapa mapp. * Gör så här: Det finns många sätt att skapa mappar, men det enklaste sättet brukar vara följande. Ideell IT-förening där äldre lär äldre Skapa mapp Det finns många sätt att skapa mappar, men det enklaste sättet brukar vara följande. * Gör så här: 1. Se till att du befinner dig på den plats i datorn

Läs mer

Dags att skriva uppsats?

Dags att skriva uppsats? Dags att skriva uppsats? Grundkurs i Word 2010 SDM Studentdatorutbildning vid Malmö högskola Att skriva i Word! 1 Börja skriva/skapa ditt dokument- något att tänka på 1 Spara ditt dokument 1 Bra att veta

Läs mer

Bildredigering i EPiServer & Gimp

Bildredigering i EPiServer & Gimp Bildredigering i EPiServer & Gimp Maria Sognefors 7minds Agenda Teori om bilder Att tänka på när jag fotograferar Föra över bilder från kamera till dator Ladda upp bilder till EPiServer CMS 5 Enkel redigering

Läs mer

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad: 2014-10-07 Guide Eva Pärt-Enander, 2012-12-14 Webbsidor i Studentportalen Uppdaterad: 2014-10-07 Innehåll Webbsidor i Studentportalen... 1 Om webbsidor... 2 Lägg till en webbsida... 2 Lägg till samma webbsida på

Läs mer

Manual för lokalredaktörer villaagarna.se

Manual för lokalredaktörer villaagarna.se Manual för lokalredaktörer villaagarna.se Version 1 Villaägarnas Riksförbund Sollentuna 2011 Postadress Besöksdress Telefon Fax E-post Hemsida Box 7118, 192 07 Sollentuna Johan Berndes väg 8-10 010-750

Läs mer

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning.

I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Sida 1 av 23 Editor, Avancerad I den tidigare filen Manual Editor belystes grunderna för enkel uppdatering samt editorns utformning. Detta dokument syftar till att hjälpa dig som vill jobba mer aktivt

Läs mer

Steg 1 Minnen, mappar, filer Windows 8

Steg 1 Minnen, mappar, filer Windows 8 Steg 1 Minnen, mappar, filer Windows 8 Feb -14 Liljedalsdata.se Liljedalsdata Steg 1 W8 Sida 1 Inledning Välkommen till denna kurs. Att jobba med datorer är ofta som att jobba med matematik. Det nya bygger

Läs mer

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben

Ellibot 1.0. Interaktivmedia Content Management System. Publicera för webben Ellibot 1.0 Interaktivmedia Content Management System Publicera för webben Innehåll Logga in 3 Skapa en ny webbsida 4 o Publicering 5 o Information 5 o Standardfiler 6 o Innehåll 7 Hur man skapar en länk

Läs mer

Photo Story. Sara Eriksson IKT A, HT 2007

Photo Story. Sara Eriksson IKT A, HT 2007 Photo Story Mitt tips: Om du inte ser bilderna i manualen backa ett steg och spar filen. Öppna sedan den sparade filen. Då ser du bilderna. Med Photo Story kan du skapa bildberättelser, genom att sätta

Läs mer

Paneler - VCPXX.2. Programmeringsmanual för VCP-paneler. Revision 2

Paneler - VCPXX.2. Programmeringsmanual för VCP-paneler. Revision 2 Paneler - VCPXX.2 Programmeringsmanual för VCP-paneler Revision 2 Innehållsförteckning Innehållsförteckning... 2 1 Symbolfiler för kommunikation via IndraLogic... 3 2 Uppsättning i IndraWorks... 6 3 Programmering

Läs mer

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011 Webbkurs för distriktsansvariga Stockholm den 7 och 13 september 2011 Klistra in text från Word Klistra in: all formateringskod från Word kommer med och är den som styr det webbläsaren visar, även om man

Läs mer

LÄR DIG ANVÄNDA DIN MAC. från grunden! Nu med Mac OS X Leopard! Harry Peronius

LÄR DIG ANVÄNDA DIN MAC. från grunden! Nu med Mac OS X Leopard! Harry Peronius Harry Peronius LÄR DIG ANVÄNDA Nu med Mac OS X Leopard! DIN MAC från grunden! Del 1 GRUNDFUNKTIONER 4. Finder... 6 5. Dock... 34 6. Hjälp... 36 7. Mappar och filer... 38 8. Time Machine... 4 9. Systeminställningar...

Läs mer

Symprint Snabbstartsguide

Symprint Snabbstartsguide Symprint Snabbstartsguide Artikelnummer: 12020, 12021, 12022 v.1 0.10 1 Innehåll Välkommen till SymPrint... 3 Installation av medföljande mjukvara:... 3 Komma igång... 4 Skapa nytt dokument från mall...

Läs mer

Lathund till PowerPoint 2002 (XP)

Lathund till PowerPoint 2002 (XP) Lathund till PowerPoint 2002, sid 1(5) Lathund till PowerPoint 2002 (XP) Överblick 1. Arbetsfönstret här jobbar du med dina bilder 2. Överblick här ser du miniatyrer av alla bilder 3. Åtgärdsfönstret här

Läs mer

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt

Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt Verktyget är begränsat till Microsoft Internet Explorer v 7.0 och uppåt 1. Inställningar / Kontaktuppgifter Uppgifter som matas in i den vyn ovan visas i sidfoten på hemsidan: 2. Skapa nya sidor Om man

Läs mer

Elisabeth Bejefalk IT-Assistent Avesta kommun

Elisabeth Bejefalk IT-Assistent Avesta kommun Elisabeth Bejefalk IT-Assistent Avesta kommun Du ska nu få lära dig hur du enkelt kan göra ett bildspel i PowerPoint. Utifrån det du snart har lärt dig kan du sen göra mer avancerade bildspel genom att

Läs mer

Imovie - Skapa ett bildspel med bilder och filmklipp

Imovie - Skapa ett bildspel med bilder och filmklipp Imovie - Skapa ett bildspel med bilder och filmklipp 1. Öppna programmet Imovie 2. Under arkiv - välj NYTT PROJEKT OBS!! Döp det till något bra namn! 3. Nu väljer du vilket tema - välj inget tema och klicka

Läs mer

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se

Adobe. Dreamweaver CS3. Grundkurs. www.databok.se Adobe Dreamweaver CS3 Grundkurs www.databok.se Innehållsförteckning 1 Arbetsmiljön... 1 Användningsområde... 1 Starta Dreamweaver... 2 Arbeta i Dreamweaver... 2 Fönster... 3 Statusfältet... 4 Menyer...

Läs mer

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ]

[ HUR DU UPPDATERAR FÖRSTASIDAN PÅ OTHELLO.NU ] Logga in på backend www.othello.nu/admin Välj Site för att få upp trädvyn över alla sidor Uppdatera Nyheter Klicka på sidan nyheter i trädvyn och tryck Edit Väl inne på kan du Skapa, Uppdatera och Radera

Läs mer

Administration av lagets arbetsrum. Lathund

Administration av lagets arbetsrum. Lathund Administration av lagets arbetsrum Lathund Innehåll 1 Logga in... 2 2 Koppla serier till ditt lag... 3 3 Koppla serier och matcher till lagets kalender... 4 4 Konfigurera välkomsttext... 5 5 Konfigurera

Läs mer

Carl-Oscar Hermansson WEBB DESIGN

Carl-Oscar Hermansson WEBB DESIGN Carl-Oscar Hermansson WEBB DESIGN Del SKAPA DIN WEBBPLATS MED HTML. Öppna ett HTML-dokument... 8 6. HTML grundkod... 9 7. Färger... 0 8. Textformatering... 9. Listor... 0 0. Bilder.... Bakgrundsbilder...

Läs mer

STEGBESKRIVNING - WEBB

STEGBESKRIVNING - WEBB STEGBESKRIVNING - WEBB Logga in och Ut 1. Öppna upp en webbläsare (Chrome eller Firefox) 2. Skriv in sökvägen: www.krukmakarenshus.org/wp-admin/ 3. Fyll i inloggningsuppgifterna och tryck Logga in 3. När

Läs mer

ODD FELLOW ORDEN. Manual. Sidverktyget. oddfellow.se. version

ODD FELLOW ORDEN. Manual. Sidverktyget. oddfellow.se. version ODD FELLOW ORDEN Manual Sidverktyget oddfellow.se version 1210012 Kort om intranätet odd fellow ordens webplats består av två delar; En publik del vars målgrupp är besökare som inte är medlemmar i orden

Läs mer

Handledning för Installation av etikettskrivare

Handledning för Installation av etikettskrivare Handledning för Installation av etikettskrivare Windows 7 Expert Systems 2011 Expert Systems kundtjänst: Senast Uppdaterad: 15-02-23 Exder Etikettskrivare Windows 7 Sida 2 av 23 Innehållsförteckning 1.

Läs mer

Lathund Hemsida för Astma- och Allergiförbundets föreningar

Lathund Hemsida för Astma- och Allergiförbundets föreningar 1/17 Lathund Hemsida för Astma- och Allergiförbundets föreningar Webbplatsen är byggd i WordPress 3.8.1. Den är byggd för att på ett enkelt sätt ska kunna skapa nya föreningshemsidor och innehåller: Inloggning

Läs mer

Word-guide Introduktion

Word-guide Introduktion Word-guide Introduktion På det kognitionsvetenskapliga programmet kommer du läsa kurser inom flera olika vetenskapsområden och för varje vetenskapsområde finns ett speciellt sätt att utforma rapporter.

Läs mer

ORDBEHANDLIG MED OPEN OFFICE.ORG...2 PRINCIPER...2 STARTA PROGRAMMET...2 ARBETSINSTÄLLNINGAR...2

ORDBEHANDLIG MED OPEN OFFICE.ORG...2 PRINCIPER...2 STARTA PROGRAMMET...2 ARBETSINSTÄLLNINGAR...2 MED OPEN OFFICE 1 ORDBEHANDLIG MED OPEN OFFICE.ORG...2 PRINCIPER...2 STARTA PROGRAMMET...2 ARBETSINSTÄLLNINGAR...2 Marginaler...2 Sidnumrering...2 Och sedan Infoga/Fältkommando/Sidnummer...3 Radavstånd...3

Läs mer

1. Starta programmet 2. Välja projekt antingen redan skapat eller nytt

1. Starta programmet 2. Välja projekt antingen redan skapat eller nytt 1. Starta programmet Först öppnar vi programmet. Antingen finns det i rullningslisten, som jag har längst ner på skärmen. Klicka och programmet startas.1 Om det inte finns där välj program, hitta garageband

Läs mer

Använda Internet. med hjälp av Internet Explorer. Nybörjarguide

Använda Internet. med hjälp av Internet Explorer. Nybörjarguide Använda Internet med hjälp av Internet Explorer Nybörjarguide Av Carl Ewnert 1 Innehåll: 1. Introduktion 3 2. Utseendet 4 3. Verktygsfältet 4 4. Börja Surfa. 5 5. Att söka på Internet 5 6. Spara en sida

Läs mer

Länka in bilder från webben hjälper dig att använda bilder som du inte har sparade på din egen dator.

Länka in bilder från webben hjälper dig att använda bilder som du inte har sparade på din egen dator. Länka in bilder från webben hjälper dig att använda bilder som du inte har sparade på din egen dator. Webben är en outsinlig källa av bildmaterial och somligt får du använda gratis! Verktyget Länka in

Läs mer

Snabbmanual. för. Lärresurshanteringsverktyget

Snabbmanual. för. Lärresurshanteringsverktyget Snabbmanual för Lärresurshanteringsverktyget Beskrivning av olika vyer i Lärresurshanteringsverktyget Skapa I detta fönster skapar man nya sidor och/eller väljer struktur på sin lärresurs. Men man redigerar

Läs mer

Operativsystem - Windows 7

Operativsystem - Windows 7 Uppgift 5 B Operativsystem - Windows 7 Skapa mappar och undermappar Det finns olika sätt att skapa nya mappar på. Alternativ. Högerklicka på en tom yta. Håll muspekaren över Nytt. Klicka på Mapp Alternativ.

Läs mer

Kom igång med. Windows 8. www.datautb.se DATAUTB MORIN AB

Kom igång med. Windows 8. www.datautb.se DATAUTB MORIN AB Kom igång med Windows 8 www.datautb.se DATAUTB MORIN AB Innehållsförteckning Grunderna i Windows.... 1 Miljön i Windows 8... 2 Startskärmen... 2 Zooma... 2 Snabbknappar... 3 Sök... 4 Dela... 4 Start...

Läs mer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer

www.grade.com LUVIT LMS Quick Guide LUVIT Composer www.grade.com LUVIT LMS Quick Guide LUVIT Composer LUVIT Composer LUVIT Composer är ett verktyg för att enkelt skapa snyggt innehåll direkt i LUVITs kurser. Verktyget innehåller designade mallar som du

Läs mer

6 Arbeta med text. Komma igång

6 Arbeta med text. Komma igång 185 6 Arbeta med text I den här lektionen får du lära dig följande: Importera text. Skapa textkolumner. Ändra textattribut. Använda och spara formatering. Hämta textattribut. Figursätta text runt bilder.

Läs mer