Share
In deze zelfstudie gebruiken we de nieuwe functies van de Deco-tool van Flash CS5 om een geanimeerde cartoonachtergrond te creëren.
Adobe Flash in Creative Suite 5 is voorzien van een aantal fantastische updates en verbeteringen. Adobe Flash CS5 bevat gloednieuwe functies voor zowel ontwerpers als ontwikkelaars, zoals het nieuwe deelvenster Codefragmenten, integratie met Flash Builder en de nieuwe tool Spring for Bones.
Een van de nieuwe functies in Flash CS5 is de Deco-tekentool (hoewel de Deco-tool eigenlijk geen nieuwe functie is omdat deze voor het eerst is toegevoegd aan Flash CS4.) Hiermee kunt u tekeningen en animaties maken op basis van dynamische vormen en kleuren . Het is een van de slimme hulpmiddelen die tijd en moeite kan besparen door tekenobjecten en -animaties te maken met behulp van symbolen en objecten die gereed zijn, of door aangepaste symbolen uit de bibliotheek te laden.
In Adobe Flash CS5 is de Deco-tool verbeterd met nieuwe vormen en functies zoals we in deze tut zullen zien. Het voorbeeld dat we behandelen, moet de Deco-tool grondig begrijpen door een geanimeerde cartoonachtergrond te creëren met de Deco-gereedschappen. Vrijwel al het werk in dit voorbeeld wordt gedaan met behulp van de Deco-tool en zijn functies. Het doel van dit voorbeeld is echter om te laten zien hoe de Deco-tool te gebruiken en de functies ervan te begrijpen door het creëren van geanimeerde Flash-achtergronden of andere ontwerpen en het gebruiken van objecten uit de Deco-lijst met objecten..
Deze tut zal laten zien hoeveel tijd en moeite kan worden bespaard door gebruik te maken van de Deco-tool. Hoewel het onderstaande voorbeeld van een cartoonachtergrond uren kost om te maken met behulp van de tekengereedschappen in Flash, samen met wat tekenvaardigheden, kunnen we dit voorbeeld in minder dan een uur maken met de Deco-tool, en we hebben geen tekenvaardigheden nodig.
Je moet basiskennis hebben van Flash-tools, omdat ik rechtstreeks in de Deco-tool ga graven, en laat zien hoe je het kunt aanpassen om de achtergrond en de animatie te maken. Laten we echter beginnen met stap 1 ...
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
We beginnen met het maken van het Flash-document en bereiden het voor voordat we beginnen met het toevoegen van de Deco-toolobjecten.
Maak een nieuw Flash-document met de afmetingen 600 px x 450 px. Voeg een rechthoek toe met dezelfde afmetingen als het document en vul de rechthoek met een lineaire opvulling (zoals de afbeelding hieronder) om het effect van een donkere hemel te creëren.
Nu maken we de achtergrond van de weg, maken we met het gereedschap Lijn de contourvorm van de weg en vullen deze met grijze kleuren om het echte asfalt te simuleren. Creëer dan wolken met behulp van de Oval tool en het eindresultaat ziet er als volgt uit:
Nu gaan we de Deco-tool gebruiken om de gebouwen te maken die langs de wegstoep gaan die we hierboven hebben gemaakt. U kunt het wolkenkrabbertype instellen dat u wilt gebruiken of willekeurige gebouwen gebruiken. U kunt ook de grootte van de gebouwen instellen.
Selecteer de Deco-tool of druk op de toets U op het toetsenbord. Selecteer in het deelvenster Eigenschappen de optie "Penseel opbouwen" in de vervolgkeuzelijst Tekeneffect. Ga vervolgens naar de geavanceerde opties en kies "Willekeurig bouwen" en stel de grootte in op 2.
Klik op de weg, sleep naar de bovenkant en laat de muis los om het eerste gebouw te maken. Herhaal de bovenstaande stap om andere gebouwen op de weg te maken zoals te zien in de onderstaande afbeelding
In de volgende stappen zullen we de boompenseel gebruiken om bomen op de stoep te maken en de bloempenseel gebruiken om bloemrijke takken over sommige gebouwen te maken. Met deze borstel kunt u de grootte van de boom en de takken, blad en bloem / fruitkleuren instellen.
Maak een nieuwe laag over de laag gebouwen. Selecteer de Deco-tool. Kies in het eigenschappenvenster Boompenseel in het vervolgkeuzemenu en selecteer in de optie Geavanceerd Aspenstructuur.
Klik op de stoep tussen gebouwen om de bomen te maken. Zorg ervoor dat je een paar pixels sleept om kleine bomen te maken. Hoe langer je sleept, hoe groter de boommaat wordt. Het uiteindelijke effect na het toevoegen van de bomen, zou moeten zijn zoals hieronder:
Selecteer nu het bloempenseel en kies vervolgens bij 'Geavanceerd' de optie Poinsettia. Stel de grootte van de bloem en het blad in op 50% en controleer of het selectievakje Takken is aangevinkt
Sleep het scherm omhoog om takken van bloemen te maken. Ze moeten groot zijn om ze als een tak weer te geven. Als de resulterende tak te groot is, kunt u deze selecteren en de grootte ervan verkleinen. Plaats vervolgens de verkleinde bloementak op de gebouwen zoals te zien in de onderstaande figuur:
De volgende stappen leggen uit hoe je geanimeerde vaten met vuur kunt maken. We zullen ook de Vuuranimatieborstel gebruiken waarmee je geanimeerd vectorbrand kunt maken. U kunt de grootte van het vuur, de snelheid en de frameduur instellen. Bovendien kunt u de vlamkleur en vonk instellen.
Maak een nieuw symbool door naar Invoegen> Nieuw symbool te gaan of gebruik de sneltoets Ctrl + F8 (Command + F8 in Mac) en stel het in als filmclip.
Maak in de actieve laag een cirkel om de bovenkant van het vat weer te geven en een ander om de onderkant van het vat te maken. Sleep twee lijnen ertussen en voltooi de vulling van het vat met tussenliggende lijnen om er als volgt uit te zien:
Maak een nieuwe laag om de vuuranimatie vast te houden. Selecteer de Deco-tool of druk op U op het toetsenbord, kies Fire Animation in de vervolgkeuzelijst in het paneel Properties en stel de fire-animatie in op 50 frames.
Nu zullen we de grootte en de positie van het vuur veranderen om het te laten lijken alsof er vlammen uit het vat opstijgen:
Ga terug naar het hoofdpodium en voeg de filmclip van het vuurvat toe op het podium naast de gebouwen zoals te zien in de onderstaande afbeelding. Je kunt de film testen door op Ctrl + Enter (Command + Enter in Mac) te drukken
Hoewel de Deco-tool niet alle mogelijke penselen of vormen biedt, kunt u deze op basis van uw behoeften aanpassen met behulp van de symbolen of de kleuren die u wilt weergeven. Nu zullen we het Particle-systeem gebruiken, waarmee je vloeiende animaties kunt maken, zoals vallende sneeuw, vuurwerk en andere effecten die afhankelijk zijn van kleine deeltjes die uit een bron exploderen.
Deze borstel is gebaseerd op twee deeltjes die standaardsymbolen kunnen zijn of u kunt symbolen uit de bibliotheek gebruiken. U kunt ook andere opties instellen, zoals de lengte van de animatie, snelheid per frame en andere opties, zoals we hieronder zullen zien:
Maak een nieuw symbool met Invoegen> Nieuw symbool of gebruik de sneltoets Ctrl + F8 (Command + F8 in Mac) en stel het in als een filmclip. Ga terug naar het werkgebied en sleep het nieuw gecreëerde lege symbool van de bibliotheek naar het werkgebied, dubbelklik vervolgens op het symbool om de bewerkingsmodus te openen
Selecteer de Deco-tool of klik op de U-toets op het toetsenbord en kies Particle System in de vervolgkeuzelijst Drawing Effect in het paneel Properties. Selecteer zowel Deeltje 1 en Deeltje 2, stel hun kleur in op wit om de sneeuw te laten vallen en gebruik de standaardvorm. Stel de andere waarden als volgt in:
Klik nu op de bovenkant van het werkgebied om het particle-systeem van de bovenkant van het podium naar beneden te laten vallen. U zult merken dat de deeltjesanimatie wordt gegenereerd en dat de frames worden gemaakt.
De sneeuwanimatie begint klein en wordt groter tot het einde van de animatie. Dit (zoals bij het vuur) creëert een ongewenste snede in de looping-animatie. Om dit op te lossen, kunnen we opnieuw de startframes voor de beginnende sneeuwdeeltjes verwijderen. Selecteer het frame tot het punt waar de sneeuwval het hele podium bedekt. In dit voorbeeld selecteren we de eerste 40 frames. Klik met de rechtermuisknop en kies Frames verwijderen of druk op Shift + F5.
Als u merkt dat de animatie snel beweegt, kunt u na elk hoofdframe een extra frame toevoegen door het hoofdframe te selecteren en op F5 te drukken.
Laten we wat bliksemeffecten toevoegen met de Lightning Brush. Deze bliksem moet animeren en willekeurig verschijnen. Je kunt heel veel opties instellen met dit penseel, zoals de kleur van de verlichting, de schaal, balkbreedte en complexiteit. U kunt ook kiezen of deze al dan niet geanimeerd moet zijn.
Maak een nieuw filmclipsymbool en voeg het toe aan het podium achter de gebouwenlaag. Druk in het filmclipsymbool op F7 om een leeg frame aan het begin van de filmclip te maken en ga naar frame 20.
Selecteer de Deco-tool en kies Verlichtingspenseel in het venster Eigenschappen. Houd de instellingen hetzelfde, verander de kleur naar wit en vink het selectievakje Animatie aan.
Wijs met de muisaanwijzer naar de linkerbovenhoek van het werkgebied, houd de muisknop ingedrukt totdat de bliksem de gewenste complexiteit bereikt en laat de muis los. Druk na de animatie op F7 om een leeg kader erna toe te voegen.
Ga naar frame 70, herhaal de bovenstaande stappen om meer bliksem op de rechterhand van het podium te creëren met verschillende complexiteit en druk op F7 na de animatie om de bliksem uit het podium te verwijderen.
U kunt de film testen door op Ctrl + Enter (Command + Enter in Mac) te klikken of Bestand> Publiceren kiezen om de film als SWF- en HTML-bestanden te exporteren.
Over het algemeen genereren de bestanden die de Deco-tool gebruiken grote SWF's omdat de Deco-tool de penselen en de animatie genereert als niet-gegroepeerde vormen en beeld-per-frame animaties. Deze twee methoden verhogen de totale grootte van het bestand. Het is echter het beste om het bestand te optimaliseren na het bereiken van de gewenste resultaten. Er zijn enkele tips om de bestandsgrootte te verkleinen, zoals hieronder:
In het bovenstaande voorbeeld hebben we geleerd om de Deco-tool te gebruiken om een geanimeerde cartoonachtergrond te maken. Dit bespaart tijd en vereist geen speciale cartoon- of tekenvaardigheden. U kunt de rest van de penselen die beschikbaar zijn in de Deco-tekengereedschappen bekijken, zien hoe u ze kunt gebruiken en de verschillende opties die bij elke tekening horen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Accentsconagua