Games maken in SWF-formaat. Flash-drives en animaties maken in SWF-tekst

Heeft u zich ooit afgevraagd wat er schuilgaat achter de prachtige animatie van banners op internet? Of de nieuwerwetse tekenfilms gemaakt met behulp van computertechnologie? Meestal zijn ze gebaseerd op "vlees", of preciezer gezegd, dit is hoe de naam van de Flash-technologie uit het Engels wordt vertaald. Vandaag zullen we het hebben over flash-animatie voor de website:

Flash-technologie

Het multimediaframework is ontwikkeld door Macromedia. Maar na de overname (fusie) werden alle rechten op de technologie overgedragen aan de nieuwe eigenaar: Adobe Systems.

Gebied van moderne toepassing van Adobe Flash:

  • Het maken van webapplicaties is een vrij nieuwe richting. Impliceert volledig of gedeeltelijk gebruik van Flash om websites te maken. Indien gedeeltelijk toegepast, creëert deze technologie individuele ontwerpelementen: verschillende interactieve menu's, geanimeerde knoppen, enz.

Vergeleken met conventionele HTML-gebaseerde bronnen hebben Flash-sites enkele functies die het gebruik ervan beperken. Deze omvatten de hoge ontwikkelingskosten, eisen aan serverbronnen, lange laadtijden met een trage internetverbinding en enkele andere aspecten:

  • Implementatie van multimediamogelijkheden - om naar audio te luisteren en video op websites af te spelen, worden vaak mediaspelers gebruikt die op Flash zijn gemaakt. Hun ontwikkeling omvat het gebruik van een van de scripttalen (meestal JavaScript):
  • Bij online adverteren wordt technologie meestal gebruikt om geanimeerde banners te maken. Ze impliceren niet alleen het afspelen van multimedia-advertenties, maar ook een vorm van interactie met de gebruiker op spelbasis.

Basisprincipes en hulpmiddelen voor Flash-ontwikkeling

Om flash-animatie te maken, worden meestal traditionele tools van Adobe gebruikt:

  • Adobe Flash Professional – een programma voor het maken van interactieve animatie (animator);
  • Adobe Flash Builder – een omgeving voor het maken van webapplicatie-interfaces;
  • Adobe Flash Player is een browsergeïntegreerde speler voor het afspelen van Flash.

Daarnaast kunnen een aantal applicaties van derden dit soort multimedia-inhoud afspelen. De meest populaire zijn Gnash, QuickTime en enkele andere:

Met deze technologie kunt u elk type afbeelding weergeven ( raster-, vector-, 3D). Het ondersteunt ook het streamen van audio- en videogegevens. Speciaal voor mobiele apparaten is een lichtgewicht versie van Flash Lite ontwikkeld.

De belangrijkste standaard voor Flash-bestanden is de SWF-extensie. De afkorting staat voor Small Web Format. Video opgenomen in Flash heeft de bestandsextensies FLV, F4V.

De ontwikkeling van interactieve animatie in Flash is gebaseerd op vectorafbeeldingen. Dankzij dit was het mogelijk om ondersteuning voor een multimediaplatform en de onafhankelijkheid van de animatiekwaliteit van de schermresolutie te implementeren.

De bestandsgrootte van de Flash-applicatie is voor alle gebruikers hetzelfde, ongeacht de technische kenmerken van het scherm (resolutie).

Interactieve animatie in Flash is gebaseerd op morphing (vectortype), waarbij er een langzame stroom is tussen keyframes. Voor het afspelen van de gegevens wordt gebruik gemaakt van een Flash player, waarvan de werking in veel opzichten vergelijkbaar is met de werking van de virtuele JavaScript-machine. De softwarecomponent van de technologie wordt geïmplementeerd met behulp van de ActionScript-taal.

De nadelen van de technologie omvatten de volgende punten:

  • Zware belasting van de centrale processor van de clientmachine. Dit komt door de lage efficiëntie van de virtuele Flash-machine, die samen met de speler in de browser van de gebruiker is ingebouwd;
  • Grote kans op fouten - het afspelen van Flash-animaties kan plaatsvinden met een grote kans op fouten. Bovendien hebben fouten bij het afspelen van Flash een negatieve invloed op de werking van de gehele clientapplicatie (browser). Dit komt door onvoldoende controle over de fouttolerantie van de programmacode bij het maken van Flash-applicaties;
  • Kan niet worden geïndexeerd: alle tekstinhoud die in Flash-inhoud wordt weergegeven, wordt niet geïndexeerd. Deze beperking is vooral problematisch voor de hulpbronnen die op basis van deze technologie worden gecreëerd.

