Share
Dit is een Basix-zelfstudie waarin we ons eerste project in Flash Catalyst uit een vooraf gemaakt PSD-bestand zullen bouwen. We zullen de basisbeginselen van Catalyst behandelen: kunst omzetten in componenten, enkele effecten creëren en deze componenten in leven houden - geen code vereist!
In deze zelfstudie leert u hoe u met illustraties in Flash Catalyst omgaat en het tot leven brengt.
In het tweede deel van de tut, nadat je bekend bent geraakt met het programma, zullen we wat meer gecompliceerde dingen maken en meer interactiviteit toevoegen.
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 een naam aan het project en bewaar het waar u maar wilt.
Dit is het eindresultaat dat we zullen bereiken. Door de basisprincipes van het werken met een van de nieuwste producten van Adobe te leren, zullen we onze illustraties omzetten in componenten, een aantal gloedeffecten maken, pictogrammen opgeven en overgangen naar pagina's maken. We zullen ook een Adobe-pictogram maken als een knop die leidt naar een opgegeven URL: http://active.tutsplus.com
Dit lijkt een extreem eenvoudig voorbeeld te zijn. Wat belangrijk is, is de manier waarop we de interactiviteit bereiken. Het hele proces is wijs en klik, er is geen enkele regel codering bij betrokken.
Open Adobe Flash Catalyst en klik vervolgens in het startvenster op "Nieuw project maken vanuit ontwerpbestand"> "Van Adobe Photoshop PSD-bestand ...".
kiezen Galaxy.PSD (je kunt dit krijgen via de Source-download bovenaan de tutorial). Zorg ervoor dat de optie "Niet-zichtbare lagen importeren" is aangevinkt en druk op OK.
Allereerst moeten we de zogenaamde "Staten" toewijzen aan ons project. Staten (ook wel "pagina's" genoemd) vertegenwoordigen de wijzigingen die zullen optreden nadat gebruikers bepaalde acties uitvoeren (bijvoorbeeld wanneer hij op een knop drukt).
In ons project is het doel het volgende: nadat de gebruiker op een van de pictogrammen klikt (Flash, Photoshop of Dreamweaver), verschijnt een rechthoek met wat informatie over het product. Omdat we drie pictogrammen hebben, zouden we drie extra staten (pagina's) moeten toevoegen. Om dit te doen, druk je driemaal op "Dubbele staat" in het paneel Pagina's / Staten. Hiermee worden drie exemplaren van onze hoofdpagina gemaakt, waarin we enkele wijzigingen aanbrengen.
Het is nu verstandig om de namen van de staten in te stellen. Dubbelklik op de naam van elke staat en wijzig deze in iets dat van betekenis is. Ik heb de volgende namen gekozen, beginnend met de eerste status: Hoofd, Photoshop, Flash, Dreamweaver. Ik raad u aan om deze staten dezelfde namen te geven - dit zal u helpen de tutorial te volgen en verwarring te voorkomen.
Notitie: Het is erg belangrijk om uw project gestructureerd te houden en betekenisvolle namen toe te wijzen aan uw componenten. Als u dit doet, kunt u vinden wat u nodig heeft en beslissen waar u toekomstige activa wilt plaatsen.
Dus we hebben de staten toegewezen voor ons project. Laten we nu een paar knoppen maken. Om dit te doen, kiest u de Flash-groep van lagen. Het HUD-paneel zou moeten verschijnen (zo niet, druk dan op F7). Tussen haakjes ziet u "2 items", waaruit blijkt dat twee items zijn geselecteerd. Klik nu Artwork naar component converteren> Kies component en kies in het menu Knop en klik erop. Dit maakt van onze groep lagen een knop. Doe hetzelfde met Photoshop- en Dreamweaver-groepen.
Nadat je dit in het Layer-paneel en in het HUD-paneel hebt gedaan, zou dit er zo uit moeten zien (let op de knop "Knop" in het HUD-paneel en in het lagenpaneel worden onze groepen omgezet in de lagen met de naam Knop):
Het volgende dat we zouden moeten doen, is het toewijzen van toestanden aan onze knoppen. Als u bekend bent met Flash Professional, weet u dat knoppen bestaan uit vier statussen - hetzelfde geldt hier. In ons project zijn we geïnteresseerd in de Over- en Down Staten.
Laat me de betekenissen van alle staten verduidelijken voor degenen die er niet vertrouwd mee zijn.
Laten we beginnen met de status Over van de Photoshop-knop - klik in het HUD-paneel op "Over-status". Trek je aandacht naar het paneel Pages / States, waar we vooralsnog slechts vier staten hebben (omhoog, over, omlaag, uitgeschakeld). Je kunt ook zien dat alleen onze knop volledig zichtbaar is en dat de andere illustratie op de achtergrond is vervaagd.
Bekijk ook ons Lagenpaneel waar u de Photoshop-groep kunt zien:
Vouw de Photoshop-groep uit. Selecteer de PhotoshopIcon-laag in het lagenpaneel en ga naar Eigenschappenvenster> Filters> Filter toevoegen> Gloeien. Kies de gewenste kleur (ik heb de kleur van het pictogram gebruikt - # 179AFF), stel Vervaging in op 16 en Sterkte op 1.
Notitie: Vergeet niet dat dit alles wordt gedaan in Over-status in het paneel Pagina's / Staten.
Kies de rechthoeklaag in het lagenpaneel. Kijk naar de scène en u zult zien dat het object is geselecteerd, maar het bevindt zich achter het PhotoshopIcon. Breid eenvoudig de rechthoek uit door de muis naar de rechterkant van de rechthoek te brengen, plaats de pijl in het midden tussen de bovenste en onderste hoek. Verleng het zodat we de ruimte hebben om het label "Photoshop" te schrijven.
Dus we hebben de rechthoek verlengd. Neem nu het tekstgereedschap (sneltoets T) en schrijf boven op de rechthoek het woord "Photoshop". In het eigenschappenvenster van het tekstgereedschap heb ik de volgende eigenschappen gekozen (u kunt hetzelfde kiezen):
Voor nu zou je iets moeten hebben dat er zo uitziet (ik heb de lagen gedeselecteerd):
OK, we hebben de Over-status ingesteld voor de Photoshop-knop - u kunt uw project testen met de sneltoets Ctrl + Enter of naar Bestand> Project uitvoeren. Als je de tutorial hebt gevolgd en alles goed hebt gedaan, zou het Photoshop-pictogram moeten gloeien en zou de tekst met rechthoek moeten verschijnen als je met je muis over de knop beweegt.
Terug in ons project kunt u naar de hoofdscène gaan door eenvoudig tweemaal op de lege ruimte te klikken of op Esc op het toetsenbord te drukken. Je kunt ook op de broodkruimellinks klikken in de linkerbovenhoek van de scène die je ziet Galaxy / PhotoshopButton.
Herhaal stap 7 tot 9 met de knoppen Flash en Dreamweaver. Merk op dat je in je Glow-effecten het beste de kleuren van de pictogrammen kunt gebruiken.
Deze stap is optioneel. Ik wil graag wat licht toevoegen wanneer een gebruiker op een van de knoppen klikt. Om dit te doen, selecteren we een van de knoppen in het Lagenpaneel en kiezen dan Omlaagstatus in het HUD-paneel. Ga vervolgens in het lagenpaneel naar de Dreamweaver-groep (of welke groep u ook als eerste wilt aanpakken), selecteer de laag DreamweaverIcon. Eenmaal daar, ga naar het eigenschappenvenster, kies Filters> Filter toevoegen> Gloeien en selecteer de gewenste voorkeuren (ik heb donkergrijs gebruikt- # 333333). Herhaal deze stap voor de andere groepen.
Tijdens deze stap zullen we de AdobeIcon-laag in een knop converteren en handcursors toewijzen aan onze pictogrammen. Selecteer eerst de AdobeIcon-laag. Ga naar het HUD-venster en klik op de knop Choose Component>. Nadat u klaar bent, selecteert u de nieuwe knop, gaat u naar Uiterlijk en vinkt u het veld "Handcursor" aan. Doe dit voor alle andere knoppen (Photoshop, Flash en Dreamweaver).
Als u uw project test, zult u merken dat de handcursor verschijnt wanneer we met de muis over de pictogrammen gaan. We hebben onze gebruikers geïllustreerd dat deze pictogrammen knoppen zijn. De volgende stap is om deze optie toe te wijzen aan andere pagina's. Het kan heel gemakkelijk worden gedaan - om dit te doen, selecteert u eenvoudig een van de pictogrammen, gaat u naar het HUD-paneel en kiest u eenmaal de optie "Make Same in All Other States". Hierdoor verschijnt de handcursor ook op de andere pagina's.
Notitie: U zult ook opmerken dat de lagen met pictogrammen dezelfde naam "Knop" hebben. Dit is prima voor een eenvoudig project als dit, maar voor andere meer gecompliceerde projecten raad ik u ten zeerste aan de namen van de lagen te hernoemen en ze betekenisvolle namen te geven.
We zijn een stap dichter bij het einde. Laten we nu omgaan met interacties. In Flash Catalyst-interacties kunnen we schakelen tussen verschillende pagina's (staten), naar een specifieke URL gaan, video afspelen, onderbreken of stoppen.
Laten we beginnen met onze eerste interactie. Kies de AdobeIcon-knop en dubbelklik op het interactiepaneel als het verborgen is. Klik met de geselecteerde laag op de knop Interactie toevoegen:
Hier kunt u de vervolgkeuzelijst zien. Omdat we geïnteresseerd zijn in de URL-interactie, kiest u de volgende opties:
Door deze parameters te gebruiken, vertellen we aan Catalyst dat wanneer een gebruiker op de knop klikt, deze naar de URL wordt verzonden die we hebben toegewezen en dat de site wordt geopend in een nieuw browservenster. We hebben ook gedefinieerd dat deze interactie alleen mogelijk is wanneer we ons in de hoofdstatus bevinden (pagina).
Laten we nu de interacties tussen de pagina's maken. Allereerst moeten we de AdobeIcon-laag verplaatsen zodat deze onder de laag Rectangles-groep valt. Dit zal ons toelaten om Rechthoeken te zien bovenop de andere objecten. Sleep hiervoor de lagen om hun volgorde aan te passen. De volgende laagvolgorde wordt toegepast op alle andere staten:
Het volgende dat we nodig hebben, is het uiterlijk van gespecificeerde pagina's veranderen door de inhoud te bewerken. Kies de pagina Photoshop. Selecteer in het Lagenpaneel de groepshok Rectangles en onthul deze door hier te klikken waar aangegeven:
Het oog-pictogram zal onthuld worden en op de pagina ziet u de Adobe Dreamweaver-rechthoek met daarin de tekst en het pictogram. Omdat het een Photoshop-pagina is, zouden we alleen de inhoud moeten onthullen die daar relevant voor is. Vouw de rechthoekige Rectangle-groepslaag uit en schakel de oogpictogrammen van de Flash- en Dreamweaver-groepen uit. Zo kunnen we alleen relevante inhoud van Photoshop zien:
Herhaal deze acties voor de Flash- en Dreamweaver-pagina's, zodat de zichtbare rechthoeken relevant zijn voor de software.
Als je alles goed hebt gedaan, zien de duimen in je paneel Pages / States er als volgt uit:
Laten we nu Interactie toevoegen tussen onze hoofd- en Photoshop-pagina's. Selecteer onze hoofdpagina in het paneel Pagina's / Staten. Ga vervolgens naar het lagenpaneel en kies de PhotoshopIcon-knop. Zoals we eerder deden, ga naar het Interacties-paneel en kies de volgende opties:
Herhaal deze stap voor Dreamweaver en Flash Pages zodat door op een pictogram te klikken, de bijbehorende pagina wordt weergegeven.
Onze volgende stap is om nog een afbeelding naar de bibliotheek te importeren, zodat we de overgang naar de hoofdpagina kunnen afspelen. Ga naar de Photoshop-pagina. Selecteer de rechthoekige laag in het lagenpaneel. Kiezen Bestand> Importeren en selecteer het pictogram exit.gif (nogmaals, dit is beschikbaar in de brondownload bovenaan de zelfstudie):
De afbeelding zou in het midden van de rechthoek moeten verschijnen:
En het lagenpaneel zou er zo uit moeten zien:
Plaats nu met behulp van de muis het pictogram Exit rechtsonder in de witte rechthoek:
Flash Catalyst is slim genoeg om de afbeelding op de juiste plaats op andere pagina's te plaatsen. We moeten gewoon het beeld onthullen door op het oogpictogram te klikken:
We moeten nu het Exit-pictogram omzetten in een knop en één effect instellen.
Selecteer het pictogram Afsluiten, ga naar het HUD-venster en converteer het naar een knop zoals we eerder deden.
Selecteer de status Omhoog en kies in het venster Eigenschappen Veel> Dekking. Zet de dekking op 50. Zo kunnen we volledige dekking onthullen als we met de muis over de knop gaan of erop drukken:
Laten we een eenvoudige interactie toevoegen aan onze Exit-knop. Selecteer op de Photoshop-pagina de laag met het pictogram, klik op Interactie toevoegen zoals eerder gedaan en stel de opties in die op de onderstaande afbeelding worden weergegeven. Het enige verschil is dat het overgang naar de Main State moet spelen terwijl je in een van de staten bent:
Je hebt het eerste deel van deze tweedelige zelfstudie over de basisprincipes van Flash Catalyst voltooid. Druk op Ctrl + Enter of Bestand> Project uitvoeren om te controleren of alles goed werkt. Voorlopig moeten er gloedeffecten zijn en moet het Adobe-pictogram leiden naar de URL die u hebt opgegeven. De andere pictogrammen (Photoshop, Flash, Dreamweaver) moeten overgangen naar hun pagina's afspelen en het pictogram Afsluiten moet een overgang naar de hoofdpagina afspelen.
In het volgende deel van de tutorial zullen we leren hoe we wat animatie aan ons project kunnen toevoegen, geluid kunnen toevoegen en video kunnen instellen.
Accentsconagua