Share
Några målningar kräver att du tar en närmare titt för att se alla detaljer. Nu istället för en målning, föreställ dig en tom duk som kan fyllas med bilder och text och dynamiska beskrivningar.
Vi hittade denna fantastiska författare tack vare FlashGameLicense.com, platsen att köpa och sälja Flash-spel.
Notera: Denna handledning har inget att göra med HTML5-kanvaselementet!
Demon är en tittarapplikation som laddar data från XML. Innehållet placeras på "duk" och användaren kan zooma in i duken eller klicka på någon av bilderna för att centrera den på skärmen. Inställningar som sidstorlek, bakgrundsfärg / textur och andra inställningar laddas dynamiskt. Som en bonus kan användaren skapa flera sidor.
I denna handledning ser vi på de grundläggande begreppen att skapa en applikation som denna. Det är tillrådligt att behålla källkoden bredvid dig medan du läser handledningen eftersom inte varje del förklaras. Källkod är tillgänglig för användning med FlashDevelop eller med Flash CS3 Professional och högre.
Tänk på att innan du försöker öppna programmet från hårddisken måste du lägga till den i listan "betrodda platser" som anges i panelen Global Security Settings som visas nedan. Annars ges ingen åtkomst för att ta tag i bilderna från hårddisken. Detta behövs inte när den laddas upp till en webbplats så länge bilderna är placerade på samma webbserver.
Om du inte är bekant med XML, kolla in Dru Kepples AS3 101: XML. Nedan visas XML-data som motsvarar en sida fylld med en bild och ett textfält. Inställningar som anges här gäller för alla sidor. Som du kan se är det enkelt att skapa flera sidor och lägga till innehåll för dem. Till bilder kan du lägga till en titel och beskrivning som ses när du sveper över med musen. Multi-line text läggs till och storlek och stil kan anpassas. Varje textfält använder en anpassad typsnitt som finns i .fla-filen.
0x000000 … /bilder/ 580 380 2000 1300 0xEEDEC0 0xC1C59C 10 10 Hej där och välkommen till demonstrationen av dukprogrammet. Används som ämne här är min semester till Köpenhamn. anno 2010. Känn dig fri att läsa texterna och sniffa upp kulturen. 23 470 50 Kyrka och sjö Det vackra omgivningen i Kastelskirken. Church_And_Lake.jpg 1 750 500
Använd följande kod för att ställa in vår ansökan. Det genereras nästan helt av FlashDevelop med hjälp av "AS3 Project" -mallen. Main är dokumentklassen - vilken är klassen först laddad när du börjar bli flash - och inuti Duk Vi bygger vår ansökan.
public class Main sträcker Sprite public function Main (): void if (stage) init (); annars addEventListener (Event.ADDED_TO_STAGE, init); privatfunktion init (e: Event = null): void removeEventListener (Event.ADDED_TO_STAGE, init); // Ingångspunkt var kanfas: Kanfas = Ny kanfas (detta);
Och en förenklad version av Canvas. Observera att vi använder en visningsobjektbehållare som en parameter för att lägga till den extra kontrollen för att lägga till / ta bort duken.
public class Canvas sträcker Sprite public function Canvas (container: DisplayObjectContainer) // Spara parameter lokalt this.container = container; // Lägg till i behållare container.addChild (detta);
I den här ansökan använder vi den så kallade BulkLoader: ett AS3-bibliotek som syftar till att lättare och snabbare ladda och hantera komplexa lastningskrav. När vi först laddar upp använder vi den för att ta tag i XML-filen och en bakgrundsbild. Följande kod visar hur du startar upp BulkLoader och lägg till två objekt i laddningskön. De Komplett funktionen heter när alla objekt är laddade.
Accentsconagua
// Init Bulk Loader Loader = Ny BulkLoader ("Canvas"); loader.add ("... /background.jpg", id: "background"); loader.add ("... /settings.xml", id: "xmldata"); // Loader events loader.addEventListener (BulkLoader.COMPLETE, Complete, false, 0, true); loader.addEventListener (BulkLoader.ERROR, HandleError, false, 0, true); // Starta loader loader.start (); Vi sparar de laddade tillgångarna i klassen för senare användning. De BulkLoader ger ett enkelt sätt att ta tag i de saker vi behöver. Ring bara till funktionen som motsvarar typen av objekt och använd objektets ID-sträng. Statiska variabler används för att göra XML-data globalt tillgängliga (t ex tillgång till en statisk variabel med användning av Canvas.viewerWidth). De väg variabel anger var de externt laddade bilderna kommer att ligga. Bilder kan bara laddas från egen webbserver på grund av säkerhetsrestriktioner.
// Få bakgrundsbild g_background = (loader.getBitmap ("background")). BitmapData; // Hämta XML-data xmldata = loader.getXML ("xmldata"); // Ange statisk vars för enkel åtkomstvisareWidth = int (xmldata.settings.viewer_width); viewerHeight = int (xmldata.settings.viewer_height); viewerBgColor = uint (xmldata.settings.viewer_bg_color); sökväg = String (xmldata.settings.image_path); customFont = nytt customFontClass (); contentWidth = int (xmldata.settings.content_width); contentHeight = int (xmldata.settings.content_height); // Ta bort komplett lyssnare loader.removeEventListener (BulkLoader.COMPLETE, Complete); // Ta bort alla data referenser som lagrats i loader loader.clear (); // Ta bort loader från minneslaster = null; // Set up viewer InitialiseViewer (); Som du kanske eller kanske inte gissat använder programmet en virtuell kamera för att extrahera en del av duken och visa för användaren. Kameran använder skalning och översättning till en displayobjektbehållare så att endast området under kameran ses på skärmen. Följande demonstration ger dig en bättre uppfattning om hur det fungerar.
Källkoden för denna demonstration ingår också i arkivet. Låt oss förklara detta exempel genom att börja med att konfigurera inställningarna. Vi vill att tittarregionen är 305 x 230, och innehållsregionen - som är dimensionerna för blombilden - ska försöka hålla bildområdet för tittarområdet så att det inte deformeras för mycket. Vår blomma är 1000 x 750, som är nära nog. För att visa hela blomman i tittarregionen måste kameran vara lika stor som blomman, som är 1000 x 750.
Följande kod anger dimensionsinställningarna. I det här exemplet är de hårdkodade, men annars tas den från XML.
// Inställningar viewerWidth = 305; viewerHeight = 230; contentwidth = 1000; contentHeight = 750;
Därefter skapar vi en betraktningsbehållare. Alternativet scrollRect används för att klippa ut något utanför en angiven rektangel. Detta är mycket användbart eftersom endast en del av duken måste visas när den zoomas in. Det är en snyggare lösning än att sätta en svart ram runt applikationen.
// Viewer container viewerContainer = nya Sprite (); viewerContainer.scrollRect = ny rektangel (0,0, viewerWidth, viewerHeight); addChild (viewerContainer);
Till tittarbehållaren lägger vi till en annan Sprite kallad viewerScroller. Funktionen av viewerScroller är helt enkelt att fungera som en behållare för allt som måste fungera som innehåll för kameran. Det gör det enklare att lägga till flera objekt i innehållsregionen.
// Sida scroller var viewerScroller: Sprite = new Sprite (); viewerContainer.addChild (viewerScroller);
Lägg till innehåll till viewerScroller. I detta fall blombilden.
// Innehållsinnehåll = Ny Sprite (); viewerScroller.addChild (innehåll); var bmp: Bitmap = ny bild (); content.addChild (BMP);
Lägg nu till Kamera klass. Även om vi ännu inte har gjort Kamera klassen, kommer konstruktören att ta betraktarens dimensioner som parameter och funktionen SetTarget har innehållet Sprite som parameter. Vi placerar Kamera mitt i innehållet och ge den en första uppdatering.
// Lägg till virtuell kamerakamera = ny kamera (viewerWidth, viewerHeight); cam.SetTarget (viewerScroller); cam.x = contentWidth / 2; cam.y = contentHeight / 2; cam.Update ();
Med all denna kod på plats kan vi göra och manipulera kameran. Inuti a Event.ENTER_FRAME loop du kan springa cam.Update () för att uppdatera kamerans vy. Det är dock mer effektivt att bara uppdatera vid en förändring. Genom att ändra cam.x och cam.y du kan flytta kameran runt och ändra cam.scaleX och cam.scaleY du kan ändra skalan. Det här är exakt vad tangentbordstangenterna i exemplet gör.
Här tar vi en titt på internals av Kamera. I konstruktörfunktionen lägger vi till lite grafik som behövs för att hantera skalans skala. Vi lagrar också dimensionerna för tittarens innehåll lokalt inne i klassen.
allmän funktion Kamera (bredd: int, höjd: int, initialZoom: Number = 1) // Sprite brukade ge kameran en bredd och höjd. g = ny form (); g.graphics.drawRect (0, 0, 10, 10); g.graphics.endFill (); addChild (g); // Ange dimensioner av tittarrektangel tw = bredd; th = höjd; // Initial zoom this.scaleX = this.scaleY = initialZoom;
Anslut sedan kameran till ett objekt. Kameran blir samma skala som objektet.
allmän funktion SetTarget (mål: Sprite): void this.target = target; // justera kameramåtten g.width = target.width; g.height = target.height;
Det här är den mest intressanta delen och kamerans motor. Skalning och översättning tillämpas på objektet som är anslutet till kameran genom att ge den en ny transformmatris. Kolla in Matris klass i AS3-dokumentationen för mer information om användningen av matriser.
offentlig funktion Uppdatering (): void cw = this.width; ch = this.height; tscaleX = tw / cw; tscaleY = th / ch; // sätta nya skaleringsvärden mat.a = tscaleX; mat.d = tscaleY; // sätta nya positioner (översättning) värden. // Kamerapositionen görs negativ, eftersom t.ex. När kameran rör sig rätt måste sidan flytta till vänster för att passa. // cw och ch läggs till för att flytta sidan till mitten av visningsområdet // alla positioner är skalade i enlighet därmed mat.tx = (-mat.tx + cw / 2) * tscaleX; mat.ty = (-mat.ty + ch / 2) * tscaleY; target.transform.matrix = mat;
Vi återvänder till vår ansökan. I detta steg lägger vi grunden för så kallade Sida objekt som innehåller duken med bilder och text. Först skapa en bakgrund för hela applikationen. Färgen specificeras från XML.
// Bakgrund var bg: Sprite = new Sprite (); bg.graphics.beginFill (xmldata.settings.bgcolor); bg.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg);
Som i exemplet med Kamera och blomman vi använder pageContainer och pageScroller och Kamera. Detta borde se ganska familar ut.
Nästa lägger du till alla Sida Objekt som krävs enligt XML-filen. I vårt exempel har vi bara skapat en sida. Observera att Sida klass existerar inte, eftersom vi skapar den här nästa steg. sidor är en matris som håller alla Sida referenser för senare användning.
Parametrar som används av Sida är
pageScroller: Sprite till vilken Sida kommer att läggas tillp: ett XML-dataobjekt som innehåller all information inom en viss sida (alla bilder och text)g_background: bakgrundsstruktur// Lägg till sidor sidor = ny Array (xmldata.page.length ()); för var och en (var p: XML i xmldata.page) var id: int = int (p.attributes () [0]); sidor [id] = ny sida (pageScroller, p, g_background);
Nedan visas konstruktören för Sida. Vi räddar helt enkelt alla parametrar lokalt i klassen för senare användning.
allmän funktion Page (container: DisplayObjectContainer, data: XML, bakgrund: BitmapData) this.id = id; this.container = container; this.data = data; this.background = background; this.title = String (data.attributes () [1]);
Nu lite mer intressanta saker. De Ladda funktion av Sida börjar med att ta bakgrundsstrukturen vi laddat före och packa den över duken. För att kunna göra detta måste vi veta storleken på bakgrundsbilden vi är looping och storleken på hela duken. Skapa en Sprite kallad g_background som fungerar som en grafikbehållare. Lägg till en solid bakgrundsfärg för att förhindra att linjer mellan bitmappsbilderna visas.
var b: int = background.width; var h: int = background.height; var trueWidth: int = Canvas.contentWidth; var trueHeight: int = Canvas.contentHeight; // bakgrundsskikt g_background = nytt Sprite (); addChild (g_background); // En fast bakgrundsfärg var bg: Sprite = new Sprite (); bg.graphics.beginFill (Canvas.viewerBgColor); bg.graphics.drawRect (0, 0, trueWidth, trueHeight); bg.graphics.endFill (); g_background.addChild (bg);
Förpackning av bakgrundsstruktur använder två slingor, bara vertikalt och en horisontellt. Det fortsätter att slingras tills kanten nås. Varje varje kakel på en jämn position - som (2,2), (4,2), (4,6) och så vidare - vänds runt med scaleX eller scaleY. Detta gör texturflödet över till nästa med sömlöst. Kontrollera om ett nummer är jämnt är gjort med modulo-operatören (%). Om återstoden av ett tal efter att ha avvikit med 2 är noll så måste det vara jämnt. Runt kanterna klipper vi bort en textur som går utanför innehållsdimensionerna som anges i trueWidth och trueHeight. Det är viktigt att Sida objektet stannar den här storleken eftersom det blir större kommer att ändra bildförhållandet och få skärmen att deformeras.
// Lägg till looped bakgrundsbild var jag: int, j: int; medan (jag * b < trueWidth) j = 0; while (j * h < trueHeight) // new bitmap var s:Bitmap = new Bitmap(background); // position s.x = i * b; s.y = j * h; // alternate horizontal and vertical flip if (i % 2 != 0) s.scaleX *= -1; s.x += b; if (j % 2 != 0) s.scaleY *= -1; s.y += h; // clip if (i * b + b > trueWidth || j * h + h> trueHeight) var clipw: int = Math.min (trueWidth - i * b, b); var cliph: int = Math.min (trueHeight - j * h, h); var nbd: BitmapData = ny BitmapData (clipw, cliph); nbd.copyPixels (bakgrund, ny rektangel (0, 0, clipw, cliph), ny punkt ()); s.bitmapData = nbd; om (s.scaleX == -1) s.x - = b - clipw; om (s.scaleY == -1) s.y - = h - cliph; // lägg till bitmapp för att visa listan g_background.addChild (s); j ++; i ++;
Resultatet av den upprepande bakgrunden bör vara något så här. Mörkare gränser läggs till för tydlighet.
Låt oss börja vår sidafyllande resa genom att lägga till text. Gå igenom alla XML-poster märkta "text" och skicka deras data till Lägg till text fungera.
texts = new Array (); för varje (var text: XML i data.text) AddText (text);
De Lägg till text funktionen ser ut så här. Den första delen av koden validerar XML-data. Om vissa fält inte fylls i kommer det att lägga till ett standardvärde. Quick är en klass som används för att skapa ett textfält med vissa alternativ. Slutligen måste texten undantas från mus interaktion genom att använda mouseEnabled = false och mouseChildren = false.
privat funktion AddText (text: XML): void if (! text.font) text.font = null; om (! text.size) text.size = 12; om (! text.color) text.color = 0x000000; om (! text.bold) text.bold = 0; om (! text.italic) text.italic = 0; var qt: QuickText = ny QuickText (text.x, text.y, String (text.content), Canvas.customFont, int (text.size), uint (text.color), booleskt (text.bold), booleskt text.italic)); qt.blendMode = BlendMode.LAYER; texts.push (qt); addChild (qt); qt.mouseEnabled = false; qt.mouseChildren = false;
Följande bild visar alla alternativ på Quick klass:
Och resultatet av den nya sidan inklusive text:
Det första steget här är att skapa Bild objekt som kommer att hålla XML-data, bitmappen och lite beskrivande text. Lyssnare appliceras direkt för mus interaktion. Alla dessa Bild objekt lagras sedan i en array för enkel åtkomst senare.
// ta alla bilder pictures = new Array (); för varje (var bild: XML i data.image) // nytt bildobjekt med information i det var bild: Bild = Ny bild (bild); pictures.push (bilden); // lägg till lyssnare på bild picture.addEventListener (MouseEvent.MOUSE_OVER, PictureMouseOver); picture.addEventListener (MouseEvent.MOUSE_OUT, PictureMouseOut); picture.addEventListener (MouseEvent.MOUSE_DOWN, PictureMouseDown);
Och här är den grundläggande versionen av Bild klass, håller bara XML-data. Bild sträcker Sprite, vi kan redan placera den någonstans. Skalinställningen verifieras innan den används, för om användaren lämnar den från XML kommer den att returnera 0. Standardvärdet för skalan är 1.
offentlig funktion Bild (data: XML) title = data.title; description = data.description; url = data.url; sida = data.page; x = data.x; y = data.y; om (Number (data.scale)! = 0) imgscale = Number (data.scale);
Skapa en ny BulkLoader precis som första gången, men nu för att ladda batcher av bilder. Vi ska ladda 5 bilder i taget och visa dem när de är färdiga. Det kommer att fortsätta hämta nya bilder tills allt är klart. Funktionen Komplett kallas vid slutförandet av varje sats.
// Skapa bulklastare. Loader = Ny BulkLoader ("sida" + id); loader.addEventListener (BulkLoader.COMPLETE, Complete, false, 0, true);
// Ange totalt antal bilder totaltPictures = pictures.length; // Ta tag i de första 5 bilderna eller det totala antalet bilder om det finns mindre. i = 0; medan jag < Math.min(totalPictures,5)) loader.add(String(Canvas.path + pictures[i].url), id: "img" + i ); i++; // Start loader loader.start(); I det här steget lägger vi in de laddade uppgifterna inuti Bild objekt. De objekt lastarens egenskap rymmer alla föremål som har laddats in. Gå över alla dessa objekt och kontrollera om de är en bild. Varje Bitmap ges till motsvarande Bild objekt och Bild läggs till i duken. Vi tar även bort den laddade bilden från listan över lastare objekt för att förhindra konflikter med en senare sats laddade bilder.
// Bildbatch laddad. spara data till enskilda bildobjekt. I = mängdPicturesLoaded; för varje (var-item: LoadingItem i loader.items) if (item.isImage ()) bilder [i] .SetImage (loader.getBitmap (item.id)); loader.remove (item.id); AddPicture (bilder [i]); i ++; amountPicturesLoaded ++;
Och en närmare titt på SetImage funktion av Bild.
allmän funktion SetImage (ob: Bitmap): void // om ingen bilddata laddas, visa ingenting om (ob == null) returnera; // spara data i klassen img = ob; // visa bild addChild (img); // skala img.scaleX = img.scaleY = imgscale;
Och att lägga till en bild på duken är lika lätt som att ringa addChild.
privat funktion AddPicture (bild: bild): void addChild (pict);
Resultatet blir nu:
Lägga till något i kameravyn görs genom att lägga till ett barn till viewerScroller behållare. Vi har lagt till viewerScroller till varje Sida objekt som en parameter så att vi kan lägga till det som ett barn genom att ringa Show() funktion av Sida.
offentlig funktion Visa (): void container.addChild (this);
Återgå till Duk klass och ring funktionen Load () och Show () när vi vill visa användaren en sida. Om Sida är redan laddad, Ladda() kommer att återvända direkt så att inga onödiga åtgärder görs. Nuvarande Sida vi visar är sparad i klassen som sida. Denna referens kommer att vara viktig för sidans interaktion.
privat funktion ShowPage (nr: int): void // göm gamla sidan om (sida) page.Hide (); // Ange ny sida sida = Sidor [nr]; page.Load (); page.Show ();
Nu när vi har skapat vår sida med bilder och text, är det nödvändigt att skala det så att det passar inuti vårt visningsområde. Vi använder de offentliga statiska variablerna zoom och magnifyStep för det här syftet. magnifyStep är en grupp som håller alla olika skalansvärden för kameran och zoom är den nuvarande positionen av magnifyStep kameran är skalad till För att veta vilket skalvärde som behövs för att passa innehållet inuti tittaren behöver vi veta förhållandet mellan innehålls- och visningsområdena. För att ta hänsyn till felaktiga förhållanden tar vi det minsta förhållandet mellan bredd och höjd enligt följande:
// Ställ förstoringssteglisten magnifyStepList [0] = Math.min (viewerWidth / contentWidth, viewerHeight / contentHeight);
Vi skulle vilja zooma in när du klickar på duken. Lägg till en mushändelse till hitfältet av Sida. Hitfield är i grunden bara grafiken i bakgrunden av Sida och för att det är a Sprite vi kan sätta mus interaktion på den.
page.hitField.addEventListener (MouseEvent.MOUSE_DOWN, MouseZoomIn);
Med ett musklick vill vi att kameran ska skala ner till positionens zoom i magnifyStepList och flytta till punkten på duken som vi klickade på. Kom ihåg från exemplet att när kameran blir mindre (skalar ner) blir zoomen på duken större. Det är därför vi minskar integersökningen med värdet en. Att få muspositionen vi klickade på kanfasen är lätt att använda page.mouseX och page.mouseY. Flash konverterar automatiskt numren så att den visas lokal - vilket betyder att om sidan är till exempel 2000 px nedskalad med 50% och du klickar halvvägs, returnerar den 1000 px, även om muspositionen på skalskoordinater är mycket mindre.
privat funktion MouseZoomIn (e: MouseEvent): void var pt: Punkt; om (! cam.bZooming && zoom> 0) // Zooma in ett steg zoom-; // Ny kamerapunkt. Korrekta gränser. pt = ny punkt (page.mouseX, page.mouseY); CameraBounds (pt); cam.Zoom (pt.x, pt.y, magnifyStepList [zoom]);
För att hålla kamerans område inne i duken måste vi korrigera positionen inom gränserna för kameran. Titta på kamerans exempel igen för en demonstration av detta. Kameraet är centrerad runt sig själv så att positionen horisontellt exempelvis måste ligga inom 0 + kamera halvbredd och contentWidth - kamera halv bredd. Ett tillförlitligt sätt att beräkna bredden på kameran när den zoomas in är contentWidth / 2 * magnifyStepList [zoom], eftersom kameran i sitt ursprungliga ozoomade tillstånd har storleken contentWidth (samma storlek som duken).
privat funktion CameraBounds (pt: Point): void // horisontellt om (pt.x < contentWidth/2 * magnifyStepList[zoom]) pt.x = contentWidth/2 * magnifyStepList[zoom]; else if (pt.x > contentWidth - contentWidth / 2 * magnifyStepList [zoom]) pt.x = contentWidth - contentWidth / 2 * magnifyStepList [zoom]; // vertikalt om (pt.y < contentHeight/2 * magnifyStepList[zoom]) pt.y = contentHeight/2 * magnifyStepList[zoom]; else if (pt.y > contentHeight - contentHeight / 2 * magnifyStepList [zoom]) pt.y = contentHeight - contentHeight / 2 * magnifyStepList [zoom];
Visad i bilden nedan är kameran och duken som zoomats in på en gång. De röda linjerna visar gränserna som kameran inte kan korsa och måste ligga inom.
Zoomning utförs genom att lägga till skalan till kameran. Vi använder tweener klass och "EasyOutQuint" övergång för att detta ska ske på ett smidigt sätt. bZooming är en variabel som används för att se om kameran redan zoomar eller inte. Du kan inte zooma på sidan igen medan den fortfarande är upptagen med att skala upp eller ner. Vid varje uppdatering av kameran funktionen Uppdatering kallas, som utför skalning på innehållet.
allmän funktion Zoom (newx: int, newy: int, newscale: Number): void bZooming = true; Tweener.addTween (this, time: 2, x: newx, y: newy, övergång: "easeOutQuint", scaleX: newscale, scaleY: newscale, onComplete: funktion (): void bZooming = false;, uppdaterad: Uppdatering );
Kom ihåg att vi lagt till Mouseevent lyssnar på alla bilder på sidan. Vad vi skulle vilja göra är att zooma in på en bild när man klickar på och se till att den passar inom tittarregionen väl. Bilder som är mindre än den faktiska tittarregionen får inte skalas bortom deras upplösning.
privat funktion PictureMouseDown (e: MouseEvent): void var newScale: Number; var screenRatio: Number = Canvas.viewerWidth / Canvas.viewerHeight; var imgW: Number = Math.max (e.target.width * 1.05, Canvas.viewerWidth); var imgH: Number = Math.max (e.target.height * 1.05, Canvas.viewerHeight); var imgRatio: Number = e.target.img.width / e.target.img.height // Beräkna bildskalning om (imgRatio < 1) newScale = imgH / Canvas.contentHeight; else newScale = imgW / Canvas.contentWidth; Canvas.cam.Zoom(e.target.x + e.target.width/2, e.target.y + e.target.height/2, newScale); Canvas.cam.bLocked = true; PictureMouseDisable();
Grundbegreppet här är att bildförhållandet mellan en bild först måste bestämmas. Om bredden på en bild är högre än höjden då imgRatio < 1 kommer att hålla sant och vice versa om höjden är större än bredden. Vi kommer alltid att skala till den största delen av en bild, vilket innebär att om bilden är till exempel 200x400px kommer vi att behandla bilden som en 400x400 kvadrat. En annan tillägg här är att vi skala bilden med 1,05 först, vilket betyder att bilden blir 5% större. På så sätt berör inte bilden sidorna när den zoomas in. För att beräkna bildskalan i förhållande till innehållsstorleken delar vi den med innehållets höjd eller bredd.
Ring Zoom kamerans funktion och flytta till mitten av bilden vi fokuserar på och tillämpa den nya skalan som vi har beräknat.
Här visas bildzoomningsprocessen i åtgärd. Lägg märke till hur kameran hålls inom gränserna för sidan, och hur hela bilden inklusive beskrivning passar inuti skärmen perfekt.
Om du inte hade märkt, när du zoomat in på en sida kan du flytta muspekaren till kanterna på skärmen för att rulla runt och visa mer av sidan. Koden som visas nedan kan se lite bisarr ut för dig; Det är något jag har skrivit för en tid sedan för en RTS-stilspelmotor och har använt den sedan någonsin för allt som behöver bläddra. Grundprinciperna här är att du kontrollerar var muspositionen är och om den rör sig utan ett visst intervall runt storlekarna (mouse_scroll_areax_reduced och mouse_scroll_areay_reduced) då börjar det att flytta till ena sidan med en hastighet som är proportionell mot hur långt du befinner dig inom detta område. När muspekaren inte ligger inom intervallet kommer det att dra ett drag på rullningen för att sakta ner det så småningom.
// Få mängden scolling som behövs baserat på muspositionen mx = viewerContainer.mouseX; my = viewerContainer.mouseY; om (mx < mouse_scroll_areax && mx > 0) scrollAmountX = (((mx - mouse_scroll_areax) / mouse_scroll_areax_reduced) * mouse_scroll_factor) + .5) << 0; else if ((viewerContainer.width - mx) < mouse_scroll_areax && mx < viewerContainer.width) scrollAmountX = (((1 - (viewerContainer.width - mx) / mouse_scroll_areax_reduced) * mouse_scroll_factor) + .5) << 0; if (my < mouse_scroll_areay && my > 0) scrollAmountY = (((my - mouse_scroll_areay) / mouse_scroll_areay_reduced) * mouse_scroll_factor) + .5) << 0; else if ((viewerContainer.height - my) < mouse_scroll_areay && my < viewerContainer.height) scrollAmountY = (((1 - (viewerContainer.height - my) / mouse_scroll_areay_reduced) * mouse_scroll_factor) + .5) << 0; // Put drag on the scroll, so it does not keep on moving forever and slows down smoothly. scollAmountX *= .95; scrollAmountY *= .95; // Update camera position cam.x += int(scrollAmountX); cam.y += int(scrollAmountY); // Make sure the camera is within bounds var pt:Point = new Point(cam.x, cam.y); CameraBounds(pt); cam.x = pt.x; cam.y = pt.y; // Update the camera view cam.Update();
Nedan visas området där mus interaktion för rullning sker. Kom ihåg att det bara kan hända när du zoomat in.
Jag tror att detta sammanfattar alla de inlärningsmål jag ställt upp för denna handledning. Tyvärr kan inte allt som visas i ansökan diskuteras på grund av omfattningen av handledningen, men jag hoppas att du lyckades lära dig grunderna om XML-data, sidfyllning och kameramanipulation. Tack för att du läser!