Beoordeling van software voor het maken van Flash van derden

Sothink SWF Quicker is gebruikt als een prototypetoepassing waarop we de basisprincipes van het maken van Flash zullen demonstreren. Volgens veel professionals is het programma het meest begrijpelijk en het gemakkelijkst te leren.

Naast het maken en bewerken “kan” de flash-editor werken met alle andere soorten webanimaties (GIF, HTML en andere standaarden):

Ga na de installatie naar de gebruiksvriendelijke interface van het programma. Helaas hebben we, na door alle hoeken en gaten te hebben rondgezworven, geen interfacetaalschakelaar gevonden.

Om te begrijpen hoe u in deze toepassing flash-animaties kunt maken, zullen we de ingebouwde sjablonen gebruiken. Het dialoogvenster “Nieuw van sjabloon” verschijnt onmiddellijk na het starten van het programma. Bovendien kan het worden opgeroepen via het hoofdmenu-item "Bestand". Van de aangeboden opties hebben we ervoor gekozen om een ​​banner te maken:

In het volgende wizardvenster moet u in de vervolgkeuzelijst een sjabloon selecteren op basis waarvan de animatie zal worden gemaakt. Daaronder staat een klein frame waarin het geselecteerde sjabloon wordt afgespeeld:

In de volgende stappen moet u de afmetingen van de banner instellen en 5 tekstzinnen invoeren die in de animatie worden afgespeeld. Bovendien moet u het adres opgeven van de bron waarnaar de gebruiker wordt geleid door op de banner te klikken:

Nadat u het project heeft samengesteld en het wizardvenster heeft gesloten, kunt u de resulterende video bekijken in de ingebouwde speler. Klik hiervoor op de groene pijl bovenaan:

Laten we, nadat we de speler hebben gesloten, de applicatie-interface eens nader bekijken. Houd er rekening mee dat het uit twee hoofdvensters bestaat: het bovenste is voor het bewerken van de tijdsperiode van de video en het onderste is een gewone grafische editor. Elk van de elementen bevindt zich op een afzonderlijke laag, die kan worden aangepast met behulp van de standaardtools in de zijbalk:

De gemaakte flash-animatie voor de site kan worden gepubliceerd. U kunt de publicatiemethode selecteren door bovenaan op de knop “Publiceren” te klikken. Er zijn drie opties waaruit u kunt kiezen, waaronder het invoegen in HTML-code. Gedetailleerde instellingen voor dit proces zijn beschikbaar in een apart venster “Publicatie-instellingen”.

De meeste gebruikers van computersystemen zijn op de een of andere manier Flash-animatie tegengekomen. Veel tekenfilms, banners op websites of zelfs eenvoudige internetspellen worden in dit formaat gemaakt. Maar wat zijn SWF-bestanden en hoe worden ze gemaakt of bewerkt als er wijzigingen moeten worden aangebracht in het voltooide project? Dit en nog veel meer zal verder besproken worden.

Wat zijn SWF-bestanden?

Weinig mensen denken na over wat een SWF-animatiebestand eigenlijk is, aangezien het een gewone video is.

In feite zijn de bestanden zelf samengestelde afgeleiden van het originele FLA-formaat, wat op zijn beurt een project is waarin de originele structuur kan worden gezien en gewijzigd. Uiteraard vereist dit een soort SWF-bestandseditor. Maar welke? Tegenwoordig zijn er zoveel programma's gemaakt voor het maken en bewerken van Flash-animaties dat het vrij gemakkelijk is om daarin in de war te raken.

Hoe open je een SWF-bestand?

We komen later nog terug op de redactie. Laten we nu eens kijken hoe u in de eenvoudigste situatie een SWF-bestand kunt openen. Er zijn minstens twee opties: gebruik een softwarespeler die dit formaat ondersteunt (KMPlayer), of start het afspelen in een webbrowser.

