Share
Inhoudsupdates in Flash kunnen moeilijk en tijdrovend zijn vanwege de vele benodigde stappen. Het eenvoudigweg lezen van inhoud uit een XML-bestand betekent dat het importeren van nieuwe assets en het hercompileren van het swf niet langer nodig is. Deze zelfstudie behandelt het dynamisch laden van afbeeldingen uit een XML-bestand en behandelt vervolgens inconsistenties in afbeeldingsdimensies met behulp van de GreenSock Tween Max-animatiebibliotheek.
Laten we een kijkje nemen naar een screenshot van de laatste diavoorstelling waar we naartoe zullen werken:
Interface-afbeeldingen en voorbeelden worden geleverd met Flash CS4 en Actionscript 2, maar andere versies van Flash moeten al in versie 8 zonder problemen kunnen worden gevolgd. Deze tutorial veronderstelt tenminste een praktische kennis van Actionscript omdat ik niet elke regel ga uitleggen, maar zelfs als je gewoon kopieert en plakt, moet je dit kunnen laten werken.
Bij een project van dit type is het belangrijk om alles overzichtelijk te houden, zodat Flash dingen kan vinden zoals die nodig zijn. Dus maak een projectmap op uw computer waar u ALLE bestanden kunt plaatsen gerelateerd aan dit project.
Zoek afbeeldingen voor uw diavoorstelling. Ik heb verschillende afbeeldingen gebruikt van http://www.sxc.hu (sxc_hu_410471_5588.jpg, sxc_hu_1151936_79441078.jpg, sxc_hu_1152040_85122875.jpg, sxc_hu_1154131_54136948.jpg).
Maak een map met "activa" in uw projectmap. Open uw favoriete afbeeldingseditor en wijzig het formaat van uw foto's zodat ze allemaal dezelfde grootte hebben. Ik heb de afmetingen van mijn afbeeldingen aangepast, zodat de langste zijde (hoogte of breedte) 700 pixels is en de beeldbewerkingssoftware de afbeelding proportioneel kan houden.
Aangezien externe assets niet profiteren van een Flash-preloader, zou dit een uitstekend moment zijn om uw afbeeldingen te optimaliseren voor snelle downloads. Flash kan png-, jpeg- of gif-bestanden laden, dus zorg ervoor dat je definitieve afbeeldingen in een van die formaten staan en sla ze op in de map met items die je net hebt gemaakt.
Pas het formaat van je podium aan om iets groter te zijn dan de foto's die je in stap 2 hebt gemaakt. Het doel is om ervoor te zorgen dat de afbeeldingen die ooit zijn weergegeven, niet worden afgesneden in de uiteindelijke presentatie. Ik heb 800px x 800px gebruikt om de 700px-foto's aan alle kanten 50px aan ruimte te geven. Dit is ook een goed moment om de framesnelheid te wijzigen naar 30 fps voor mooie vloeiende overgangen en een achtergrondkleur naar keuze te kiezen.
Hernoem "laag 1" in "achtergrond". Maak een nieuwe laag en noem deze "inhoud". Maak nog een laag en noem het "script" en het is een goed idee om deze laag te vergrendelen. Alles wat u op de achtergrondlaag plaatst, wordt achter de diavoorstelling weergegeven. Als u naar het voorbeeld kijkt, bevindt de tekst zich in deze laag.
Gebruik het tekenobject om een wit vierkant op het werkgebied te maken. Selecteer het vierkant en converteer het naar een symbool (F8). Zorg ervoor dat het registratiepunt zich in de linkerbovenhoek bevindt en noem de clip "shell". Geef de clip een instantienaam van "shell_mc".
Selecteer binnen "shell_mc" het witte vak en converteer het naar een symbool (F8). Nogmaals, zorg ervoor dat de registratie linksboven staat en noem de clip "achtergrond". Geef de nieuwe filmClip een instantienaam van "background_mc". Beschrijf tenslotte de laag "achtergrond" en vergrendel deze.
Maak binnen "shell_mc" een nieuwe laag met de naam "tekst". Gebruik de teksttool om statische tekst te maken met de tekst 'afbeelding laden'. Verplaats de tekst naar x: 20 en y: 20 zodat deze onder de afbeelding terechtkomt.
Maak een nieuwe laag binnen "shell_mc" genaamd "images". Maak een lege filmClip met de naam "foto's" en sleep deze vervolgens vanuit de bibliotheek naar de nieuw gemaakte "afbeeldingen" -laag. Verplaats de clip naar x: 10 en y: 10 en geef deze een instantienaam van "pics_mc".
Maak binnen "shell_mc" een laag boven "images and name it" mask ". Maak een nieuw vierkant, converteer het naar een filmClip genaamd "masker" en geef het een instantienaam van "mask_mc". Verplaats de clip naar x: 10 en y: 10.
Klik met de rechtermuisknop op de laag "masker" en selecteer Masker. Zorg ervoor dat de laagpictogrammen "masker" en "afbeelding" veranderen om er als volgt uit te zien.
Maak binnen "shell_mc" een laag boven "masker" en noem deze "frame". Selecteer in het gereedschapspalet een lijnkleur en een andere vulkleur en maak vervolgens een vierkant op de laag "frame". Selecteer het opvulgebied en verwijder het en laat alleen de rand over. Dubbelklik op de rand om deze te selecteren en te converteren naar een filmClip genaamd "border". Geef de filmClip en exemplaarnaam van "border_mc" en plaats deze op x: 10 en y: 10.
Ga terug naar de worteltijdlijn en selecteer "shell_mc". Ga naar het eigenschappenvenster en verdraai de filterspijl omlaag. Klik op het kleine pictogram "Pagina" en selecteer slagschaduw. Dit zal een beetje diepte toevoegen.
Momenteel zijn we klaar met Flash en moeten we een XML-bestand maken om onze foto's bij te houden. Open je favoriete teksteditor (vrijwel alles dat HTML kan bewerken werkt) en maak een nieuw bestand. Bewaar het bestand in uw projectmap als content.xml. Nu moeten we een structuur aan het bestand toevoegen zodat Flash kan begrijpen hoe de informatie te gebruiken, we kunnen dat doen met de volgende code:
Nu moeten we paden toevoegen aan alle afbeeldingen in de diavoorstelling (dit is hoe Flash de afbeeldingen gaat "vinden"). Binnen in de
Sla het bestand op en sluit je teksteditor.
We gaan een tweening-bibliotheek gebruiken om ons te helpen de overgangen tussen afbeeldingen te animeren, dus open je browser, ga naar http://blog.greensock.com/tweenmaxas2/ en klik bovenaan op de knop 'download AS2'. Open het zipbestand dat u hebt gedownload en kopieer vervolgens de map "gs" en de inhoud ervan naar uw projectmap.
Het is tijd om terug te gaan naar je Flash-bestand en wat Actionscript te gaan schrijven. Selecteer de eerste frame van de "script" -laag en open het Actions Panel (Venster> Acties). De volgende stappen vereisen allemaal dat je de inhoud van het Actions-venster bewerkt, dus vanaf nu ga ik dit eenvoudigweg verwijzen naar "script". Terwijl we de onderstaande stappen doorlopen, ziet u al het script dat tot dat moment is gemaakt met de nieuwste toevoegingen gemarkeerd.
Het eerste wat we moeten doen is de tween-klasse opnemen die we hebben gedownload, zodat deze compileert wanneer de swf wordt gemaakt. Voeg de volgende code toe aan uw script:
importeer gs. *; import gs.easing. *;
(Extra regels: 3-15)
Accentsconagua
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; photos_xml.onLoad = function (succes) if (succes) // ----------- load successful else // ----------- probleem laden, controleer pad trace ("Fout bij laden van foto's_xml"); photos_xml.load (xmlPath); Hiermee wordt een nieuw XML-object gemaakt dat zich richt op ons "content.xml" -bestand. Aangezien XML-bestanden niet onmiddellijk worden geladen, is het belangrijk om te controleren op een voltooide belasting. We doen dit met de onLoad-callback die wacht op het laden van het xml-bestand en vervolgens een actie uitvoert.
Eerst moeten we een array maken met de naam "imageList". Nadat het xml-bestand is geladen, gaan we de gegevens toewijzen aan de array zodat deze later gemakkelijker toegankelijk is.
(Extra regels: 7,10)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); photos_xml.load (xmlPath); Maak een image-lader-object met de klasse filmClipLoader en gebruik call-backs om opdrachten te starten wanneer de film begint / eindigt met laden.
(Aanvullende regels: 17-27)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void loadListener.onLoadComplete = function (target_mc: MovieClip): Void photos_xml.load (xmlPath); Nadat het loader-object bestaat, hebben we een functie nodig om de juiste afbeeldingen te bepalen. We moeten ook een variabele toevoegen om de huidige afbeelding bij te houden. Binnen de functie "loadImage" is de "loadURL" ingesteld op het XML-kenmerk voor het afbeeldingspad. Definieer een nieuwe filmClip (targetClip) voor een container waarin de afbeelding wordt geladen en stel die container in op nul dekking met de eigenschap _alpha.
De laatste stap in de functie is het laden van de afbeelding in de container (imageLoader.loadClip). We willen ook de opdracht "loadImage" uitvoeren zodra de XML met succes is geladen.
(Aanvullende regels: 11,18,31-38)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void loadListener.onLoadComplete = function (target_mc: MovieClip): Void function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; // laad de nieuwe afbeelding imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Bouw een timerfunctie die de functie "loadImage" elke 5000 milliseconden (5 seconden) zal oproepen. Start de timer wanneer het beeld heeft voltooid laden, door de call in de callback onLoadComplete te plaatsen.
(Aanvullende regels: 29,32-34)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void loadListener.onLoadComplete = function (target_mc: MovieClip): Void setTimer (); function setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); We moeten de grootte van de "background_mc", "border_mc" en "mask_mc" veranderen in de grootte van de geladen afbeelding. De bibliotheek TweenMax / TweenLite is vrij eenvoudig te gebruiken. De syntaxis is TweenLite.to (doelclip, tijd in seconden, properties: value, ease type); We willen ook dat de afbeelding vervaagt nadat deze is geladen, dus stel de _alpha tot tween in op 100% in de onLoadComplete.
(Aanvullende regels: 25-27,31)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer (); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); // verhoog de huidige afbeelding als (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Zoek eerst het midden van het podium door de podiumhoogte te delen door 2 en de breedte van het podium met 2. Vervolgens, aangezien het registratiepunt van de shell linksboven staat, verplaats je de clip links van het midden van het podium met de helft de breedte van de schaal en de helft van de hoogte van de schaal (variabelen clipXTarg en clipYtarg berekenen de aantallen voor elke nieuwe afbeelding). Het is belangrijk om de Math.round () -functie te gebruiken, zodat het laatste getal geen decimaal bevat - dit dwingt de definitieve positie tot een volledige pixel.
(Extra regels: 28-30)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, ease: Quad.easeOut); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer (); function setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); We moeten de eerder geladen afbeelding vinden zodat deze kan worden verwijderd. Het is duidelijk dat als de huidige afbeelding er een is waar zich in het midden van de lijst bevindt, de vorige afbeelding een minder is dan het nummer van de huidige afbeelding. Als de currentImage gelijk is aan nul, is de vorige afbeelding (ervan uitgaande dat de diavoorstelling door elke afbeelding is gegaan) de laatste afbeelding in de array of imageList.length - 1. Neem het vorige afbeeldingsnummer en zoek het pad naar filmClip uit naar de vorige afbeeldingsshell.
(Aanvullende regels: 32-37)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, ease: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer (); function setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Vervolgens willen we de vorige afbeelding laten vervagen en als het dan nul wordt, moeten we de clip volledig uit de fase verwijderen. De onComplete: removePrevious wacht tot de fade is voltooid en roept vervolgens de "removePrevious" aan. Als veiligheidsmaatregel is het altijd een goed idee om ervoor te zorgen dat de clip die we proberen te verwijderen, daadwerkelijk bestaat. Gebruik daarom een "als" -instructie om te controleren of de clip dat niet is onbepaald (Flash's woord voor bestaat niet).
(Aanvullende regels: 38,50-54)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, ease: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer (); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Nu moeten we de currentImage verhogen zodat wanneer de timer is voltooid, Flash weet welke afbeelding als volgende moet worden geladen. Net als bij de vorige afbeelding, als de huidige afbeelding een nummer is behalve de laatste afbeelding in de lijst, voegen we er eenvoudig een toe aan het nummer van de currentImage. Als de huidige afbeelding echter het laatste item in de lijst is, zou de "volgende" afbeelding de lijst beginnen met de eerste afbeelding in de lijst (positie nul in de array).
(Aanvullende regels: 55-59)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, ease: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer (); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); if (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); De meeste Actionscript-functies vinden vrijwel onmiddellijk plaats, maar het laden van afbeeldingen kost enige tijd. Deze hoeveelheid tijd is afhankelijk van de netwerkverbindingssnelheid en beeldgrootte en kan daarom enkele seconden lang zijn. We moeten de timer verwijderen totdat de afbeelding is geladen, zodat de diavoorstelling een consistente tijdsduur heeft nadat de afbeelding is geladen. Een eenvoudige regel code (clearInterval) verwijdert het interval van 5 seconden totdat het opnieuw wordt ingesteld doordat de setInterval opnieuw wordt uitgevoerd.
(Extra regel: 66)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, ease: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer (); function setTimer () timer = setInterval (loadImage, 5000); function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); if (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; clearInterval(timer); imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Ten slotte moeten we de tijdlijn stoppen. De standaardfunctie van Flash is om de tijdlijn continu af te spelen tenzij anders aangegeven. In het geval dat er slechts één frame op de tijdlijn is, zal Flash blijven proberen dezelfde code steeds opnieuw uit te voeren, waardoor dezelfde afbeelding herhaaldelijk probeert te laden.
(Extra regel: 72)
importeer gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nieuwe XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (succes) if (succes) // ----------- laad succesvolle imageList = photos_xml.firstChild.childNodes; loadImage (); else // ----------- probleem laden, controleer pad trace ("Fout bij laden van photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, ease: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, ease: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, ease: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); l
