Share
Terwijl ActionScript 3 een populairdere taal wordt en de functies van Flash Player geavanceerder en toegankelijker worden, is het belangrijk om een gemeenschappelijke workflow in uw bedrijf te bouwen, zodat projecten flexibeler kunnen worden en, nog belangrijker, op tijd worden geleverd. Een groot probleem met ActionScript 2 was het overbruggen van de kloof tussen de ontwerper en de ontwikkelaar. Dit zorgde er vaak voor dat ontwikkelaars FLA's behandelden met honderden slecht benoemde bibliotheekitems en dat vond niemand leuk.
Met de voordelen van ActionScript 3 en de mogelijkheid om weg te coderen van de tijdlijn, zijn SWC's veelgebruikte items geworden voor grote projecten, maar er zijn nog steeds veel mensen die niet weten wat ze zijn of hoe ze te maken / gebruiken.
Laten we beginnen met te zien wat SWC's eigenlijk zijn. Een SWC [ShockWave-component acroniem zeggen:Sw ~ ick] :) is gewoon een gecomprimeerd pakket met bestanden gegenereerd door de Flash IDE. Ze bevatten visuele middelen (zoals MovieClips, Buttons, Graphics en Fonts) en code. SWC's bestaan al sinds Flash MX 2004, maar zijn pas echt van de start gekomen sinds ActionScript 3 er was, omdat voorheen, zoals ik al zei, alles in de FLA kon worden bewaard.
In deze zelfstudie laat ik u zien hoe u visuele items, lettertypen en ActionScript-code kunt insluiten en gebruiken.
Er is een eenvoudig en solide argument voor het gebruik van SWC's: het scheidt het ontwerp van de ontwikkeling. Flash heeft de mogelijkheid om het ontwerp van geprogrammeerde visuele items te beïnvloeden via 'CSS'-achtige stylesheets (net zoals bij Flex), maar meestal worden ontwerpers (niet allemaal) afgeschrikt door alles wat met code te maken heeft, inclusief eenvoudige CSS. Een ander punt is dat ontwerpers ontwerpen. Ze krijgen meestal nep-schrijfframes waarmee ze gebruikersinterfaces maken in programma's zoals Photoshop en Illustrator. Als ze dan de interface moesten coderen, was het maken van de mock-ups in Photoshop misschien gewoon een verspilling van tijd. Bovendien kan het veel tijd en moeite kosten om interfaces te coderen die gemakkelijk kunnen worden aangemaakt in visuele IDE's zoals Photoshop en Illustrator.
Terug naar mijn belangrijkste punt, stelt de SWC de ontwerpers in staat om de interface te ontwerpen, in stukken te snijden en vervolgens een SWC door te geven aan de ontwikkelaar die alles samenvoegt, dit creëert een eenvoudige workflow zonder dat mensen op andermans tenen trappen om de correct ontwerp.
Laten we zeggen dat je morgen wordt ingelicht over een nieuw project waarbij je met een ontwerpteam gaat werken. Het gaat de verantwoordelijkheid zijn van het ontwerpteam om de interface te bouwen, inclusief het maken van alle kleine dingen, zoals zweeftoestanden, loader-animaties, afgeronde hoeken en pictogrammen. Het is de verantwoordelijkheid van het ontwikkelteam om het project vervolgens te bouwen en ook in alle UI-elementen te binden. De ontwerptijd zou alle elementen creëren die ze nodig hebben, ze in een SWC plaatsen en vervolgens dat bestand doorsturen naar het ontwikkelingsteam. Het ontwikkelingsteam kan vervolgens in de UI-elementen coderen zonder zich zorgen te hoeven maken over het importeren van lettertypen, het spelen met stylesheets of het zitten met de ontwerper en het programmeren van de interface..
Zoals het geweldige artikel van Mario Santos aangeeft, heeft Adobe onlangs Flash Catalyst uitgebracht, een IDE waarmee je PSD- of AI-bestanden kunt importeren en converteren naar XML-gebaseerde vectorobjecten, FXG's. Dit is zeker een stap in de goede richting, maar het is iets dat alleen in Flash Player 10 wordt geïmplementeerd, waarvan er maar een penetratiegraad van 75% is. Dit betekent dat we bij het werken aan live projecten Flash Player 9 moeten gebruiken, dus totdat meer mensen Flash Player 10 overnemen, zijn SWC's een goede manier om dit te doen.
Genoeg gepraat, laten we een SWC maken. Ik ga een paar afbeeldingen maken in Photoshop en Illustrator en deze in de Flash IDE plaatsen, waar ik ze door middel van SWC's zal instellen voor ActionScript-codering. Ik zal het ook hebben over een concept genaamd "scale 9 grid" slicing, dus start je favoriete image editor op en maak een nieuw bestand aan:
Laten we gewoon een aantal standaard aangepaste vormen nemen die Adobe biedt en plak ze op het kunstbord:
Dan, zodat we niet alleen solide zwarte bitmaps hebben, laten we er wat kleur aan toevoegen:
OK, dus we hebben mooie sterren, we willen ze nu meenemen en in onze Flash IDE plaatsen.
Start de Flash-IDE en maak een nieuw ActionScript 3-bestand:
Nu, als je een veteraan bent van de Flash IDE, zul je je herinneren dat je PSD-bestanden kon importeren sinds CS3, ze hebben een heel mooie interface geïntroduceerd als het gaat om het importeren van PSD's die door je lagen zouden gaan in plaats van importeren van een grote bitmap. Ga dus naar Bestand> Importeren> Importeren in bibliotheek, ga naar je PSD en klik op Importeren in bibliotheek. U ziet een pop-upvenster dat er ongeveer zo uitziet:
In mijn geval laat ik alles van de achtergrond afwijken, want het is slechts een witte achtergrond. Nu hebben we onze PSD-lagen als items in onze bibliotheek, we kunnen ze beginnen klaar te maken voor de ontwikkelaars. Neem een van de sterren uit de bibliotheek en laat hem gewoon op het podium vallen, zoals:
We nemen vervolgens de ster en zetten deze om naar een MovieClip. Wanneer het venster verschijnt, noem het "BlueStarAsset", vink "Exporteren voor ActionScript" aan. U ziet de twee onderstaande invoervakken worden bewerkbaar. U hoeft ze niet aan te raken, maar ze geven ons de mogelijkheid om te specificeren in welke klasse dit activum zal worden genoemd en in wat voor soort klasse het zich zal uitbreiden, we houden het bij "MovieClip":
Nu hebben we een actief in onze bibliotheek die we kunnen exporteren naar ActionScript. Voordat we verder gaan, laten we dit eens proberen. Ga eerst naar Bestand> Publicatie-instellingen. Klik op het tabblad "Flash", selecteer "Speler" versie 9 en vink "Export SWC" aan:
Druk op "Ok". Nu zijn we klaar om onze SWC te exporteren. Debug de FLA door op CTRL / CMD + Return te drukken en u ziet een SWF- en een SWC-bestand. Wei! Je hebt een SWC gemaakt, laten we het nu snel gebruiken. Start uw favoriete coderings-IDE op en maak een nieuw ActionScript 3-project. Configureer de compiler-instellingen om de SWC die u zojuist hebt gemaakt in het buildpad op te nemen. Maak een nieuw basis-ActionScript 3-bestand met de naam "App.as" en gebruik de volgende code:
pakket import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] openbare klasse-app breidt uit met Sprite public function App () var star: MovieClip = new BlueStarAsset (); addChild (ster);
Je ziet zoiets als dit:
Dus dat is onze belangrijkste troef.
Ik zal snel praten over een concept genaamd "schaal 9 grid". Dit is eenvoudigweg een methode waarmee we een visueel item kunnen versnipperen, dus als het gaat om het aanpassen van het formaat, kunnen zaken als afgeronde hoeken in verhouding blijven. Als we bijvoorbeeld een afgeronde rechthoek zoals deze hadden, als we vervolgens de breedte ervan hebben gewijzigd, zie je dat de afgeronde hoeken niet langer in verhouding zijn:
Om dit te ondervangen, gebruiken we de methode voor het opdelen van rasters op een schaal van 9 om een rechthoek bovenop ons activum in te stellen, waarvan het formaat wordt aangepast, zodat alles buiten de rechthoek in verhouding blijft, bijvoorbeeld:
De rode rechthoek in het midden is wat zal schalen, maar het spul buiten kant zal niet. We maken een 9-wegraster, de bovenste rij heeft 3, het midden heeft 3 en de onderkant heeft 3. Dit is hoe we het in praktische zin doen, teruggaan naar de Flash IDE en gewoon een eenvoudige afgeronde rechthoek tekenen. Maak er een nieuwe filmclip van en zorg ervoor dat je het vakje "exporteren voor ActionScript" aanvinkt (ik heb de mijne "SimpleRoundedRect" genoemd) en hopelijk heb je iets vergelijkbaars:
Nu gaan we dit nieuw gemaakte item nemen, het SWC opnieuw exporteren (door de film te debuggen) en teruggaan naar onze ActionScript 3 IDE waar we onze klasse zullen updaten zoals:
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.geom.Rectangle; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] app van openbare klasse breidt Sprite uit public function App () var rect: MovieClip = new SimpleRoundedRect (); rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect);
We voegen gewoon onze rechthoek toe aan het werkgebied, maar daarvoor tekenen we een rechthoek die x: 10, y: 10 is en 20 pixels minder breed en hoog is dan onze afgeronde rechthoek. Dit definieert de middelste rechthoek voor onze schaalverdeling. Je ziet nu de rechthoek over de volle breedte van het podium gaan zonder dat de hoeken buiten proportie raken. Gewoon om het verschil te zien, geef commentaar op regel 15 (het begint met "rect.scale9Grid") en zie hoe de hoeken nu uitgerekt zijn.
Ik weet precies wat je denkt "als de ontwerper alle activa moet doen, waarom moet de ontwikkelaar dan de rechthoek instellen voor het snijden?" Welnu, de ontwikkelaar hoeft niet, zoals de ontwerper kan! Klik met de rechtermuisknop op het activum in de bibliotheek en selecteer eigenschappen. Vink vervolgens het vakje "Hulplijnen inschakelen voor 9-delige schaling" aan en u ziet dit:
Nu kan de ontwerper die hulplijnen verplaatsen, zodat de ontwikkelaar zich geen zorgen hoeft te maken over het maken van een rechthoek voor het schaal 9-raster. Als u regel 15 laat uitzetten en deze SWC opnieuw exporteert, ziet u dat de hoeken nu weer proportioneel zijn. Eenvoudig eh?
SWC's kunnen meer bevatten dan alleen visuele items, of het nu gaat om platte afbeeldingen of tijdlijn / scriptanimaties. Ze kunnen ook volledige codebibliotheken bevatten. SWC's zijn een zeer goede manier om uw code te distribueren. Het is een hele klus, maar niet onmogelijk om SWC's te decoderen. Het betekent echter wel dat je een SWC kunt posten in plaats van je zorgen te maken over veel bestanden en mappen. Ze zijn ook gemakkelijker voor de gebruiker. Ik heb bijvoorbeeld een map waarin ik alle ActionScript-codebibliotheken dump die ik gebruik of maak, maar dan heb ik een aparte map voor nuttige SWC's die ik ben gaan gebruiken. Ik vind het eenvoudiger om een SWC te selecteren en deze aan het project te binden in plaats van de volledige map met gedeelde scripts op te nemen - en het is ook sneller!
Om op code gebaseerde SWC's te maken, gebruik ik Flash Builder - u kunt de bètaversie downloaden van Adobe. In Flash Builder moet u een nieuw 'Flex-bibliotheekproject' maken, zoals:
Geef het een naam en zorg ervoor dat je de Flex 3.4-compiler selecteert:
Klik op Volgende en vink vervolgens het vakje naast 'src' aan, hier plaatsen we onze klassen:
Nu kunnen we beginnen met het schrijven van code voor onze bibliotheek, dus maak een nieuwe ActionScript-klasse, noem deze "Test" en stel de pakketnaam in op "com.flashtuts.swc" en plaats de volgende code daarin:
pakket com.flashtuts.swc import flash.display.Sprite; public class Test breidt openbare functie test () init () uit; private function init (): void var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xFF0000); sprite.graphics.drawRoundRect (0, 0, 100, 100, 5, 5); sprite.graphics.endFill (); addChild (sprite);
Zoals u kunt zien, hebben we zojuist een rood vak gemaakt, dus laten we dit in ons ActionScript 3-project opnemen.
U moet nu de Flex-compiler wijzigen zodat deze de nieuwe SWC-items die u net hebt gemaakt, kunt ophalen. Zodra u dat hebt gedaan, kunt u de code van uw toepassing wijzigen om er als volgt uit te zien:
pakket import com.flashtuts.swc.Test; import flash.display.MovieClip; import flash.display.Sprite; [SWF (,, frameRate = "30", backgroundColor = "# FFFFFF")] app van openbare klasse breidt Sprite uit public function App () var rect: MovieClip = new SimpleRoundedRect (); //rect.scale9Grid = new Rectangle (10, 10, rect.width - 20, rect.height - 20); rect.width = stage.stageWidth; addChild (rect); var redRect: Sprite = new Test (); addChild (redRect);
Daar zie je je rode rechthoek! Eenvoudig eh?
Nu kunnen veel mensen beweren dat SWC's niet nodig zijn, maar ze helpen ontwerpers en ontwikkelaars om synchroon te werken zonder op elkaars tenen te trappen. Ze beschermen uw code en ze zijn een goede manier om visuele items zoals preloaders en afbeeldingen te delen. Hoewel FXG's veel beter zijn, tot Flash Player 10 oppikt, zijn SWC's de standaard als het gaat om het maken van productiewebsites die schaalbaar moeten zijn, zowel in termen van projecttijdlijnen als visuele componenten.
Accentsconagua