, hurtigt tip: dæmpe lyset med flash og jquery,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i denne hurtige tips. du skal lære at bruge flash er externalinterface funktion og tilføje lidt jquery at skabe en "lys", som henry den hjemmeside.det er virkelig effektivt til brug med videoafspillere, slideshows osv.,,,, indledning, at skabe dette lys vi vil bruge den externalinterface kommando i flash.vi vil skabe en opfordring til en jquery funktion, som henry den hjemmeside, når dosisknappen er trykket.vi skal bruge dreamweaver (eller html redigere programmet) at oprette et websted for at vise den virkning, dette er en meget nyttig virkning at tilføje til flash ansøgninger (såsom videoafspillere) for at styrke brugernes erfaringer og tilføje lidt ekstra funktioner til din hjemmeside.,, trin 1: skabe knap baggrund, skabe en ny actionscript 3 dokument, og sæt den til 120 x 120px.skabe en 100 x 100px square med en krog radius af 10. og fyld den med en gradient på,&#bbbbbb, til󴈿,.brug den gradient omdanne værktøj (genvej nøgle ", f) at skifte gradient, så&#bbbbbb er øverst i stedet for retten. så vælge den baggrund og omdanne det til et symbol (ændre > konvertere til symbol) og navn det buttonbackground.,, trin 2: styrke på den baggrund, gå ind på den baggrund movieclip ved dobbelt klik på det og udvælge hældning.så tryk ctrl + c for at kopiere det, ctrl + forskydning + v til at give det samme sted, og så uden lukning af det ændre > form > udvide fyld og indpresningsdybde, det ved 2px,.ændre gradient, så det går ud fra,&#cccccc, til&#aaaaaa,.,, trin 3: skabe resten af knap, vende tilbage til de oprindelige tidsplan og udvælge de knap movieclip så ændre > konvertere til symbol og vælge, med det navn, lightsoff, gå nu. i knap ved dobbelt klik på det og skabe 2 nye lag over baggrunden lag, pære og tekst.skriv "lys" om teksten lag.jeg brugte arial dristigt på 20pt og farve af񬠜.jeg har også skabt en simpel pære, ved hjælp af en cirkel på toppen og nogle afrundede kvadratisk eller rektangulær form for basen.jeg lavede den pære en farved5d5d. gå videre til næste keyframe til "over" state of the button, gør teksten farve񖓿 og pærens farvec4c4c. giv den baggrund en glød filter med disse egenskaber:,, x og y tåge: 10px, styrke: 100%, kvalitet: høj, farve:򢰪, for ad state bare slette gløden fra baggrunden og rotere baggrund 180 °.,, trin 4: skabe "lys" - knap, gå ind i dit bibliotek, right-click på lightsoff knap vælge "duplicate" navn og den nye kopi ", gå bare." i den, bare knap og ændre teksten til "lys" for alle medlemsstater.også tilføje nogle lys stråler rundt pæren som vist i pic - nedenfor:,, løntrin 5: skriver actionscript, gå tilbage til den vigtigste etape.sørg for at have en instans, lightsoff, på scenen, og en, der bare, movieclip.giv dem f.eks. navne på "lightsoff" og "bare".- begge de knapper på scenen med tilpasse panel.hvis du ikke kan se hen til vinduet > tilpasse (eller tryk ctrl + k).vær sikker på, at du klik "tilpasning til fase" knappen nede på bunden af panelet., åbne et nyt actionscript fil og skrive det grundlæggende dokument klasse.hvis du ikke ved om dokument klasser læse michael er hurtig tip til at hjælpe dig med at komme i gang, redde actionscript fil som "lys." og så i den klasse i - dokumentet. ned til lys. det ligner måske en masse kode, men når man læser kommentarer er faktisk ret simpelt., pakke (import flash.display.movieclip; import flash.external.externalinterface; //import den klasse, der er nødvendige for at kalde en jquery funktion import flash.events.mouseevent; //import den klasse, der er nødvendige for at påvise et muse klik offentlige klasse lys udvider movieclip {offentlige funktion lights() {lightson.visible = falske; //gøre bare knap usynlige lightsoff. addeventlistener (mouseevent.click, turnlightsoff); //add en lytter til et muse klik på lightsoff knappen bare. addeventlistener (mouseevent.click, turnlightson); //tilføje en til at lytte til et muse klik på bare knap funktion turnlightsoff e: mouseevent): ugyldig (//sluk - funktion lightson.visible = sandt; //gøre bare knap synlig lightsoff.visible = falske. //gøre lightsoff knap usynlige externalinterface. ("lightsoff"); //kalder jquery funktion lightsoff '} funktion turnlightson e: mouseevent): ugyldig (//tænde lys funktion lightson.visible = falske; //gøre bare knap usynlige lightsoff.visible = sandt; //gøre lightsoff knap synlig externalinterface. ring til ("bare"); //-l den jquery funktion "bare"}}}}, trin 6: skabe grundlæggende html skabelon, åben din tekst, redaktør for at skabe html sider.i mit tilfælde jeg bruger adobe dreamweaver.skabe en blank html dokument og redde det, lightswitch.html, i det samme register som din stg.derefter nedsat deres dokument med følgende kode:, < html > < head > < stil type = "tekst /css" > organ {* er det vigtigste organ mærke * /tekst tilpasse: center; /* center hele indholdet i den side * /margen: 40px 0 /* giver en margen på toppen og bunden af det dokument, så indholdet ikke øverst eller nederst * /}&#lys {/* den beholder, som holder kontakten * /stilling: relativ; /* den holdning i lyset den relative, så det kan være placeret over "og" lag * /z-index: 500 /* fastsat højde på z - aksen 500, der ligger over ", mens" lag * /} objekt (/* genstand, er, hvad stg filer opbevares i * /oversigt: ingen; /* sæt digtline of swf objects to none so when you click on it you don't get a border around the swf */ \t\t} \t\t \t\t#fade { /* This is the "dimmed" layer which fades in when the lights go off */ \t\t\tdisplay: none; /* Set the display to none which hides the layer */ \t\t\tbackground: #000; /* Set the color to black */ \t\t\tposition: fixed; left: 0; top: 0; /* Set the position to fixed so when the user scrolls it stays with them */ \t\t\twidth: 100%; height: 100%; /* Set the width and height to 100% of the browser window */ \t\t\topacity: .90; /* Set the layer's opacity to .90 which is 90% */ \t\t\tz-index:100; /* Set the height on the Z axis to 100 which is below the "light switch" layer */ \t\t} \t</style> </head> <body> \t<div id="lights "> < /div > <!- dette er en beholder med flash - fil - > < /organ > < /html >,, trin 7: tilføje stg til dokumentet med swfobject, jeg vil tilføje til flash - fil med swfobject.hvis du ikke ved om swfobject så kan du læse afsnit 1 i angels forelæsning om anvendelse af swfobject at indsætte deres stg filer i din html dokument.når du har styr på swfobject og have den nødvendige filer, du kan fortsætte. du bliver nødt til at tilføje følgende kode indenfor, < head >, mærker på din html side.som du kan se, du skal have den, swfobject.js, og expressinstall.swf, filer i samme fortegnelse som din stg og html side. < manuskript type = "tekst /javascript" src = "swfobject. er" > < /manuskript > < manuskript type = "tekst /javascript" > var flashvars = falske var params = {film: "lys. stg" kvalitet: "høj", allowscriptaccess: "altid", wmode: "gennemsigtige"} var attributter = falske swfobject. embedswf ("lys. stg", "light", "100", "100", "9.0.0", "expressinstall. stg", flashvars, params, attributter). < /manuskript >,, trin 8: skriver jquery funktioner, som nu er det eneste vi skal gøre er at skrive jquery funktioner.det er to enkle funktioner, som vil blive kaldt fra stg, når du klikker på knappen. disse også gå indenfor, < head >, mærker under swfobject kode.As you can see I am getting the jQuery file straight from the google server., <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> \tfunction lightsOn(){ \t\t//When you turn the lights back on fade out the "dim" layer over 500 milliseconds and then remove it \t\t$('#fade').fadeOut(500,function() { $("#fade").remove(); }); \t}; \t \tfunction lightsOff(){ \t\t$('body').append('<div id="fade"></div>'); //When you turn the lights off add the "dimmed" layer to the page \t\t$('#fade').fadeIn(250); //Fade in the "dim" layer over 250 milliseconds \t}; </script>, ,Conclusion,Now if you test your HTML file you should see the lyset skifte arbejde som i demo.det er en meget nyttig virkninger for flash - videoafspillere, når man ønsker at styrke brugernes erfaringer på din hjemmeside.det gør det meget lettere for brugeren at fokusere på stg. jeg håber, du kan lide denne forelæsning, og tak for det!,