Share
Er is een al te bekende dwang bij digitale ontwerpers om zich te identificeren met hun gereedschap naar keuze. Dit is jammer, want wat betreft Flash is een tool die steevast over het hoofd wordt gezien Fireworks CS4.
In deze zelfstudie ontdekt u hoe Fireworks CS4 kan worden gebruikt om uw werkstroom in Flash te versnellen en tegelijkertijd een neonlicht aan de muur van een vervallen theater in Los Angeles te helpen flikkeren op een nogal drukke tijd straat.
Open de MusicHall.jpg bestand in Fireworks CS4. Het plan is om elke letter in de woorden "Music" en "Hall" te gebruiken met de vectoren die door Fireworks worden geproduceerd.
Selecteer het zoomgereedschap en zoom in op de woorden in het bord. Als alternatief kunt u 150% selecteren in het pop-upvenster Vergroting in de rechterbenedenhoek van het canvas.
Klik op de Lijnkleur-chip in het deelvenster Gereedschappen om de Kleurkiezer te openen. kiezen ff3300 (een oranje) en druk vervolgens op Enter / Return om uw keuze te accepteren. Stel de vulkleur in op Geen. Hiermee wordt de kleur van de letters ingesteld terwijl we ze tekenen. Hoewel de slang een grijze kleur lijkt te zijn, vermoed ik dat het werkelijke licht in één keer rood was.
Klik op het gereedschap Pen en houd dit ingedrukt. Selecteer het Vectorpadgereedschap in de keuzelijst. Als u dit hulpmiddel selecteert, kunt u de pen als een penseel behandelen. Hoewel dit hulpmiddel meer geschikt is voor degenen onder u die Pennen en tabletten gebruiken, laat dit project diegenen onder ons die tekenen met muizen ook wat plezier hebben.
Stel in Eigenschapcontrole de Brush Width in op 4 pixels en selecteer de Zacht afgerond penseel uit de Basic-categorie in de Borsteltype pop-up menu. Stel de precisie waarde voor 2. Precisie is hoe strak de vectoren worden getekend. Hoe hoger het getal (de maximumwaarde is 10) hoe meer vectornodes er in de regel zullen zijn
Selecteer de beletteringslaag en traceer met behulp van het hulpmiddel de letter "M". Als je klaar bent, wordt er een nieuwe sublaag genoemd Pad. Dubbelklik op de "Path" -laagnaam en wijzig deze in "M".
Als het pad eruit ziet, kan het een "Tweak" gebruiken, schakel dan over naar het subselectiehulpmiddel, de holle pijl in het deelvenster Gereedschappen en klik op de vorm. Je zult de vectoren zien. Klik op een ankerpunt om de handvatten te tonen en uw "tweaks" aan te brengen. Om een punt te verwijderen, selecteert u het met de subselectie tool en drukt u op de Delete-toets. Om een hoekpunt in een afgerond punt te veranderen, schakelt u over naar het gereedschap Pen en klikt u op het punt om het ontbrekende handvat toe te voegen.
Als u eindigt met punten zonder grepen, selecteert u het gereedschap Pen en klikt / sleept u het punt. Vuurwerk heeft een vervelende gewoonte om altijd het pad voor je te willen sluiten. Dubbelklik eenvoudigweg op het eindpunt van het pad om de lijn te verwijderen. Om een punt op het pad te verwijderen, selecteert u het met het gereedschap Subselect en drukt u op de delete-toets.
Herhaal stap 4 en 7 voor de resterende letters in het bord.
Als u klaar bent, selecteert u Bestand> Opslaan als. Het dialoogvenster Opslaan wordt geopend. Noem het bestand - Ik gebruikte "MusicHall" - en selecteer FireworksPNG (*. Png) van de pop-down. Hiermee krijgt u een meerlagig document met transparantie voor elke laag. Klik op de knop Opslaan en sluit Fireworks af.
Zoals ik aan het begin van deze tutorial al aangaf, wordt Fireworks CS4 door ontwerpers vaak beschouwd als het "familielid van Photoshop dat we liever niet bespreken". Zoals u binnenkort zult ontdekken, is misschien een beetje meer gebabbel over Fireworks CS4 vereist. Laten we beginnen.
Start Flash CS4 en maak een nieuw, Flash ActionScript 3.0-document.
Selecteer Bestand> Importeren> Importeren in bibliotheek en navigeer naar de map waarin u de PNG-afbeelding hebt opgeslagen. Selecteer de afbeelding en klik op de knop Importeren in bibliotheek. Hiermee wordt het dialoogvenster Fireworks-document importeren geopend. Waarom de bibliotheek? Het wordt algemeen beschouwd als een goede gewoonte om alles naar de bibliotheek te importeren. In feite blijft alles wat in het werkgebied wordt geïmporteerd in de bibliotheek vastzitten, dus bespaar jezelf een stap.
Wanneer het dialoogvenster Fireworks-document importeren wordt geopend, klikt u op OK. Als u dit dialoogvenster nog nooit eerder hebt gezien, laten we het dan doornemen.
Open de Flash-bibliotheek en open Fireworks-objecten> MusicHall.png> Pagina 1. Dubbelklik op de filmclip Page 1 om deze te openen in de symbooleditor.
Wanneer u naar de filmclip kijkt, ontdekt u waarom Fireworks CS4 uw leven gemakkelijker kan maken. Elk van de letters staat op een eigen laag in de filmclip. De MusicHall.png Grafisch symbool in de bibliotheek is strikt een tijdelijke aanduiding en we zullen het niet gebruiken. Als u op elke letter klikt met het Subselectiegereedschap van Flash, ziet u dat elke letter een vectorgebaseerd tekenobject is, wat betekent dat u indien nodig nog meer aanpassingen kunt doen. Wat je niet wilt doen is het verwijderen van de Bitmap 3 afbeelding in de Vuurwerk-objecten map. Het is degene met de achtergrondafbeelding.
De letters zijn belangrijk en er moeten een aantal filters op worden toegepast om het effect te creëren. Het flikkeren wordt ook gecontroleerd door ActionScript 3.0. Dit vertelt je dat de letters, in hun huidige vorm, niet werken. Ze moeten in een filmclip zitten omdat filters alleen op tekst of filmclips kunnen worden toegepast. Hier is hoe:
Selecteer de beletteringslagen, niet de map, in de map Belettering op de tijdlijn en knip ze uit.
Plak de letters op het klembord in een nieuwe filmclip genaamd Letters.
Keer terug naar de filmclip van pagina 1, verwijder de beletteringslaag, voeg een nieuwe laag toe en sleep de belettering-filmclip naar de nieuwe laag.
Klik eenmaal op de filmclip op het podium en sleep het naar zijn positie. Gebruik de pijltjestoetsen voor fijnere controle. (Afbeelding 13)
Sla het bestand op in de map waarin u de geïmporteerde afbeelding hebt opgeslagen.
Eén ding dat ik probeer in de hoofden van mijn studenten te slaan, is dat "de kunst van Flash de kunst van subtiliteit is". Besteed aandacht aan hoe de dingen in de echte wereld werken en je zult dit in actie zien. Het creëren van een neoneffect houdt veel meer in dan alleen maar een gloed op de letters slaan. Er is iets meer dan dat als het gaat om het creëren van een realistisch effect. Laten we beginnen.
Gebruik de waarden in de figuur om een afschuiningfilter aan de filmclip toe te voegen. Dit creëert de basis voor het effect door de letters een 3D-uiterlijk te geven en een beetje een highlight langs de randen toe te voegen.
Gebruik de waarden die in de figuur worden getoond om een gradientgloedfilter toe te voegen aan de filmclip ... Door de Glow X en Glow Y waarden tot 0, de neonbuis wordt meer gedefinieerd.
Gebruik nu de waarden in de figuur om een gloeifilter aan de filmclip toe te voegen ... De vorige twee stappen hebben de slang gecreëerd, deze stap voegt het licht toe. Zorg ervoor dat de kleur van de gloed - FFCC00 - overeenkomen met de kleur van de letters die zijn toegevoegd in Fireworks.
Nog een filter; gebruik de waarden in de figuur om een slagschaduwfilter aan de filmclip toe te voegen ... De kleur voor de slagschaduw is niet zwart maar #CCCCCC. Dit geeft de illusie van een beetje verlichting - wat de 2-pixelwazigheidswaarden verklaart - achter het licht.
Met de filmclip geselecteerd in het werkgebied, geeft u deze de Exemplaarnaam 'teken' in de eigenschappencontrole. Hiermee wordt nu de filmclip voor ActionScript ingesteld die het flikkeren van de TL-buizen regelt.
Het maken van de typische flikkering van een neonreclame is niet iets dat kan worden gedaan op de tijdlijn. In dit geval flikkert de gloed op een manier die een neonreclame simuleert die zich op zijn laatste benen bevindt. Volg deze stappen om het flikkereffect toe te voegen.
Voeg een nieuwe laag toe met de naam acties naar de tijdlijn van de filmclip. Vergrendel de laag.
Selecteer het eerste frame in de actielaag en selecteer Venster> Acties of druk op de F9 (pc) of Option-F9 (Mac) -sleutels om het Script-paneel te openen.
Voer de volgende code in:
import flash.filters. *; addEventListener (Event.ENTER_FRAME, flickerIt); function flickerIt (evt: Event): void var filters: Array = sign.filters; var glow: GlowFilter = filters [2]; glow.strength = Math.random () *. 5 + .35; sign.filters = filters; ;
Als je nog niet bekend bent met ActionScript, doorloop je dit codeblok.
We weten dat het Glow-filter het filter is dat wordt gebruikt om flikkeringen te geven. Hiertoe moet u eerst de klasse filters in laden. Dat * wordt een jokerteken genoemd en geeft aan dat Flash in de hele filterklasse moet worden geladen. Als u slechts één filter wilde gebruiken, zou u in plaats daarvan de naam van het filter gebruiken. In dit geval hebben we vier filters in de filmclip, dus een jokerteken is de beste manier om te gaan.
De volgende regel is hoe het flikkeren gebeurt. Laten we duidelijk iets begrijpen: ActionScript is behoorlijk dom. Het zal niets doen tenzij het iets hoort. In dit geval vertellen we ActionScript om te luisteren naar een ENTER_FRAME-gebeurtenis en wanneer deze gebeurtenis wordt gehoord om flickerIt uit te voeren. Je kunt hieruit afleiden dat de Flash-film een framelus is en, wanneer de afspeelkop in het frame komt nadat hij gedaan heeft wat gedaan moet worden, doet hij het helemaal opnieuw.
De functie is waar de magie plaatsvindt en het flikkeren wordt gemaakt.
De eerste regel grijpt de namen van alle filters die op de filmclip voor het teken zijn toegepast en plaatst deze in een lijst. Wanneer ActionScript een lijst maakt - een array genoemd - worden de namen van de filters niet gebruikt. In plaats daarvan worden ze in numerieke volgorde geplaatst, de term is geïndexeerde volgorde, volgens de volgorde waarin ze zijn toegevoegd. Als je de lijst zou kunnen zien, zouden de vier filters er als volgt uitzien: 0,1,2,3 niet Bevel, GradientGlow, Glow, DropShadow.
De volgende regel geeft de GlowFilter de variabelenaam 'gloeien' door ActionScript te vertellen om naar de lijst te gaan en het indexitem met het label te gebruiken 2 in die lijst.
Nu ActionScript weet welk filter moet worden gebruikt, maken we de flikkering door te 'spelen' met de sterkte eigendom van de GlowFilter.
De waarde voor de eigenschap strength - Math.random () *. 5 + .35- kan u als een beetje mysterieus overkomen. Dat is het echt niet. De willekeurig() methode van de Wiskunde class kiest een getal tussen 0 en 1. Wanneer dat nummer wordt gepickt, wordt het in twee gedeeld en vervolgens met .35 verhoogd. Dit betekent dat elke keer dat de afspeelkop het eerste frame binnengaat, de oranje kleur een andere sterkte heeft. Laten we aannemen dat het willekeurig gekozen getal .95 is. De berekening zou zijn:
De resulterende gloed zou een sterktewaarde van 83% hebben als we de waarde rechtstreeks in het filter zouden invoeren. Telkens wanneer de afspeelkop in het frame komt, zal de helderheid van het licht toenemen of afnemen, afhankelijk van dat willekeurige nummer.
Sluit het Script-venster en klik op de knop Scene 1 om terug te keren naar de hoofdtijdlijn.
Sleep de movielink naar pagina 1 en selecteer Wijzigen> Document. Wanneer het dialoogvenster Documenteigenschappen wordt geopend, klikt u op het keuzerondje Inhoud. Bewaar en test de film nu.
Laten we dit hele ding een beetje realistischer maken en het gezoem van een lichtreclame op de achtergrond toevoegen.
Kopieer het Buzz.mp3-bestand van de download naar dezelfde map als de .fla.
Open de filmclip van pagina 1, selecteer het eerste frame in de actielaag en open het scriptvenster.
Klik eenmaal na de eerste regel code, druk op de Return / Enter-toets en voeg het volgende codeblok toe:
Accentsconagua
var audio: Sound = new Sound (); var req: URLRequest = new URLRequest ("Buzz.mp3"); audio.load (req); audio.play (); Nogmaals, als u nog niet bekend bent met ActionScript, doorlopen we samen dit codeblok.
Het is een gegeven binnen de Flash-community dat het toevoegen van audio aan de tijdlijn een "Evil Practice" is. Dit betekent dat we het audiobestand naar de film moeten bellen met behulp van ActionScript. De eerste regel code start dit proces door een genoemd geluidsobject te maken audio. Dit object zal later worden gebruikt om het geluidsbestand daadwerkelijk af te spelen.
Nogmaals, we weten dat Flash stom is, dus we moeten het vertellen welk audiobestand gebruikt zal worden. Dit wordt bereikt door de URLRequest object met de naam req. De parameter is de naam van het bestand dat we zullen gebruiken. Zorg ervoor dat de aanhalingstekens aanwezig zijn en dat de naam exact overeenkomt met de bestandsnaam. Als je ergens anders op je site naar het audiobestand wilt gaan, zou je een absoluut adres voor het bestand invoeren.
Nu Flash weet welk bestand moet worden afgespeeld, staat het daar gewoon naar je te kijken met een domme grijns op zijn gezicht, tenzij je zegt dat het dat audiobestand moet invoeren in de Flash-speler met behulp van de laden() methode van de klasse Sound. Ten slotte moet je Flash vertellen om het geluid daadwerkelijk af te spelen.
U kunt nu de film opslaan en testen!
In deze zelfstudie hebt u de workflow tussen Fireworks CS4 en Flash CS4 onderzocht. U hebt ontdekt hoe u enkele tekengereedschappen in Fireworks kunt gebruiken en hoe lagen in Vuurwerk tot stand zijn gebracht. U hebt ook een Fireworks .png-document geïmporteerd in Flash en hebt geleerd dat Fireworks .png-documenten een filmclip toevoegen aan de Flash-bibliotheek. U hebt de Fireworks-filmclip geopend en met een paar filters en een streepje ActionScript een knipperend neonbord gemaakt met een bijbehorend neon zoemgeluid.
Bedankt voor het lezen, voel je vrij om opmerkingen en vragen hieronder achter te laten :)
