Create en interaktiv Galaxy med Flash Catalyst: Starting Out
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Dette er en Basix tutorial der vil vi bygge vårt første prosjekt i Flash Catalyst fra en pre-laget PSD fil. Vi vil dekke Catalyst grunnleggende: å konvertere kunst til komponenter, lage noen effekter og gjøre disse komponentene i live - ingen kode som kreves
I denne opplæringen vil du lære hvordan du håndterer kunstverk i Flash Catalyst og gjøre det levende
I den andre delen av tut, 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 Prosjekt til enhver tid, og deretter fortsette når det er behagelig for deg. For å gjøre dette gå til Fil > Lagre som ..., gi et navn til prosjektet og lagre den hvor du vil.
Endelig resultat Forhåndsvisning
Her er det endelige resultatet vi vil oppnå. Ved å lære det grunnleggende for å jobbe med en av Adobes nyeste produktene vi vil konvertere vår kunstverk i komponenter, lage noen glød effekter, angir ikoner og lage overganger til sider. Vi vil også lage en Adobe-ikon som en knapp som fører til en spesifisert URL: http://active.tutsplus.com
Dette kan synes å være en svært grunnleggende eksempel. Det viktigste er måten oppnår vi interaktivitet. Hele prosessen er pek og klikk Åpne Adobe Flash Catalyst, deretter på start vinduet velger du "Opprett nytt prosjekt fra Design File" > "Fra Adobe Photoshop PSD fil ..." Velg Galaxy.PSD (du kan få dette fra Source nedlasting på toppen av opplæringen). Sørg for at den "Import ikke-synlige lag" alternativet er valgt, og trykk OK Først av alt vi skal tildele den såkalte " States "for vårt prosjekt. States (også kalt "Sider") representerer de endringene som vil skje etter at brukerne utføre visse handlinger (for eksempel, vil han eller hun treffer en knapp) I vårt prosjekt målet er følgende:. Etter at brukeren klikker på et av ikonene (Flash, Photoshop eller Dreamweaver) et rektangel med litt info om produktet vises. Som vi har tre ikoner bør vi legge til ytterligere tre stater (sider). For å gjøre dette treffer "Duplicate State" tre ganger i Sider /Tilstander-panelet. Dette skaper tre kopier av våre viktigste siden, der vi vil gjøre noen endringer Det er nå lurt å sette statenes navn. Dobbeltklikk på navnet til hver stat og endre det til noe meningsfylt. Jeg har valgt følgende navn som begynner med den første staten: Hoved, Photoshop, Flash, Dreamweaver. Jeg anbefaler at du gir disse statene samme navn - dette vil hjelpe deg å følge opplæringen og unngå forvirring Merk:. Det er veldig viktig å holde prosjektet strukturert og tildele meningsfulle navn til komponentene. Gjør du det vil hjelpe deg å finne det du trenger og bestemme hvor du vil plassere fremtidige eiendeler Så vi har tildelt statene for vårt prosjekt. Nå la oss lage noen knapper. For å gjøre dette velge den Flash gruppe av sjikt. HUD panel skal vises (hvis ikke, trykk F7). I parentes vil du se "2 elementer", som viser at to elementer er valgt. Nå klikker Konverter Artwork til Component > Velg Component Hotell og fra menyen velger Button og klikk på den. Dette vil slå vår gruppe av lagene i en knapp. Gjør det samme med Photoshop og Dreamweaver grupper. Når du har gjort dette i Layer Panel og i HUD Panel bør det se slik ut (varsel "Button" i HUD Panel og i Layer Panel våre grupper blir omdannet til lagene med navnet Button): Det neste vi skal gjøre er å tildele statene til vår knapper. Hvis du er kjent med Flash Professional, vet du at knappene finnes med fire stater - det samme gjelder her. I vårt prosjekt er vi interessert i Over og Down States. La meg klargjøre betydningen av alle statene for de som ikke er kjent med dem La oss begynne med den Over tilstand av Photoshop Button - i HUD Panel klikk på "Over stat". Trekke oppmerksomheten din til Pages /States Panel der for nå har vi (, ned, funksjonshemmede Up, Over) bare fire stater. Du kan også se at bare vår knappen er fullt synlig og den andre kunstverk er falmet i bakgrunnen Ta også en titt på vår Layer Panel der du kan se Photoshop gruppen. Utvid Photoshop gruppen. Velg PhotoshopIcon lag fra Layer Panel, og deretter gå til Egenskaper Panel > Filtre > Legg til filter > Glow Merk: Husk at alt dette er gjort i løpet av stat Sider /States Panel Velg rektangel laget i Layer Panel. Se på scenen og du vil se at objektet er valgt, men det er bak PhotoshopIcon. Bare forlenge rektangelet ved å bringe musen til høyre side av rektangelet, sett pilen midt mellom topp og bunn hjørne. Utvide det slik at vi har plass til å skrive på etiketten "Photoshop" Så har vi utvidet rektangelet. Nå tar Text Tool (snarvei T) og på toppen av rektangelet skrive ordet "Photoshop". I Properties Panel av Text Tool jeg har valgt følgende egenskaper (du kan velge det samme): For nå skal du ha noe som ser ut som dette (jeg har valgt lagene): OK, har vi satt Over stat for Photoshop Button - du kan teste prosjektet med Ctrl + Enter snarvei eller gå til Fil > Kjør Prosjekt Tilbake i vårt prosjekt, kan du gå til hoved scene ved å klikke to ganger på den tomme plassen eller trykke Esc på tastaturet. Du kan også klikke på brødsmule lenkene i øverste venstre hjørne av scenen der du ser Galaxy /PhotoshopButton Gjenta trinn 7 til 9 med Flash og Dreamweaver knapper. Merk at i din glød effekter er det best å bruke fargene på ikonene 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 Layer Panel, deretter velger Down stat HUD Panel. Deretter i Layer Panel gå til Dreamweaver gruppen (eller hvilken gruppe du foretrekker å takle først), velger du laget DreamweaverIcon. Når du er der, gå til Properties Panel, velg Filter > Legg til filter > Gløde og velg innstillingene du liker (jeg har brukt mørk grey- # 333333). Gjenta dette trinnet for de andre gruppene Under dette trinnet vil vi konvertere AdobeIcon lag inn en knapp og tilordne hånd pekere for vår ikoner. Først av alt, velge AdobeIcon lag. Gå til HUD Panel og klikk på Velg Component > Knapp. Når du er ferdig velger du den nye knappen, gå til Utseende og kontrollere feltet "Hand markør". Gjør dette for alle andre knapper (Photoshop, Flash og Dreamweaver) Hvis du tester ditt prosjekt du vil merke at hånden markøren vises når vi musen over ikonene. Vi har illustrert til våre brukere at disse ikonene er knapper. Det neste trinnet er å tildele dette alternativet til andre sider. Det kan gjøres veldig enkelt - å gjøre dette ganske enkelt velge et av ikonene, gå til HUD Panel og når det velger alternativet "Make Samme i alle andre stater». Ved å gjøre dette, vil håndpekeren vises på de andre sidene også Merk:. Du vil også legge merke til at lagene med ikoner har samme navn "Button". Dette er greit for et enkelt prosjekt som dette, men for andre mer kompliserte som jeg anbefaler sterkt at du endre navn på lagene og gi dem meningsfulle navn Vi er ett skritt nærmere slutten. Nå la oss håndtere interaksjoner. I Flash Catalyst interaksjoner tillate oss å bytte mellom ulike Sider (stater), gå til en bestemt nettadresse, Play, Pause eller Stopp video. La oss starte med vår første samhandling. Velg AdobeIcon Button og dobbeltklikk på Interactions Panel hvis det er skjult. Med laget valgte klikk på Legg Interaksjon Button: Her kan du se nedtrekkslisten. Som vi er interessert i URL Samhandling, velger følgende alternativer:. Ved hjelp av disse parametrene vi forteller Catalyst at når en bruker klikker på knappen han vil bli sendt til nettadressen som vi har tildelt og at området åpnes i et nytt nettleservindu. Vi har også definert at dette samspillet er bare mulig når vi er i hovedstaten (Side) La oss nå lage Interaksjoner mellom Pages. Først av alt må vi flytte AdobeIcon lag slik at det vil være under rektangler gruppen laget. Dette vil tillate oss å se rektangler på toppen av de andre stedene. For å gjøre dette ganske enkelt dra lagene til å endre rekkefølgen på dem. Følgende lag Ordren vil bli brukt på alle andre stater: Det neste vi trenger er å endre utseendet på angitte sider ved å redigere innholdet. Velg siden Photoshop. I Layers velge Panel den rektangler gruppe lag og avsløre den ved å klikke der det er angitt her: Den oppsikts ikon vil bli avslørt og på siden ser du Adobe Dreamweaver rektangel med teksten og ikonet på innsiden av det . Som det er Photoshop Page, bør vi bare avsløre innholdet er relevant for det. Utvid rektangel gruppe laget og slå av øye-ikonene til Flash og Dreamweaver grupper - dette vil tillate oss å se bare Photoshop relevant innhold: Gjenta disse handlinger for Flash og Dreamweaver Pages slik at de synlige rektangler er relevante for programvare Hvis du gjorde alt riktig tommelen i Pages /Tilstander-panelet skal se slik ut: Nå la oss legge Interaksjon mellom våre viktigste og Photoshop Pages. I Sider /Tilstander-panelet velger vår hovedside. Så gå til Layer Panel og velg PhotoshopIcon Button. Som vi gjorde tidligere, gå til Interaksjoner panel og velge blant følgende alternativer:. Gjenta dette trinnet for Dreamweaver og Flash Pages slik at ved å klikke på et ikon vi blir tatt til tilsvarende side Vårt neste skritt er å importere enda en bilde til biblioteket, slik at vi kan spille overgangen tilbake til hovedsiden. Gå til Photoshop Page. Velg rektangel gruppe laget i Layer Panel. Velg Fil > Import Hotell og velg exit.gif ikonet (igjen, dette er tilgjengelig i kilde nedlasting på toppen av opplæringen): skulle vises i midten av rektangelet: Og Layer Panel skal vises slik: Nå med hjelp av musen bare plassere Exit ikonet nederst til høyre på hvit rektangel: Flash Catalyst er smart nok til å plassere bildet på rett sted i andre sider. Vi må bare avsløre bildet ved å klikke på øye-ikonet: Vi trenger nå å konvertere Exit ikonet inn en knapp og sette én effekt. Velg Avslutt-ikonet, gå til HUD Panel og konvertere den til en knapp som vi gjorde tidligere. Velg Up staten, og i egenskapsvinduet velger du Felles> Opacity La oss legge en enkel Interaksjon til vår Exit Button. I Photoshop Page velge lag med ikonet, klikk på Legg Interaksjon som vi gjorde tidligere, og satt som vises på bildet under alternativer. Den eneste forskjellen er at det skal spille overgang til hovedstaten samtidig er i noen stater: Du har oppnådd den første delen av denne todelte tutorial om Flash Catalyst grunnleggende!. Trykk Ctrl + Enter eller Fil > Kjør Prosjekt I den følgende delen av opplæringen vil vi lære å legge til noen animasjon til vårt prosjekt, legge til lyd, og sette video. Anmeldelser
, det er ikke en eneste linje med koding involvert
Trinn 1:. Opprett et nytt prosjekt fra PSD
Trinn 2:. Dialogboksen
Trinn 3:. Tildele New Pages ()
Trinn 4:. Gi navn til vår States
Trinn 5:. Konverter Ikoner i Knapper
Trinn 6: Button States
Up State -. normal tilstand av knappen når markøren ikke på det.
Over State - staten når vi flytter vår markøren over knappen
Down State -.. staten når vi klikker på knappen
Trinn 7: Assign Over stat å PhotoshopIcon Layer
. Velge den fargen du liker (jeg har brukt fargen fra ikonet - # 179AFF), satt Blur til 16 og styrke til 1.
Trinn 8:. Tildele Over stat til rektangel Layer
Trinn 9:. Legg til tekst til vår Photoshop Gruppe
. Hvis du har fulgt opplæringen og gjort alt riktig, bør Photoshop ikon lyser og teksten med rektangelet skal vises mens du holder musen over knappen.
.
Trinn 10:. Tildele Down State Button
Trinn 11:. Gjør Hånd Cursor
Trinn 12:. Hånd Cursor For All States
Trinn 13:. Legge Interaksjoner Innledning
Trinn 14: Legge Interaksjoner URL
På Klikk
Gå til URL
Blank felt der ønsket URL skal være. skrevet.
Åpne i nytt vindu.
Velg Main.
Trinn 15:. Page Interaksjoner Layers Bestill
Trinn 16: Side Interaksjoner Avslør rektangler
Trinn 17:. Page Interaksjoner Fra Main til Photoshop Page
På Klikk handling
Spill Overgang til stat
Photoshop (her vi tildele. som Page overgangen vil bli gjort).
I enhver stat.
Trinn 18:. Page Interaksjoner Import Bilde
Trinn 19: Page Interaksjoner Positioning bilde
Trinn 20: Page Interaksjoner Avslører bilde
Trinn 21: Page Interaksjoner Set Exit Ikon
. Sett Opacity til 50. Dette vil gi oss mulighet til å avsløre full dekk bare når vi musen over knappen eller trykk på det:
Trinn 22: Legge til finalen Interaksjon
Gratulerer
å sjekke om alt fungerer fint. For nå skal det være glødeeffekter, og Adobe Ikon bør føre til nettadressen du har angitt. De andre ikoner (Photoshop, Flash, Dreamweaver) bør spille overganger til sine sider og Exit Ikon bør spille en overgang tilbake til hovedsiden.