Create en profesjonell Flash Photo Portfolio Basert på Moto CMS
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
En online portefølje er av stor betydning for enhver moderne kunstner, fotograf eller musiker. Det representerer deres profesjonalitet. I dag vil vi se på å gjøre en original, stilig bilde portefølje basert på en Moto CMS; en avansert Flash Content Management System
Vi vil bruke en frittstående versjon av Moto CMS består av et sett med verktøy, komponenter og en innebygd prøve design utført i en ren stil. Faktisk vil dette ferdig mal ikke være nødvendig, så vi kommer til å lage en portefølje nettsted fra grunnen
Denne opplæringen omfatter følgende aspekter:.
Opprette spilleautomater (Lukk-knappen, enkel knapp slot).
Modules (musikkavspiller, bildegalleriet).
Redigere nettstedet Preloader.
Opprette nettsider og innhold
Vi vil også fokusere på det som er annerledes i Moto CMS presentere sine egenskaper og funksjonalitet
Vi trenger..:
Adobe Photoshop;
Adobe Flash CS3,
En frittstående versjon av Moto CMSs (Free Trial);
Website design i PSD . format
Endelig resultat Forhåndsvisning
Nettstedet Hjemmeside:
Klikk på linken demo øverst på siden og sjekk ut det endelige resultatet vi skal jobbe mot, vennligst arrangert av Moto CMS team (brukernavn /passord: admin).
Trinn 1: Last ned Moto CMS filer
Helt fra begynnelsen har vi å laste ned en frittstående versjon av Moto Flash CMS. Å gjenskape trinnene i denne opplæringen, og få en følelse av Moto CMS funksjoner, vil prøveversjonen være nok for deg.
Så, for å laste ned prøveversjonen, kan du følge denne linken.
Trinn 2: Moto CMS Files Oversikt
Her er en kort gjennomgang av de Moto CMS filer og mapper:
Components. Denne mappen inneholder MXP komponent drevet av Adobe Extension Manager.
Maler. Det er 5 nettstedet maler som brukes for å skape Moto CMS baserte nettsteder. Hver mal har et nødvendig sett av filer og skiller seg fra sin struktur. I denne opplæringen skal vi bruke en av disse malene, spesielt mal # 1, som et grunnlag for å skape vår portefølje hjemmeside.
Viktig-filen der de første skritt for å jobbe med CMS er beskrevet
Trinn 3:. Launch på Localhost
Vårt neste skritt er å lansere nettsiden mal # 1, på grunnlag av hvilke vi skal lage vår portefølje hjemmeside. For dette trenger vi en lokal webserver. Jeg skal bruke WampServer, en Windows web utviklingsmiljø. Den lar deg lage webapplikasjoner med Apache, PHP og MySQL database
For å starte nettstedet malen # 1 laste opp følgende mapper fra \\ templates \\ katalogen til den lokale serveren. template_01 Etter at du kan få tilgang til Moto CMS kontrollpanelet ved å angi riktig bane i adressefeltet og legge til "/admin" på slutten. Merk: i det øyeblikket du ikke vil være i stand til å forhåndsvise nettstedet ditt, da det ennå ikke har noen sider. En 404-feil vil bli vist Alt vi trenger å gjøre er å redigere nettsiden bredde og høyde, sette nettsiden minimal bredde og høyde og angi bakgrunnsfarge. Størrelsen på vårt design er 980x800 px. For å gjøre det resizable på en stor skjerm, må vi sette "100%" for nettstedet bredde og høyde. Og for å gjøre det synlig på den lille skjermoppløsning, må vi spesifisere minimal Nå må vi åpne Stil CSS-fil og angi bakgrunnsfarge (svart). Alt annet vil bli redigert via Moto kontrollpanelet Åpne moto.flp (Flash Project) filen i Adobe Flash CS3. I prosjekt panelet kan du se to filer: moto.fla og website.fla. Still moto.fla fil som standard en og kompilere begge filene ved å trykke på "Test Project" -knappen. Etter det åpne moto.fla fil og opprette en preloader for nettstedet. Nettstedet preloader kan være en enkel filmklipp som består av 100 bilder I Handlinger panel av dette filmklippet vi skrive: ". Stop ();" for den første rammen. Deretter bruker vi resten av rammene til animerte preloader men vi ønsker Vi skriver også. "Stop ();" i handlingene til den første rammen i FLA hovedtidslinjen. Ikke glem å angi målene hjemmeside (minimal bredde og høyde) i moto.fla filegenskaper. Vår neste trinnet er å skape en attraktiv animasjon av preloader forsvinning. På det siste bildet skal vi lansere nettsiden ved å aktivere 'showWebsite ()' funksjon. Åpne website.fla filen og oppdatere preloader Åpne Moto CMS Media Library (Preferences > Media Library) og sammen med de andre nødvendige bilder (Forside, Galleri Page og Om siden design og innhold planet) laste opp et bakgrunnsbilde ved hjelp av "Last opp filer" -knappen. Etter det å komme tilbake til kontrollpanelet og innsats bakgrunnsbildet ved å bruke 'Legg New Image "-knappen. Dra bildet for å sentrere det For å følge utformingen vi må laste opp. en ny font - Myriad Pro Ultra-Fet. For dette gå til Innstillinger og velger Fonts Manager. Fonts Manager kan brukerne administrere nettstedet skrifter som er lagret som SWF-filer og kan legges på en runtime. Før du laster opp en font Vi må konvertere den til SWF format først. For dette har vi tenkt å bruke Online Font Creator - en hendig online applikasjon utviklet av Moto CMS teamet som gjør det mulig å raskt konvertere ttf og .otf filer til SWF. Alt vi trenger å gjøre er å velge nødvendig font fil med ttf eller .otf forlengelse, legge den til i Online Font Creator, klikker du på "Opprett skrifter 'knappen og laste ned klar * .swf-fil som vi vil da legge til vår portefølje . Når den nye skrifttypen er lastet opp, kan du lage nettsiden tittel og tag linje med tekst-verktøyet og bruke den nødvendige skriften. Å skape den kodelinje vi bruker Tahoma font, størrelse: 10, color: # 727272. Etter at justere nettstedet tittel og tag linje i henhold til PSD design on Vi vil midlertidig plassere galleriet bilde på hjemmesiden . for å velge bildet fra Media Libarry og legge det til side ved å klikke på "Legg til New Image-knappen til venstre. Juster bildeposisjonen i henhold til startsiden design on Med hjelp av Shape Tool skaper en grå smal rektangel og deretter med Tekst verktøyet opprette menyknappene på den. Juster alt i henhold til startsiden design. Jeg må innrømme at dette er den mest enkel meny realisering. Moto CMS gir en spesiell meny widget, på grunnlag av hvor du kan lage din egen tilpassede menyen. Lagre alle endringer og forhåndsvise webdesign ved å klikke på knappen Forhåndsvisning. Merk: Innhold holdere er filmklipp i website.fla hvor innholdet kan legges dynamisk. De kan være av 4 typer: 1) nettside innhold holder; 2) layout innhold holder; 3) sideinnhold holder; 4) pop-up innhold holderen Nettstedet mal # 1, som vi jobber med, har to innholdseierne som standard:. En nettside innhold holder og en sideinnhold holder. Hvis vi åpner website.fla filen vi vil se dem: Disse innholdseierne er beskrevet i structure.xml Nettstedet innhold Holder: Side innhold Holder: For å gjøre følgende nettside elementer: nettstedet bakgrunn, tittel med merkelappen linjen og bunnmenyen med grå rektangulære - synlig på alle sider, skal vi plassere dem i innholdet på nettstedet holderen. Og vi kan enkelt gjøre det om praktisk Moto kontrollpanelet. Bare klikk på hvert nødvendig element og velge plassering. På hele nettstedet Ved å klikke på "Opprett ny side" -knappen, vil du være i stand til å opprette en tom side. Etter det går tilbake til startsiden og link menyknappene til de rette sidene. Bare markere menyknappen tekst og klikk på Link-ikonet til høyre for å åpne Link Editor. I vårt tilfelle porteføljen meny-knappen linker til hjemmesiden og Om meg knappen linker til Om-siden. Legg innholdsplanet (som allerede har blitt lastet opp til mediebiblioteket) til Om siden ved å bruke 'Legg New Image-knappen og midt det i henhold til design. Legg innhold til Om siden ved hjelp av tekstverktøyet. Den innebygde WYSIWYG-editor visualiserer alt hva du produserer, så søker formatering i teksten vil ikke føre til problemer. En post-å knytte kan også enkelt legges: bare åpne Link Editor og oppgi e-postadressen Når alt er klart, ikke glem å plassere elementene i den Om siden inn på siden. Innholdet holderen. Uthev hvert element en etter en og velge plassering. Innholds Du har kanskje lagt merke til når du forhånds nettstedet og flytte fra en side til en annen, runde, hvite bilde preloaders vises. For å tilpasse dem, åpner website.fla filen og gå til biblioteket. Høyreklikk på preloader og velg Egenskaper. I vinduet Symbol Properties du kan klikke på "Rediger Base class 'ikonet og deretter animere preloader på noen måte du ønsker. Men i vårt tilfelle, la oss la det tomt og slette grafisk preloader bilde i det hele tatt Nå har vi nådd den mest interessante delen av vår tutorial: nettsiden animasjon. Som du kan se, i øyeblikket nettstedet ser statisk, som innholdseierne ikke er animert i det hele tatt. Så, er vårt neste skritt å animere standardinnholdseierne og legge til nye for å forbedre nettstedet animasjon. Standardinnholdseierne kan lett animert på tidslinjen. For denne åpne den website.fla filen og opprette en fade-in animasjon hver holder for. Først, la oss animere hoved beholder av hele nettstedet. Den legger på website_holder_1 La oss lage den samme animasjon av innholdet på siden (page_1_holder_2 lag), men gjør utseendet litt senere. Så legger vi to nøkkelbilder på laget, må innehaveren transparente i første og andre rammer, og skape en motion tween med lettelser fra den andre nøkkelbilde til tredje. Når vi kompilere vårt prosjekt og laste nettstedet kan vi se at hvert element allerede vises med animasjon. Men når du flytter fra side til side er det fortsatt ingen animasjon, bare uvanlig blinking. Den andre delen av tidslinjen er ansvarlig for dette. Så vi lage animasjon av å skjule og vise innehaveren der. Som teksten skriften er en System Font, må vi endre Blend modus fra Normal For en god Flash stedet, så utseende er ikke nok, og det er bedre å gjøre egen animasjon for ulike deler, for eksempel øverst (gul markering på bildet under), den nederste (grønn utvalg) og innhold (rød utvalg). Den øverste sonen har følgende mål:.. X = 0, y = 0, width = 980, height = 120 Den nederste sonen .: x = 0, y = 765, width = 980, height = 35 Den øverste holderen vil inneholde navnet på nettstedet, bunnen holderen vil inneholde menyen, og de vil dukke opp på forskjellige måter. Også de vil holde seg til toppen og bunnen av skjermen i fullskjermmodus. Etter å bestemme innehavernes dimensjonene bør vi åpne structure.xml og legge de nye beholderne (på nettstedet nivå) som spesifiserer deres koordinater, bredde, høyde og dybde Etter å legge containere til xml filen må vi lage dem i website.fla filen. Så, vi åpner website.fla og opprette nye lag for våre containere. Rekkefølgen på lagene må samsvare med dybdeverdier som vi har satt i xml filen. Vi kan kopiere den tomme MovieClip fra website_holder_1 laget og lim den inn i website_holder_3 og website_holder_4. Vi setter de samme koordinatene movieclips som er spesifisert i structure.xml For tredje Holder: X = 0, Y = 0; For fjerde holderen. X = 0, Y = 765. Som vi kopiert movieclips, de gamle navnene ble forlatt. Vi endrer forekomstnavn i henhold til deres id tall, slik at det er lett å finne dem. Det samme bør gjøres for nettstedet innehaveren 4. På tidslinjen flytter de første nøkkelbilder for innehaverne 3 og 4 fremover, slik at de begynner utseende senere enn hele nettstedet holderen. Deretter oppretter vi det andre nøkkelbilder og bevegelses tweens. De første nøkkel inneholde startposisjonen av holdere, og de andre nøkkel inneholde den endelige plasseringen av innehaverne på nettstedet. Den øverste holderen vises fra oversiden av skjermen, så flytter vi den opp i den første keyframe; bottom Holder - fra undersiden, så vi flytte det ned i sin første keyframe. Og vi også legge easings til motion tweens Du bør få noe som dette:.. Etter det skal vi legge til følgende kode for de første animasjonsnøkkelbildene av våre holdere Så kompilere nettstedet og oppdatere kontrollpanelet Hvis du velger et objekt, vil du se at plasseringsrullegardinmenyen har blitt utvidet med to holdere. Top Holder Hotell og Bottom Holder Nettstedet tittel med slagord bør tildeles Top innhold holderen, mens nettsiden meny med en grå firkant -. til bunnen innhold holderen Nå er det ønskelig at på storskjerm bunnholderen fester seg til skjermen nederst. For å gjennomføre dette må vi flytte bunnen holder animasjon inn i en annen filmklipp, fordi som du vet, kan vi ikke flytte tweened filmklipp programma (animasjon vil ikke fungere). La oss kalle denne filmklipp website_holder_4_c Etter det går til hovedscenen, klikk på de første nøkkel av nettstedet holderen 3 og 4 og redigere koden. Etter kompilering en nettside, kan du se at de nederste holderen fester seg til skjermen nederst, ingen Uansett hvordan vi endre størrelsen på skjermen. Hvis skjermoppløsningen er for liten, vil den nederste holderen ikke overlappe innholdet på nettstedet, og vil holde seg på plass For å gjøre innholdet på nettstedet fremgår av ovennevnte, bør vi animere innholdet på siden holder på samme måte som vi gjorde for toppen og bunnen holdere Før du oppretter en ny side vi trenger å oppdatere en side mal. La oss ta utformingen av Om siden som en mal. Høyreklikk på Om-siden og velg 'Update side mal ". Etter sidemalen er oppdatert, klikk på" Opprett en ny side "-knappen, angi et side navn, tittel og URL som det er vist på skjermbildet nedenfor. Nå Kontakter siden er klar. Redigere innholdet ved hjelp av praktiske WYSIWYG-editor og koble det til på menyknappen I Moto Flash CMS sporene spille rollen som den animerte objekter. Sporene kan inneholde et stort antall egendefinerte funksjoner, som kan styres direkte fra kontrollpanelet. Først vil vi prøve å lage en enkel sporet og deretter forbedre det. La oss starte med lukkeknappen settes inn som et bilde inn på nettsiden og legge til noen roll /utrulling effekter til det. En "Gå til side" > handling; "Hjem" er tildelt. For å animere Lukk-knappen er ikke en vanskelig oppgave, så vi kommer til å innse det via å bruke en slot. Neste, la oss lage et spor i website.fla filen. For dette importere knappen Lukk bilde til biblioteket. I Slots delen må vi lage et nytt symbol som et filmklipp som heter CloseButtonSlot. Sett klasse som CloseButtonSlot. Det er ikke nødvendig å opprette en ny klasse, det er akkurat nok til å arve en AbstractMotoSlot Class. Så, bare kopiere følgende:. Com.moto.template.shell.view.components.AbstractMotoSlot, og lim det inn i Base Class feltet Deretter legger vi på Lukk-knappen bilde til scenen (den CloseButtonSlot MovieClip må være åpen) og konvertere den til et filmklipp som heter CloseButtonIcon. Som vi har arvet våre spor fra AbstractMotoSlot klasse, det gir oss en enkel animasjon. Men hva vi skal gjøre nå er å skape et attraktivt roll /utrulling effekt Vel, det er vårt neste skritt å opprette et nytt lag og gjøre keyframes som å sette stop ().; kode. Vi gir grunnleggende ramme etiketter "over" (mellom første og andre stopp frames) og "ut" (mellom andre og tredje stopp keyframes) - se skjermbilde: Vi gjør de samme nøkkelbilder og skape bevegelse tweens på lag med vår MovieClip. For eksempel vår Close knappen vil rotere med klokken når rullet over og mot klokken flere ganger når rullet ut. La oss legge lysstyrke mens du roterer og easings til bevegelse tweens. Etter animasjonen er gjort, kompilere vi website.fla med vår nye slot (Ctrl + Enter). For å kunne jobbe med sporet via Moto CMS, må vi spesifisere sine parametere i structure.xml filen: I vårt tilfelle vil det være: Etter det gå til kontrollpanelet og åpne hvilken som helst side. I Slot delen vil du se de tilgjengelige plasser. Velg knappen Lukk sporet og plassere den på siden i stedet av lukkeknappen bildet. Det er den Slot Object panelet på høyre når sporet er valgt. Gå til handlingene, sjekk "Aktiver Klikk på Handling-boksen og velg: 'Gå til side' > "Hjem". Deretter kopierer sporet og lim den inn på de andre sidene der lukkeknappen er nødvendig. Lagre endringer og kontrollere resultatet Et avansert slot i vårt tilfelle er en spilleautomat med dynamisk endring av parametre. La oss lage en knapp slot med noen variable parametere. For dette åpne website.fla filen og opprette et nytt symbol som et filmklipp som heter SimpleButtonSlot. Base klasse er den samme som i trinn 17. Base klasse. Com.moto.template.shell.view.components.AbstractMotoSlot Deretter legger tekstfeltet kalt "etikett" og en flyet til denne knappen. Konverter flyet inn i et filmklipp som heter 'ButtonLabelPlane'. For vår bekvemmelighet la oss konvertere etikett til et filmklipp og kaller det 'labelHolder', og deretter konvertere ButtonLabelPlane inn i en annen filmklipp og kaller det 'planeHolder '. Åpne structure.xml fil og legge til et nytt spor med 2 eiendommer. Bare kopier og lim inn følgende kode inn i sporene seksjonen: For å håndtere disse to egenskapene, er ikke nok base klassen.. Det er derfor vi trenger for å lage en ny klasse. Så lage en ny Actionscript-fil som heter SimpleButtonSlot.as i src /sporene mappe og legge til denne koden til det Gå tilbake til SimpleButtonSlot filmklipp og angi en annen Base klasse. Etter at vi må importere filmklipp der: For å håndtere begge eiendommene, må vi overstyre funksjonen updateProperty (). I neste kodebit synes PropertyVO med sin verdi, type, parameter og funksjon getParameter (). Vi bruker "bryteren" struktur, som vi har to egenskaper:. HtmlText og farge Nå skal beskrive vår Textfield (labelHolder) og flyet (planeHolder) Etter at vi må legge til funksjon autosize: Som vår slot er resizable, la oss sentrere tekst i flyet. For dette har vi til å overstyre setSize () -funksjonen. Også må vi endre størrelsen flyet i henhold til etiketten teksten bredde. Vi må ringe setSize () metode for å updateProperty () -funksjonen når etiketten eiendommen er oppdatert. Compile nettsiden for å lagre endringene. Åpne website.fla filen, gå til hovedscenen, og deretter SimpleButtonSlot Movie Clip. På Layer3, gjøre tre nøkkelbilder og sette stop (); kode. Vi gir grunnleggende ramme etiketter "over" (mellom første og andre stopp frames) og "ut" (mellom andre og tredje stopp keyframes). La oss animere planeHolder (dvs. bakgrunnen). For eksempel kan det lyse opp mens svever over det. På tidslinjen kan det ha følgende utseende: Compile nettstedet og forhåndsvise endringer. Nå kan vi enkelt arbeide med sporet objekt. Bruke sporet kontrollpanelet (til høyre) vi kan redigere spilleegenskaper og bruke ulike effekter til det. Og her er et godt eksempel på hvordan vi kan bruke dette sporet i våre nettsider. Jeg har impletented det på Om-siden i stedet for en enkel mail-to henvende: Merk: Moduler er animerte elementer hentet fra sporene , som er tilgjengelig i biblioteket eller kan lastes fra en ekstern SWF-fil. De har et sett med egenskaper, som lar brukerne enkelt administrere dem. Sammenligning av sporene, moduler har en stor fordel: Hver modul har sin egen kontrollpanel. Moto Flash CMS gir fem typer kontrollpaneler for å lage dine egne moduler. Dette betyr at Flash-utviklere bare nødt til å lage en frontend; backend har allerede blitt skapt av Moto CMS utviklere. For eksempel malen # 1 vi bruker her har en innebygd mediespiller modul som standard. Du kan enkelt legge til denne modulen til åstedet og åpne kontrollpanelet ved å dobbeltklikke på det. La oss lage en enkel musikkspiller med på /av-kontroller. Åpne website.fla filen og opprette et nytt filmklipp som heter 'MusicPlayerModule' å angi en ny Base klasse: modules.MusicPlayerModule Åpne structure.xml fil og legge til en ny modul. < /mal > import flash.events.Event; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.display.MovieClip; < /mal >
og kontrollpanel /admin
.
Trinn 4:. Edit config.xml
hjemmeside bredde og høyde (Dette vil gjøre rullefeltene vises). Bakgrunnsfargen er svart (# 000000)
. ≪ element name = "ALLOW_FULL_SCREEN" > <! [CDATA [true]] > < /element > < element name = "WEBSITE_WIDTH" > <! [CDATA [100%]] > < /element > < element name = "WEBSITE_HEIGHT" > <! [CDATA [100%]] > < /element > < element name = "WEBSITE_MIN_WIDTH" > <! [CDATA [980]] > < /element > < element name = "WEBSITE_MIN_HEIGHT" > <! [CDATA [800]] > < /element > < element name = "FLASH_PLAYER_VERSION_REQUIRED" > <! [CDATA [9.0.23]] > < /element > < element name = "BACKGROUND_COLOR" > < [CDATA [# 000000]] > < /element >
Trinn 5: Rediger stil CSS
Trinn 6:. Opprett Preloader
Trinn 7:. Website Bakgrunn
Trinn 8: Tittel. Og Tag Linje
Last opp en ny font
Opprett nettsiden tittel og kodelinje.
Trinn 9:. Legg Home Page Image
Trinn 10:. Lag bunnmenyen
< h2> Trinn 11: lage innholdet Holders
fil. . Sørg for at bredden er 980 px og høyden er 800 px
< contentHolders > < holder id = "1" type = "hjemmeside" x = "0" y = "0" width = "980" height = "800" låst = "false" dybde = "10" > < navn > <! [CDATA [På hele nettstedet]] > < /navn > < /holder > < /contentHolders >
< contentHolders > < holder id = "2" type = "page" x = "0" y = "0" width = "980" height = "800" låst = "false" dybde = "20" > < navn > <! [CDATA [Innhold]] > < /navn > < /holder > < /contentHolders >
Trinn 12: Lag Om Page
Opprett en tom side <. br>
Link menyknappene til de rette sidene.
Legg innholds Plane.
legge til innhold i Om siden.
Trinn 13: Redigere Bilde Preloader
Trinn 14:. Nettstedet Animasjon
Animate standardinnholdet eierne.
lag. Vi gjør en enkel animasjon med åpenhet, men noe vi gjør vil pryde sitt utseende. Vi skaper den andre nøkkelbilde på laget, satt Alpha 0% for første keyframe (gjøre den transparent), skape en bevegelse mellom fra første keyframe til den andre, og legge en lettere.
til Layer
for alle MovieClip forekomster på holderen lag.
Opprett flere innholdseierne og animere dem.
< p> Som den øverste og den nederste delene ligge på hele nettstedet, vil vi legge til to holdere for disse to delene av nettstedet. Før du legger innholdseierne vi har til å definere sin størrelse og posisjon. Det er lett å gjøre ved hjelp av skive verktøyet i Photoshop
. < contentHolders > < holder id = "1" type = "hjemmeside" x = "0" y = "0" width = "980" height = "800" låst = "false" dybde = "10" > < navn > <! [CDATA [På hele nettstedet]] > < /navn > < /holder > < holder id = "3" type = "hjemmeside" x = "0" y = "0" width = "980" height = "120" låst = "false" dybde = "12" > < navn > <! [CDATA [Top Holder]] > < /navn > < /holder > < holder id = "4" type = "hjemmeside" x = "0" y = "765" width = "980" height = "35" låst = "false" dybde = "14" > < navn > <! [CDATA [Bottom Holder]] > < /navn > < /holder > < /contentHolders >
Moto . .getInstance () getWebsiteHolder (3, website_holder_3); Moto.getInstance () getWebsiteHolder (4, website_holder_4);..
Angi objekter til innholdseierne .
Rediger nederst innhold holderen
.
.
Moto.getInstance () .getWebsiteHolder (3, website_holder_3); Moto.getInstance () getWebsiteHolder (4, website_holder_4_c.website_holder_4); //Stage endre størrelsen handlerstage.addEventListener (Event.RESIZE, resizeHandler); resizeHandler (null), funksjon resizeHandler (event.: hendelse): void {website_holder_4_c.y = Math.max (765, Math.round (stage.stageHeight - 35));}
Trinn 15:. Animer Nettstedet Innhold
Trinn 16:. Opprett kontakter Page
Trinn 17:. Lag en enkel Slot
librarySymbolLinkage = "." - eksport navnet på sporet er MovieClip (klasse navn)
animerte = " true "- en egenskap som sier om sporet er animert eller ikke
resizable =." falske "-. landene om det er logikken for å endre størrelse inne i sporet eller ikke
låst =" .! falske "- statene om sporet skal vises i panelet for å legge til eller ikke
< navn > < [CDATA []] > < /navn > - Et navn på sporet i admin panel
< eiendommer />. - Egenskaper av sporet som strekker seg funksjonalitet; Vi vil ikke bruke det i dette eksempelet
<. mal /> - Standardverdier for alle egenskapene til sporet; det er nødvendig å legge til et attributt alpha = "" - transaprency av sporet, fra 0 til 1.
< slot id = "1" librarySymbolLinkage = "CloseButtonSlot" animerte = "true" resizable = "false" låst = "false" > < navn > <! [CDATA [Lukk Button]] > < /navn > < eiendommer /> < mal alpha = "1" /> < /slot >
Trinn 18:. Lag en avansert Slot
Opprett SimpleButtonSlot filmklipp. Edit structure.xml.
< slot id = "2" librarySymbolLinkage = "SimpleButtonSlot" animerte = "true" resizable = "true" låst = "false" > < navn > <! [CDATA [Enkel Button]] > < /navn > < eiendommer > < eiendom id = "1" type = "htmlText" > < navn > <! [CDATA [Etiketter]] > < /navn > < /eiendom > < eiendom id = "2" type = "color" > < navn > <! [CDATA [farge]] > < /navn > < /eiendom > < /eiendommer /> < mal alpha = "1" > < eiendommer > < element propertyType = "1" > < element propertyType = "2" > < /eiendommer > < /mal > < /slot >
Opprett SimpleButtonSlot klassen
pakke slots {import com.moto.template.shell.view.components.AbstractMotoSlot.; public class SimpleButtonSlot strekker AbstractMotoSlot {offentlig funksjon SimpleButtonSlot () {}}}
slots.SimpleButtonSlot
pakke slots {import com.moto.template.shell.view.components.AbstractMotoSlot; import flash.display.MovieClip; public class SimpleButtonSlot strekker AbstractMotoSlot {offentlig funksjon SimpleButtonSlot () {}}}
pakke slots {import com.moto.template.shell.model.vo.PropertyVO; import com.moto.template.shell.view.components.AbstractMotoSlot; import flash.text.TextField; import flash.display.MovieClip; public class SimpleButtonSlot strekker AbstractMotoSlot {offentlig funksjon SimpleButtonSlot () {} overstyre offentlig funksjon updateProperty (propertyVO: PropertyVO): void {switch (propertyVO.propertyType) {case 1: {//htmlText labelHolder.label bryte; } Case 2: {//farge break; }}}}}
pakke slots {import com.moto.template.common.utils.MotoUtils.; import com.moto.template.shell.model.vo.PropertyVO; import com.moto.template.shell.view.components.AbstractMotoSlot; import flash.text.TextField; import flash.display.MovieClip; public class SimpleButtonSlot strekker AbstractMotoSlot {private Var _label: Textfield; private Var _plane: MovieClip; offentlig funksjon SimpleButtonSlot () {_label = labelHolder.label; _plane = planeHolder.plane; } Overstyre offentlig funksjon updateProperty (propertyVO: PropertyVO): void {switch (propertyVO.propertyType) {case 1: {//htmlText _label.htmlText = propertyVO.value; _label.embedFonts = MotoUtils.convertToBoolean (propertyVO.getParameter ("embedFonts")); gå i stykker; } Case 2: {//farge MotoUtils.setColor (_plane, uint (propertyVO.value)); gå i stykker; }}}}}
pakke slots {import com.moto.template.common.utils.MotoUtils; import com.moto.template.shell.model.vo.PropertyVO; import com.moto.template.shell.view.components.AbstractMotoSlot; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.display.MovieClip; public class SimpleButtonSlot strekker AbstractMotoSlot {private Var _label: Textfield; private Var _plane: MovieClip; offentlig funksjon SimpleButtonSlot () {_label = labelHolder.label; _plane = planeHolder.plane; _label.autoSize = TextFieldAutoSize.LEFT; } Overstyre offentlig funksjon updateProperty (propertyVO: PropertyVO): void {switch (propertyVO.propertyType) {case 1: {//htmlText _label.htmlText = propertyVO.value; _label.embedFonts = MotoUtils.convertToBoolean (propertyVO.getParameter ("embedFonts")); gå i stykker; } Case 2: {//farge MotoUtils.setColor (_plane, uint (propertyVO.value)); gå i stykker; }}}}}
pakke slots {import com.moto.template.common.utils.MotoUtils; import com.moto.template.shell.model.vo.PropertyVO; import com.moto.template.shell.view.components.AbstractMotoSlot; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.display.MovieClip; public class SimpleButtonSlot strekker AbstractMotoSlot {private Var _label: Textfield; private Var _plane: MovieClip; offentlig funksjon SimpleButtonSlot () {_label = labelHolder.label; _plane = planeHolder.plane; _label.autoSize = TextFieldAutoSize.LEFT; } Overstyre offentlig funksjon updateProperty (propertyVO: PropertyVO): void {switch (propertyVO.propertyType) {case 1: {//htmlText _label.htmlText = propertyVO.value; _label.embedFonts = MotoUtils.convertToBoolean (propertyVO.getParameter ("embedFonts")); setSize (_plane.width, _plane.height); gå i stykker; } Case 2: {//farge MotoUtils.setColor (_plane, uint (propertyVO.value)); gå i stykker; }}} Overstyre offentlig funksjon setSize (newWidth: Antall, newHeight: Number): void {_plane.width = newWidth; _plane.height = newHeight; _label.x = Math.round ((newWidth - _label.textWidth) /2); _label.y = Math.round ((newHeight - _label.textHeight) /2); }}}
Animate sporet.
Trinn 19: Lag en Flash Music Player
Opprett MusicPlayerModule filmklipp. Edit structure.xml.
. Deretter legger en spiller ikonet til scene og konvertere den til et filmklipp som heter 'musicPlayerIcon'.