In het tweede geval is voor correct afspelen een voorwaarde de aanwezigheid van de geïnstalleerde Flash Player-plug-in van Adobe of een equivalent daarvan in de vorm van een Macromedia Flash-extensie, wat over het algemeen hetzelfde is.

Het principe van het bewerken van een voltooide Flash-video

Nu een paar woorden over hoe het voltooide project in algemene termen wordt bewerkt. Een editor voor SWF-projecten van het meest primitieve type zal niet zomaar een bestand kunnen openen, omdat het voltooide SWF-bestand, zoals reeds vermeld, is gecompileerd en een minimum aan informatie over de oorspronkelijke structuur bevat.

Voordat u de eenvoudigste SWF-bestandseditor kunt gebruiken, moet het voltooide bestand dus eerst als het ware in een leesbare vorm worden geconverteerd. Met andere woorden, het moet worden gedecompileerd in de oorspronkelijke FLA-vorm. Voor dit doel worden speciale hulpprogramma's gebruikt, die afzonderlijk zullen worden besproken.

De beste editors voor het helemaal opnieuw maken van animaties

Niettemin kunnen, om in de beginfase een video te maken (en deze niet te bewerken), zowel de eenvoudigste applicaties als volledige softwarepakketten op professioneel niveau worden gebruikt.

Het zal niet mogelijk zijn om ze allemaal te beschrijven, maar onder de programma's die voor dit doel zijn ontworpen, kunnen enkele van de meest populaire worden geïdentificeerd:

  • Alligator Flash-ontwerper.
  • SWiSH Max.
  • Adobe Flash Professional.
  • Corel R.A.V.E.
  • Sony VegasPro.

Alligator Flash-ontwerper

Deze SWF-editor in het Russisch is de eenvoudigste van alle onderstaande editors en is vooral bedoeld voor het snel maken van geanimeerde banners die op websites op internet zullen worden gebruikt.

Er zijn niet zoveel tools beschikbaar voor een beginnende webontwerper, maar er zijn ongeveer honderddertig verschillende effecten, de mogelijkheid om geanimeerde tekst, tekeningen te maken of geluid in te voegen. De interface is uiterst eenvoudig en duidelijk, dus deze applicatie is zeer geschikt om de basisbeginselen van het maken van dit type animatie onder de knie te krijgen.

SWiSH Max

Deze animatiebestandseditor lijkt sterk op het vorige hulpprogramma, hoewel het er voor een beginner iets ingewikkelder uitziet.

Met zijn hulp kunt u professionelere werken van goede kwaliteit maken. Elke gebruiker kan erachter komen dankzij het feit dat de applicatie zelf video-tutorials bevat die de basisprincipes van het maken van geanimeerde video's uitleggen.

Adobe Flash Professional

De Adobe Flash SWF-bestandseditor is een softwarepakket op professioneel niveau dat niet iedereen de eerste keer onder de knie heeft.

Hij heeft zoveel tools in zijn arsenaal dat je er volgens veel professionele webontwerpers en animators mee elke fantasie kunt verwezenlijken. Als je trouwens naar de wereldranglijst van software op dit gebied kijkt, zijn het de applicaties uit de Adobe Flash CS- en CC-serie die de onbetwiste leiders zijn.

Corel R.A.V.E.

Hier hebben we nog een professionele SWF-editor met mogelijkheden die vergelijkbaar zijn met het vorige pakket van Adobe.

Het meest interessante is de mogelijkheid om tweedimensionale objecten te tekenen, hun beweging langs een vooraf bepaald pad te bepalen, naar het opgegeven pad te springen, een dubbel van het geanimeerde object te maken om alleen de grootte, kleur of locatie te veranderen, waarna het programma automatisch voert de nodige transformaties uit en animeert het beeld. Dit is uiteraard niet alles waar deze applicatie toe in staat is. Je kunt het bestuderen en heel lang steeds meer nieuwe mogelijkheden bewonderen.

Sony VegasPro

Dit videoverwerkingspakket behoeft zeker geen introductie. Zelfs degenen die nog nooit met dit soort multimedia hebben gewerkt, weten ervan. Dit is natuurlijk geen SWF-editor als zodanig, maar het beschikt wel over hulpmiddelen voor het maken van animaties, en deze zijn zeer de aandacht waard.

