Flash Catalyst CS5-tidslinje

• Maj 18, 2024

Om du är som jag, börjar det roliga när du lägger till interaktionen i din ansökan. I den sista Flash^R Katalysator^TM CS5-granskningsartikel, vi diskuterade sidorna / staterna för vår webbplatsapplikation och sa Catalyst att programmera våra knappar för att flytta från en sida på vår webbplats till en annan.

Låt oss fortsätta med vår exempelwebbplats som bara har tre sidor som är CityView, UnionParkView och CentralParkView. Vi arbetade lite med navigeringen när vi programmerade våra knappar för att visa dessa sidor. Vi skapade följande knappar:

Knapp 1 visar sidan UnionParkView
Knapp 2 visar sidan CentralParkView
Knappen 3 visar CityView-sidan

Catalyst håller reda på förhållandet mellan dessa sidor / stater i tidslinjen och vi kan använda Catalyst-tidslinjen som en visuell guide för att navigera i vår webbplatsapplikation.

Om du har använt Flash är du bekant med en tidslinje som består av en bildruta. Men Catalyst-tidslinjen består av sidorna / staterna i vår applikation och övergångarna mellan dessa sidor / stater. Låt oss ta en titt.

Catalyst-tidslinjen består av fyra kolumner. Längst till vänster finns en lista över sidor / stater. Baserat på knapparna och sidorna / tillstånden i vårt projekt kommer Catalyst att visa förhållandet mellan sidorna på vår webbplats i denna kolumn. Som ni ser kan vi flytta mellan sidor på fyra sätt. Var och en av dessa placeras på ett lager i tidslinjen.

Börjar här
Stadsutsikt
Stadsutsikt
UnionParkView
CentralParkView

Slutar här
UnionParkView
CentralParkView
Stadsutsikt
Stadsutsikt

Den andra kolumnen i tidslinjen visar startstatus. När vi klickar på varje lager i tidslinjen, kommer Catalyst att visa den aktiva sidan (sidan som vi för närvarande visar) högst upp i den andra kolumnen. I det första lagret flyttar vi till exempel från CityView-sidan till UnionParkView-sidan. Därför listas CityView som startstat. Men i det undre lagret flyttar vi oss från CentralParkView till CityView och CentralParkView-sidan kommer att visas i den här kolumnen.

Den tredje kolumnen visar motsvarande övergångar som behövs för att flytta från en sida till den andra. Här kan vi se att Catalyst har bestämt från våra knappar att vi kommer att flytta mellan sidor och redan har lagt en "flytta" övergång i den här kolumnen för oss. När vi fortsätter att arbeta med vår applikation och lägger till fler element och effekter kommer Catalyst automatiskt att lägga till rätt övergång till tidslinjen.

Den fjärde kolumnen visar slutet tillstånd. Återigen, när vi klickar på varje lager i tidslinjen, kan vi se målsidan (sidan som vi flyttar till) listad i den sista kolumnen. Nu när vi förstår förhållandet mellan tidslinjen och vår applikation är vi redo att lägga till några professionella animationer på vår webbplats.

* Adobe gav mig en översynskopia gratis.

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta om med tillstånd från Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.