Share
In deze tutorial converteer je je tekst om het een glasachtig effect te geven, met behulp van filters in Flash. Deze techniek werkt ook op vectorafbeeldingen. We zullen dit bereiken met een vrij eenvoudige methode om meerdere lagen over elkaar heen te leggen met verschillende effecten.
Laten we eens kijken naar het uiteindelijke resultaat waar we naartoe zullen werken. Dit is een swf-bestand en de tekst hieronder is selecteerbaar, dus ga je gang, selecteer de glastekst om een glasachtige highlight te zien:
Open uw versie van Flash en open een nieuw Flash-bestand. ActionScript-versie doet er niet toe voor deze zelfstudie, omdat er geen code is. Plaats in je bestand een tekstveld op het podium. Klik hiervoor op de tekstknop (T) in het menu Tools en sleep een rechthoek op het podium zoals in de onderstaande afbeelding wordt weergegeven:
Eenmaal getekend, kunt u uw tekstkeuze in het veld invoeren en de eigenschappen ervan overeenkomstig instellen. Het glaseffect is prominenter aanwezig op grotere en krachtigere lettertypen, dus ik heb hier Elephant gekozen, maar je kunt elk lettertype kiezen dat je wilt. Klik op de knop Selecteerbaar om de tekst in de definitieve SWF te selecteren. De kleur van het lettertype maakt hier niet uit
Eventueel wilt u wellicht zien hoe het effect werkt op vectorafbeeldingen. Ik zal dus gewoon een kleine afbeelding tekenen met behulp van de eenvoudige tekengereedschappen van Flash. Houd er rekening mee dat het glaseffect geen rekening houdt met de contouren of kleuren, dus oude afbeeldingen in één kleur zijn op dit moment voldoende. Als je klaar bent met stap 1 en 2, zul je zoiets op je toneel hebben:
U kunt ook vectorafbeeldingen naar het Flash-oppervlak importeren, maar houd er rekening mee dat kleurverschillen niet worden gedetecteerd door dit effect.
Nu zullen we ons eerste symbool maken. Selecteer uw tekst en alle vectorafbeeldingen (u kunt dit doen door een rechthoek rond alles te slepen). Als alle dingen zijn geselecteerd, klik je met de rechtermuisknop en klik je op "Converteren naar symbool" zoals hieronder wordt weergegeven:
Geef je symbool een naam als je maar wilt en stel het in op Movie Clip; Ik heb het als "gtext" genoemd. Dus wanneer u op het venster klikt en het bibliotheekvenster opent, kunt u een genoemd item bekijken gtext daarin. Vanaf hier verwijs ik naar dit symbool als "gtext". Dit is een goed punt om je werk te redden.
Klik nogmaals met de rechtermuisknop op het nieuw gemaakte gentsymbool en converteer naar symbool, typ deze keer de naam in als "glas". We doen dit om een nieuwe containervideo te maken.
Nu hebben we een glassymbool, waarbinnen we een ginksymbool hebben. Beide symbolen zijn zichtbaar in de bibliotheek.
Dubbelklik nu op het glassymbool om het in de bewerkingsmodus te bekijken. Alle resterende stappen worden uitgevoerd binnen dit glassymbool.
Dubbelklik op het blauwe vierkantje naast het glassymbool in het bibliotheekpaneel (Venster> Bibliotheek). Dit opent het glassymbool in de bewerkingsmodus. We hebben een laag met de naam Laag 1 in dit venster. Voeg een nieuwe laag toe door op de knop Nieuwe laag in de linkerbenedenhoek van het tijdlijnvenster te klikken. Klik en houd de muisknop ingedrukt om de nieuwe laag te slepen en sleep deze nieuwe laag naar onder onze huidige laag 1. Hernoem de nieuwe laag naar "achtergrond" door te dubbelklikken op de naam van de laag.
Misschien wilt u Laag 1 verbergen of vergrendelen om de achtergrondlaag gemakkelijk te kunnen bewerken. Klik op de stip onder het oog / slot-pictogram in de tijdlijn om dit te doen. Selecteer nu de achtergrondlaag in de tijdlijn en klik op het gereedschap Rechthoek in het deelvenster Gereedschappen; stel de omtrek in op nul en kleur op blauw in het paneel Eigenschappen, zoals in de onderstaande afbeelding. Ik heb ook hoekafronding geselecteerd om mijn rechthoek er beter te laten uitzien.
TIP: Je kunt hier ook een afbeelding voor de achtergrond gebruiken in plaats van een gewone opvulling.
Terwijl u het glassymbool bewerkt, klikt u drie keer in het tijdlijnpaneel op de knop Nieuwe laag om drie nieuwe lagen te maken. Je hebt nu vijf lagen: de achtergrondlaag, laag 1 en drie nieuwe lagen. Hernoemen Laag 1 naar Bevel2 en de andere nieuwe lagen om schaduw, schets, bevel1, en Bevel2 zoals hieronder getoond (je kunt de lagen hernoemen door op hun naam te dubbelklikken).
Bekijk de x- en y-coördinaten in het paneel Eigenschappen gtext al geplaatst op het podium dat nu aan is Bevel2 laag op x = 75 en y = 10 voor mijn tekening.
Vergrendel vervolgens alle lagen behalve degene waar u aan werkt (door op de stip onder het slot in het tijdlijnvenster te klikken) om ervoor te zorgen dat u niet per ongeluk dingen verplaatst. Je kunt ook enkele lagen verbergen door op de stip onder het oog te klikken in het tijdlijnvenster. kiezen Bevel2 laag, open het bibliotheekpaneel en sleep gtext op het podium.
Eenmaal op het podium geplaatst, klikt u op het nieuwe gtext symbool om het te selecteren en de x- en y-positie in het paneel Eigenschappen> tabblad positie exact dezelfde te maken als in de vorige laag, die op x = 75 en y = 10 was voor mijn film.
Als u klaar bent met positionering, vergrendelt u de huidige laag zodat deze niet per ongeluk wordt gewijzigd.
Herhaal de bovenstaande twee stappen (stap 6 en stap 7) voor de resterende twee lagen, zodat aan het einde van elk van de vier lagen hetzelfde item op dezelfde coördinaten wordt geplaatst. De onderstaande afbeelding laat zien dat door de coördinaten exact in het eigenschappenvak op te geven, er geen overlappende randen zijn.
Vergrendel en verberg alle lagen (door op de stippen onder het oog en het slot in de tijdlijn te klikken) en ontgrendel en toon alleen de schaduw laag. Selecteer de gtext symbool op deze laag en open het paneel Eigenschappen. Vouw in de eigenschappen het tabblad 'filters' uit als het is geminimaliseerd. In de linkerbenedenhoek is er een knop Filter toevoegen; klik hierop en selecteer het Bevel-filter.
Pas de instellingen voor velling aan op Vervagen = 20 px, Strength = 80%, Angle = 90 °, Distance = 10px en vink het vakje aan tegen Knockout. Als u de aanpassing op een kleinere schaal wilt toepassen, met kleinere tekst, kunt u de eigenschappen Vervaging en afstand in proportie wijzigen, maar over het algemeen is Blur onder 10 px niet geschikt.
Vergrendel en verberg alle andere lagen en ontgrendel en toon alleen de omtreklaag. Selecteer de gtext symbool op deze laag, open het tabblad Filters in het paneel Eigenschappen en voeg een Glow-filter toe. Stel de eigenschappen van het gloeifilter in op Blur = 2px, Strength = 50%; zet de kleur op wit en controleer de opties Binnen en Knockout. Dit wordt in de onderstaande afbeelding getoond en u kunt ook de resulterende contour bekijken.
Vergrendel en verberg alle andere lagen en ontgrendel en toon alleen de omtreklaag. Selecteer de gtext symbool op deze laag, open het tabblad Filters in het paneel Properties en voeg nog een Bevel-filter toe. Stel de eigenschappen van het afschuiningfilter in op Blur = 2px, Hoek op 69 °, Afstand tot 1px en vink de optie Knock-out aan. Dit wordt aangetoond in de afbeelding hieronder.
Vergrendel en verberg alle andere lagen en ontgrendel en toon alleen de schets laag. Selecteer de gtext symbool op deze laag, open het tabblad Filters in het paneel Eigenschappen en voeg nog een Bevel-filter toe. Stel de eigenschappen van het afschuiningfilter in op Blur = 6px, Strength = 45%, Angle to 45 °, Distance to 2px en controleer nogmaals de Knockout-optie. Dit wordt getoond in de afbeelding hieronder.
Selecteer de gtext symboolinstantie in schaduw laag, sluit alle andere lagen zodat ze niet worden gestoord. Selecteer in het paneel Eigenschappen het tabblad Filters en voeg naast de bestaande afschuining een schaduwfilter toe. Stel blur in op 0px, sterkte op 150%, hoek op elke waarde, afhankelijk van waar je de zon wilt en de afstand (probeer tussen 10px en 20px). De instellingen en het eindresultaat zijn zichtbaar in de onderstaande afbeelding.
Onthul alle lagen en test je film in Flash, het eindresultaat zal iets zijn dat lijkt op de onderstaande film.
De film ziet er niet al te indrukwekkend uit met alleen die tekst. Laten we de tekst een beetje veranderen; ga naar Venster> Bibliotheek en dubbelklik op het pictogram naast de gtext symbool om het in het paneel Weergave te bewerken. Het is nu aan u om de items binnen dit symbool aan te passen. U kunt bijvoorbeeld nieuwe tekstvelden met verschillende lettergroottes toevoegen, meer afbeeldingen of animaties toevoegen. Ik heb een beetje gespeeld met de gtext en een paar dingen toegevoegd, waaronder verschillende lettertypen, rechthoeken, geanimeerde afbeeldingen met veranderende vorm, een dikke stippellijn en een paar afbeeldingen met een alfawaarde van 50%. Dit is wat ik op de tekentafel heb gtext symbool.
Het eindresultaat kan worden gezien door de SWF te exporteren:
We kunnen de hoeveelheid zichtbare reflectie op het glas veranderen zoals we willen. Ontgrendel de schaduw laag en sluit alle andere lagen. Selecteer de gtext op deze laag en klik op het tabblad "Kleureffect" in het paneel Eigenschappen. kiezen Helderheid in het vervolgkeuzemenu en verander de hoeveelheid in ongeveer -30; dit zal de hoeveelheid reflectie van het glasoppervlak verminderen. De volgende afbeelding toont het effect van vóór en na:
Ah, maar zonlicht is geel, niet wit. We kunnen de kleur van het reflectielicht wijzigen door de filterinstellingen voor de schaduw laag. Maak de helderheidsverandering van de vorige stap ongedaan door de stijl in Color Effect terug naar te wijzigen geen. Houd de gtext op schaduw laag geselecteerd als in die stap, selecteer vervolgens het tabblad Filter, wijzig de Markeerkleur van het schuine filter in geel en stel de Alfa in op 60%.
Om de kleur van het glas zelf te veranderen, begint u opnieuw door het Bevel-filter te selecteren in de schaduw laag zoals in de vorige stap. Deze keer in plaats van het wijzigen van de markering, wijzigt u de eigenschap Schaduw om uw kleur te selecteren. Voor het beste kleureffect, past u de Highlight- en Shadow-kleuren van dichtbij aan met een goede schaduwvariatie: met een gele highlight kan ik kiezen tussen elke tint geel, oranje, groen of zelfs rood zonder dat mijn glas er onrealistisch uitziet. Stel de alfawaarde opnieuw in zoals in de vorige stap tot bijna 50% op basis van uw kleur. Ik heb hier 50% rood gekozen.
TIP: misschien wilt u ook de schaduwkleur en achtergrond veranderen om met deze instellingen overeen te komen.
Dus we hebben nu twee symbolen in onze bibliotheek. Een daarvan is de glas symbool en andere is de gtext symbool. Het glassymbool kan worden bewerkt om de glaseigenschappen te wijzigen, terwijl het ginksymbool kan worden gewijzigd om de te verglazen inhoud te wijzigen. U kunt het glassymbool slepen en neerzetten in een willekeurige Flash-animatie om dit effect opnieuw te gebruiken en de inhoud van de tekst dienovereenkomstig te wijzigen. Kortom, je hebt een leuke en handige glascomponent bij de hand. Ik zou je aanraden om met de instellingen te spelen en lagen uit te schakelen of nieuwe lagen toe te voegen om te zien hoe je dit glas verder kunt aanpassen.
Waarom probeer je niet een JSFL-script te maken dat automatisch het Glassify-effect in één van je vectorsymbolen kan toevoegen met een enkele klik?
Accentsconagua