Share
Tijdens deze basix-zelfstudie leren we hoe we de definitieve functies aan ons bestaande Flash Catalyst-project kunnen toevoegen. We kijken naar een soepele interactie tussen pagina's, extra zweefacties, geluiden en video. Net als bij de vorige tutorial is geen code vereist!
Notitie: u kunt uw Flash Catalyst Project op elk gewenst moment opslaan en vervolgens doorgaan wanneer het voor u comfortabel is. Ga hiervoor naar Bestand> Opslaan als ... geef het project een naam en sla het op in een geschikte map.
Bekijk het uiteindelijke resultaat dat we willen bereiken. Door de basisprincipes van Catalyst te bespreken, leren we hoe u vloeiende paginaovergangen kunt maken, 3D-animatie kunt toepassen, geluid aan onze knoppen kunt toevoegen en ook video's kunt toevoegen.
Open Adobe Flash Catalyst. Selecteer Open project> Gedownload bestand in het startvenster. Selecteer Galaxy2.fxp, die u kunt downloaden via de brondownload bovenaan de pagina.
Open het Tijdlijnpaneel door te dubbelklikken op de naam. We worden gepresenteerd met alle mogelijke interacties tussen de pagina's:
Als u interacties wilt zien die betrekking hebben op een bepaalde pagina, schrijft u de naam ervan in het zoekvenster:
U kunt dit ook doen met het vervolgkeuzemenu:
Laten we nu wat dingen bespreken met betrekking tot de tijdlijn zelf. Hier hebben we 5 belangrijke punten:
Ok, nu ben je bekend met de tijdlijn, zodat we wat animatie aan onze pagina's kunnen toevoegen. Laten we beginnen met de overgang tussen de hoofdpagina en de Photoshop-pagina. In het Tijdlijnvenster met de Photoshop-laag geselecteerd (als deze optie is geselecteerd, ziet u de blauwe vulling), klikt u op de pijl bij de knop Gladde overgang:
Hier zien we het menu waarmee we bepaalde parameters kunnen instellen. "Duur" is de duur van de animatie; Ik heb besloten om het op 1 seconde in te stellen en voor Timing heb ik de optie "Smart Smoothing" gebruikt. We hebben "Simultaan" niet nodig, omdat we alleen animatie op één laag toepassen. En natuurlijk hoeven we niets te Overschrijven, dus laat het vinkje leeg.
We hebben een vloeiende overgang toegepast op een van de pagina's. Laten we naar de foto kijken en zien wat er is veranderd:
Allereerst kun je een voorbeeld van het effect bekijken dat we hebben ingesteld met de knop Afspelen. Hier kun je zien dat we nu een blauwe, ononderbroken lijn hebben met de woorden "Fade In" binnenin. Dit betekent dat we de animatie hebben toegepast op onze Photoshop-laag. Klik op die blauwe ononderbroken lijn en onderzoek het eigenschappenvenster:
We zien dat er Fade bovenaan staat; dit geeft de naam van het toegepaste effect aan. We hebben enkele extra opties: de dekking is ingesteld op Auto, maar als je het zelf wilt aanpassen, schakel je het vinkje uit en stel je je eigen parameters in in "Van" en "Naar". Je kunt ook zien dat we de duur kunnen wijzigen en zelfs de vertragingstijd voor het effect kunnen instellen. Verlichten is een andere belangrijke optie, vooral als u bekend bent met Flash Professional. Ik laat het standaard staan, maar voel je vrij om ermee te experimenteren.
Het volgende dat we moeten doen, is de animatie toepassen op de knop Afsluiten. Selecteer de laag "Knop" in het deelvenster Tijdlijnen (onthoud dat de hoofd-> Photoshop-overgang moet worden geselecteerd in het linkerondervenster van het deelvenster Tijdlijnen) en klik opnieuw op de pijl bij de knop Gladde overgang. Stel in het dialoogvenster de duur in op 0,5 seconden:
Laten we de tijd van animatie scheiden. Selecteer de laag "Afsluitknop". We hebben twee methoden om dit te doen.
Ga naar het Properties-paneel en stel de Vertraging voor de Exit-knop in op 1 sec:
U kunt ook de groene lijn selecteren op de laag Laag afsluiten zodat deze effen blauw wordt en vervolgens klikken en naar het segment in de tijdlijn slepen dat bij ons past (in dit geval is dit 1 sec):
Er is nog een manier om de lengte van de animatie aan te passen. Het is heel belangrijk en heel gemakkelijk te gebruiken. Als u de duur van de animatie wilt wijzigen met de laag geselecteerd, beweegt u de muis over de kleine pijl aan het einde van het animatiesegment, houdt u de linkermuisknop ingedrukt en sleept u in de gewenste richting (rechts - verlengen, links - inkorten):
Laten we naar een andere pagina gaan; de Flash-pagina. Selecteer in het deelvenster "Tijdlijnen" Hoofd> Flash-overgang. Nogmaals, stel voor beide lagen hetzelfde Fade In-effect in als in stap 5-7:
Laten we wat meer interactie toevoegen. Klik in het venster "Tijdlijnen" met de geselecteerde "Flash-laag" op het midden onderaan op de knop "+ Actie toevoegen". Selecteer Roteren in het vervolgkeuzemenu:
Nu hebben we drie elementen uit onze Flash-laag geselecteerd en kunt u zien dat ze allemaal het Rotate-effect hebben toegepast:
Ok, kies een van de Rotate-effecten (het Rotate-effect waarop u hebt geklikt, wordt effen blauw) in het Tijdlijnvenster en ga naar het venster Eigenschappen. Zodra de eerste optie is ingesteld op een specifieke hoek en de hoek zelf is ingesteld op 360 °, wordt de rotatie voltooid. Duur 0,5 sec zou OK moeten zijn, maar je bent vrij om te experimenteren - mijn doel is alleen om je te laten zien wat je kunt doen :)
Nadat u het op een van de elementen hebt toegepast, stelt u dezelfde instellingen in op de twee resterende, zodat ze alle drie 360 ° roteren en dezelfde duur hebben. Daarna kunt u een voorbeeld van de animatie bekijken. We hebben nu Rotatie- en Fade-in-effecten voor deze Flash-pagina.
Laten we verder gaan en effecten toevoegen aan de Dreamweaver-pagina. Selecteer Hoofd> Dreamweaver-overgang in het tijdlijnvenster. Herhaal nogmaals stap 5-7 op de pagina zodat er fade-in effect is:
Met de Dreamweaver-laag geselecteerd, klikt u op de knop "+ Actie toevoegen" en selecteert u "3D roteren" in het vervolgkeuzemenu.
Je zou nu moeten kijken naar iets soortgelijks (Rotate 3D effect wordt toegepast op alle drie de elementen op de tijdlijn):
Laten we ze aanpassen. Selecteer een van de 3D-animaties roteren en ga naar het eigenschappenvenster. Daar hebben we een aantal opties. Naast Duration, Delay en Easing hebben we drie soorten rotatie. Dus van links naar rechts: eerst - roteert het object rond de X-as, ten tweede - roteert het object rond de Y-as, en de derde - het is een eenvoudige rotatie die we hadden in de Flash-pagina. En voor elke soort rotatie kunnen we de starthoek en de uiteindelijke waarde instellen.
Voor DreamweaverRect gebruik ik de rotatie van 0 tot 360 ° rond de Y-as:
Voor DreamweaverIcon en Text gebruik ik de rotatie van 0 tot 360 ° rond de X-as met 0,5 Delay:
U zou dus de volgende afbeelding moeten hebben en uw animatie kunnen testen met de knop Afspelen:
Het volgende dat we moeten bereiken, is video instellen. We zullen video toevoegen aan de Flash-pagina omdat de video zelf over Flash Catalyst en Flash Player gaat. Kies hiervoor onze Flash-pagina. Ga vervolgens naar Bestand> Importeren> Video / Geluidsbestand. Kies het gedownloade Adobe.flv-bestand uit de Bron-zip bovenaan de zelfstudie.
Het volgende dat we nodig hebben is om het bestand toe te wijzen aan de Flash-groep. Selecteer eenvoudig de videospeler in het Lagenpaneel, houd de linkermuisknop ingedrukt en sleep die videospeler naar de Flash-groepslaag totdat deze uitgevouwen is en plaats hem erin. Als u dit hebt gedaan, ziet u het volgende:
Laten we nu het Flash-pictogram en de tekst verbergen, zodat er alleen video is. Klik hiertoe op de oogpictogrammen in deze lagen zodat ze verdwijnen (je kunt deze lagen ook verwijderen, het is jouw keuze - selecteer eenvoudig deze lagen en klik op het prullenbakpictogram rechtsonder in het lagenpaneel).
Het volgende dat u moet doen, is het formaat van onze video aanpassen zodat deze in de rechthoek past. Selecteer de laag "Videospeler" en beweeg de muis over de linkerbovenhoek van de video, zodat u twee pijlen in verschillende richtingen kunt zien (de muis moet zich boven het witte vierkant bevinden). Houd de linkermuisknop ingedrukt en begin te slepen. Je zult ook opmerken dat er andere witte vierkanten en het blauwe vierkant in het midden zijn. Sleep ze op dezelfde manier zodat u de video centraal plaatst (als u de video zelf wilt slepen, niet de hoeken, moet u de muis in het midden van de video plaatsen en slepen).
Laten we naar het eigenschappenvenster gaan en bekijken wat ons te bieden heeft.
Eerst en vooral zien we de positie van de video op het podium, de breedte en hoogte. Als je ze wilt aanpassen zoals ik de volgende opties heb ingesteld: X - 179, Y - 89, Breedte (W) - 281, Hoogte (H) - 154. Dan zul je merken dat we al de videobedieningen hebben - de Properties Panel biedt ons twee vooraf gemaakte videobesturingen (Wireframe en Standard), maar we zullen onze eigen knoppen toevoegen om de video te besturen, dus zet deze op Geen.
Voor de schaalmodus heb ik er ook voor gekozen om "Geen" in te stellen. Naast Geen kunnen we Schaalmodus instellen op Uitrekken, Letterbox of Zoom - hier kunt u experimenteren en het beste instellen dat bij u past. Als u een voorbeeld wilt bekijken van hoe het eruit zal zien, vinkt u de optie "Automatisch afspelen" aan (vergeet niet dat wanneer u klaar bent met experimenteren, de optie Automatisch afspelen uitschakelt).
Naast Auto Play hebben we de "Loop" -optie en "Muted". We hoeven Video niet opnieuw te laten lopen, dus laat het uitgevinkt en we willen ook geluid horen, zodat de optie Gedempt ook moet worden uitgeschakeld.
Laten we nu naar de submenu's Component en Uiterlijk gaan. Zorg ervoor dat de optie "Accepteert muisgebeurtenis" is aangevinkt (als het niet is aangevinkt, kunnen we onze eigen knoppen niet instellen op de video). Met de knop "Tooltip" kunnen we de beschrijving van de video schrijven en wanneer de gebruiker het bekijkt, ziet hij of zij de beschrijving.
"Volume", denk ik, is duidelijk., /
In de optie Uiterlijk kunt u een bepaalde "Mengmodus" instellen en u kunt ook de optie "Handcursor" aanvinken, zodat wanneer de gebruiker boven de video zweeft, de muispijl verandert in de handcursor.
Nu is het tijd om de bedieningsknoppen in te stellen op onze video. Ga met de geselecteerde Flash-laaggroep naar Bestand> Importeren> Afbeelding en importeer Play.png. Doe hetzelfde voor Stop.png. Zet ze om in knoppen en plaats ze onder de video (het is altijd een goed gebruik om ze te hernoemen). Je kunt ook een aantal effecten op hen toepassen, maar dat is niet nodig - ik heb de laagdekking in up-up gezet zodat ze 75 worden (als je niet weet hoe je dit moet doen, zorg dan dat je mijn eerste tutorial over Flash Catalyst ziet, waar we bespreek dergelijke dingen).
... en de situatie in het lagenpaneel zou als volgt moeten zijn:
Nu voor het gemakkelijkste deel tot nu toe - ga naar Interactions Panel, selecteer de Play-knop en kies in het Interactions Panel de volgende opties: First - On Click, second - Play Video, third - selecteer onze "Adobe1.flv" -video, vierde - alleen wanneer in Flash-pagina:
Doe hetzelfde voor de knop Stoppen, maar in plaats van "Video afspelen" stelt u dit in op "Video stoppen".
Nu we de bedieningselementen op onze video hebben ingesteld, testen we deze - druk op Ctrl + Enter of ga naar het bestand> Project uitvoeren.
Het laatste wat we moeten doen, is om geluid toe te passen op onze knoppen. Laten we eerst het geluid importeren. Ga naar Bestand> Importeren> Video / Geluidsbestand en navigeer naar de geïnstalleerde Flash-map van Flash Catalyst. Daar selecteert u "Geluidseffecten / Flits Beep.mp3". Natuurlijk kunnen we onze eigen geluiden gebruiken, maar ik wilde je laten zien dat Flash Catalyst een vooraf geïnstalleerd pakket met geluiden heeft. Kies degene die bij u past. Nadat het is geïmporteerd, kunt u een voorbeeld bekijken - ga naar het Bibliotheekvenster en navigeer onderaan naar de submap Media en selecteer "Flash Beep.mp3" - u zult zien dat in het bovenste venster de knop Afspelen is verschenen. Als je erop klikt, hoor je het geluid van de knop:
Notitie: Hier vindt u ook al onze grafische bestanden, media en componenten.
Laten we ons project finaliseren en geluid toevoegen aan de knoppen tijdens hun overtoestanden. Om dit te doen, selecteert u een van de knoppen in het "Lagen" paneel, ga naar de over-status. Klik in het deelvenster "Tijdlijnen" met het pictogram in het werkgebied op de knop "+ Actie toevoegen" en selecteer Geluidseffect:
Selecteer "Flash Beep" in het dialoogvenster en klik op OK:
De situatie op de tijdlijn zou als volgt moeten zijn:
Herhaal deze stap naar de Flash- en Photoshop-pictogrammen en je bent klaar. Start het project!
Nu weet u niet alleen hoe u uw illustraties omzet in componenten, maar ook hoe u vloeiende interactie tussen Pages kunt toevoegen, verschillende animatievarianten kunt toepassen, video en geluid in uw projecten kunt gebruiken en besturen. Flash Catalyst is een geweldige applicatie en nu kun je gemakkelijk zonder een enkele regel code te schrijven je kunstwerk tot leven brengen.
Ik hoop dat je het leuk vond om dit project te volgen en te leren hoe je Flash Catalyst kunt gebruiken. Oefen en je zult geweldige resultaten behalen! Bedankt ook voor het lezen van mijn tutorial :)
Accentsconagua