Share
Dette er en Basix-veiledning hvor vi skal bygge vårt første prosjekt i Flash Catalyst fra en forhåndsdefinert PSD-fil. Vi vil dekke Catalyst grunnleggende: konvertere kunst til komponenter, skape noen effekter og gjøre disse komponentene levende - ingen kode nødvendig!
I denne opplæringen lærer du hvordan du håndterer kunstverk i Flash Catalyst og gjør det levende.
I den andre delen av tutten, etter at du har blitt kjent med programmet, vil vi gjøre noen mer kompliserte ting og legge til mer interaktivitet.
Merk: Du kan lagre Flash Catalyst Project når som helst og deretter fortsette når det er behagelig for deg. For å gjøre dette, gå til Arkiv> Lagre som ..., gi et navn til prosjektet og lagre det der du vil.
Her er det endelige resultatet vi vil oppnå. Ved å lære grunnleggende om å jobbe med en av Adobes nyeste produkter, konverterer vi bildene våre til komponenter, skaper noen glødeffekter, angir ikoner og gjør overganger til sider. Vi lager også et Adobe-ikon som en knapp som fører til en spesifisert nettadresse: http://active.tutsplus.com
Dette kan synes å være et ekstremt grunnleggende eksempel. Det som er viktig er måten vi oppnår på interaktiviteten. Hele prosessen er pek og klikk, Det er ikke en enkelt linje med koding involvert.
Åpne Adobe Flash Catalyst, velg deretter "Opprett nytt prosjekt fra designfil"> "Fra Adobe Photoshop PSD-fil ...".
Å velge Galaxy.PSD (du kan få dette fra Kilde nedlasting øverst i opplæringen). Pass på at alternativet "Importer ikke synlige lag" er merket og trykk OK.
Først av alt bør vi tildele de såkalte "statene" for vårt prosjekt. Stater (også kalt "Sider") representerer endringene som vil skje etter at brukerne utfører bestemte handlinger (for eksempel, han eller hun treffer en knapp).
I vårt prosjekt er målet følgende: Når brukeren klikker på et av ikonene (Flash, Photoshop eller Dreamweaver) vises et rektangel med litt info om produktet. Som vi har tre ikoner, bør vi legge til tre ekstra stater (sider). For å gjøre dette treffet "Duplicate State" tre ganger i panelet Sider / stater. Dette skaper tre eksemplarer av hovedsiden vår, der vi vil gjøre noen endringer.
Det er nå lurt å sette statens navn. Dobbeltklikk navnet på hver stat og endre det til noe meningsfylt. Jeg har valgt følgende navn som begynner med den første staten: Main, Photoshop, Flash, Dreamweaver. Jeg anbefaler at du gir disse statene de samme navnene - dette vil hjelpe deg med å følge opplæringen og unngå forvirring.
Merk: Det er veldig viktig å holde prosjektet strukturert og tilordne meningsfulle navn til komponentene dine. Å gjøre det vil hjelpe deg med å finne det du trenger og bestemme hvor du skal plassere fremtidige eiendeler.
Så vi har tildelt statene for vårt prosjekt. La oss nå lage noen knapper. For å gjøre dette, velg Flash-gruppen med lag. HUD-panelet skal vises (hvis ikke, trykk F7). I parentes vil du se "2 elementer", som viser at to elementer er valgt. Klikk nå Konverter kunstverk til komponent> Velg komponent og fra menyen velger du Knapp og klikker på den. Dette vil gjøre vår gruppe lag i en knapp. Gjør det samme med Photoshop og Dreamweaver-gruppene.
Etter at du har gjort dette i Lagpanelet og i HUD-panelet, skal det se slik ut (Legg merke til "Knapp" i HUD-panelet og i Lagpanelet konverteres våre grupper til lagene med navnet Knapp):
Den neste tingen vi bør gjøre er å tildele stater til knappene våre. Hvis du er kjent med Flash Professional, vet du at knapper eksisterer med fire stater - det samme gjelder her. I vårt prosjekt er vi interessert i over- og ned-statene.
La meg forklare betydningen av alle statene for de som ikke er kjent med dem.
La oss begynne med Over-tilstanden til Photoshop-knappen - i HUD-panelet klikker du på "Over state". Tegn oppmerksomheten til Sider / Statens Panel hvor vi for øyeblikket bare har fire stater (opp, over, ned, deaktivert). Du kan også se at bare vår knapp er fullt synlig og det andre bildet er bleknet i bakgrunnen.
Ta også en titt på vårt lagpanel hvor du kan se Photoshop-gruppen:
Utvid Photoshop-gruppen. Velg PhotoshopIcon-laget fra lagpanelet, og gå til Egenskaper Panel> Filtre> Legg til filter> Glød. Velg fargen du liker (jeg har brukt fargen fra ikonet - # 179AFF), sett Blur til 16 og styrke til 1.
Merk: Husk at alt dette er gjort i Over State i Sider / States Panel.
Velg rektangellaget i lagpanelet. Se på scenen, og du vil se at objektet er valgt, men det ligger bak PhotoshopIcon. Bare strekk rektangelet ved å bringe musen til høyre side av rektangelet, sett pilen i midten mellom topp og nederste hjørne. Utvid det slik at vi har plass til å skrive etiketten "Photoshop".
Så vi har utvidet rektangelet. Ta nå tekstverktøyet (snarvei T) og på toppen av rektangelet skriv ordet "Photoshop". I Egenskapspanelet i tekstverktøyet har jeg valgt følgende egenskaper (du kan velge det samme):
For nå bør du ha noe som ser slik ut (jeg har avvalgt lagene):
OK, vi har satt over tilstanden til Photoshop-knappen - du kan teste prosjektet ditt med Ctrl + Enter-snarveien eller gå til Fil> Kjør prosjekt. Hvis du har fulgt opplæringen og gjort alt riktig, bør Photoshop-ikonet lyse og teksten med rektangel skal vises mens du holder musen over knappen.
Tilbake i vårt prosjekt kan du gå til hovedstedet ved å klikke to ganger på det tomme rommet eller trykke på Esc på tastaturet. Du kan også klikke på breadcrumb-koblingene i øverste venstre hjørne av scenen hvor du ser Galaxy / PhotoshopButton.
Gjenta trinn 7 til 9 med knappene Flash og Dreamweaver. Merk at i Glow-effektene er det best å bruke ikonens farger.
Dette trinnet er valgfritt. Jeg vil gjerne legge til litt glød når en bruker klikker på en av knappene. For å gjøre dette, velger vi en av knappene i Lagpanelet, og velger deretter Ned tilstand i HUD-panelet. Deretter går du i Dreamweaver-gruppen (eller hvilken gruppe du helst vil takle først), velg lag DreamweaverIcon. En gang der, gå til Egenskaper panelet, velg Filtre> Legg til filter> Glød og velg de preferanser du liker (jeg har brukt mørk grå- # 333333). Gjenta dette trinnet for de andre gruppene.
Under dette trinnet konverterer vi AdobeIcon-laget til en knapp og tilordner håndpekere til våre ikoner. Først av alt, velg AdobeIcon-laget. Gå til HUD-panelet og klikk på Velg komponent> Knapp. Når du er ferdig, velg den nye knappen, gå til Utseende og merk av feltet "Hand cursor". Gjør dette for alle andre knapper (Photoshop, Flash og Dreamweaver).
Hvis du tester prosjektet ditt, vil du legge merke til at håndpekeren vises når vi mus over ikonene. Vi har illustrert for brukerne at disse ikonene er knapper. Det neste trinnet er å tildele dette alternativet til andre sider. Det kan gjøres veldig enkelt - for å gjøre dette, velg bare ett av ikonene, gå til HUD-panelet og en gang der, velg alternativet "Gjør det samme i alle andre stater". Ved å gjøre dette vil håndpekeren også vises på de andre sidene.
Merk: Du vil også legge merke til at lagene med ikoner har samme navn "Knapp". Dette er greit for et enkelt prosjekt som dette, men for andre mer kompliserte jeg anbefaler på det sterkeste at du omdøper lagene og gir dem meningsfulle navn.
Vi er ett skritt nærmere slutten. La oss nå håndtere samhandlinger. I Flash Catalyst-interaksjoner kan vi bytte mellom forskjellige sider (stater), gå til en bestemt nettadresse, spille av, pause eller stoppe video.
La oss starte med vår første interaksjon. Velg AdobeIcon-knappen og dobbeltklikk på Interaksjonspanelet hvis det er skjult. Med laget valgt klikker du på Add Interaction Button:
Her kan du se rullegardinlisten. Som vi er interessert i URL-interaksjonen, velg følgende alternativer:
Ved å bruke disse parameterne, forteller vi Catalyst at når en bruker klikker på knappen, vil han bli sendt til nettadressen vi har tildelt, og at nettstedet skal åpnes i et nytt nettleservindu. Vi har også definert at denne samspillet bare er mulig når vi er i hovedstaten (side).
La oss nå skape interaksjonene mellom sidene. Først av alt trenger vi å flytte AdobeIcon-laget slik at det vil være under rektangler gruppelaget. Dette vil tillate oss å se rektangler på toppen av de andre objektene. For å gjøre dette, bare dra lagene for å endre ordren deres. Følgende lagbestilling vil bli brukt til alle andre stater:
Den neste tingen vi trenger er å endre utseendet på spesifiserte sider ved å redigere innholdet. Velg siden Photoshop. I Lagpanelet velger du Rectangles gruppelag og avslører det ved å klikke der du er angitt her:
Øyeikonet vil bli avslørt, og på siden vil du se Adobe Dreamweaver-rektangelet med teksten og ikonet inne i den. Som det er Photoshop Page, bør vi bare avsløre innholdet som er relevant for det. Utvid rektangelgruppelaget og slå av øyeikonene til Flash- og Dreamweaver-gruppene - dette vil tillate oss å se bare Photoshop-relevant innhold:
Gjenta disse handlingene for Flash og Dreamweaver Pages, slik at de synlige rektanglene er relevante for programvaren.
Hvis du gjorde alt riktig, må tommelen i panelet Sider / stater se slik ut:
La oss nå legge til interaksjon mellom våre hoved- og Photoshop-sider. Velg vår hovedside i panelet Sider / stater. Deretter går du til Lagpanel og velger PhotoshopIcon-knappen. Som tidligere gjorde, gå til Interaksjonspanel og velg følgende alternativer:
Gjenta dette trinnet for Dreamweaver og Flash Pages, slik at ved å klikke på et ikon, blir vi tatt til den tilsvarende siden.
Vårt neste skritt er å importere ett bilde til biblioteket, slik at vi kan spille overgangen tilbake til hovedsiden. Gå til Photoshop-siden. Velg rektangelgruppelag i lagpanelet. Velge Fil> Import og velg exit.gif-ikonet (igjen, dette er tilgjengelig i Kilde nedlasting øverst i opplæringen):
Bildet skal vises i midten av rektangelet:
Og lagpanelet skal vises slik:
Nå ved hjelp av musen plasserer du bare Avsluttikonet nederst til høyre i det hvite rektangel:
Flash Catalyst er smart nok til å plassere bildet på riktig sted i andre sider. Vi må bare avsløre bildet ved å klikke på øyeikonet:
Vi må nå konvertere Utgang-ikonet til en knapp og angi en effekt.
Velg Avslutt-ikonet, gå til HUD-panelet og konverter det til en knapp som vi gjorde tidligere.
Velg Opptilstand, og velg i Egenskaper panel Vanlig> Opacity. Still Opacity på 50. Dette vil tillate oss å avsløre fullstendig uklarheten bare når vi musen over knappen eller trykker på den:
La oss legge til en enkel interaksjon til vår utgangsknapp. På Photoshop-siden velger du laget med ikonet, klikker du på Add Interaction som vi gjorde tidligere og angir alternativene som vises på bildet nedenfor. Den eneste forskjellen er at den skal spille overgang til hovedstaten mens du er i noen stater:
Du har oppnådd den første delen av denne todelte opplæringen om Grunnleggende om Flash Catalyst. Trykk Ctrl + Enter eller Fil> Kjør prosjekt for å sjekke om alt fungerer bra. For øyeblikket bør det være lyseffekter, og Adobe-ikonet skal føre til nettadressen du har angitt. De andre ikonene (Photoshop, Flash, Dreamweaver) burde spille overganger til sidene deres, og avslutningsikonet skal spille en overgang tilbake til hovedsiden.
I den følgende delen av opplæringen lærer vi hvordan du legger til litt animasjon i prosjektet, legger til lyd og stiller inn video.
Accentsconagua