Met het programma kun je animatievideo's maken en bewerken (in dit geval ligt de nadruk daarop) met behulp van meer dan 200 effecten, de bewerking kan worden gedaan op basis van de 8-bit-modus en in de finalisatiefase kun je overschakelen naar 32-bit om kwaliteit verbeteren. U kunt ook kleurfilters toepassen om verschillen in verschillende fragmenten te elimineren, de storyboard-frequentie op 30 fps of hoger instellen en ook een verscheidenheid aan beeldverhoudingen instellen, inclusief zelfs transformaties en overgangen daartussen (4:3, 16:9, 16 : 10), enz. Over het algemeen zijn er voldoende hulpmiddelen.

Extra hulpprogramma's voor het werken met Flash

Over het maken en bewerken van geanimeerde video's gesproken: we kunnen enkele extra hulpprogramma's niet negeren die nuttig kunnen zijn bij uw werk. Dit omvat het converteren van het uiteindelijke SWF-bestand naar het originele FLA-projectformaat door middel van decompilatie (het formatteren van de code), evenals enkele extra hulpmiddelen die worden gebruikt om de beeldkwaliteit te verbeteren en de grootte van het uiteindelijke bestand te verkleinen zonder kwaliteitsverlies.

Een van de meest noodzakelijke programma's zijn de volgende:

  • Flash-decompiler Trillix.
  • Sothink SWF-decompiler.
  • Flash-optimalisatie.
  • Sparkle SWF-optimalisatie.

Flash-decompiler Trillix

Een beginnende gebruiker heeft dit programma nodig om een ​​SWF-bestand naar FLA-formaat te converteren, zodat het project zelfs in de eenvoudigste editor kan worden geopend en de nodige wijzigingen kan worden aangebracht.

In wezen is dit een geavanceerde converter met editormogelijkheden waarin wijzigingen direct kunnen worden aangebracht. U kunt het ook gebruiken om batchconversies uit te voeren. En dit alles gebeurt zonder de verplichte installatie van Adobe- en Macromedia-plug-ins.

Sothink SWF-decompiler

Dit programma is ook een decompiler-editor, zij het een betaalde. De mogelijkheden zijn erg interessant. Het is gericht op het snel maken of bewerken van banners, video's en zelfs Flash-games.

Voor beginners biedt de applicatie een speciale "Wizard" gebaseerd op de keuze van het type en de structuur van het toekomstige project uit de beschikbare sjablonen. Daarnaast kun je met de broncode werken, allerlei filters, effecten toepassen of vectorafbeeldingen maken in een speciale WYSIWYG-omgeving.

Flash-optimalisatie en Sparkle SWF-optimalisatie

Deze twee kleine hulpprogramma's zijn, zoals de naam al doet vermoeden, een soort optimalisatieprogramma's waarmee u de grootte van het voltooide SWF-bestand kunt verkleinen om ruimte te besparen zonder kwaliteitsverlies. Ze zullen vooral nuttig zijn voor iedereen die zijn werk op internet plaatst of banners en online games in Flash-formaat maakt.

Zoals vermeld op de officiële websites van de ontwikkelaars, kunt u met deze hulpprogramma's compressie uitvoeren en de grootte van het originele object met maar liefst 70% verkleinen. Ze hebben verschillende soorten optimalisatie met behulp van automatische conversie na het instellen van de nodige parameters.

Wat te gebruiken?

Tot slot de belangrijkste vraag: “Wat moet je uit dit alles kiezen?” Wij zijn van mening dat beginnende animators en webontwerpers moeten beginnen met de eenvoudigste hulpprogramma's. Voor degenen die op zijn minst een beetje kennis hebben van het maken en bewerken van SWF-video's, zullen professionele hulpprogramma's ongetwijfeld geschikt zijn. Hier is de keuze aan de gebruiker. Als u echter de referentie-informatie wilt bestuderen die beschikbaar is in de meeste gepresenteerde toepassingen, kunt u er heel eenvoudig mee werken. Maar welke editor is beter? De palm behoort terecht tot de ontwikkelingen van Adobe, al mogen andere editors en decompilers niet buiten beschouwing worden gelaten.

