bygge en salgsfremmende hjerte for din hjemmeside med as3 og flash ide

, opbygge et salgsfremmende hjerte for din hjemmeside med as3 og flash ide,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' ikke glip af, skal vi skabe en enkelt reklame hjerte til en hjemmeside.det er fint, hvis du er ved at løbe tør for plads på hjemmesiden, eller hvis du bare vil de seneste nyheder eller produkter til at fange de seere, øje.lad os komme af sted!,,,,,,, trin 1: downloade tweener, det første skridt vil være at købe filer, der er brug for.for det første, at downloade tweener fra http: //kode. google. kom /p /tweener /.se efter den seneste stabil bygge på downloads afdeling.den bruger jeg er 1_33_74., 2. trin: kilde billeder, jeg har også nogle gratis billeder fra sxc.hu.de billeder, du vælger, vil i høj grad afhænge af de kategorier, men her er dem, jeg bruger: http: //www.sxc. hu /foto /756577http: //////////////////////www.sxc. hu foto 1111567http: //////////////////////www.sxc. hu foto 1123775http://www.sxc.hu/photo/1187878, jeg redigerede billeder og skaleres til dimensioner af 136 x 95 pixels., trin 3: de fortegnelser, registret struktur er ganske enkel.en, billeder, folder for nogen billeder, en xml, folder for xml - dokumenter og flash er i den, rod,.,, trin 4: installere tweener ekstraheres tweener klasse i din klasse mappe.hvis du har brugt as3 i nogen tid, bør du have en klasse mappe.ellers, tag et kig på dokumentation og læse om, hvordan til at sætte det op.klik på downloads og anlæg forbindelse til venstre, løntrin 5: skabe din xml, jeg plejer at gøre det, men det, som jeg vil bygge flash - fil.jeg gør det her, fordi jeg vil tilføje flere funktioner, eller jeg tror, xml - filen struktur kan være en smule bedre.i alle tilfælde er de endelige xml - filen ser sådan ud:, < teaser > < punkt pos = "fantastiske nye videoer." etiket = "video" billede = "- image1 jpg" link = "http: //www.videohive. netto" > <![cdata [vi elsker videoer.og vi har nogle nye her.]] > < /post > < punkt pos = "audio løkker, din bedstemor ville elske." etiket = "lyd" billede = "- image2 jpg" link = "http: //www.audiojungle. netto" > <![cdata [vores audio loops er godt.]] > < /post > < punkt pos = "fed grafik får verden til at dreje rundt." etiket = "grafik" billede = "- image3 jpg" link = "http: //www.graphicriver. netto" > <![cdata [leve uden grafik, nej, det er bare forfærdeligt.]] > < /post > < punkt pos = "ikke stoppe læring." etiket = "tutorials" billede = "- image4 jpg" link = "http: //tutsplus. com" > <![cdata [viden er magt.gjort.]] > < /post > < /teaser >, åben din favorit tekst redaktør, kopiere og pasta xml - kode.en hurtig gennemgang – ee start xml - fil med en erklæring.der er så lidt knude (i mangel af bedre navn).teaser node er 4 barn knuder kaldet "post".hvert punkt node er 4 attributter.de er "under overskriften", "mærke", "image" og "sammenhæng".punktet node værdi, er en cdata afdeling.det er bedst at have en cdata afdeling ved tilsætning af en blok af tekst i flash. trin 6: skabe flash fil. åben, flash.skabe en ny flash - fil (actionscript. 3.,, at ændre > dokument (ctrl + j), sat filmen bredde og højde 600px 200px.ændre det baggrund farve,󴈿,.,, trin 7: oprettelse af det lag, skabe to lag.navn på de nederste "baggrund" og den øverste "foranstaltninger".lås aktioner lag.,, trin 8: skabe baggrund, nu skal vi skabe baggrund for vores reklame hjerte.vær sikker på, at du er på den baggrund, lag, så bruger den rektangel værktøj, skabe en ny rektangel med en størrelse på, 548px * 128px, og et hjørne radius af 8. giv det en lineær lodrette hældning med følgende værdier:,&#cccccc og&#ffffff,.slagtilfælde værdi også at,񑘕, og en højde på 0,2.center, dette objekt på scenen ved presning af ctrl + k, at sikre, at "center for fase" er udvalgt.klik på "tilpasse horisontale center" og "tilpasse vertikale center".,, trin 9: skabe en movieclip., vælges den nyoprettede baggrund og presse f8 på dit tastatur.sørg for, "film magasin" er udvalgt og give det et navn til "bg".,, trin 10: knapper moveiclip, nu skal vi skabe de bedste knapper movieclip.gå til at indsætte > nye symbol (ctrl + f8).giv det et navn til "knap" og sikre, at symbolet type er fastsat til movieclip.,, trin 11: redigér knapper, gå hen til vinduet > bibliotek (ctrl + l).finde "knap" symbol på biblioteket og double-click på det.dette vil tage dig til kronologien af symbolet.tilføjelse af to nye lag.de tre lag "situation", "tekst" og "aktioner" fra top til tå.,, trin 12: op, lad os tilføje op.på den baggrund lag, skabe et rektangel med følgende egenskaber:,, slagtilfælde, hjørne radius af 5, lineær gradient frae3224 og뵏a, fastsætte omfanget af denne form for 95px * 31px,.,, brug polystar redskab til at skabe et trehjulede polygon (trekant).denne lige neden under rektangel.- trekanten og rektangel.,, trin 13: den medlemsstat, tilføje en keyframe på den baggrund lag på ramme 2 i "knap" movieclip og skabe en afrundet rektangel, denne gang bruger en lineær gradient med disse værdier:,,ba2aa ogRb8c0, dobbelt rektangel, halvere det og giv det følgende værdier:,,&#ffffff, alpha: 10, tilpasse den maks af disse to områder, og du har en simpel skinnende knap!,, trin 14: afslutte knap, om teksten lag tilføjer et dynamisk tekst boks.giv det et tilfælde af "butlabeltxt".jeg brugte år 13pt som gotisk skrifttype.jeg har også tilføjet en dråbe skygge til tekstboks med følgende indstillinger:,, styrke: 80, kvalitet: høj, afstand: 2, resten af miljøer er tilbage som standard, på aktioner lag, tilføje en stopper foranstaltninger på både ramme 1 og 2.når det er klaret, sejle tilbage til de vigtigste tidslinje. gå 15: sammenkobling, nu skal vi give knap en forbindelse. åben op på biblioteket ved navigation til vindue > bibliotek eller anvende den genvej ctrl + l. du har kun én ting i dit bibliotek.- klik på "knap" movieclip og udvælge "forbindelse".i klasse felttype navnet "knap" (note kapital b).klik - trin 16: start - info - magasin, ramte ctrl + f8 - for at skabe et nyt movieclip.giv det et navn, "infoholder".oprettelse af tre lag.navn "foto", "tekst" og "knap".på billedet lag, skabe en afrundet rektangel med følgende egenskaber:,, 148px * 104px,ab1b9 ctrl + f8, slå ind på "skabe nye symbol" dialog kasse.giv det et navn, "picbg", og der tilsættes en dråbe skygge for dette rektangel. skridt 17: billede indehaver magasin, mens de stadig "foto" lag, skabe et rektangel med følgende egenskaber:,, 136px * 95px,&#ffffff,, at omdanne dette rektangel til en movieclip ved at slå på f8 på din tastatur.hedder det "holderclip" og give det et tilfælde af "holderclip_mc".slå ctrl + k at åbne tilpasse panel og center tilpasse disse to områder, om "tekst" lag skabe to dynamiske tekst kasser.giv dem følgende egenskaber: øverste tekstboks:,, 350px * 50px, bunden tekstboks:,, 350px * 71px, giv dem f.eks. navne på "headingtxt" og "summarytxt" hhv.,, gå 18: tilføje en knap, og endelig på knap lag, skabe en ny movieclip (ctrl + 18), og kalder det "morebut".skabe et afrundet rektangel med følgende egenskaber:,, 100px * 25px, foring gradient egenskaber:&#cccccc til&#ffffff, hjørne radius: 8, tilføje en statisk tekstboks og type "mere" inde i det.du kan også tilføje en enkelt rektangel til at fungere som en skillevæg og et plus for lidt mere detaljeret, giver et eksempel movieclip navn "morebut_mc".sejle tilbage til de vigtigste tidslinje. skridt 19: sammenkobling, lad os give movieclip en sammenkædning. åben op på biblioteket og give "infoholder" klippe en sammenkædning id "infoholder".,, gå 20: variabler. lad os kaste en kode ind i blandingen.gå til aktioner lag og ramte f9 på tastaturet åbne aktioner panel.for det første vil vi indføre tweener og skabe nogle variabler.kopi og pasta følgende kode i aktionerne panel.det ser ud, som om en masse, men jeg har prøvet at kommentere hver linje kode. //importere tweener klasse import caurina. overgange. *; //skabe en vriable opbevarer et tilfælde af urlloader klasse var xmlloader: urlloader = nye urlloader(); //tilføje en begivenhed til at lytte til at lytte, når rampe er læsset.xmlloader. addeventlistener (event.complete, docomplete); //belastning af xml - fil xmlloader. belastning (nye urlrequest ("xml - /drille. xml -"); //disse to variabler butik - numre, som vi tildeler værdier til senere.var catnum: nummer var newnum: antal; //disse to systemer vil opbevare knap navne.var butclipmain: array = [...], var butclip: array = []; //tildeler den nuværende knap nummer var currbut: antal = 0; //dette system vil opbevare forbindelsen med værdier fra xml - var linksarray: array = []; //vi tildeler en variabel navn til en sprite instans.denne sprite instans vil holde infoholder movieclip var holdersprite: sprite = nye sprite(); //vi føje den til scenen.addchild (holdersprite); //, skaber vi en variabel opbevarer de tilfælde af timeren klasse.vi har også sat timeren til 5 sekunder.var timer: timer = nye timer (5); //tilføje en begivenhed til at lytte, jas. addeventlistener (timerevent.timer, dotimer); //starte timeren timer. start(); skridt 21: de funktioner, vil vi nu tilføje funktioner.under den sidste linje i kode, slå ind to gange og ­pure: //skabe en funktion til docomplete funktion docomplete e: begivenhed): ugyldig (//skabe en ny variabel opbevarer et tilfælde af xml - klasse.vi passerer gennem oplysninger fra xml - filer.var xml: xml - = nye xml (e.target. data); //skaber vi et nyt xmllist.den opbevarer knudepunkter, vi ønsker adgang til i xml - filer.var catlist: xmllist = xml.item; //, skaber vi en anden xmllist.den opbevarer image attribut i knudepunkter.////////, så den butik, hvor det billede.-image3.jpg osv. var billeder: xmllist = xml. punkt. @ billede; //vi tildeler en værdi for variablen, der tidligere.//////////////, afhængigt af hvor mange poster i xml -, vil dette antal er forskellige.//for dette eksempel catnum = 3.catnum = catlist. length(); //vi starte en sløjfe i (var - jeg: antal = 0. jeg < catnum; jeg + +) (//her skaber vi eksempler på movieclips i biblioteket, og tilføjer dem til scenen.//skabe en variabel opbevarer de tilfælde af de klasser, der er skabt.var men: knap = nye button(); //sæt x holdning til knap tilfælde //udtrykket forøger afstanden mellem de knapper, men. x + = (ecu *) + 3 * i //fastsætte y holdning til knap tilfælde, men. y = 18; //vi fortælle tilfælde gå til deres andet billede og stop.//vil det være deres "ned" holdning, men. gotoandstop (2); //giver vi den dynamiske tekstboks i knap en tekst.//teksten vil blive mærket attribut i hvert knudepunkt i xml.but.butlabeltxt.text = catlist [i]. @ etiket; //vi tildeler et navn til knap tilfælde.//////////////navne vil blive but1, but2, but3 but.name = ", men" + jeg; //vi tilføjer de eksempler på scenen addchild (men); //tilføjer vi den knap navne til det system, der tidligere butclip. tryk (men. navn); //tilføjer vi den knap navne til det system, der er skabt tidligere butclipmain. tryk (men. navn); //tilføjer vi forbindelsen værdier til system, der tidligere linksarray. tryk (catlist [i]. (link); //her skaber vi eksempler på movieclips i biblioteket, og tilføjer dem til scenen.//skabe en variabel opbevarer de tilfælde af de klasser, der er skabt.var info: infoholder = nye infoholder(); //sæt x holdning til infoholder tilfælde //udtrykket forøger afstanden mellem de knapper info. x + = (560 *) + 5 (* i //fastsætte y holdning til infoholder tilfælde info. y = 50; //giver vi den dynamiske tekstboks i knap en tekst.//teksten til headingtxt tekstboks vil være overskriften attribut i hvert knudepunkt i xml.info.headingtxt.text = catlist [i]. (pos. //teksten til summarytxt tekstboks vil være cdata del af hvert knudepunkt i xml.info.summarytxt.text = catlist [i]; //vi tildeler et navn til infoholder tilfælde.//////////////navne vil blive but1, but2, but3 info.name = "info" + jeg; //vi tilføje en begivenhed til at lytte til de mere knap i infoholder info. morebut_mc. addeventlistener (mouseevent.click, strække sig videre, falske, 0, sande); //vi buttonmode sand, så movieclip vil fungere som en - knap.info.morebut_mc.buttonmode = sandt; //vi tilføje infoholder tilfælde, som børn af sprite skabte vi tidligere.holdersprite. addchild (info); //, skaber vi en ny platform instans var picloader: lad = nye loader(); //anmoder vi om billederne var picurlreq: urlrequest = nye urlrequest (billeder [i]); //vi læsser de billeder, picloader. belastning (picurlreq); //vi tilføjer de billeder til klip i infoholder info. holderclip_mc. addchild (picloader); //vi tilføje en begivenhed til at lytte til knap tilfælde.men. addeventlistener (mouseevent.click, doclick, falske, 0, sande); //det forhindrer tekstboks fra mus gav but.mousechildren = falske) //- det er den første knap eksempel på scenen til en "op" holdning ved at sende det til sin første ramme.movieclip (getchildbyname (", men" + 0). gotoandstop (1) //sætter vi den newnum variabel til en mindre end værdien af de variable catnum newnum = catnum - 1} //, skaber vi en ny funktion kaldes dotimer //denne funktion vil blive kaldt hvert 5. sekund.funktion dotimer e: timerevent): ugyldig (//vi starte en betinget hvis erklæring //den kontrol, hvis den nuværende knap værdi er mindre end newnum er variabel, hvis værdi (currbut < newnum) (//vi forøgelse af værdien af de currbut variabel currbut +; //, vi kalder funktion prevbut og sende gennem currbut værdi som et parameter prevbut (currbut); //, vi kalder den funktion, switchbuttons og sende gennem currbut værdi som et parameter switchbuttons (currbut); //, vi kalder den funktion, tweenswitch tweenswitch();} //den anden af den betingede //den kontrol, currbut variabel er lig med newnum variabel andre, hvis (currbut = = newnum) (//sætter vi den currbut variabel værdi tilbage til 0 currbut = 0; //, vi kalder prevbut f- salve.vi sender en parameter prevbut (newnum + 1); //, vi kalder switchbuttons funktion.vi sender en parameter switchbuttons (currbut); //, vi kalder tweenstart funktion tweenstart();}} //, skaber vi en funktion til doclick.det behandler knap begivenheder.funktion doclick e: mouseevent): ugyldig (//, skaber vi en variabel.værdien er navnet på den, der ringer.////////, hvis but1 er faldt værdien af butstring vil blive but1 var butstring: string = streng (e.target. navn); //, skaber vi en anden variabel.værdien er første variabel skåret.////////, hvis but1 er faldt værdien af slicedstring vil være 1 var slicedstring: string = butstring. del (3); //, skaber vi en ny variabel og dets værdi slicedstring, som har været type støbt til et nummer.var butnumber: antal = antal (slicedstring); //hvis knappen er trykket på knappen til at sende ramme 1."ned" stat e.target. gotoandstop (1) //vi starte en løkke til (var - j = 0 j < butclip.length; j + +) (//vi loop gennem knapper og sætte dem til deres "op" stat movieclip (getchildbyname (butclip [j]). gotoandstop (2); //sætter vi den knap, der blev slået til dets "ned" stat e.target. gotoandstop (1): //vi stoppe uret, hvis knappen er trykket timer. stop(); //, vi kalder buttween funktion og sende en parameter //hvis but1 er slået den parameter, vil være 1 buttween (butnumber)} //, skaber vi en funktion kaldes strække sig videre //denne begivenhed ikke tager sig af de mere knap i infoholder funktion strække sig videre e: mouseevent): ugyldig (//, skaber vi en variabel.værdien er navnet på den, der ringer.var butstring: string = streng (e.target. forælder. navn); //vi skære den butstring værdi kun antallet //hvis info1 er presset slicedstring vil være 1 var slicedstring: string = butstring. del (4); //hvis info1 er presset, det vil gå tilbage til den første url i linksarray //den første del af dette system vil være lige forbindelsen kendetegn for det første barn knudepunkt i xml.navigatetourl (nye urlrequest (linksarray [antal (slicedstring))))) //, skaber vi en funktion til prevbut, der forventer en parameter //denne funktion har tidligere knap så knap bevæger sig fra den til den næste opgave prevbut (butvalue: antal) ugyldig (//fastsætter den foregående knap sin "" stat movieclip (getchildbyname (", men" + (butvalue-1)). gotoandstop (2): //, skaber vi en funktion til switchbuttons funktion switchbuttons (butvalue: antal) ugyldig (//indeholder den nuværende knap sin "ned" stat movieclip (getchildbyname (", men" + butvalue)). gotoandstop (1);} //, skaber vi en funktion til tweenswitch //denne funktion har tweening af sprite objekt funktion tweenswitch(): ugyldig (//holdersprite erflyttede - 560px hvert 5. sekund.den bevæger sig - 560px, fordi det er ca. bredden af en infoholder tweener. addtween (holdersprite (x: holdersprite. x - 560, tid: 1, overgang "easeoutquad"})} //, skaber vi en funktion til tweenstart //denne funktion håndtag til begyndelsen af animation funktion tweenstart(): ugyldig (////////, hvis reklamen motor starter i begyndelsen, at vi holdt holdning til 5.tweener. addtween (holdersprite (x: 5: 1, overgang "easeoutquad"})} //, skaber vi en funktion til buttween //denne funktion har knap presse.det tager sig af, hvordan den sprite reagerer, når knappen er trykket.//det forventer, at en parameter.hvis but1 blev presset, parameter ville være 1. funktion buttween (movevalue: antal) ugyldig (//vi starte en hvis betinget //kontrol, hvis værdien af en parameter er 0, hvis (movevalue = = 0) (//hvis parameter er 0, flyt den sprite til sin udgangsstilling tweener. addtween (holdersprite (x: 5: 0,5, overgang "easeoutquad"}); //nulstille currbut variabel værdi currbut = movevalue; //start uret igen her. start();} //andet af den betingede andet (//, hvis en af de andre knapper er presset flytte sprite den korrekte placering tweener. addtween (holdersprite (x: movevalue * - 560, tid: 0,5, overgang "easeoutquad"}); //den currbut variabel værdi svarer til knap 0,1 osv. det varpresset currbut = movevalue; //starte timeren.timeren. start();}}, konklusion, det er det!test din film.du burde have en reklame hjerte, der kan anvendes til at fremme nye historier, produkter eller noget af interesse på din hjemmeside.som nævnt tidligere, er det også en stor plads. hej.jeg håber, du nød den tutor.



Directory Structure
Create a new flash file
Document Properties
Set up the layers
Create the background
Convert to movieclip
Create Button Clip
Create Layers
Create Button Up
Create Arrow
Create Button Down
Create Textbox
Button Linkage ID
Create Pic Holder
Create Textboxes
Create More Button
Linkage ID



Previous:
Next Page: