Wkunl

Hoe maak je een eenvoudige flash interactieve webpagina te maken


Met deze informatie, kunt u ook uw eigen website te bouwen. Veel grote bedrijven hebben een uitstekende flash websites, toch zo veel kleine bedrijven lijken niet in staat om het ontwerpen van een glad en schoon website. In deze tutorial zullen we een Tropics-themed website te maken. LET OP: Deze tutorial ervan uitgegaan dat u weet hoe u Flash 8 of MX gebruiken.

Bewerkt door Alex Dickinson 2008/06/03

Stappen

Hoe maak je een eenvoudige flash interactieve webpagina te maken. Open uw Macromedia Flash-toepassing en selecteer 'nieuwe flash-document ".
Hoe maak je een eenvoudige flash interactieve webpagina te maken. Open uw Macromedia Flash-toepassing en selecteer 'nieuwe flash-document ".
  1. 1
    Open uw Macromedia Flash-toepassing en selecteer 'nieuwe flash-document ".
  2. 2
    Op de "eigenschappen" balk aan de onderkant van het scherm (als je dit niet kan zien, ga naar window -> woning -> klik op het terrein, op de knop die "grootte" naast het zegt.
  3. 3
    Een venster met de naam "document eigenschappen" moet pop-up, in de twee blanks naast "dimensies", in 625 te vullen voor breedte en 750 voor de lengte.
  4. 4
    Op dezelfde "eigenschappen" bar, verandert de achtergrondkleur van een zacht groen, # bae29e (gebruik het tekstvak boven aan de kleurkiezer) is een goede kleur te gebruiken, en klik op ok.
  5. 5
    Maak een symbool door op CTRL + f8.
  6. 6
    Noem het "banner_mc", en stel zijn soort "movie clip" en klik vervolgens op OK.
  7. 7
    Maak een rechthoek, zonder vulling en een 2-pixelgrootte grens, met behulp van de rechthoek tool op de linkerkant.
  8. 8
    Selecteer de rechthoek met het selectiegereedschap (default - 'v) en stel de breedte op 750 en de hoogte op 172 met de eigenschap balk aan de onderkant van het scherm.
  9. 9
    Op de "kleur mixer" side-paneel aan de zijkant van het scherm (als je dit niet ziet ga naar window -> kleur mixer, selecteert de radiale optie in het drop-down box.
  10. 10
    Aan de linkerkant van de radiale kleur balk, selecteer een blad kleur (door te dubbelklikken op de schuif). # 66CC00 zou mooi werk.
  11. 11
    3/4 's van de weg langs de bar, zet een stevige witte door te klikken en te dubbelklikken op het en wit te selecteren.
  12. 12
    Helemaal naar de rechterkant einde van de bar, plaats een tropische kiwi kleur. # 99ff66 is een goede keuze hier.
  13. 13
    Nu, met behulp van het emmertje (default - 'k'), vult uw banner met de radiale. Waar u klikt op te vullen zal het centrum van je cirkel-achtige ontwerp te vertegenwoordigen. Het plaatsen van het middelpunt van de cirkel aan de bovenkant van de lat, ongeveer 3/4 is van de weg naar de linkerkant.
  14. 14
    Kijk omhoog naar uw lagen bar, en noem deze laag "basis".
  15. 15
    Maak een laag met de nieuwe laag knop (aan de onderkant van de bar) - Noem deze "tekst".
  16. 16
    Selecteer het tekstgereedschap (standaard - 't') aan de linkerkant, en zorg ervoor dat de tekst die is ingesteld op de "statische tekst" optie aan de onderkant van het pand bar.
  17. 17
    De kleur van de tekst zwart.
  18. 18
    Selecteer een lettertype te gebruiken. Sommige van de genoemde fonts zijn op maat gemaakte fonts, en de beugels naast hen bevatten de website om ze te downloaden van.
    • Scriptina (Abstract Fonts)
    • WirWenzlaw (Abstract Fonts)
    • Viner Hand ITC
    • Sylfaen
    • Monotype Corsiva
    • Handscript
    • Lucida Blackletter
    • Papyrus
  19. 19
    Typ uw naam van uw website in het tekstveld en vinden van een juiste maat.
  20. 20
    Plaats de tekst aan de linkerkant. Laat voldoende ruimte om een ​​afbeelding te plakken.
  21. 21
    Ga op het internet, om google afbeeldingen en type in "palmboom".
  22. 22
    Selecteer een foto van een palmboom, zoals deze bitmap: Palm
  23. 23
    Bewaar deze foto, en deze importeren in uw flash-document met behulp van file -> import.
  24. 24
    Noem maar op in de bibliotheek als "palm tree_bmp"
  25. 25
    Maak een symbool (ctrl + f8), noem maar op palm tree_gr, en selecteer de grafische keuzerondje.
  26. 26
    Resize het aan uw wensen aanpassen met behulp van de vrije transformatie gereedschap (default - Q) aan de linkerkant van het scherm en snijd een deel ervan je niet bevalt uit.
  27. 27
    Ga terug naar de banner, en maak een nieuwe laag.
  28. 28
    Noem het "beeld".
  29. 29
    Leg je handpalm tree_gr, en schalen zodat het past in de linker bovenhoek.
  30. 30
    Plaats nu je banner_mc op scene 1.
  31. 31
    Maak een nieuw symbool (ctrl + f8), noem het navigation_mc, en maken het een filmclip.
  32. 32
    Maak een dunne, lange rechthoek om uw links te huisvesten.
  33. 33
    Noem de laag "basis"
  34. 34
    Maak het een 2-pixelgrootte grens
  35. 35
    Vul de rechthoek met # 66cc00.
  36. 36
    Maak een tweede (knop) symbool (ctrl + f8), noemen het "home_bt".
  37. 37
    Kijk terug naar de lijst met lettertypen I verstrekt, en kies een ander lettertype dan uw banner, een die ziet er goed uit met de andere. Zorg ervoor dat al uw toetsen zijn met behulp van hetzelfde lettertype en grootte.
  38. 38
    Schrijf "thuis",
  39. 39
    Breekt het uit elkaar met CTRL + B.
  40. 40
    Kopieer frame "up", en plak het op de andere frames.
  41. 41
    Noem deze laag "tekst".
  42. 42
    Maak een nieuwe laag, noem het "verborgen".
  43. 43
    Maak een rechthoek ruwweg betrekking tot uw tekst.
  44. 44
    Geef de rechthoek geen grens, en stel de alpha op 0%.
  45. 45
    Kopieer de rechthoek frame en plak het op de andere frames van die laag.
  46. 46
    Ga terug naar de navigation_mc en maak een nieuwe laag.
  47. 47
    Noem het "knoppen".
  48. 48
    Zet je de knop daar.
  49. 49
    Herhaal stap 43-54 voor zo vele knoppen die u nodig hebt.
  50. 50
    Zet een 1-pixel lijn tussen je toetsen op navigation_mc, op de "basis" laag.
  51. 51
    Ga terug naar scène 1 en noem de laag met je banner "banner".
  52. 52
    Maak een tweede laag, en noem het navigatiesysteem.
  53. 53
    Plaats uw navigatie op deze.
  54. 54
    Maak zoveel frames als je knoppen op uw menu.
  55. 55
    Maken ze allemaal keyframes (door rechts te klikken op het frame en het selecteren van "insert key frame", of druk op f6).
  56. 56
    Klik op je navigation_mc.
  57. 57
    Klik op uw home-knop, en open het actionscript door te klikken op de actie-paneel aan de onderzijde van het scherm of de snelkoppeling ik gebruik het vaakst f9.
  58. 58
    Met behulp van "expert mode" typ het volgende:
    gotoAndStop (1);
    } Dit maakt het dus wanneer de muis wordt geklikt en vrijgegeven het zal gaan om het frame '1 'en te stoppen.
  59. 59
    Op uw volgende knop, hetzelfde doen, behalve in de "gotoAndStop" bracket, schrijft het volgende nummer (in volgorde).
  60. 60
    Ga terug naar scène 1.
  61. 61
    Open de acties voor frame 1 (f9).
  62. 62
    Typ in: stop ();
  63. 63
    Maak een nieuwe laag op scène 1, en ​​noemen het "tekst".
  64. 64
    Zet alle frames op die laag om keyframes, en maak zoveel als je nodig hebt om een keyframes om je andere lagen passen hebben.
  65. 65
    Maak een tekstveld met behulp van het tekstgereedschap (T), en schrijven wat je wilt op elke pagina.
  66. 66
    Test de webpagina, en laat wie je wilt testen.
  67. 67
    Ga naar bestand -.> Instellingen html publiceren, zorg ervoor dat is geselecteerd en druk op publiceren. Dit zal de flash website die u hebt gemaakt in een html-bestand voor u naar waar je het hebt opgeslagen te publiceren. Als dit niet werkt zorg ervoor dat u hebt opgeslagen, herhaalt u deze stap.
  68. 68
    Dubbelklik op het bestand dat u hebt gepubliceerd (. Html) en je bent klaar!

Tips

  • Geef jezelf een of twee dagen om deze te voltooien binnen de tijd Breaking up kan ervoor zorgen dat je vergeet waar je in de tutorial.
  • Niet Put De tekst op Scene 1, zet het in navigation_mc, zelfde met de frames, omdat anders de toetsen zijn nutteloos.

Waarschuwingen

  • Zorg ervoor dat voor elk uur dat u uitgeeft op de computer, een half uur durende sessie van de oefening krijg je.

Dingen die je nodig hebt

  • Hosting service
  • Flash Professional 8 of MX
  • Ten minste 4 uur tijd
  • Creativiteit
  • Basiskennis van Actionscript