Waarschijnlijk heeft iedereen wel eens een soort reclame-animatie op websites gezien, als je de muiscursor erover beweegt, begint er iets in te veranderen. Of online applicaties/games gespeeld op websites (sociale netwerken of andere). Zelfs als u naar deze site gaat via een niet-bestaande link zoals deze, wordt u naar ongeveer dezelfde pagina gebracht, gemaakt op basis van flash-animatietechnologie. En hun bestand heeft een SWF-extensie. In dit artikel wordt beschreven wat dit bestand is, hoe je het opent (bijvoorbeeld speelgoed offline spelen) en hoe je het kunt wijzigen (voor amateurs).

Wat is dit .swf-bestand?
SWF-bestand - Flash-animatie gemaakt met behulp van Adobe Flash of een ander programma voor het ontwikkelen van Flash-toepassingen. Flash-video's kunnen zowel platte tekst als vectoren, rasterafbeeldingen, 3D-afbeeldingen (beperkt), audio, video en scripts in ActionScript bevatten.

Het Flash-platform is zeer wijdverspreid geworden op het gebied van het creëren van interactieve applicaties. Dit kunnen flash-tekenfilms, games, video's (bestanden in .FLV-formaat) zijn, websites die geheel of gedeeltelijk met deze technologie zijn gemaakt.


Volg dan de instructies van de site.

Om te openen, start u de browser (het is raadzaam om er een nieuw tabblad in te maken), "neemt" LMB over uw SWF-bestand en sleept u het naar de browser.

Optie 2
Via het programma.
Er zijn 2 goede programma's om dergelijke bestanden te openen: dit (ik kon de officiële site niet vinden) en .


Wat de tweede betreft: deze is gratis, maar is in het Engels en de ontwikkelaars zijn iets vergeten en zijn gestopt met het vrijgeven van updates ervoor en het werkt hoogstens alleen voor XP.
Als u verdwaald bent op de website van de fabrikant en niet kunt vinden hoe u dit programma kunt downloaden:
selecteer het tabblad Downloads in het hoofdmenu

Een paar keer moeten we al aan een niet geheel standaard taak werken: er is een flashbanner (bestand in .swf-formaat) waar een link naar gemaakt moet worden... Over het algemeen worden dergelijke dingen volgens Feng Shui gedaan in de flash zelf, zelfs tijdens de ontwikkeling van de banner, en de banner zelf fungeert als een link zonder deze in een tag te wikkelen . Maar blijkbaar vergeten flashers vaak de klant te vragen waar de banner naartoe moet leiden, en deze kwestie wordt overgedragen aan de schouders van de lay-outontwerper. En dit is waar het probleem zich voordoet.

Optie 1 (werkt niet). Het idee komt meteen op om de banner dom te verpakken met een link. Maar als je simpelweg de code van de flashbanner zelf in de linktag flashbannercode wikkelt, komt er vreemd genoeg niets van terecht: als je over de banner zweeft, is de link in de statusbalk niet zichtbaar, en klikken op de banner levert niets op.

Optie 2 (werkt niet). Een geavanceerde lay-outontwerper zal nog verder gaan en proberen van de link een blok 1 te maken en deze absoluut direct bovenaan de banner te plaatsen, waardoor de z-index hoger wordt ingesteld. Maar vreemd genoeg levert dit niets op. Het is tijd om het probleem te schetsen: Flash-objecten hebben standaard een oneindige z-index, die elk object overlapt, zelfs absoluut erboven gepositioneerd.

Optie 3 (gedeeltelijk werkend). Om flash te redden van de eindeloze z-index"a, hebben de ontwikkelaars van flash"a ons een handige parameter gegeven: Of gewoon wmode="opaque" als u Flash via insluit .

Hier krijgen we de volgende optie:

Maar dat is niet alles! Deze optie weigert immers, als er geen tekst in de link staat, vreemd genoeg om te werken in IE 6-9 (als er wel tekst in de link staat, dan zal deze tekst bovenop de flash-banner behoorlijk klikbaar zijn in IE), en zoals gebruikelijk voor de ezel hebben we een speciale kruk nodig...

Optie 4 (100% werkend)

Om optie 3 in IE te laten werken, heb je een unieke kruk nodig - stel een transparante achtergrond in voor de link met behulp van een transparante afbeelding van één pixel (in dit geval s.gif):

Deze optie werkt in alle populaire browsers. Ik heb het persoonlijk getest op IE7-9, huidige versies van FF, Safari, Opera.

