Lær, hvordan du tilføjer forskellige rulleeffekter, f.eks. piece-by-piece, glidende menu, rul-op og meget mere.
I dette afsnit skal du se nærmere på nogle af de mange anvendelsesmuligheder med rulleeffekter for at tilføje interaktive funktioner, unik navigation på websitet og udtryksfuld bevægelsesgrafik på dine Muse-websites.
Følg nedenstående trin for at komme i gang:
Denne effekt får et sæt af individuelle elementer til at flyve ind og samles i sidedesignet, når den besøgende ruller ned på siden. Grafik og tekstrammer styres via rulleeffekter, der skaber interaktiv sammensætning, som om et puslespils brikker bliver samlet. Det er en spændende fremvisning af produktdetaljer på en webside.
Arbejdsforløbet for dette eksempel bruger sektionen Første bevægelse under fanen Bevægelse i panelet Rulleeffekter til at samle elementer i et fælles design. Når hver brik falder på plads, er Sidste bevægelse indstillet til 0 for at bevare de eksisterende elementers position, når nye elementer flyver ind.
Følg disse trin for at skabe en lignende piece-by-piece-effekt:
Endelig mangler der to elementer nederst: Et ensfarvet rektangel, der er fyldt med samme rene farve som siden (så det er usynligt i designet) og en gruppe af objekter (et gult rektangel med en lyspæregrafik) bag det.
Det ensfarvede rektangel er der for at skjule en gruppe, som er anbragt bag det.
Mens begge elementer er markeret, skal du bemærke, at de værdier, der er ens for alle de markerede elementer, vises i felterne. I dette eksempel er både rektanglet og gruppen indstillet til 0 for den lodrette retning i sektionen Første bevægelse og 0,0 i sektionen Sidste bevægelse. Der vises ingen værdi i det vandrette felt i sektionen Første bevægelse, fordi gruppen er indstillet til at flytte mod venstre med 1 gange (samme som) rullehastigheden, mens rektanglet er indstillet til 0.
Som du kan se i dette eksempel, kan du bruge en kombination af en meget høj side, en række elementer, der er placeret strategisk på lag i panelet Lag, og fanen Bevægelse i panelet Rulleeffekter til at skabe en illusion af brikker, der samles i en animation, når siden rulles ned.
Denne glidende menueffekt bruger mange af de samme konventioner, som er beskrevet i piece-by-piece-effekten. Elementerne ser ud til at flyve ind ved hjælp af fanen Bevægelse i panelet Rulleeffekter, og rektangler skjuler nogle af elementerne, indtil de er klar til at blive vist i sidedesignet.
Dette eksempel bruger strategisk placerede grupper af rektangler til at oprette udseendet af et komplekst vinkeldesign.
Vis eksempelwebsitet i en browser for at se flyet glide vandret hen over siden fra højre mod venstre efterfulgt af et sæt stiliserede menupunkter og en farveforløbsbaggrund med diagonale striber.
Følg disse trin for at skabe en lignende glidende effekt:
Grupper er glimrende til at kombinere et sæt af elementer og styre dem som et enkelt element. I dette eksempel er der anvendt bevægelse med rulleeffekter på forskellige rektangler for at få gruppen til at bevæge sig som en samlet helhed.
Dette eksempel illustrerer også kreativ brug af negativ plads. Hvis browserfyldet har en ren baggrundsfarve, kan du skabe en række spændende udskæringseffekter ved at lagdele rektangler, der er fyldt med samme farve, oven på andre rektangler. I stedet for at designe grafik i et billedbehandlingsprogram og placere et enkelt billede på siden kan du bruge rektangler til at konstruere grafik i Muse-arbejdsrummet.
Dette eksempel på en animeret solopgang og solnedgang skabes via en kombination af to rulleeffekter: bevægelse og opacitet. Dette eksempel viser en sidebaggrund med farveforløbsfyld og et enkelt placeret PNG-billede af solen. PNG-billedet indeholder gennemsigtige arealer, så baggrundssidens fyldfarve er synlig.
Gennemgå eksempelwebsitet i en browser for at se, hvordan solen toner ind fra 100 % gennemsigtighed for at flytte hen over siden. På toppen er den helt uigennemsigtig, men når du ruller videre ned ad siden, går solen ned og bliver gradvist mere gennemsigtig igen, indtil den toner ud.
Følg disse trin for at skabe en lignende toningseffekt:
Disse indstillinger får solen til at bevæge sig i en halvcirkelbane, der buer fra nederste venstre hjørne af siden op til midten (hvor nøglepositionen nås) og derefter ned igen til nederste højre hjørne af siden.
Dette eksempel viser, hvordan du kan styre OAM-filer, der er eksporteret fra Adobe Edge Animate, ved hjælp af rulleeffekter. I dette eksempel er siden udfyldt med et lodret farveforløb, der begynder med en lys turkis farve og overgange til en mørkeblå farve.
En kombination af anvendte indstillinger under fanerne Bevægelse og Edge Animate skaber denne animerede effekt.
Tre forekomster af samme OAM-fil er placeret vandret side om side for at oprette en række animerede kompasser. Når du får vist eksempelwebsitet i en browser, bevæges alle tre kompasser opad, bliver synlige og forbliver i position. De tre kompasser ser ud til at dreje med forskellige hastigheder, men det er indstillingerne i panelet Rulleeffekter og ikke konstruktionen af Edge Animation-filen, der får dem til at dreje med forskellige hastigheder.
Følg disse trin for at oprette en lignende effekt med tre placerede OAM-filer:
Hvis du får vist eksemplet i en browser, kan du se alle tre OAM-elementer springe op samlet og blive stående på række, som om de er fastgjort.
De to sidekompasser er begge konfigureret til at gå i løkke gennem tidslinjeanimationen og gå videre til næste billede, hver gang siden rulles 350 pixels ned.
Du kan oprette interessante animationseffekter ved at variere hastigheden af flere placerede Edge Animate-animationer i forhold til rullehastigheden af siden. Du kan f.eks. oprette en fiskestime, en himmel med skyer i bevægelse eller andre effekter ved at tilføje flere gentagelser af samme OAM-fil med forskellige anvendte indstillinger for rulleeffekt.
Du kan styre, hvordan sættet af billeder i en diasshow-widget vises i forhold til, hvordan siden rulles. Det involverer tilføjelse af en diasshow-widget på en side og derefter brug af fanen Diasshow i panelet Rulleeffekter til at opdatere diasshow-indstillingerne.
I dette eksempel er diasshowet udfyldt med en række billeder, der opretter en 360-graders roterende visning af en rygsæk. Du kan tage lignende diasshow-billeder ved at opstille et stativ og tage et foto af et objekt, der er placeret på en roterende stander. Denne effekt er velegnet til visning af en interaktiv produktbeskrivelse, der hjælper potentielle kunder med at se en vare fra alle vinkler, før de køber den.
Følg disse trin for at skabe en lignende effekt ved hjælp af en diasshow-widget:
Mens diasshowet er markeret, kan du markere diasshow-widgeten og bruge funktionen Fastgør i kontrolpanelet til at fastgøre diasshowet i dets position. Du kan også eksperimentere ved at tilføje en diasshow-widget i fuld skærm og styre den med rulleeffekter.
Med rulleeffekter kan du oprette en meget lang side, der er inddelt i sektioner med vidt forskellige udseender. Når den besøgende ruller ned på en side, er der overgang mellem sidesektioner, der ser ud til at rulle opad, med animerede teksteffekter og skillelinjer, der er oprettet med en skyggeeffekt.
Du kan bruge ankermærker eller bare tilføje en note, der opfordrer de besøgende til at rulle ned på siden for at se de andre sektioner. Når du kommer til bunden af eksempelwebsitet og klikker på knappen Top, kan du se hele siden flimre forbi, mens ankermærket vender tilbage til toppen af sidedesignet.
Følg disse trin for at skabe en lignende oprulningseffekt:
I dette eksempel indeholder den dublerede tekstramme teksten: Use it to drastically alter the appearance of your website. Du kan dog indtaste en valgfri tekst for at identificere sidens mørkeblå sektion.
Du kan oprette usædvanlige typografiske design med en kombination af rulleeffekter for bevægelse og Adobe Edge-webskrifttyper. Med webskrifttyper kan du formatere tekst ved hjælp af en bred vifte af skrifttyper, der indlæses sammen med siden. I stedet for at placere og animere billeder af tekst, der er oprettet i et billedbehandlingsprogram, kan du oprette sider, der ser pæne ud og er lettere at opdatere med Edge-webskrifttyper. Og rulleeffekterne giver en iøjnefaldende fornemmelse af animation, når siden rulles ned.
Følg disse trin for at skabe en lignende effekt ved hjælp af dynamisk tekst:
Du kan som et valgfrit ekstra trin dublere nogle af tekstrammerne og derefter anvende lidt anderledes formatering. I dette eksempel er tekstrammen med ordet Create dubleret, og derefter er de to forekomster lagt oven på hinanden for at skabe en lyseblå slagskyggeeffekt.
Hvis du vælger at dublere en tekstramme for at skabe en slagskyggeeffekt, kan du gruppere to eller flere gentagelser af en tekstramme og styre dem som en samlet gruppe, når du anvender rulleeffekter.
Du kan oprette spændende interaktiv webnavigation med rulleeffekter, så de forskellige knapper flyver ind i det synlige område af siden og derefter justeres for at skabe en menulinje. I dette eksempel bevæges de fire overgangsknapper op fra bunden af siden, når den rulles, og låses i position for at fremvise en lodret menulinje.
Når de fire knapper er justeret, flyver baggrundsindhold (i form af en lyspæregrafik, et farvelagt baggrundsareal, en tekstramme og diagonale hjørnestriber) ind fra begge sider for at oprette en sektion af websitet.
Knapperne har ikke links i dette eksempel, med du kan oprette links efter behov i menuen Hyperlink, så de besøgende kan klikke på dem for enten at indlæse en ny side eller bruge ankermærker til at springe til et andet sted på den aktuelle side.
Følg disse trin for at skabe en lignende stablet menueffekt:
Da du dublerede den første Home-knap, kopierede du formateringen af tekstrammen og dens indhold sammen med indstillingerne for rulleeffekter. Hvis du markerer en af de dublerede knapper, kan du i panelet Rulleeffekter se, at indstillingerne under fanen Bevægelse matcher de indstillinger, der er anvendt på Home-knappen, og nøglepositionen for hver knap er 460 pixels under den forrige knap (samme afstand som mellem hver knap på siden).
Den grundlæggende stablede menusektion er nu færdig. Der er dog endnu et designelement, du kan tilføje. Det involverer tilføjelse af flere roterede rektangler over nederste højre hjørne af det store rektangel på samme måde, som eksemplet Glidende menu brugte roterede rektangler til at skabe en diagonal stribeeffekt.
Du kan skabe en bevægelig baggrundseffekt ved at oprette en række store rektangler, der er udfyldt med fliseinddelte baggrundsbilleder, som dækker længden af en lang side. Dette eksempel bruger fanen Rul i menuen Fyld (i stedet for fanen Bevægelse i panelet Rulleeffekter) til at anvende bevægelsesindstillingerne.
Følg disse trin for at skabe en lignende bevægelig baggrundseffekt:
Til dette eksempel spiller det ingen rolle, om du angiver en browserfyldfarve, fordi siden er dækket af rektangler. Indstil sidens fyldfarve til Ingen.
I eksempelwebsitet er det tredje rektangel længere end de to første. Du kan trække i håndtagene for at udvide højden af det tredje dublerede rektangel eller oprette et fjerde rektangel, der udfylder det resterende sideareal i bunden.
I dette eksempel ser et bjælkediagram ud til at blive animeret på plads. En pink pilegrafik snor sig opad over og bag bjælkerne i diagrammet. Selvom bjælkerne i diagrammet set ud til at vokse sig højere fra bunden af diagrammet, er de faktisk ensfarvede rektangler med anvendt bevægelse via rulleeffekter, der dukker frem bag de større hvide rektangler (fyldt med samme rene hvide farve som sidens baggrundsfarve).
Dette eksempel bruger flere teknikker sammen med rulleeffekter. Elementerne er arrangeret oven på og bagved hinanden i panelet Lag. Hvide rektangler tegnes oven på diagramelementerne. Når de hvide rektangler dækker bjælkediagrammet, er bjælkerne og pilen usynlige, som om de er maskeret. De hvide rektangler og diagramtabellen er indstillet til 0 i bevægelsens rulleeffekter for at forblive i position, mens siden rulles. Bjælkerne og den pink pilegrafik, der er placeret i laget nedenunder, har anvendte rulleeffekter for bevægelse, som får dem til at flytte op og komme til syne, når bjælkediagrammet sammensættes.
Følg disse trin for at skabe en lignende maskeeffekt:
Tjek Demential Lab for at se funktionen Rulleeffekter i aktion.
Log ind på din konto