Share
Deze tutorial breidt zich uit over technieken uit deel 1 van de serie Illustrate en Animate a Bouncing Ball. We zullen 3D-hulpmiddelen van Illustrator gebruiken om de draaiende beweging van de stuiterende bal van Flash te verbeteren en een kijkje te nemen naar het werken tussen de twee applicaties. De betreffende stappen kunnen ook onafhankelijk van Deel 1 worden gevolgd.
Hieronder is de laatste animatie waar we naartoe zullen werken. Wil je toegang tot de volledige Vector Source-bestanden en downloadbare exemplaren van elke tutorial, inclusief deze? Sluit u aan bij VECTORTUTS PLUS voor slechts 9 / maand.
... en laten we onszelf herinneren aan de subtiel eenvoudigere animatie die we tijdens Deel 1 van deze tut hebben gemaakt ...
Hands-up, die het eerste deel van deze tut volgde Illustrate and Animate a Bouncing Ball: Deel 1 - Adobe Flash? Welnu, degenen onder jullie die dat wel deden, zullen een Flash-bestand hebben om toe te voegen - degenen die dat niet deden, maak je geen zorgen. Dit tweede deel kan ook worden gevolgd als een individuele tut, wat een even bevredigend eindresultaat oplevert.
Om te beginnen, gaan we een 3D-bal maken in Illustrator. Ten tweede animeren we het in Illustrator en ten slotte nemen we het over naar Flash voor de laatste hand. Laten we beginnen met het openen van een nieuw document in Illustrator. De bal die we gebruikten voor het eerste deel van deze tut, heeft 90 px x 90 px gemeten, dus definieer je Artboard als met dezelfde afmetingen.
Voordat we ons 3D-object maken, voegen we een patroon toe aan het palet met symbolen dat we gebruiken voor het toewijzen van de voltooide bal. Als je je herinnert uit het eerste deel van de tut, had onze bal zes afwisselend gekleurde strepen - het versieren van onze 3D-versie op dezelfde manier zal eenvoudig zijn.
Creëer zes verticale rechthoeken met gelijke afmetingen en uit elkaar geplaatste rechthoeken. Kleur ze afwisselend met rood # DF3F22 en geel # E3CB0E. Groepeer ze samen als je dat wilt en sleep de hele partij naar het palet Symbolen (Venster> Symbolen). Ken dit nieuwe symbool een naam toe zoals "ball_pattern," niet dat we andere symbolen maken waarvan je het moet onderscheiden ...
We gaan de 3D Revolve-tool gebruiken om een bal te maken. Begin met het gereedschap Ellipse en maak een cirkel van dezelfde grootte als (en Uitgelijnd met) het tekengebied. Gebruik het gereedschap Direct selecteren om het linker ankerpunt te verwijderen. Maak het af door ervoor te zorgen dat het een vulling heeft (hoewel de kleur niet relevant is, omdat we het "ball_pattern" erop in kaart brengen) maar geen streek.
Ga met dit object naar Effecten> 3D> Revolve ... Controleer voorbeeld en de standaardopties zouden het volgende resultaat moeten geven.
Geef de bal nu het patroon door op Map Art te klikken in het dialoogvenster 3D-opties. Een bol heeft maar één oppervlak om in kaart te brengen; leuk en eenvoudig. Selecteer uw "ball_pattern" in de vervolgkeuzelijst Symbool en vink Passend schalen aan.
De optie Shade Artwork is hier van bijzonder belang. Als je het aanvinkt, krijg je een geweldig effect op het oppervlak van de bal (zie afbeelding hieronder). De resulterende vectoren worden echter zo complex dat Flash het erg moeilijk vindt om ze in animatie weer te geven. Dit betekent niet dat het arceren van uw bal geen optie is. Als u ervoor kiest om dit te doen, is het mogelijk om de afbeeldingen in Flash te gebruiken door ze eerst te rasteren. Flash heeft geen probleem met het verwerken van de bitmaps die dit creëert, maar je verliest natuurlijk de flexibiliteit van het werken met paden.
Ik zal dit later laten zien, maar nu houd ik het voor de hand en verlaat ik Shade Artwork niet! Klik op OK om terug te keren naar het dialoogvenster 3D-opties en zorg ervoor dat de optie Oppervlak hier ook op Geen arcering staat.
Om het 3D-proces te voltooien (voorlopig), plaatst u uw bal in een geschikte hoek en klikt u op OK. Houd in gedachten dat we het zullen animeren rond de centrale as, zoals hieronder wordt getoond.
Kopieer en plak je 3D-bal op zijn plaats (Command + C, Command + F). De twee objecten zijn zichtbaar als afzonderlijke paden als u de laag uitvouwt.
Als de duplicaatbal is geselecteerd, raadpleegt u het palet Vormgeving (Venster> Uiterlijk). Dubbelklik op het 3D-effect om het te bewerken.
Terug in het dialoogvenster 3D-opties moet u slechts één taak uitvoeren en vervolgens op OK klikken. We moeten de bal ongeveer 120 ° draaien. Hierdoor wordt de bal naar het eerste punt gedraaid waar deze precies hetzelfde lijkt als het startpunt; het heeft weinig zin om hem een volledige 360 ° rond te draaien wanneer hij tijdens een revolutie drie keer identiek lijkt ...
Dit vereist een beetje oogwerk. Klik en sleep een van de groene randen op de positie kubus om de bal rond de centrale as te draaien. Houd de preview van je bal in de gaten en stop met slepen wanneer je ziet dat de bal voldoende is gedraaid. Het draadframe van de bal past perfect bij ons patroon; elk gekleurd segment van onze bal bestaat uit twee longitudinale segmenten van het draadframe. Dit zou het gemakkelijk genoeg moeten maken om precies te bepalen waar te stoppen met slepen.
Na het voltooien van je twee 3D-objecten ga je naar Object> Blend> Mengopties. Hier geef je de animatiestappen op tussen de twee statussen van de bal. Kies Gespecificeerde stappen en voer 18 in (dit is willekeurig, hoe meer stappen u kiest, hoe geleidelijker de animatie zal zijn).
Selecteer uw twee objecten en ga naar Object> Overvloeien> Maken. Het resultaat is volledig onopgemerkt: al uw gemengde stappen staan bovenaan elkaar ...
Als u ze in Flash wilt animeren, moeten we de stappen splitsen en op afzonderlijke lagen plaatsen. Vouw de laag uit die uw blend bevat en zorg dat de blend geselecteerd is (zoals hieronder aangetoond). Open nu het paletmenu in het palet Lagen en kies Vrijgeven voor lagen (volgorde).
Als dat is gebeurd, selecteert u alle resulterende lagen en sleept u ze uit de eerste laag waarin ze zitten. We hebben ze nodig om volledig onafhankelijk te zijn. Verwijder vervolgens de originele "Laag 1;" het is nu tenslotte leeg. Je blijft zitten met een reeks lagen, elk met een 3D-bal met een geleidelijke rotatie. De laatste en de eerste zijn natuurlijk precies hetzelfde (ze waren de twee originele staten die blended werden), dus je kunt ook een van deze twee lagen verwijderen.
Wel, dat is dat. Ik heb net uitgelegd wat ik moet doen in de titel van deze stap; Sla uw document op en sluit het. Het is klaar!
Sinds Adobe het rijk van Macromedia heeft overgenomen, is werken tussen hun applicaties eenvoudiger en gemakkelijker geworden. Importeren en exporteren tussen Illustrator en Flash is al enige tijd mogelijk, maar de resultaten kunnen soms een beetje onvoorspelbaar zijn. Het exporteren van Illustrator-lagen als SWF-filmsequenties of als afzonderlijke SWF-bestanden leverde een vrij goede compatibiliteit tussen programma's. Toen kwam CS3. Vanaf dat moment hebben we AI-bestanden rechtstreeks kunnen importeren en kunnen we het proces volledig verwerken vanuit Flash zelf.
Laten we de opties die we hebben bekijken en toepassen op deze tut. Als je een Flash-bestand hebt uit Deel 1 van deze tut of als je met de bronbestanden werkt, open je "source_1.fla;" onze originele geanimeerde bal. Anders opent u gewoon een nieuw document in Flash.
Ga naar Flash> Voorkeuren ... en kies AI File Importer. De opties zijn allemaal redelijk vanzelfsprekend; we moeten ervoor zorgen dat de inhoud van ons AI-bestand wordt geïmporteerd als paden (geen bitmaps, hoewel ik eerder al heb gezegd dat dit een optie is als de paden te complex zijn). Zoals hieronder ingesteld, kunnen onze geïmporteerde paden worden bewerkt, de inhoud van elke laag wordt geconverteerd naar afzonderlijke filmclips en alles buiten het tekengebied wordt genegeerd (we hebben alleen objecten in het tekengebied, dus dit heeft geen echt effect op ons ).
OK, laten we ons AI-bronbestand importeren. Nogmaals, als je aan een nieuw flash-bestand werkt, negeer dan gewoon mijn verwijzingen naar deel 1 van deze tut.
In "source_1.fla" (of uw eigen ingevulde FLA-bestand uit deel 1) opent u de bibliotheek (Command + L) en dubbelklikt u op "mc_ball_base." Dit was onze bal in zijn meest basale staat; deze filmclip was wat we overspannen en vervolgens op zijn beurt weerkaatste. Alles wat we met deze film doen, zal daarom ook worden gecentrifugeerd en gestuiterd. Vergrendel "Laag 1" en maak een nieuwe "geïmporteerde bal".
Ga met het eerste hoofdframe van de geselecteerde "geïmporteerde bal" -laag naar Bestand> Importeren> Importeren naar werkgebied ...
Selecteer het AI-bestand van uw systeem en klik op OK. Je krijgt de Importeer * bestand * naar Bibliotheek dialoog, hier definieert u de importopties voor uw AI-bestand en kunt u dit doen op laag-voor-laagniveau, object-voor-objectniveau.
Ten eerste zult u merken dat elk van de Illustrator-lagen een Path-object bevat. Elk pad heeft een waarschuwingssymbool dat aangeeft dat er een probleem is. Als u op Incompatibiliteitsrapport klikt, wordt bevestigd dat deze objecten niet compatibel zijn met Flash vanwege het 3D-revolveffect.
Dit zijn onze 3D-ballen en Flash kan deze niet bewerken in hun huidige staat; we hadden de 3D-effecten moeten uitbreiden om ze bewerkbaar te maken. Dit is geen probleem in ons geval. We willen ze niet bewerken, maar we willen ze misschien schalen. Negeer de optie om ze te importeren als bitmaps; ze zullen prima als schaalbare paden importeren.
Alle andere standaardinstellingen zijn hier goed voor onze behoeften; zorg er alleen voor dat lagen worden geconverteerd naar Keyframes. Klik OK.
Nadat je je AI-bestand hebt geïmporteerd, zie je een reeks hoofdframes op je laag "geïmporteerde ballen". Als u de schuifregelaar op en neer verplaatst in de tijdlijn, wordt aangegeven hoe deze frames u uw ronddraaiende bal geven. Perfect!
Voltooi het effect nu door "Laag 1" boven "geïmporteerde bal" te plaatsen en alles uit deze laag te verwijderen, behalve de streek. Klik vervolgens op het frame boven het laatste hoofdframe in uw reeks (in mijn geval frame 19) en klik op F5 om de kaders over de lengte van de animatie te verspreiden. Dit heeft de originele slag over je bal geplaatst.
Command + Enter geeft een voorbeeld van je animatie. In mijn geval heb ik er ook voor gekozen het oorspronkelijke ronddraaiende effect te vertragen door de bewegings-tween in de 'mc_ball-film' te verlengen. Je ziet de bal 360 ° met de klok mee ronddraaien en ook 360 ° rond de centrale as; een effect onmogelijk (zonder enorme concentratie en een paar maanden tekenen) door alleen Flash te gebruiken.
Ben je benieuwd hoe het eruit zou hebben gezien als we naar de beschaduwde bal waren gegaan? Herhaal de vorige stappen die ervoor hebben gekozen om je 3D-bal te schaduwen in Illustrator:
U zult opmerken dat ik ervoor gekozen heb om de keyframes niet in de draaiende beweging te importeren; de bal draait niet meer met de klok mee. Als ik dit had gedaan, zou de verlichting ook draaien (en dat zou het effect verpesten). Het is een redelijk goed resultaat, vind je niet? Nogmaals, het probleem met bitmaps is dat ze niet goed schalen of roteren in Flash. Zoals je misschien hebt gezien, wordt het punt waarop de bal vlakker wordt als deze de grond raakt, enigszins gepixeld weergegeven - een probleemvector werkt niet.
Hier eindigt het tweede deel van deze tweedelige tut! Deze laatste stappen hebben u hopelijk inzicht gegeven in: het scheiden van Illustrator-overvloei in lagen, het importeren van AI-bestanden in Flash en mogelijkheden en limieten met betrekking tot vectoren en bitmaps. Zoals altijd, ik hoop dat je deze hebt genoten!
Abonneer u op de RSS-feed van VECTORTUTS om op de hoogte te blijven van de nieuwste vectorhandleidingen en -artikelen.
Accentsconagua