In de les van vandaag leer je hoe je online een flashbanner kunt maken voor een beginner zonder kennis van flash-animatie en zonder speciale programma's (lezen). Opgemerkt moet worden dat er op internet een groot aantal generatoren zijn waarmee u banners kunt maken, ook in flash-formaat (swf), maar de meeste zijn in het Engels zonder ondersteuning voor Russische lettertypen. Ik was specifiek op zoek naar een dienst waarmee ik een banner met Russische tekst kon maken.

Ik wil u eraan herinneren dat banners grafische reclame zijn voor een website, blog of een andere webpagina. Geanimeerde banners kunnen in flash-formaat (swf) zijn en in de vorm van gif-animatie (lees: deze service helpt u bij het maken van een gif-banner). Bannerreclame op internet is wijdverspreid en behoorlijk effectief.

Volg de link om online een flashbanner te maken.

Klik in de Banner Now-generator op de knop "Banner nu maken".

Selecteer op de nieuwe pagina de afmetingen van de toekomstige banner.

U kunt één van de standaard bannerformaten kiezen of uw eigen instellingen opgeven. Hier kunt u een bannerachtergrond en clipart kiezen of uw eigen banner uploaden. Om dit te doen, plaatst u een vinkje naast het item Aangepaste achtergrond , selecteer een categorie afbeeldingen uit het aanbod (dieren, eten, achtergronden, dieren, knoppen, enz.) of upload ze met behulp van de knop bestanden uploaden .

Klik nogmaals op de knop ‘banner maken’.

Hier zijn we in de Flash-banner-editor. Als u niet tevreden bent met de keuze van uw achtergrond, kunt u een nieuwe kiezen. Onder de documentwerkruimte vindt u een Afbeeldingengalerij en een knop Bestanden uploaden (upload uw foto naar de editor). Nadat u de achtergrond hebt toegevoegd, bewerkt u de positie en grootte ervan door de randen van de afbeelding met de muis te slepen.

Gebruik Preview Banner om het werk in tussenliggende fasen te monitoren.

Rechts van het werkgebied zien we lagen. U kunt de transparantie aanpassen (de alpha-eigenschap), de volgorde van lagen wijzigen en onnodige lagen verwijderen.

Links van het werkgebied zie je een diabaan. Standaard heeft een banner 1 dia. U kunt dia's toevoegen, dupliceren, verwijderen en de diaduur wijzigen. Om een ​​dia te verwijderen of toe te voegen, klikt u op het instellingenpictogram in de rechter benedenhoek van de dia:

We veranderen de duur van de dia door de tijd naast het klokpictogram (ook te vinden onder de dia) te wijzigen.

Bovenaan het werkgebied ziet u de effecten voor de tekst. Ze zijn onderverdeeld in categorieën:

  • verschijnen (uiterlijk),
  • blijven (statisch),
  • verdwijnen (verdwijning).

Als u op de knop naast effecten klikt, kunt u een effect voor de afbeelding selecteren.

Nadat u tekst hebt toegevoegd, selecteert u de kleur, grootte, lettertype en locatie in de instellingen aan de linkerkant van het werkgebied.

Wanneer u online een flashbanner heeft gemaakt, moet u deze downloaden. Klik op de downloadbanner (swf)-knop.

Hier stellen we de instellingen in:

  • automatisch afspelen (automatisch afspelen),
  • herhalen (herhalen),
  • knopmodus
  • banner hyperlink (pagina waarnaar de banner linkt),
  • open url op nieuwe pagina (open de pagina in een nieuw venster),
  • gebruik preload (gebruik afbeelding voor laden van pagina),
  • stuur een banner naar mijn e-mail (stuur een kopie van de banner naar mijn e-mail).

Dit is de banner die we hebben gekregen:

Ik bied u nog een aantal flash-bannergenerators aan met ondersteuning voor de Russische taal:

  • www.animationonline.com
  • www.lact.ru/banner/en
  • www.flash-banner-maker-online.com/customsizebanner3.php

Deze diensten zijn gemakkelijker te gebruiken, dus gebruiksinstructies zijn niet vereist.

Als u vragen heeft, kunt u deze stellen in de opmerkingen.
Videoles over het werken met de service