datamaskiner

Flere tidslinjer i Hype iBook-widget

September 2020

Flere tidslinjer i Hype iBook-widget


I den forrige opplæringen for Hype for iBooks-forfatteren satte vi opp bakgrunnsbilde for HTML-widgeten for iBooks-siden animasjon. Vi fortsetter med å legge til elementene som vi vil animere på siden.

På dette tidspunktet har vi vårt bakgrunnsbilde på hovedtidslinjen i hypen vårR dokument. La oss legge til vårt første julepynt på en ny tidslinje og animere bildet til å rotere litt fra side til side.

  1. Fra tidslinjen klikker du på ikonet til høyre for hovedtidslinjen og velger Ny tidslinje. Navngi denne tidslinjen "Red Ornament". Du bør se den nye tidslinjen for rødt ornament som er oppført i tidslinjeruten.

    Selv om skjermen ser den samme ut, jobber vi nå med en sekundær tidslinje til hovedtidslinjen.

  2. Legg til Red Ornament png-bildet fra Elements-menyen på verktøylinjen.

    Den vil åpne i full størrelse, men vi jobber i halv størrelse. Så la oss skalere det slik at det passer.

  3. I Metrics Inspector setter du skaleringsverdien til 50% for både bredde og høyde.

  4. Dra ornamentet øverst til venstre og plasser toppen av ornamentet litt utenfor skjermen.

    Før vi kan rotere ornamentet, må vi flytte ankerpunktet fra midten av ornamentet til toppen av skjermen. Hvis vi holder det i sentrum, vil ornamentet rotere rundt senteraksen. Vi vil at ornamentet skal rotere fra et punkt på kanten av skjermen.

  5. Velg elementet mens du holder nede Kommando-tasten. Dette viser kontrollhåndtakene og forankringspunktet for bildet. Dra ankerpunktet til den øverste kanten av skjermen.

  6. Når ornamentet fremdeles er valgt, gå til Metrics Inspector. Angi vinkelen for Z til -10 i rotasjonsdelen. Dette vil svinge ornamentet litt mot høyre.

  7. Med Playhead i den første rammen av tidslinjen (00:00:00) og Red Ornament (redOrn) -elementet fremdeles valgt, gå til Egenskaper-listen på tidslinjen.

    Der vil du se noen få egenskaper for Red Ornament (redOrn). Men vi må bruke egenskapen Rotation Angle Z. La oss legge dette til listen.

  8. Klikk på ikonet til høyre for Egenskapsoverskrift for å åpne listen over tilgjengelige egenskaper for redOrn-elementet. Velg egenskapen Rotasjonsvinkel (Z).

    Du bør se den lagt til Egenskaper-listen. Nå kan vi legge til et nøkkelbilde for å angi startposisjonen for animasjonen vår.

  9. Klikk på Legg til nøkkelramme-ikonet til høyre for egenskapen Rotation Angle (Z). Du bør se et lyseblått trekantikon vises i den første rammen.

    Vi vil at ornamentet skal svinge til venstre over 20 rammer i tidslinjen. Dette vil være den første halvdelen av animasjonen.

  10. Flytt Playhead til ramme 20 (00:00:20). Legg til et nytt nøkkelbilde

  11. I Metrics Inspector setter du Z-vinkelen til 10. Ornamentet skal svinge til venstre på skjermen.

    La oss nå lage den andre halvdelen av animasjonen ved å svinge ornamentet tilbake til den opprinnelige posisjonen på ramme 40 (00:01:10).

  12. Flytt Playhead til ramme 40 (00:01:10). Legg til en tredje nøkkelramme og sett Z-vinkelen til -10.

    Klikk på Play-knappen for å teste animasjonen. Elementet redOrn skal svinge til venstre og tilbake til høyre. Lagre arbeidet ditt.

Tilbake | Fortsette

Britta Nielsens datter nægter at samarbejde (September 2020)



Tags Artikkel: Flere tidslinjer i Hype iBook-widget, flash og animasjon, hvordan lage en iBooks Author-widget i HTML med Hype, flere tidslinjer

Populære Innlegg Skjønnhet

NORGES NORDLYS
reise og kultur

NORGES NORDLYS

Heirloom kaktus og sukkulenter

Flower Power of The Rose

Flower Power of The Rose

skjønnhet og selvtillit