Total ProtoPie – So lernst du fortgeschrittenes Prototyping ohne Code | Darren Bennett | Skillshare
Schublade
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Total ProtoPie – So lernst du fortgeschrittenes Prototyping ohne Code

teacher avatar Darren Bennett

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Gesamteinführung

      3:56

    • 2.

      ProtoPie

      1:56

    • 3.

      3 schnelle Tour

      6:29

    • 4.

      Die Organisation deiner Dateien – Best Practices

      4:16

    • 5.

      Importieren

      15:18

    • 6.

      Importieren

      15:28

    • 7.

      Importieren aus Adobe XD

      17:23

    • 8.

      Importieren aus dem Dateisystem

      7:34

    • 9.

      Das Konzeptmodell

      5:41

    • 10.

      Erstes Interaktion

      2:18

    • 11.

      Ein Anmeldeformular erstellen

      9:07

    • 12.

      Testen auf echten Geräte

      6:02

    • 13.

      Den rollbaren Fotostream erstellen

      11:02

    • 14.

      Paging zwischen Detailansicht

      13:45

    • 15.

      Erstellen von scrolling mit Kette

      10:15

    • 16.

      Tabs auswählen, um zwischen Seiten zu gehen

      4:49

    • 17.

      Aufbau der Tabakbar – das Setup

      12:22

    • 18.

      Benutzerdefinierte Navigation zum Bildschirm

      6:50

    • 19.

      Navigation zum Login hinzufügen

      2:29

    • 20.

      Eine Animation hinzufügst

      15:12

    • 21.

      Animieren

      9:56

    • 22.

      Erstellen einer benutzerdefinierten Animation

      14:58

    • 23.

      Einen benutzerdefinierten Bildübergang erstellen

      17:41

    • 24.

      Erstellen von benutzerdefinierten Übergänge mit Reset und der Timeline

      12:04

    • 25.

      Anmeldung mit Bedingungen machen

      7:56

    • 26.

      Fehlerzustände beim Login behandeln

      7:57

    • 27.

      Variablen für den Login verwenden

      7:22

    • 28.

      Staaten mit Variablen und Bedingungen verwalten

      6:56

    • 29.

      Erstellen eines Lieblings

      8:51

    • 30.

      Erstellen einer echten in-app

      11:48

    • 31.

      Ein Foto hinzufügen von der In-App-Kamera

      9:02

    • 32.

      Ein Foto als Thumbnail speichern

      8:34

    • 33.

      Haptisches Feedback mit haptic hinzufügen

      3:57

    • 34.

      Formulierung zur Position

      12:29

    • 35.

      Einen notification erstellen

      12:27

    • 36.

      Eine Funktion für Freundinnen zu erstellen

      12:09

    • 37.

      Komponenten erstellen

      18:47

    • 38.

      Bauteilsymbole heißes verschließen

      6:35

    • 39.

      Die tab in anderen Projekte wiederverwendbar

      6:59

    • 40.

      Lieblingssatz mit Komponenten machen

      6:43

    • 41.

      Daten in Komponenten überspringen

      7:17

    • 42.

      Componentising der app

      8:42

    • 43.

      ProtoPie

      9:56

    • 44.

      ProtoPie Cloud

      6:54

    • 45.

      Kochen von Interaction

      3:44

    • 46.

      Das ist ein Wrap! Wohin du von hier gehen sollst.

      3:54

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

407

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Über mich

Hallo, mein Name ist Darren ProtoPie ist mein Tool meiner Wahl, wenn es um den Prototyping und ich habe ProtoPie verwendet und ich habe ProtoPie für Designer:innen von vielen Organisationen, darunter NatWest, Heiligen, Kanal 4 und derzeit Microsoft.

Ich arbeite von ProtoPie durch ihr ProtoPioneers

Was ist ProtoPie?

Wenn du ein Werkzeug möchtest, mit dem du erweiterte Prototypen erstellen kannst, ohne es zu haben und ProtoPie zu

ProtoPie ist ein Design-Tool mit dem du Prototypes erstellen kannst, die du auf iOS und Android und Internet testen kannst. Ehrlich gesagt, du kannst den Unterschied zwischen deinen Prototypen und echten Apps unterscheiden!

Was du lernen wirst

In diesem Kurs brauchst du keine Vorkenntnisse oder experience in den Programmieren!

ProtoPie verwendet ein einfaches Konzeptmodell

Ich werde dir das Wissen machen, was du brauchst, um deine App-Ideen zu sehen, und sie mit Nutzern auf echten Geräten zu prüfen.

Du beginnst deine Reise mit ProtoPie durch den Aufbau einer photo-sharing

Du lernst zuerst die Grafiken aus deinem favourite wie Figma, Sketch und Adobe XD importieren.

Du lernst dann, wie du mit dem einfachen Konzeptmodell von ProtoPie’s und einer breiten Palette von Interaktionsfunktionen schaffst.

Du lernst, wie du auf echten Geräten testen und deine Prototypen mit anderen teilen kannst. ProtoPie kann auf iOS und Android-Plattformen einsetzen

Ich zeige dir, wie es einfach ist, populäre Interaktionen zu erstellen, die du in echten Projekten verwenden kannst, und wie du große Prototypen strukturiert und zu bewältigen kannst, damit du glaubwürdige Erfahrungen schaffen kannst.

Du lernst, wie du realistische Übergänge und benutzerdefinierte micro-interactions erstellen kannst, damit deine Prototypen authentisch und nicht von einer echten App zu bleiben

Wir werden hier personalisierte Funktionen wie Bilder machen, die wirklich funktionieren und keine Notwendigkeit für lineare „Auf 'on

Eines von den Produkten von ProtoPie sind hardware und wir verwenden die Kamera auf deinem Gerät, um der Pieterest App zu hinzuzufügen.

Wir werden unsere Zehen in Formelen, ProtoPies Weg zur Erstellung von erstaunlich fortgeschrittenen Funktionen, die deinen Kopf nicht explodieren werden!

Bevor du es erstellst, erstellst sie Prototypen, die wie echte Apps funktionieren, ohne die Komplexität und Überlegenheit des Programmieren zu lernen. Dinge

Ich freue mich darauf, dich auf dem Kurs zu sehen

- Darren

Triff deine:n Kursleiter:in

Teacher Profile Image

Darren Bennett

Kursleiter:in

Hi, My name is Darren and I'm a designer with 30 years' design industry experience, I specialise in User Experience and Product Design.

I've worked with brands such as RBS, Lloyds Bank, Sainsbury's and Adobe and Microsoft and have lead UX and Product Design teams specialising in design for mobile and devices.

My skills and experience cover a wide gamut including, User Research and behavioural design, Interaction and motion design and interface design

My passion is in interaction design and my tool of choice is ProtoPie, the coolest interaction design tool on the market

I'm the author of ProtoPilot on YouTube and Medium where I vlog and blog about prototyping and UCD and I co-organise of the ProtoPie London Meetup, a monthly group that gets together to talk ab... Vollständiges Profil ansehen

Level: All Levels

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Gesamteinführung: Hallo und herzlich willkommen bei den Profis und mein Name ist Darren Bett und ich bin ein Designer mit über 30 Jahren Erfahrung in der Designbranche. Waves wurde im digitalen Raum verbracht, in dem ich Web-Erlebnisse und Erfahrungen von mobilen Geräten entwarf . Und Ihnen meine Lieblings-Interaktions-Designs vorstellen oder verschönern. Also werden wir das Profil von Grund auf lernen. Sie müssen diesen Boden nicht öffnen, bevor Sie keine Vorkenntnisse benötigen. Und wir werden es Schritt-für-Schritt-Lernen oder die Grundlagen nehmen und Sie auf eine Ebene der Erfahrung, wo Sie werden sicher sein, in der Lage sein, dieses Tool in Ihrer Arbeit für Ihre Projekte in der realen Industrie zu verwenden . Und Sie werden den Vorteil bekommen, dass ich verwendet habe, ist insgesamt für die letzten drei Jahre tatsächlich in der Branche auf realen Projekten und im Aufbau von echten Apps. Also werden wir eine gefälschte App verwenden. Kohlepflanzen ruhen als unsere Art, die verschiedenen Pints der Problemlösung und Techniken zu erforschen , die wir verwenden werden. Und ich habe diese App gewählt, weil es eine gute Mischung aus der Verwendung von Standard-mobilen Design-Mustern sowie eine Menge von benutzerdefinierten Design-Mustern und Animationen als auch ist. Also werden wir eine Menge Spaß haben, einige dieser Funktionen aufzubauen. Wird anfangen. Wir haben gelernt, wie Sie coole Grafiken von anderen unterstützten Industrietools wie Fichman, Sketch und Adobe XD schwimmen können. Wir werden lernen, wie man sowohl Standard- als auch benutzerdefinierte Animationen erstellt. Wir werden einen echten Login-Flow erstellen, zusammen mit der Fehlerbehandlung, wird eine Favoriten-Funktion erstellen, die dynamisch gespeicherte Inhalte basierend auf Benutzerwahl. Mit bedingter Logik, wird die Navigation erkunden und erstellen Sie ein ATS war, dass niedrig wiederum verwendet eine wiederverwendbare Komponente, die Sie in jedem Projekt verwenden können. Entwickelt eine echte Foto-App mit Protoplast-Funktionen, um mit Geräte-Hardware, wie die Kamera Ihres Telefons zu integrieren . Erkunden Sie komplexe Funktionen wie Variablen und die Vorteile von PyCon, volle Minuten, diskrete Anweisungen, die leicht zu erlernen sind und erweiterte Leistung bieten, aber ohne die Notwendigkeit für fortgeschrittenes Wissen, werden Sie erstaunt sein , wie einfach es ist, wirklich erweiterte Funktionen zu fühlen, werden dann unsere App nehmen und einige wiederverwendbare Komponenten machen und sie in eine Komponentenbibliothek verwandeln, die für mehrere Projekte verwendet werden kann. Schließlich haben wir einen Blick auf die Cloud und wie Sie Ihre Prototypen testen und teilen können , um Usability-Tests zu verwenden oder mit Stakeholdern zu teilen. Und wie Sie Interaktionsrezepte verwenden können, um Ihr Leben einfach zu kommunizieren, arbeiten Sie im Interaktionsdesign mit Entwicklern, ohne die Notwendigkeit, langweilig, langwierig zu erstellen. Und wir werden lachen. Ich lerne nochmal Sonde Heights. Ich glaube wirklich, dass das einzige Interaktionsdesign, also auf dem Markt im Moment, das ist wirklich wert, Ihre Zeit zu investieren. Vor allem, wenn Sie nicht lernen wollen, zu programmieren oder wenn Sie eine beängstigende Aussage codieren. Die Sondenhöhe ist ein Werkzeug, das entworfen wurde , um Designideen von Anfang an bis zum Ende zu erkunden . Wenn Sie also daran interessiert sind, zu lernen, dann nehmen Sie diesen Kurs ab und wir sehen uns im Unterricht. 2. ProtoPie: Hallo, da. Bevor wir loslegen, müssen wir die protoplasten-Software installieren, wenn Sie sie noch nicht haben. Also, wenn das der Fall ist, gehen Sie einfach zum Prototyp. Dies ist protoplanets Website hier. Und dieses Tippen Sie auf den Triumph des freien Links. Sie werden zu dieser Seite weitergeleitet, wo Sie nur Ihre E-Mail eingeben müssen und sich dann anmelden und Sie erhalten die Installationsdatei. Und es ist nur ein normales Atom. So installiert auf die normale Weise sowohl für Mac als auch für Windows. Stellen Sie also sicher, dass Sie das tun, bevor Sie mit dem nächsten Video fortfahren. Die andere Sache, auf die ich Ihre Aufmerksamkeit lenken möchte, ist die Assets phi auch an dieses Video angehängt ist eine Zip-Datei für alle Assets. Wenn wir einfach darauf doppelklicken und einfach nur einen Blick in hier werfen. Es gibt also nur ein paar Vermögenswerte. Sie haben also Adobe XD-Dateien. Wenn Sie zusammen mit Adobe XD folgen, haben wir auch Sigma, und wir haben die Skizzendateien. Wir verwenden nicht Assets jedes einzelnen Videos, aber es gibt einige der Vorträge, für die wir Assets benötigen, wenn Sie mitverfolgen möchten. Eine andere Sache, die ich enthalten habe, ist die Vorliebe ist ein Google Fonts kostenlos zu verwenden. Aber ich hatte nur für die Bequemlichkeit, ich habe es auch in den Assets-Ordner gelegt. Und schließlich haben wir einen weiteren Ordner „Assets“ im Ordner „Assets“. Und im Inneren von hier, einige Pre-exportiert HD-Grafiken, die wir verwenden, um Videos zu bewerten. So sollten Sie in der Lage sein, alles zu finden, was Sie brauchen, und Sie sollten bereit sein zu gehen. Okay, also das ist es für dieses Video. Also freuen Sie sich darauf, Sie im ersten Video zu sehen und beginnen, es zu verschönern. Wir sehen uns dort. 3. 3 schnelle Tour: Okay, also fangen wir an, indem wir uns das Sonde High Studio ansehen. Wenn Sie Studio starten, werden Sie im Startfenster angezeigt. Lassen Sie uns also eine neue Datei erstellen. Okay, jetzt haben wir eine brandneue Datei ohne Titel. Im Sensor sehen Sie also den ARPU, wo Sie Ihren Prototyp erstellen. Und gerade oben ist das Gerätevoreinstellungsmenü. Hier können Sie also die Größe Ihres Prototyps wählen. Und es gibt eine Reihe von Voreinstellungen hier für iOS, Android und Desktop. Und wir haben auch die Möglichkeit, eine benutzerdefinierte Größe zu erstellen. Auf der linken Seite befindet sich unser Ebenenbedienfeld. Wenn wir also Grafiken aus unserer Graph-Angriffsanwendung importieren oder Objekte nativ erstellen, können sie hier reparieren. Auf der linken Seite hier wollen wir Panels herausspringen. Das erste ist also das Szenenmuster. Und dann unten haben wir das Bedienfeld „Komponenten“. geht es einfach runter nach unten. Wir haben die Variablen-Panels. Hier werden wir also unsere Variablen erstellen, die wir für bestimmte Logikfunktionen innerhalb von Pr pi verwenden . Und gerade auf der linken Seite sehen Sie, dass wir Zugriff auf unser Pro Pi-Konto und auch einige Studio-Anwendungseinstellungen haben. Auf der rechten Seite haben wir unsere Zoom-Steuerung, damit Sie unser Apple vergrößern und verkleinern können. Und hier rechts haben wir die Möglichkeit, unseren Geräterahmen auf einem Aus. Nun haben nicht alle Voreinstellungen Frames, aber einige der wichtigsten tun es, wie das iPhone. Und wir können runtergehen und uns zum Beispiel das Galaxy S ten ansehen , das auch einen Geräterahmen hat. Okay, bewegen Sie es nach rechts. Wir haben, wie Trigger Panel. Hier werden Sie also alle Ihre Interaktionen erstellen. Und daneben haben wir das Eigenschaftenbedienfeld. Dieses Panel wird also kontextabhängig sein, je nachdem, was Sie zu diesem Zeitpunkt ausgewählt haben. Derzeit haben wir dasselbe ausgewählt, damit wir die Prophezeiungen für unsere Szene sehen können. Und direkt oben im Eigenschaftenfenster Wir haben eine Vorschau, einen Bildvorschaubereich. Und darüber hinaus sehen diese Quellen Ihnen ziemlich vertraut aus. Ausrichtungswerkzeuge, die wir haben. So können wir Objekte auf der Schleife ausrichten. In dieser Ecke haben wir ein paar Pfeile nach links und rechts. Das ist also eine Geschichtsnavigation. Wenn wir also von scheint zu Samen oder innerhalb von Objekten oder Komponenten bewegen, können wir vorwärts und rückwärts entlang der Geschichte navigieren, von wo aus wir waren. Anpacken sehr nützlich. Ok, nach oben. Also haben wir hier eine ganze Reihe von Schaltflächen und Menüs ganz oben. Auf der linken Seite hier haben wir Impulse. Dies ist, wo wir unsere Grafiken von Adobe XD Fichman Skizze importieren können. Wir haben einen Bild-Button, mit dem wir Bilder aus unserem Dateisystem importieren können. Wir haben ein Medien-Menü, mit dem wir andere Medientypen wie boolesches Video importieren können. Das Formmenü hier, es gibt uns einige grundlegende primitive Objekte, die wir direkt innerhalb eines pro liefern Strukturen, Rechtecke und Kreise zeichnen können . Und das Steuermenü ermöglicht es uns, auch einige Bedürfnisse HIV-Objekte hinzuzufügen. Also haben wir eine Textbeschriftung Objekte, und wir haben auch ein Eingabetextfeld Objekte. Daneben haben wir das Container-Menü. Sie können sich also vorstellen, dass Container synonym für Gruppen in Ihrer Grafikanwendung sind. Also haben wir einen einfachen Container, aber Sie haben auch diese speziellen anderen Container. Wir haben Scroll enthalten Out, die uns erlaubt, scrollbare Ansichten zu tun. Und wir haben einen Paging-Container, der es uns ermöglicht, Paging-Ansichten zu machen. Und endlich hier auf der rechten Seite haben wir den Komponententen-Knopf. So können wir darauf klicken, um neue Komponenten zu erstellen. Ok, also gehen Sie auf die rechte Seite. Diese Gruppe von Schaltflächen hat also alles damit zu tun, ihn in der Vorschau unserer Prototypen anzusehen. Also haben wir den Vorschau-Button, so dass ich einfach unsere Vorschaufenster nach vorne bringen werde. Das Vorschaufenster wird also immer aktivistisch sein, ein separates Fenster, aber es wird hinter unserer All-Through-Datei sitzen. Also können wir das einfach an die Front meiner verborgenen Apathie bringen. Daneben haben wir das Gerätemenü. Hier verbinden wir echte Geräte mit Studio. So können wir einen Prototyp an ein iPhone oder ein Android-Telefon oder ein Tablet senden. Und dazu verwenden wir die Schaltfläche Ausführen. Im Gegensatz zu Vorschau, wo die vorherige automatische Aktualisierung, wie wir unseren Prototyp bauen, müssen wir manuell unseren Prototyp an ein Gerät mit der Schaltfläche Ausführen senden. Schließlich haben wir in dieser oberen rechten Ecke Wolken, damit wir unsere Prototypen in die Cloud hochladen können. Und Cloud hat eine ganze Reihe von Funktionen, die in Laser gehen werden. Dinge wie die Fähigkeit, unsere Prosite mit anderen zu teilen. Und natürlich genannt Versionskontrolle innerhalb der Cloud und eine Reihe von anderen Sachen werden später nachschauen. Und um Ihren Prototyp in die Cloud hochzuladen, verwenden Sie hier den Upload-Button. Okay, das vervollständigt unseren kurzen Rundgang durch das Abgrund Studio Interface. So wie Sie hoffentlich sehen können, ist es ziemlich vertraut mit anderen Grafik-Tools, die Sie wahrscheinlich verwenden. Sicherlich Werkzeuge wie Dicke Skizze in den Tag, den wir XD. Und wir werden viel vertrauter mit uns beginnen, wenn wir den Kurs durchlaufen. Das ist also ein Wrap für das schnelle Werkzeug. Wir sehen uns im nächsten Video. 4. Die Organisation deiner Dateien – Best Practices: Bevor wir uns mit den spezifischen Eingabefunktionen befassen, denke ich, es lohnt sich, sich einen Moment Zeit zu nehmen, um über einige Best Practices zu sprechen , wenn wir strukturieren Import unserer Dateien während der Grafiken ist eine ganz andere Denkweise. Verrückte Interaktionen. Im Laufe der Zeit werden Sie lernen, wie mojo Grafikordner auf dem Flyer tauscht. Aber wenn Sie neu im Prototyping oder Interaktionsdesign sind, müssen Sie wahrscheinlich eine Dateibereinigung durchführen, bevor Sie importieren. Hier sind also mein Top-Set für Dinge, die Ihnen das Leben leichter machen werden. Tipp Nummer eins, benennen Sie Ihre Layer. Wenn Sie gesund bleiben wollen, während Prototyp in diesem ist ein Muss. Wir waren alle hier mit dieser Art von Benennungsstruktur darüber, wenn wir in proto pi sind, werden wir die Namen und Objekte als Referenz verwenden, um Interaktionen hinzuzufügen. Wir möchten also sicherstellen, dass alle unsere Objekte Grafiken innerhalb unserer Datei logische Namen haben, damit wir sie finden können, wenn wir Interaktion zu ihnen hinzufügen müssen. Tipp Nummer zwei: Vermeiden Sie unnötige verschachtelte Gruppen. Wie Sie hier sehen können, haben wir diese, diese Gruppen, die effektiv leere Gruppen sind, die unserer Datei viel mehr Komplexität hinzufügen werden. Und es wird es uns schwieriger machen, Dinge zu finden. Das ist also diese Art von Sache, die wir vermeiden wollen. Was entfernt eine der unnötigen verschachtelten Gruppen? Tipp Nummer drei, gruppieren verwandte UI zusammen. Wenn Sie also für Interaktion, die Bewegung entwerfen, werden Sie die Dinge logisch zusammenfassen wollen. Also als Beispiel, wenn ich hier zu diesem Bildschirm gehe, und Sie sehen können, ich habe dieses, diese Art von Gitter von Bildern. Und wenn wir in der Ebenen-Panel nach unten schauen, können wir sehen, dass alle meine Bilder in dieser Gruppe zusammengefasst sind könnte Fotostream kühlen. Und ich habe das getan, weil diese Foto-Stream-Gruppe eine scrollbare Ansicht sein wird und ich will, dass alles zusammen scrollen. Denken Sie also über Ihr Design nach und denken Sie darüber nach, welche Bits miteinander verwandt sind, welche Wetten sich irgendwie zusammen bewegen, und stellen Sie dann sicher, dass Sie diese aus dem richtigen, letzten Satz zusammenfassen. Ordnen Sie die Layer in die Hierarchie, die der Benutzeroberfläche entspricht, neu an. Also, wovon rede ich da? Also, das geht zu diesem Anmeldebildschirm. So können Sie hier sehen, ich habe diese Objekte, die Art von dunkel von oben nach unten. Und wenn wir im Ebenenfenster hinüber schauen, können Sie sehen, dass das tatsächlich in genau der gleichen Reihenfolge. Wenn ich also mit der Maus über diese Objekte gehe und Sie die Ebenen im Auge behalten, können Sie sehen, dass sie alle in der gleichen Reihenfolge sind. Wenn Sie also animieren, wenn Sie in einer Interaktion sind, macht dies für Ihr Gehirn viel sinnvoller als die Art, wie Grafikprogramme dies normalerweise tun. Als Beispiel können wir hier sehen, ich habe diesen Rahmen mit diesen beiden Bildern, Stapel und Stapel auch. Wenn ich dann dupliziere, was sind das für Bilder? Sie können sehen, dass es es tatsächlich oben hinzufügt. Das Bild wurde angezeigt und nicht unten. Und das macht total Sinn, wenn ich in Grafikprogramme sind wahrscheinlich gehen, um dieses Objekt bewegen wollen Umfragen Objekte Merkmale weg. Also, es in der Spitze zu haben, macht es zugänglich. Der Aufwand wurde darunter hinzugefügt. Ich müsste im Ebenenfenster auswählen oder etwas aus dem Weg verschieben. Aber wenn wir in einer Interaktion innerhalb eines Werkzeugs wie Proto Pi sind. Dies ist tatsächlich macht es viel schwieriger für uns, weil es irgendwie in der umgekehrten Reihenfolge der Art, wie es auf dem Bildschirm aussah. Und diese Art von Verwirrung mit unseren Gehirnen ein wenig. Okay, das sind also meine besten Tipps für Impuls-Hing, deine Datei für Impuls zu organisieren, bevor du in Pi zu Pi gehst. Als nächstes werden wir diese ersten Bildschirme nehmen und sie aus Sigma in Pi importieren. So sehen wir uns im nächsten Video. 5. Importieren: Der erste Schritt der Belastung unseres Prototyps besteht also darin, unsere Act-Designs zu verbessern. Durch diesen Kurs werden wir eine coole neue App namens Frömmigkeit Rest bauen. Ich weiß nicht, wie es dir geht, aber ich habe Kuchen geliebt. Also mit einer App, wo ich Fotos von Piezo-Tag sehen kann, klingt wie Himmel. Bevor wir importieren unsere Pflanzen für uns Designer obwohl, Ich möchte durch einige der Nuancen laufen, wenn importiert ihn Sigma in verteilt auseinander. Das erste, was ich über seine Komponenten sprechen möchte, wenn Sie Greg und setzen Sie einen Impuls in hübtify, es kommt in als eine editierbare Gruppe. Aber es gibt einige Einschränkungen , wie diese Gruppe importiert werden kann, da es einige Nachteile gibt. Einer der Nachteile ist also, dass, wenn Sie dem Container, dem Fieger-Container, eine Füllung hinzufügen , das nicht durch den Importeur in Dolmetscher Kiefer gebracht wird. Eine andere Sache, die von Komponenten nicht unterstützt wird, sind abgerundete Ecken. So gibt es genug Dinge um Komponenten, die sind, die negativ sind, sagt leider im Moment, was bedeutet, dass ich normalerweise meine Komponente brechen, Komponenten auseinander in Sigma, Ich bringe ihn in Spread auseinander. Ok? Die zweite Sache ist, wenn Sie einen Layer in Sigma eingestellt haben, der ihn nicht in den Prototyp importiert. Das ist also eine ziemlich gute Möglichkeit, wenn Sie Layer haben möchten , die Sie nicht importieren möchten, können Sie sie einfach innerhalb einer Bitmap ausblenden. Textebenen sind Impulsköpfe in Prozessor Pi als textfertige Ebenen. Und was das bedeutet, ist, dass sie nicht sofort als editierbarer Text erscheinen. Sie werden halten, dass Sie die Möglichkeit haben , sie in editierbaren Text und Soda zu konvertieren. Aber um die Schrift zu erhalten, kommen sie als Text bereit, so dass sie effektiv immer noch GraphX sind. Und, aber das, das bedeutet, dass sie es werden, sie werden die Schriften und die Schriftarten, die Sie wählen, unterstützen. Wenn Sie ein steuerbereites Layout in Kredit Kuchen in echten Text konvertieren. Du wirst kommen müssen, wir werden, wir werden das durchmachen. Sie müssen das Telefon auf, sagen wir, Ihr Gerät laden, wenn Sie auf Ihrem Gerät testen, um sicherzustellen, dass das richtig gerendert wird. Ok, wenn Sie also die Deckkraft eines Frames in Sigma für eine Komponente oder Gruppe reduzieren, wird ein Impuls ignoriert. Also die einzige Deckkraft, die erkannt wird, angewendet auf tatsächliche Objektschichten, FISMA objet labs. Und dann schließlich, wenn Sie irgendwelche Texteffekte wie Strich anwenden, wird es Impuls sein, weil die, wie ich bereits sagte, das ist hex laser-ähnlich in seinem steuerbereiten Format. Aber wenn Sie sie in bearbeitbaren Text umwandeln, und für mich werden Sie diese, diese Effekte verlieren. Also nur einige Dinge zu beachten, wenn Sie Ihre Sigma-Dateien vorbereiten , bevor Sie sie in hübtify bringen. Okay, also, wenn Sie folgen entlang, bitte laden Sie die beigefügten dicken beziehen sich auf den Kurs, dass Abschnitt zwei, hochbelastende Vermögenswerte. Und ich habe diese Datei bereits vorbereitet, also entspricht sie all den Importrichtlinien, die ich Ihnen gegeben habe. Also müssen Sie sich um keine Sorgen machen. Aber diese spezielle Datei, stellen Sie sicher, dass Sie die Datei in Sigma geöffnet haben. das offen ist, wie Sie hier sehen können, gehen wir rüber, um es zu verschönern. Und wir werden eine neue Pfeife erstellen. Also, das wird nur eine Standard-Datei ohne Titel erstellen, und es wird standardmäßig auf das iPhone 11 pro. Also werden wir bauen diese App für das iPhone 11 pro. Also werden wir nur ein Standard-Voreinstellungen verwenden. Das ist also absolut in Ordnung. Und das erste, was wir tun werden, ist, dass wir hier zu diesem Impuls-Menü gehen. So können wir sehen, wir haben die drei Optionen, die U3 unterstützt Apps, Adobe XD, figurative Skizze. Also werden wir Sigma wählen. Und wir werden sofort diesen Berechtigungsdialog von protoplanet bekommen. Da Feige also ein Online-Tool murmelt, müssen wir die Erlaubnis geben, auf unsere gefälschten Profile zuzugreifen. Also werden wir nur auf den Erlös Browser-Button tippen. Das wird ein Browserfenster öffnen. Und wir werden gebeten, Zugang zu S- und R-Achse zu geben. Das ist also erledigt. Wir können zurückgehen und weitermachen. Also das ist Gehen Sie zurück, um zu importieren und wählen Sie Sigma erneut. Okay, also haben wir jetzt den Sigma-Importdialog geöffnet. Also lasst uns einfach die Optionen durchgehen, die wir hier haben. Das erste, was wir sehen können, ist diese Drop-Down-Box, die uns alle Rahmen zeigt, die wir in unserem Figaro haben möchte im Hintergrund sitzen und nach rechts geschoben hier haben, wir haben die Optionen, um die Eingabegröße zu wählen. So können Sie sehen, dass es standardmäßig 3x hinzugefügt wird, was mit der Pixeldichte unserer iPhone 11-Voreinstellung identisch ist. Aber wir haben die Möglichkeit, das in eine andere Dichte zu ändern. Sie möchten sicherstellen, dass diese Dichte Ihrer voreingestellten Dichte entspricht. Wenn wir stolz auf ISIL sind, sonst werden Ihre Grafiken auf den falschen Seiten kommen. Das nächste, was wir einige Optionen haben, ist, wie wir Ebenen importieren. Standardmäßig wird es die letzte Struktur imple. Also, was das bedeutet, wird die Sigma-Layer-Struktur nehmen und das korrekt innerhalb des Prototyps duplizieren. In den meisten Fällen ist, wie Sie Ihre Entwürfe in Prädikat ziehen möchten. Es gibt eine sekundäre Option, die nur Schichten MLT für Exporte ist. Wenn Sie also etwas granulare Kontrolle darüber haben möchten, was Sie aus Abb. Sie können bestimmte Layer exportieren. Und wenn Sie diese Option wählen, dann wird nur, sagen wir gehen, um die exportierten Ebenen in Ihre importieren, in Ihr Kreditprofil. Der Rest der Oxygene sind alle in Bezug auf eine, ein weiteres Merkmal innerhalb der prototypischen Re-Import. Sie können eine FISMA-Datei erneut importieren, nachdem Sie ursprünglich bei importiert haben und dies hat Art von Limits, Köpfe, Vorteile. Sicher aus meiner Sicht benutze ich das nicht wirklich so sehr, aber nur um eine Art Schritt für die Option zu machen, damit Sie verstehen, was sie bedeuten. So standardmäßig die ersten beiden Sauerstoffstoffe Hecht, die überreife Positionen von Schichten sind und Größen von Schichten überschreiben. Wenn Sie also bereits Ihre Datei importiert haben und Sie gehen zurück und Sie die Position des Layouts ändern oder Sie die Größe eines ändern, sind sie so Effekte, dass Sie das Design ändern, wenn Sie Set erneut importieren, wird es alle aktualisieren der Layer, in denen Sie diese Änderungen vorgenommen haben. Die anderen beiden Chat-Boxen, die Aktualisierungs-Layer-Reihenfolge und Gruppenanweisung sind. Also wieder, wenn Sie die Gruppenanweisung geändert haben oder Sie zu den Ebenen um neue fema bewegen , wird diese Änderungen auf Ihren Import anwenden Wenn Sie es in den Prototyp erneut importieren. Und dann haben wir endlich Ebenen entfernt, löscht es oder unsichtbar gemacht in dicken Mark. Also, wie Sie zuvor gesehen haben, ich sagte, dass, wenn Sie über die Ebene unsichtbar machen, es wird verhindern, dass sie importiert wird. Dies wird also passieren, wenn Sie diese Option aktivieren, wo Sie erneut importieren. Aber nur um dies zu wiederholen, bezieht sich dies nur auf, wenn Sie die Funktion zum erneuten Importieren verwenden. Und das ist nicht wirklich etwas, das wir eine ganze Menge benutzen. Okay, also werden wir zunächst unseren ersten Bildschirm bringen, der unser Startbildschirm ist. Also wird es auf den Import-Button drücken. Und es wird sich mit Sigma verbinden. Und es wird alle diese Ebenen importieren. Und wie Sie sehen können, ist es reingebracht. Wenn wir uns das Ebenenfeld hier auf der linken Seite ansehen, können Sie sehen, dass S alle unsere Ebenen und unsere Landnamen genau gerendert hat, wie sie in einer FISMA erschienen. Und eines der Dinge, die Sie hier darauf hinweisen müssen, ist, dass, wenn Sie die Importe von Sigma Interpreter Pi verwenden , alles als PNG-Datei importieren wird. Sie werden also pixelbasierte Grafiken sein. Es wird, es wird Gruppen aus den, aus den Rahmen, die Sie haben, bilden . Also, das ist alles wie zwischen den beiden gemacht. Und hier ist eine dieser steuerfertigen Schichten, von denen ich gesprochen habe. So können Sie sehen, dass es einen kleinen Tee im Eck-Basiskreis hat, ein Bild-Icon. Das bedeutet also, dass seine Angriffe Schicht und ich kann es in Steuer umwandeln, aber bei MOM, immer noch nur ein Bild. Okay, das sind also unsere ersten Dateien für unseren ersten Bildschirm, importieren Sie ihn. Das ist gut. Also, jetzt wollen wir die anderen beiden Bildschirme ziehen , die einen Login-Bildschirm haben, und wir haben einen Home-Screen-Pool. Sie können hier sehen, die Eule erste Bildschirm hat ein kleines Etikett gesehen. So hat Protoplanet das Konzept von Szenen und wir werden Präsenz sein und mehr scheint unseren anderen Bildschirm zu verwenden. Also werden wir uns sehr kurz fassen unseren Presse-Hype mit der Szenen Funktion innerhalb des protoplanet brechen. Also, wenn wir gehen über zu diesem kleinen Symbol direkt unter der Import-Button, die wir verwendet, und wir tippen einfach darauf. Wir können C1 sehen und wir können diesen Plusknopf sehen. So können wir das verwenden, um eine neue Szene hinzuzufügen. Also werde ich ein paar Szenen hinzufügen. Und wir haben einen Doppelklick auf s2. Also stellen Sie sicher, dass wir scheinen zu Aktivität. Ich gehe zurück, um Sigma zu impleieren. Und wir werden unseren zweiten Bildschirm importieren, der Login-Bildschirm ist. Wieder, wir werden alles verlassen. Es ist Standardwerte und drücken Sie Importieren. Lade Schichten dort herunter und da gehen wir, knall. Wir haben unseren ganzen Bildschirm in einem Prototyp gerendert. Okay, das geht in unsere dritte und letzte Szene. Also doppelklicken Sie darauf. Und wir gehen wieder ins Schwimmbad. Und wir werden unseren Home-Bildschirm einbringen. Okay, das sieht gut aus. Ich werde diese Szenen umbenennen, damit wir diese Dinge umbenennen können, egal ob sie doppelt anklicken. Also werde ich diesen Anfang nennen. Dieser wird sich einloggen. Und schließlich drittes. Cool. Okay, also gehen wir zurück zu unserem Start, um für eine Sekunde zu sehen. Also werde ich einfach darauf doppelklicken. Und ich möchte ein wenig über SVG reden. Sie können SVG verwenden, um zu verschönern. Leider sind die Importeure, und das gilt für alle Importeure, Getränke Menschen über dxdy verstreut. Sie unterstützen SVG im Moment nicht. Im Moment sind sie genau so, wie wir dort gesehen haben, dass PNGs herbeigebracht wurden. Aber es gibt einige Funktionen mit ihm, Credit Pi, wo Sie SVGs innerhalb Ihrer haben wollen, innerhalb der Datei. Also werde ich Ihnen nur zeigen, wie man ein SVG importiert und es ist relativ schmerzlos. Also, was wir tun werden, ist ein Beispiel dafür, dass wir den Plateau-Stress und das Logo hier ersetzen werden. Also, wenn wir zurück zu Sigma springen und wir finden unseren Startbildschirm, und wir werden nur die Pipes Rest Logo auswählen und wir werden mit der rechten Maustaste oder Ctrl-Klick. Und wenn Sie nicht eine Zwei-Tasten-Maus haben und wir werden nur wählen Kopieren einfügen, die am unteren Rand des Menüs ist. Und wir werden Kopie als SVG wählen. Okay, also geht das zurück zum Prototyp. Und wir werden hier nur eine unregelmäßige Paste machen. Also Befehl V, steuern Fahrzeug mit Fenstern. Und Sie können sehen, dass wir unser Logo haben, aber Sie können sehen, dass es viel kleiner ist. Und das liegt daran, dass diese Pixeldichte Sache los ist. Also unser aktuelles iPhone 11 ist bei 3x, aber SVGs, weil ihre Auflösung unabhängig, sie nicht wirklich eine Pixeldichte haben. So Kredit durch nur bringen sie in ein x. so effektiv, in unserer aktuellen Bildschirmgröße, Das ist leicht, leicht zu beheben. Also, wenn wir unsere, unsere SVG ausgewählt und wir werden hierher kommen, um die Größenwerte. Und innerhalb dieser, diese Eingaben können wir bewirken. Wir machen ein paar einfache Mathematik. Also werden wir nur diese Breite mit drei multiplizieren und einfach sicherstellen, dass dies standardmäßig aktiviert sein sollte weil stellen Sie sicher, dass Sie das kleine Vorhängeschloss verriegelt haben. So wird das aussehen, wie Seitenverhältnis. Also können wir einfach mal drei in diesem Bereich setzen und es wird unser Logo richtig skalieren. Ok, jetzt haben wir unsere Logos Gao Kredit. Wir werden nur das mehr oder weniger an der richtigen Stelle positionieren, wo OWL, wo unser aktuelles pixelbasiertes Logo ist. Und wir gehen, um Pam erlaubt gehen, Ich werde das pixelbasierte Logo löschen. Also haben wir diese SVG, also hat das ja, ein anderes Symbol. So können Sie sehen, es hat ein kleines Bild Symbol mit diesem kleinen Kreis in der unteren rechten Ecke. Und wir werden nur darauf doppelklicken auf den Namen und wir werden es einfach anrufen. Okay, so dass über wickelt es für die Feige Import Video. Wie Sie sehen können, ist es relativ schmerzlos, Ihre Vermögenswerte in einen Kuchen von Sigma zu bringen. Es gibt ein paar Optimierungen, einige Dinge, die Sie tun müssen, um Ihre Datei vorzubereiten , nur so dass Sie das Beste aus dem Importer zu holen. Und ich habe Ihnen auch gezeigt, wie Sie SVGs in, in hübtify von Figur als auch bringen können . Also, wenn Figur Ihr Werkzeug der Wahl ist, dann können Sie die nächsten paar Videos überspringen. Stellen Sie sicher, dass Sie den Impuls aus dem Dateisystem-Video sehen. Da sind also einige Dinge drin, die du wissen musst, bevor wir weiterkommen. Und wir sehen uns im nächsten Tutorial. 6. Importieren: Hallo, da. Also in diesem zweiten Video werden wir uns ansehen, wie wir unsere Grafik von Scatch Enden nähern sich einem Pi verbessern können . Und wir bauen unsere coole neue App namens Piratenverhaftung. Die einzige App auf dem Markt, mit der Sie Bilder von Kuchen den ganzen Tag betrachten können. Wir sollten ehrlich gesagt, klingt einfach genial. Und was ich tun möchte, bevor wir unsere Grafiken InterPro Pi durchsetzen, ist, dass ich einfach einige der Dinge durchgehen möchte , die Sie beachten müssen wenn Sie Grafiken aus der Skizze importieren. Das erste, worauf ich Sie aufmerksam machen möchte, ist die Tatsache, dass das Protokoll keine Skizzenkomponenten oder Symbole unterstützt. Wenn Sie ein Design haben, das Komponenten aus Sketch verwendet und Sie es in presser pi importieren. Was passieren wird, ist, dass das Protokoll all diese Komponenten in abgeflachte Bitmaps umwandelt. Also habe ich hier draußen gesagt, nur um zu veranschaulichen, was ich meine und was passieren wird. So können Sie hier sehen, ich habe ein Logo und eine Riemenlinie Komponente. Und wenn ich das nicht auseinanderbringe, wird es abgeflacht. Das zweite Szenario, in dem dies passieren wird, ist wenn ich eine Gruppe habe, die eine Moschee darin hat, wieder, wenn Sie Objekte innerhalb von Scatch maskieren, bevor Sie sie in Prozessor Pi bringen, wird Protoplasma das konvertieren -Gruppe in eine abgeflachte Bitmap. Jetzt könnte dies etwas sein, das wünschenswert ist, vor allem, wenn Sie viele Grafiken haben, die keine Interaktion hinzufügen, können Sie diese beiden Strategien verwenden, um Dinge automatisch zu blinken, was eigentlich sehr nützlich ist. Also, was ich jetzt tun werde, ist, dass ich dir nur zeigen will was passiert, wenn ich das gekauft in Prozess Pi bringe. Also werden wir zum Prozess Pi übergehen. Und wir werden eine neue Stapeldatei erstellen. Und ich habe gerade ein iPhone 11 Pro Setup. Also verwende ich diese Standard-Voreinstellung. Und um Grafikinterpreter Pi zu importieren, müssen Sie zum Importmenü kommen und ich werde Skizze wählen. Und Sie können sofort sehen , dass das Protokoll die Skizzendatei betrachtet, die sich dahinter befindet. Und es kann alle Kunsttafeln sehen, die sich in unserer Skizzendatei befinden. Also werde ich wählen Start Skulpturen. Und ich werde auf diese Speisekarte zurückkommen und es erklären. Aber nur für den Moment werden wir es einfach alle Vorgaben und Impulse lassen. Ok, so können Sie hier im Abgrund Ebenen Panel sehen, meine beiden Logo- und Riemenlinien Objekte. So in Scatch, die erste war eine Komponente, und in der Skizze die zweite war diese Moschee Gruppen. So können Sie sehen, dass es nur zerquetscht sie alle in eine abgeflachte Bitmap. Okay, also machen wir das rückgängig. Wir gehen zurück zur Skizze. Und wir werden uns diese anderen Grafikdateien ansehen, die ich hier habe. Und es will ein wenig über einige andere Funktionen sprechen, die der Importeur hat. Eines der Dinge, die wirklich cool ist, ist, dass Sie viele dynamische Dinge mit Textebenen tun können. Sie möchten also sicherstellen, dass Ihre Skizze Textebenen Großbuchstaben genau wie diese sind. Und wenn wir sie in importieren, Profil wird die Skizzen-Text-Layer auf seine eigenen nativen Steuer-Layer zuordnen. Und wir werden in der Lage sein, ein paar Dinge damit zu machen, und das ist ziemlich cool. Eine letzte Sache, auf die ich Ihre Aufmerksamkeit lenken möchte, ist die Tatsache, dass, wenn Sie Grafiken über die Importe von Sketch bringen, Interpreter Pi wird alle Ihre Grafiken in Bitmaps konvertieren. So im Moment, verschönern es unterstützt nicht die wichtigen oder Vektorgrafiken, eine heilige Impuls-Bitmap-Versionen Ihrer Vektorgrafiken. Und zum größten Teil ist das kein allzu großes Problem. Und Sie haben die Fähigkeit, einige native Formen mit unglaublich hoch zu erstellen , und wir werden einige dieser Dinge später im Kurs erkunden. Aber abgesehen davon können Sie erwarten, dass proto pi eine Hierarchie zulässt. Alles, was sich in einem Ordner befindet, wird in Prototyp-Version eines Dateiordners konvertiert , der ein Container ist. Aber für alle Absichten und Zwecke ist es genau das Gleiche und alles andere wird in der Reihenfolge erscheinen, in der Sie es in Ihrer Skizzendatei haben. Okay, also, wenn diese Mist aus dem Weg sind, werden wir unseren ersten Schritt machen. Wir werden einige Grafik-Interpreter pi importieren und mit der Erstellung unserer Place Rest App beginnen. Kurz bevor wir das tun, werde ich einfach meine Aktien Captchas sind Essen loswerden. Befreien Sie sich das aus den Wachen. Das wollen wir nicht verwirrt werden. Und wir werden zwei Pi überspringen. Und wir haben unsere Py-Datei, die wir erst vor kurzem erstellt haben , was absolut in Ordnung ist. Wir können damit anfangen. Und wie wir es vorher getan haben, gehen wir zum Importieren und wählen Skizze. Und wenn wir das wählen, erhalten wir dieses Dialog-Popup ist Importdialog. Und standardmäßig wird es die aktive Skizzendatei lesen , die im Hintergrund sitzt. In diesem Fall ist, wie Abschnitt zwei, Rohre Rest Assets. Und es wird auch in der Lage sein, alle Ausgaben zu sehen , die wir in unserer Datei eingerichtet haben. Und es wird sie in diesem Apple-Menü hier auflisten. Hier drüben haben wir die Eingabegröße. Abhängig von dem Gerät, für das Sie Prototypen erstellen, möchten Sie sicherstellen, dass die Grafikgröße mit der richtigen Pixeldichte ist. Da das Protokoll den Import von Vektorgrafiken und über die Importe im Moment nicht unterstützt , müssen Sie sicherstellen, dass Ihre Bitmap-Grafiken die richtige Dichte aufweisen, da sie auflösungsabhängig sind . Also für das iPhone 1011 pro wissen wir, dass die Impulsgröße bei 3x liegt, also werden wir es standardmäßig belassen. Protokoll weiß dies auch, ist, dass weiß, was das Gerät Pre-Sales. Und wie es predigen wird, wählen Sie die Impulsgröße, die für uns richtig ist. Okay, hier runter, wir haben zwei Möglichkeiten unter seitlichem Impuls. So können wir entweder alle letzten Strukturen importieren oder wir können wählen, um nur exportierbare Ebenen zu impulsieren. Wenn Sie also bereits bestimmte Ebenen gesessen haben, um in Scatch ausnutzbar zu sein, werden diese Layer nur importiert. Das ist etwas, was ich nicht wirklich tue. Wenn das etwas ist, das für Sie wünschenswert ist, dann können Sie das als Option wählen. Der letzte Teil des Impulses bin ich, sobald es schnell Chats geht, ist diese Re-Import-Optionen. So Profis Pi hat die Möglichkeit, Grafiken, die gerade importiert wurden, neu zu importieren, nur merkt sich die letzten Grafiken, die Sie importiert haben. Es gibt also keine Art von dynamischer Verbindung zwischen allen Grafiken, die Sie importieren, und den bestimmten Bereichen in Ihrer Stapeldatei wellig wichtig auch. Also, wenn Sie gerade etwas entdeckt haben, das Sie schnell ändern müssen, dann kann es eine nützliche Option geben. Aber um ehrlich zu sein, Es ist nicht etwas, das ich wirklich benutze. Wenn das etwas ist, das Sie tun, um selbst Wert zu bekommen, dann haben Sie hier ein paar Optionen. So haben wir die Möglichkeit, Positionen von Layern zu überschreiben. Also, wenn Sie bereits einige Grafiken Interpreter pie importiert haben und Sie die Ebenen ändern möchten. Sie können die Layer in Sketch ändern und anschließend erneut importieren. Und es wird die Ebenen innerhalb Ihrer PY-Datei neu organisieren Größen von Ebenen überschreiben. Wenn Sie die Größe Ihrer Layer geändert und verstreut haben, importieren Sie erneut, werden diese aktualisiert. Aktualisieren der Layerreihenfolge in Gruppe und Struktur Wenn Sie beim erneuten Importieren die Layer Ihrer Gruppen innerhalb einer Skizze neu organisiert haben, werden diese Aktualisierungen angewendet. Und schließlich entfernen Sie Layer in der Skizze gelöscht. Wenn Sie also eine dauerhafte Skizze löschen und dann erneut importieren, werden diese Layer ebenfalls entfernt. Okay, so werden wir effektiv lassen alle diese Optionen gebildet wird, wird die letzten Fledermäuse setzen alle Layer-Struktur und wir werden unseren Startbildschirm importieren. Okay, also haben unsere Grafiken jetzt impulsiv. Und wenn Sie einen Blick haben, können Sie sehen, dass die Layer-Hierarchie mit unserer Skizzendatei übereinstimmt. Die kleinen Boxen mit den gepunkteten Linien. Dies sind Gruppen, das sind effektiv die Gruppen und Skizzen, und das sind unsere Pro-Lieferanten-Container. Sie können hier sehen, wir haben ein Textobjekte und dies war eine native Textebene innerhalb von Scatch. Es wurde importiert, interpretiert oder pi wie eine spezielle Skizze. Entschuldigung, diese spezielle Steuerschicht. Sie können sehen, es hat ein wenig C in der unteren Ecke Basis auch ein grafisches Symbol als gut. Und was das bedeutet, ist, dass es im Moment immer noch eine Grafik ist, aber wir haben die Fähigkeit, sie in Tanks umzuwandeln, wenn wir wollen. So werden nicht alle Ihre Tags sofort in native Texte konvertiert. Sie werden in der Lage sein, ein V auszuwählen, wählen Sie, welches Stück Text Sie tatsächlich native sein möchten. Und das sind normalerweise nur die Dinge, die Sie hinzufügen möchten, einige Interaktion auch. Okay, das ist also unsere erste Schicht importiert. So können Sie hier sehen, wir haben diesen Namen hier, der c1 sagt. So protoplanet hat das Konzept der Szenen und wir können verwenden scheint unseren Prototyp zu brechen. Also werden wir noch ein paar Szenen hinzufügen. Also, wenn wir rüber zu den Szenen Panel fliegen, die gerade hier auf der linken Seite ist, können Sie sehen, wir haben, wie C1. Also werde ich nur noch eine Staffel hinzufügen, weil wir unsere anderen importieren wollen , die aus unserer Skizzendatei abschirmen. Und wir werden nur auf s2 doppelklicken. Wie gehen wir zurück, um Skizze zu importieren? Und dieses Mal werden wir Login wählen. Wir müssen alles auf den Standardwerten belassen und auf Eingaben klicken. Das ist gut. Und dann wollen wir endlich zu unserer dritten Szene gehen. Gehen Sie zur Impulsskizze. Und wir werden zu Hause wählen und klicken Sie auf Import. Coastal, das sind unsere Häuser importiert. Was wir jetzt tun werden, ist, dass wir diese drei Szenen umbenennen. Also rufen wir den ersten an, fangen an. Die zweite, wir werden es Login nennen. Und die dritte Bindung werden wir sie nennen. Jetzt. Ich habe gesagt, dass Sie durch den Importer nur Grafiken im Bitmap-Format importieren können. Und das ist wahr. Aber es gibt eine andere Möglichkeit, ihn Grafiken von der Skizze in Lob Pi zu treiben, wo man nicht wirklich imple Grafiken als Vektoren. So unterstützt Protoplanets das SVG-Format und es gibt die Funktionalität um SVG zu importieren integriert durch einfach nicht direkt durch die Importe sind zu diesem Zeitpunkt. Also, was wir tun werden, ist, dass wir einfach auf unsere Startseite gehen. Und ich werde seine Gruppe öffnen und mein Logo bekommen, mein Pintrest-Logo. Ich möchte das als SVG einbringen , weil wir später einige Animationen hinzufügen werden. Also wollte ich nicht tun, ist, dass ich zurück zur Skizze gehen werde und ich werde meine Logo-Gruppe finden. Also dieser hier, will nur das Logo markieren Teile des Logos. Und ich werde mit der rechten Maustaste auf den Ordner im Ebenenbedienfeld klicken. Und ich werde SVG-Code kopieren wählen. Okay, also werde ich zurück zum Prototyp wechseln. Und ich werde hier nur einen normalen Befehl „Einfügen“ machen. Jetzt wirst du sehen, dass meine Logos importiert wurden. Es nennt sich Bild breit und es hat dieses Symbol. Dies ist das SVG-Symbol, aber Sie werden sofort feststellen, dass es sehr, sehr klein ist. Momentan beeindruckt von fünf Punkt 05, gibt es ein Problem mit SVG-Importen, bei dem der Import nur die Datei einbringt, seine physische Größe bei 1X hinzufügt und die Pixeldichte Ihres Dateigröße. Also müssen wir nur ein wenig Karten und ein bisschen Manipulation machen , um dies zu beheben, ist SVG, so skalierbarer Vektor. Die Größe ist also nicht wirklich ein Problem für uns. Also werden wir das nur ausgesucht und wir kommen auf die Größe. Also hier drüben haben wir die Breite und wir haben die höchste. Und in diesen Feldern kann ich eigentlich einfache Mathematik machen. Also werde ich sicherstellen, dass mein Vorhängeschloss gesperrt ist, das wird das Seitenverhältnis sperren. Und im linken Breitenfeld werde ich es Sternchen binden, das das Symbol für multiplizieren ist und auf seine Höhe drei schauen. Und effektiv werden wir diesen Wert mit drei multiplizieren. Also wird es die Rückkehr treffen. Okay, wir haben jetzt unser Logo auf die richtige Größe, weil es bei 3x Pixeldichte ist. Wir haben es mit drei multipliziert und wir haben es auf die richtige Größe. Okay, also werde ich das einfach einbringen. Das sieht gut aus. Und ich werde dieses Logo umbenennen. Und ich kann jetzt sicher entfernen meine Logo-Gruppe tut dies hier drin. Und in der Tat, das ist nur das Logo in dieser Gruppe hier. Und jetzt habe ich mein Bitmap-Logo durch eine skalierbare Vektorgrafik ersetzt. So dass über schließt unseren Blick auf Impuls in Grafiken von Sketch Interpreter pi. Im nächsten Video werden wir uns ansehen, wie wir Grafiken von Adobe XD anflehen, interpretiert einen Kuchen. Aber wenn Sie Ihr Werkzeug Ihrer Wahl skizziert, können Sie dieses Video sicher überspringen. Stellen Sie sicher, dass Sie sich das Video ansehen, in dem ich über den Import aus dem Dateisystem spreche, denn es gibt einige Dinge in diesem Video, die Sie wissen müssen. Also sehe ich dich im nächsten Tutorial. 7. Importieren aus Adobe XD: Hi. In diesem dritten Video werden wir uns ansehen, wie wir Grafiken aus Adobe XD importieren , um diese erstaunliche neue App namens Pipes Rest zu erstellen. Ich weiß nicht, wie es dir geht, aber ich liebe es, wenn ich die Dinge kennenlerne, die ich liebe, wie Pi und Prototyping. Ich meine, Regel sucht nach unseren Traumprojekten oder? Wie auch immer, bevor wir unsere Entwürfe eingeben, möchte ich ein wenig über einige der Nuancen zwischen XD und Presser Pi sprechen. Also einige der Dinge, die ich mit Ihnen besprechen möchte, ist die Art und Weise, wie Sie neigen, Grafiken in dieser Art von Software zu entwerfen. Alle drei Software-Anwendungen, die mit Stolz der Pi unterstützt werden, Adobe XD, wenn Ignoranz Zeitplan haben das Konzept der Komponenten, alle haben das Konzept der Textebenen und Stile. Es gibt also bestimmte Dinge, die wir alle tun, wenn wir Grafiken erstellen, machen viel Sinn, wenn wir diese Grafiken in diesen, in diesen Anwendungen erstellen. Aber es gibt einige Nuancen zwischen wie wir diese Grafiken erstellen und wie wir sie in Proto Scheiterhaufen importieren müssen und wie Prototyp eine Art SAP hat , um die Grafiken zu interpretieren, die wir hinzufügen. Und Sie werden sehen, ob Sie zufällig alle drei Videos sehen, wie die subtilen Unterschiede zwischen der Funktionsweise der drei Apps? Also für Adobe XD, es ist Nuancen, sind diese. Das erste, worüber wir sprechen werden, sind Komponenten. So Adobe XD-Komponenten. Wenn Sie also eine Komponente importieren, die eine Komponente aus Adobe XD ist und Sie sie in proto pi importieren, wird sie als Prozess-Pi-Gruppe importiert. Also, das ist wirklich gut. Es ermöglicht Ihnen, weiterhin Komponenten innerhalb Ihrer Adobe XD-Projekte zu verwenden, ohne Angst vor Verlust oder Funktionalität zu haben oder diese Komponenten auf eine bestimmte Weise zu manipulieren, wie Sie in einigen der andere Apps. Daher sind Komponenten als Gruppen wichtig. Und alle Grafiken außer Textebenen werden in Bitmaps umgewandelt. Nun ist dies etwas, das ziemlich üblich ist den gesamten Import ist zum aktuellen Zeitpunkt, alle Grafiken werden in Bitmaps umgewandelt, wenn sie importiert werden, interpretiert upaya gedrückt von nicht innerhalb des Impulses, der Impuls von Vektorgrafiken. Aber das heißt, die Tatsache, dass Sie eine Komponente in Adobe XD haben und sie in den Prozessor Pi bringen können und immer noch das Haar manipuliert. Und auch für die Tatsache, dass die Textebenen beibehalten und tatsächlich direkt durch Textebenen gedrückt werden , ist eine gute Sache. Es ist wirklich kalt. Das zweite, worüber ich sprechen möchte, sind maskierte Ebenen. So hat W x D ein paar verschiedene Möglichkeiten, mit Bildern und Masse umzugehen. Also haben wir hier drüben in diesem Home-Bildschirm, wir haben diese, diese Form, die diese Maske auf sie angewendet hat. Wenn Sie also eine Moschee in Adobe XD Interpreter Pie importieren, wird es diese ganze Gruppe von Objekten abflachen . Es wird davon ausgehen, dass es nur eine einzige Schicht ist. Das könnte also etwas sein, das Sie tatsächlich verwenden möchten. Sie können Massen-Layer verwenden, um die Benutzeroberfläche zu komprimieren und denen Sie keine Interaktion hinzufügen müssen. Und dadurch wird die Dateigröße Ihres Prototyps komprimiert und auch die Komplexität komprimiert. Also, das ist eigentlich etwas, das sehr nützlich ist. Aber bedenken Sie, dass, wenn Sie einen Spott haben, Objekte innerhalb von dxdy abgeflacht werden. Also etwas, das du nicht tun willst. Sie wollen keine Moschee, eine Gruppe, in der Sie eine Steuerschicht und zum Beispiel N haben. Und Sie sollten diese Steuerebene verbessern dynamisch angewendet, weil Sie gehen, gehen Sie zu verlieren, dass Bearbeitungen Fähigkeit, wenn Sie über übertragen. Okay, wenn Sie also, eine andere Sache zu beachten ist, wenn wir einfach wieder zwei gehen, nach Hause, diese Homeszene hier. Und wenn ich nachsehe, lassen Sie mich das einfach hervorheben. Und wir werden hier in den Fotostream gehen. Und wir werden nur eines der Bilder öffnen, tatsächlich Cisco Sekhmet eins. So können Sie hier sehen, dass ich nur ein einzelnes Objekt habe. Es ist ein Bild, das effektiv ein abgerundetes Eckrechteck ist , in dem ich gerade ein Bild abgelegt habe. Und nach Adobe XD ist native Funktionalität sofort markiert, dass Bild. Und ich habe tatsächlich abgerundete Ecken darauf angewendet. Nun, das Problem, nun, es ist vielleicht kein Problem, aber nur etwas, das man sich bewusst sein muss, ist, dass, wenn man diese abgerundeten Ecken dynamisch innerhalb eines Proto Pi manipulieren wollte, man die Art und Weise überdenken muss, wie man Objekte hereinbringt, in für, für diese Art von Zeug. Die Art und Weise, wie das Protokoll funktioniert, ist es Ihnen erlaubt, um die Ecken zu Gruppen, zu nativen Proto Pi-Gruppen hinzuzufügen . Und Sie haben auch Funktionen, die es Ihnen ermöglicht, diese abgerundeten Ecken dynamisch zu animieren und diese abgerundeten Ecken zu ändern. Also, wenn das etwas ist, das Sie tun müssen, wenn Sie mit dem Prototyping beginnen. Dann möchten Sie die abgerundeten Ecken innerhalb von Adobe XD abnehmen. Bringen Sie einfach Ihre quadratischen Bilder ein und gruppieren Sie die abgerundeten Ecken stattdessen in einem Prototyp. Okay, das ist wirklich die einzigen Dinge, auf die Sie aufmerksam machen können. Abgesehen davon können Sie weiterhin genau so gestalten, wie Sie in Adobe XD waren. Zu wissen, dass Sie in der Lage sein, Ihre Grafiken in Prosa upaya zu bringen, ohne jede, jede seltsame Handlung. Okay, jetzt werden wir tatsächlich einige Grafiken in die Prosa Papaya von Adobe XD importieren . Also, und wir werden Grafiken aus diesem Abschnitt in P3s Assets-Datei importieren, die in den herunterladbaren Dateien zur Verfügung steht. Und was ich tun werde, ist, dass ich umschalten werde, um einen Kuchen zu produzieren. Und ich werde nur eine neue Pfeife erstellen. Und standardmäßig werde ich dieses iPhone 11 Pro Acts zu bekommen, die die Größe des Telefons ist, das wir durch diesen ganzen Schulungskurs verwenden werden. Und was ich tun werde, ist, dass ich die Vorschau hier loswerde. Das erste, was ich tun werde, ist, dass ich meine Grafiken importieren werde. Also, wenn ich hier rauf gehe und Sie sehen können, habe ich dieses Importmenü. Und wenn du die anderen beiden Videos gesehen hast, hast du das schon gesehen. Das ist ziemlich genau das, was ich mit den anderen beiden mit den Daten zu Apps durchgemacht habe. Also für dieses spezielle Video, werden wir aus Adobe XD importieren. Also werde ich Adobe XD aus dem Menü wählen. Und sie werden mit diesem Dialog vorgestellt. Und dieser Dialog ist fast identisch, denn er ist für alle drei Apps völlig identisch. Nur ein paar Terminologie Dinge, die anders? Also für Adobe XD kann ich hier meine Datei sehen, die geöffnet ist. Also müssen Sie Ihre Datei in Adobe XD im Hintergrund öffnen und hübtify wird diese Datei aufnehmen und es wird diese Datei introspect und es wird in der Lage sein, alle Flughäfen zu betrachten, die Sie haben. In diesem Menü hier kann ich zunächst die Art-Boards sehen, die ich in meiner XD-Datei habe. Hier können Sie die Impulsgröße sehen. Also, weil, wie ich bereits sagte, alle Grafiken in umgewandelt werden, oder die meisten Grafiken werden in Bitmaps umgewandelt. Wir müssen sicherstellen, dass diese Grafiken wichtig sind, dass die richtige Größe. Und für Geräte, weil wir eine, Ich bin sicher, dass Sie wissen, weil wir Pixeldichte Bildschirme mit unterschiedlichen, unterschiedlichen Dichten von Pixeln haben, dann müssen wir sicherstellen, dass wir in unsere Grafiken, die die richtige Größe haben. Da wir also auf einem iPhone 11 Pro entwerfen, drücken wir bewerben. Es weiß bereits, dass das eine 3-fache Dichte ist. Also hat er bereits die richtige Dichte für uns gewählt. Ok, also weiter unten, wir haben Ebene zu importieren. Hier gibt es also zwei Möglichkeiten. Wir können entweder alle unsere Ebenen in der gleichen letzten Struktur importieren , wie sie in unserer EXE-Datei sitzt. Oder wir können nur Layer auswählen, die für Batch-Export markiert sind. Also neige ich dazu, einfach die OLAP-Struktur zu verwenden. Aber die nur zu wissen, Sie müssen die Option dort schweben und Sie verfügbar, wenn Sie nur bestimmte Ebenen importieren möchten. Der gesamte untere Abschnitt hat alles mit etwas namens Re-Import zu tun. Jetzt ist der Neuimport eine Funktion innerhalb von proto pie, Sie ein gerade importiertes Design erneut importieren können. Und damit können Sie Änderungen an Ihrer Adobe XD-Datei vornehmen. Vielleicht haben Sie bemerkt, dass eine Grafik nicht korrekt positioniert wurde , oder Sie wollten die Ebenen in einer anderen Reihenfolge oder etwas. Sie können dann Ihre Änderungen in Adobe XD vornehmen und dann die Optionen zum erneuten Importieren verwenden , je nachdem, was Sie hier ursprünglich festgelegt haben. Azure-Importoptionen, wenn Sie zum ersten Mal importieren, wird das aktualisiert, wenn Sie einen zukünftigen erneuten Import durchführen. Hier gibt es also vier Möglichkeiten. Sie sind alle ziemlich selbsterklärend. Wir haben also eine überreife Position der Ebenen. Wenn Sie also eine Positionsänderung in Ihren Ebenen in XD vornehmen, wird es überschreiben und verschönern. Überschreiben Sie Größen von Layern. Also wieder, wenn Sie die Größe der Layer ändern , wird dies aktualisiert werden. Und dann haben Sie diese anderen beiden Optionen, aktualisieren Sie Layout, Bestellungen und Gruppierungsstruktur, und entfernen Sie Ebenen in Adobe XD gelöscht, wieder ziemlich selbsterklärend, aber sie werden Ihnen erlauben, diese Änderungen vorzunehmen. Und wenn Sie Ihre Datei erneut importieren, werden diese Änderungen vorgenommen. Wie ich bereits gesagt habe, verwende ich die Re-Import-Funktion nicht wirklich so sehr. Und es gibt viele Gründe, warum ich dazu neige, Dinge einmal wie Unternehmen zu ändern, aber das ist etwas, das für Sie von Wert ist, dann ist die Funktion da. Okay, also werden wir nur das oder an den Standardwerten belassen und sicherstellen, dass wir die letzte Struktur haben und wir werden Eingaben tippen. Okay, unser Einstiegsbildschirm war Impuls. Sie können hier im letzten Fenster sehen, die Ebenenhierarchie respektiert und beibehalten wurde. Sie können sehen, dass alle meine Grafiken, die Vektoren waren, jetzt in Bitmaps konvertiert werden. Abgesehen von meinen Textebenen, die dieses spezielle Steuerrechtssymbol haben. Und Textebenen standardmäßig GET Impuls sagte als grafische Textebenen. Und was das bedeutet, ist, dass es kein richtiger Text ist, bis ich tatsächlich in Text konvertiert habe. Dies ermöglicht es Ihnen, nicht den gesamten Text standardmäßig konvertiert zu haben. Es gibt einige Probleme bei der Vorschau Ihrer Prototypen, z. B. in der Cloud oder im Web. Wir können nicht, wir können keine benutzerdefinierten Schriftarten im Web laden. Alle Schriftarten, die Sie verwenden, müssen von Mitteln unterstützt werden , auf die Ihr Browser Zugriff hatte. Also Dinge wie diese, vielleicht Gründe, warum Sie vielleicht nicht alle Ihre, alle Ihre Schriften in native Schriftarten konvertieren möchten . Also, aber abgesehen davon haben wir unsere Gruppen, die effektiv die Gruppen sind, die in Adobe XD waren. Und alles andere ist ziemlich ordentlich. Okay, Sie haben vielleicht bemerkt , dass wir diesen kleinen Titel Haeckels Szene eins haben. Das wird also darauf hinweisen, dass pro Versorgung das Konzept von Szenen hat. Und Sie können sich Szenen als eine Möglichkeit vorstellen , Ihren Prototyp in überschaubare Stücke zu zerteilen. Und wir werden ziemlich viel mit Szenen verwenden, durch diesen Kurs wirst du viel darüber lernen, wie man singt und die Vor- und Nachteile von Szenen benutzt. Wir werden unsere ersten 3C, drei Szenen, drei Bildschirme in Interceds bringen . Und um das zu tun, gehen wir zu diesem Szenen-Flyout-Menü, und wir werden ein paar zusätzliche Szenen hinzufügen, indem wir hier den Plus-Button drücken. Und wir werden umschalten, um zu scheinen, einfach durch Doppelklick darauf. Und wenn ich zu unserem Impuls zurückgehe, Fledermäuse, Adobe XD, und wir werden in unseren zweiten Bildschirm bringen , der unser Login-Bildschirm ist. Wir werden das noch mal wählen. Wir werden alle anderen Optionen auf der Standardeinstellung belassen und wir werden die Uhr eingeben. So haben wir jetzt unseren Login-Bildschirm importiert. Wir gehen rüber zu unserer letzten Szene, sehen drei, und wir werden unseren Home-Bildschirm importieren. Ich wähle einfach die für uns zu Hause aus. Und wir werden importieren. Ok, cool. Also sieht alles gut aus. Wie ich bereits sagte, Pro Lieferant nur Impuls-Bitmaps, aber sie sind dort oben gibt es tatsächlich eine Möglichkeit, Vektoren zu erraten, Interpreter Scheiterhaufen, und das ist durch die Verwendung von SVG. So unterstützt pro Versorgung SVG. Es hat momentan eine begrenzte Menge an Unterstützung, aber es erlaubt Ihnen, Grafiken einzeln als SVGs zu Impulsen. Also, was wir tun werden, um uns das anzusehen, wenn wir rüber zu unserem C1 gehen. Also haben wir dieses Logo ist peice rest logo. Wir können sehen, dass sechs hier in dieser Gruppe sind, und es hat die Textebene dort, aber es hat diese Logo-Markierung, die eine Grafik ist. Und ich möchte tatsächlich einige Animationen darauf anwenden. Wir werden, das werden wir in einem zukünftigen Video machen. Also, sobald ich kurz nach oben und unten skaliere, möchte ich nicht, dass es Bitmap ist, also werde ich einen SVG einbringen. Die Art und Weise, wie ich das mache, geht nicht zurück zu Adobe XD. Und ich werde mein Logo finden, ich bin wach. Es ist also nur in dieser Gruppe hier. Und ich werde Set auswählen und ich werde mit der rechten Maustaste klicken und ich werde die Option SVG-Code kopieren wählen. Okay, also werde ich zurück zu Prozessor Pi wechseln, und ich werde einfach eine normale Paste hier machen, um unser Logo einzufügen. Und Sie können sehen, wie unsere Logos kommen, aber es ist wahnsinnig klein, was los ist? Ab der aktuellen Version des Protokolls, das von 5-0 fünf untersucht wird, gibt es ein Problem, wenn Sie SVG in dem Sinne einbringen, dass es jetzt bei einem kommt , weil unser Prototyp ein iPhone ist und es unsere Pixeldichte oder 3x ist. Das wird nicht berücksichtigt, aber es ist eine leichte Wirkung. Wir haben immerhin einen SVG, also können wir uns einfach anmelden. Und weil wir genau wissen, welchen Multiplikator wir brauchen, um ihn zu vergrößern, können wir einfach eine Grundmasse machen. Also eines der coolen Dinge über Pros Imperium und seinen Impuls fühlt sich wie eine Liebe zu Rap sagt, dass Sie grundlegende mathematische, mathematische Berechnungen innerhalb der Felder selbst tun können . Also werden wir hier rüber kommen, um die Größe zu erreichen und wo wir unsere Breite und unsere Höhe sehen können. Und stellen Sie sicher, dass das Vorhängeschloss verriegelt ist. So sperrt es das Seitenverhältnis. Wir werden nur ein mal drei in dieses Feld stecken. Jetzt sind Zeiten innerhalb der Software tendenziell die Sternchen, also werden wir das verwenden. Also ist Astra S mal und wir werden nur die Nummer drei eingeben. Und wir werden die Rückkehr treffen. Und siehe, wir haben jetzt unser Logo-Zeichen auf die richtige Größe. Ok. Also, das ist die Position es in die richtige Position knapp über unserem wie aktuellen Bitmap-Logo MAC. Und wir werden das Bild eines verschieben, das unsere SVG ist, die das in die Logger-Gruppe verschieben wird. Und wir werden es umbenennen Logo Mock, nur durch Doppelklick markieren. Und wir können jetzt sicher unsere Bitmap-Gruppe des Logos entfernen. Das brauchen wir nicht mehr. Und wir haben unsere Bitmap-Grafik erfolgreich durch eine SVG-Grafik ersetzt. Ok, eine letzte Sache, die wir tun müssen, ist, dass wir diese Szenen einfach umbenennen müssen. Also werden wir diesen Namen nennen, der anfängt. Und dann haben wir Login. Und endlich sind wir nach Hause gekommen. Okay, so dass über wickelt es für unseren Blick auf Impuls in Grafiken in Adobe XD. Wir haben einige Nuancen und Dinge behandelt, die gut für Sie sein werden zu wissen, ob Adobe XD Ihr Werkzeug ist und Sie sie in Zusammenarbeit mit Prosopagnosia verwenden möchten. Und im nächsten Video werden wir uns ansehen, wie Sie Grafiken aus dem Dateisystem importieren. Es gibt also ein paar andere Dinge, die sehr nützlich sind, um zu wissen, wann Ihr Impuls in Grafiken aus dem Dateisystem, im Gegensatz zu nur die Impulse zu verwenden. Also sehe ich dich im nächsten Tutorial. 8. Importieren aus dem Dateisystem: In diesem Video werde ich Ihnen zeigen, wie Sie GraphX aus dem Dateisystem importieren können. Vielleicht möchten Sie dies tun, wenn wir ein Werkzeug, ein Grafikwerkzeug zum Erstellen oder Grafiken verwenden , das nicht eines der drei unterstützenden Werkzeuge ist. Es hat eine spezialisierte Eingänge. So zum Beispiel, so etwas wie Photoshop. Oder wenn Sie Grafiken von jemand anderem geliefert wurden und Sie müssen diese nur irgendwie in einem Fall bekommen. Es gibt also ein paar verschiedene Möglichkeiten, wie wir Bilder aus dem Dateisystem einbringen können. Unterstützt auch eine Reihe von Bilddateiformaten. Nehmen wir also an, PNG, JPEG und SVG. Und um dies zu veranschaulichen, werden wir beginnen, indem wir zum Home-Bildschirm navigieren. Und wir werden einfach eines dieser Tortenbilder durch, durch ein alternatives ersetzen . Nun, eine andere Sache ist zu beachten, dass, wenn Sie Grafiken exportieren, müssen sie die richtige Pixeldichte sein. Also, wenn die Importeure importieren, haben sie das für Sie ausgearbeitet. Aber wenn Sie es mit einem anderen Werkzeug wie Photoshop tun, Sie müssen das Bild OWL in einer größeren Größe speichern , je nachdem, was Sie wollen Ihre Pixeldichte ist. Also, weil wir es tun, als wir unseren Prototyp Editor iPhone 11 Pro gebaut haben, können wir hier mit der Pixeldichte überprüfen. Also für uns ist es 3x, was im Grunde bedeutet, dass jede Grafik, die wir in bringen, dreimal so groß wie die physische Website sein muss . Also zum Beispiel, wenn wir ein 100 quadratisches Bild hatten , wenn wir garantiert African Photoshop auf 300 Pixel Quadrat erkunden, für es die richtige Größe Einsicht über photosphärisch sein. Okay, eine der ersten Möglichkeiten, wie ich Ihnen zeigen möchte, wie man Bilder aus dem Dateisystem einbringt , ist nur die normale Bildschaltfläche hier. Also plus die Hälfte wird das ein Finder-Fenster öffnen. Ich werde zu diesem Ordner navigieren, wo ich ein paar Gesetze habe, hätten wir hier Scheiterhaufen Bilder haben. Ich wähle das aus. Und lassen Sie uns es importieren, die einfach oben im Ebenenfenster hier stecken. Und ich werde diesen ersten Pi im Foto-Stream ersetzen, also image1 mit meinem, meine Eingabe zu beschädigen. Also werde ich das einfach in den Container ziehen. Und ich werde das einfach bei 0-0 neu positionieren, also ist es in der gleichen Position. Ich kann das jetzt entfernen, dies existiert in image1 und doppelklicken Sie darauf, um es einfach in Bild eins umzubenennen. Okay, das ist der erste Weg, wie wir unser erstes Bild ersetzt haben. Nun, es gibt einige Probleme mit schlecht, wenn wir sagen, zum Beispiel, will ersetzen. Also haben wir, wir haben effektiv ein Bild durch ein anderes Bild ersetzt, so dass vorhandene Grafik ersetzt. Und, und das Problem damit ist, dass, wenn wir, wenn wir bereits einige Interaktionen über das Trigger-Panel hier hinzugefügt haben. Es wird brechen und Interaktionen, die wir hinzufügen, wenn wir Tags in diesem bestimmten Bild sind. Und der Grund dafür ist, dass diese, diese Bildebene hier, Sie können es als Container betrachten. Wenn das also importiert wird und wenn wir Ziel haben, sagen wir image1 mit einem über Interaktionen, wird es tatsächlich Luft anvisieren. Dies, das als Container. Es wird nicht nur der Bildname sein, oder wir werden den Bildnamen wählen, aber es ist tatsächlich ein eindeutiges Objekt. Und Sie können sich hier als einen Image-Container vorstellen, der ein Bild darin hat , anstatt nur ein normales Bild. Es gibt also eine andere Möglichkeit, vorhandene Grafiken zu ersetzen. Und das werde ich Ihnen jetzt zeigen. Wenn wir also unser Bild eins ausgewählt haben und wir hier rüber schauen, können wir sehen, dass es einen Ersetzen-Knopf gibt. Dies wird es uns ermöglichen, das Bild innerhalb des Bild-Containers durch ein anderes Bild zu ersetzen . Also, wenn wir einen Ersetzen-Knopf drücken, wir werden zurück zu unserer navigieren, unsere Scheiterhaufen und wählen Sie eine andere Spieler, wenn diese schmeckt tief s, Das ist unser aktuelles Bild von diesem zu ersetzen. Also werden wir aufschlagen. Und Sie können jetzt sehen, dass unser Bild platziert wurde. Es wurde innerhalb des vorhandenen Containers ersetzt, der Dateiname noch. Und wenn wir es so machen, und wir haben einige Interaktionen verbunden, dann wird es ihnen gut gehen, und ich werde in irgendeiner Weise kaputt sein. Wenn Sie also Grafiken ersetzen müssen, sollten Sie dies tun. Okay, also ist das eine Möglichkeit, Bilder aus dem Dateisystem in Ihre Stapeldatei zu bringen. Es gibt eine andere Möglichkeit, es zu tun. Also, um dies zu veranschaulichen, Ich werde nur springen ich war gültig Login-Bildschirm. Und wenn Sie sich erinnern, im vorherigen Video haben wir unseren Preis für S-Logo auf unserem Startbildschirm durch ein SVG ersetzt. Aber wir haben diese Instanz des gleichen Logos auf diesem zweiten Login-Bildschirm als auch. Und Sie können sehen, dass dies eine Containergruppe ist. Es hat eine Reihe von separaten Bildern, die sich ausmachen. So wurde es aus Sigma importiert. Daher kann ich den Befehl Ersetzen nicht verwenden. Es existiert nicht, weil es nur existiert, wenn es ein einzelnes Bild gibt. Also, wenn ich eines dieser Bilder auswähle, können Sie sehen, dass ich ihn ersetzt habe, weil unser Logo aus mehreren Grafiken besteht, das wird nicht funktionieren. Also werde ich ein Bild für neue bringen müssen. Diesmal aber. Ich werde es direkt auf den Desktop bringen. Dies wird also auf, on, auf dem gegenwärtigen MCAT-System unterstützt . Also FI hier werde ich dieses Logo finden, SVG. Ich werde nur Drag & Drop zurückziehen. Und Sie können sehen, dass auch Input dazu ist. Also das bringt nur das n Jetzt wie zuvor, es kleiner, weil es nur eine handelt, weil es die auflösungsunabhängige Datei ist. Und wir werden das nur so groß machen. Wir gehen einfach zum Augapfel, wie sie sagen, um mehr oder weniger die richtige Wissenschaft zu bringen, die ziemlich nah aussieht. Und wieder, wissen Sie, es ist ein SVG hat dieses sehr spezialisierte Icon mit dem Bild-Icon und diesem kleinen Kreis in der unteren rechten Ecke. So kann ich meine Gruppe jetzt sicher loswerden. Und ich wurde jetzt basierend auf dem SVG verengt. Okay, das bringt uns zum Ende der Impulsaktion. Sie sollten nun ein gutes Verständnis für die verschiedenen Möglichkeiten haben , wie Sie Ihren GraphX zusammen mit neuen, alten Serien aller verschiedenen unterstützten UI-Tools importieren alten Serien aller verschiedenen können, bis zum Importeur Cellar de vx, der Skizze mit FISMA. Als Nächstes werde ich Ihnen das Abgrund Konzeptmodell vorstellen und erkunden, dass wir unsere ersten Interaktionen schmeicheln werden. So sehen wir uns im nächsten Tutorial. 9. Das Konzeptmodell: Protokoll funktioniert konzeptionell, aber reale Objekte gibt es keinen Code, nur Objekte, Trigger und Antworten. Wenn Sie an Sir denken, können Sie es auf alles anwenden, was Sie auf der Welt tun, wie ein Glas Wasser gießen. Sie müssen tippen, welches das Objekt ist. Sie müssen den Wasserhahn einschalten, der der Auslöser ist, und dann etwas Wasser ausgießen, was die Antwort ist. Im Prinzip gibt es viele Trigger oder Antworten. Einige sind auch kontextabhängig. Wenn wir beispielsweise den Zieh-Trigger betrachten, können nur die Antworten verschoben, skaliert und gedreht werden. Andere, wie Tag, so ziemlich von jeder Antwort, die das Gebet zu bieten hat. Antworten ändern auch ihre Eigenschaften, abhängig davon, welcher Trigger verwendet wird. Um ein Beispiel dafür zu geben, können Sie, wenn Sie eine Verschiebungsantwort zum Angriffsauslöser hinzufügen, wenn Sie eine Verschiebungsantwort zum Angriffsauslöser hinzufügen, zu einer Position oder um unsere Anzahl von Pixeln relativ zur aktuellen Position des Objekts bewegen . Bei einer Bewegung Reaktion auf einen Kettenauslöser, jedoch. Und dieses Mal werden Sie nach einer Reihe von Werten gefragt. Da die Natur der Kette darin besteht, die Attribute eines Objekts mit anderen Objekten zu verbinden, werden sie miteinander verketten. Trigger werden in eine Reihe von Kategorien gruppiert. Dies sind Touch, Conditional, Maus, Taste, Eingang und Sensor. So können Sie sehen, dass es einige Auslöser gibt, mit denen Sie herumspielen können. Die Antworten werden ebenfalls gruppiert. Aber ich habe keine Kategorienamen. Aber ich mag es, diese als Übersetzungseigenschaften zu betrachten. Bewegung, Navigation, Eingabe, audio-visuelle und eine letzte Gruppe von verschiedenen nicht-visuellen Reaktionen. Die endgültige Antwort ist überhaupt keine Antwort, sondern eine Art der Organisation und mehrere andere Antworten basierend auf bestimmten Bedingungen. Sie würden eine bedingte Antwort hinzufügen, wenn Sie eine Interaktion mit mehreren Ergebnissen erstellen möchten . Zum Beispiel wird ein Login genau dies in einem zukünftigen Video innerhalb dieses Kurses tun. Ok, also ist das sechs Blog namens set-model mit einem einfachen Beispiel. Ich werde ein Quadrat und einen Kreis zeichnen. Ich mache sie in verschiedenen Farben. Wir fügen unserem Kreis einen Tab-Trigger hinzu. Fügen wir nun eine Rotationsantwort hinzu und wählen Sie das Quadrat als Ziel aus. Und wir werden es um 180 Grad drehen lassen. Ich möchte, dass sich das Quadrat von seiner Mitte dreht. Also müssen wir den Ursprungspunkt ändern. Standardmäßig ist der Ursprungspunkt die obere linke Ecke. Ok, so weniger Verlust zum Vorschaufenster. Wie Sie sehen können, jedes Mal, wenn ich tippe, um zu kreisen, passen die Quadrate jedes Mal, wenn ich tippe, um zu kreisen, ich kann mehrere Antworten zu einem einzigen Trigger hinzufügen. So wird die Skalarantwort die quadratische Skala um 5% machen. Lassen Sie uns eine Vorschau darauf. Jedes Mal, wenn ich auf den Kreis tippe, dreht sich das Quadrat und es skaliert. Es ist wichtig zu wissen, dass die Reihenfolge, in der die Antworten ausgeführt werden, auf der Zeit und nicht auf der älteren basiert und sie im Triggerbedienfeld enthalten sind. Ich kann jede Antwort, Start und Dauer mit diesen Werten hier unten steuern . Es gibt auch eine sehr einfache Timeline. Und ich kann diese beiden Werte auch in dieser höheren Mine kontrollieren. Also Verzögerung, Dauer. Wie Sie sehen können, ist die Erstellung von Interaktionen super einfach zu tun. Es gibt einige Ausnahmen und es ist wahr, dass jede Triggerantwort ihre Nuancen hat. Aber mit ein bisschen Spiel um uns herum und Versuch und Irrtum, sie sind alle ziemlich leicht zu erfassen. Die Presse ziemlich Dokumentation ist ziemlich gut. Außerdem können Sie auf die Dokumente für jedes Element zugreifen, indem Sie das Fragezeichen auswählen , wenn Sie den Mauszeiger über das Element im Trigger- oder Antwortfenster bewegen. Damit wir hier springen können. Und es hat mich direkt zur Sprungdokumentation gebracht. Jetzt sollten Sie also ein grundlegendes Verständnis des Konzeptmodells haben und wie Objekte, Trigger und Antworten zusammenarbeiten. In der nächsten Vorlesung werden wir einige der Theorie anwenden, die wir hier gelernt haben. Beginnen Sie mit dem Aufbau der Ruhe-App unseres Planeten. 10. Erstes Interaktion: Wenn Sie mitverfolgt haben, öffnen Sie Ihre vorherige Datei mit Ihren Importgrafiken. Andernfalls können Sie die Starterdatei aus diesem Tutorial herunterladen. Okay, das erste, was wir tun werden, ist, dass wir CTA auswählen und einen Tap Trigger hinzufügen. Und jetzt werden wir eine Antwort namens Jump hinzufügen. So springen ist eine Antwort, mit der Sie von einer Szene zur anderen wechseln können. Also sind wir ausgewählt, wir werden gehen, um zu wählen, wie C, und wir werden Login wählen. Und Sie können hier sehen, wir haben einige vorgefertigte Übergänge, die wir verwenden können. Also haben wir Fade, POP, Slide in, Rutschen und Flip. Für diesen ersten Übergang werden wir nur Fade verwenden. Und das ist so ziemlich unsere erste Interaktion, die geschaffen wurde. Das war also einfach, nicht wahr? Ok? Lassen Sie uns also unseren Login-Bildschirm mit dem Home-Bildschirm verbinden. Wenn Sie das Video pausieren und ein Ziel für sich haben wollen, tun Sie das jetzt. Okay, wenn du den zweiten Bildschirm angeschlossen hast, hoffe ich, es ist gut gelaufen. Lassen Sie mich einfach mit Ihnen einholen und es auch tun. Also werde ich die Schaltfläche Weiter bei der Anmeldung auswählen, um zu unserem Login zu gehen scheint. Also lassen Sie uns jetzt Schaltfläche fortfahren. Ich werde einen weiteren Tab-Trigger hinzufügen. Wie zuvor. Ich werde eine Sprungantwort hinzufügen. Und dieses Mal werde ich den Home-Bildschirm auswählen. Und wir werden das hier auch als Verblassen behalten. Okay, also lasst uns das testen. Also zuerst müssen wir sicherstellen, dass unsere Datei in der Startszene ist , bevor wir in die Vorschau von S gehen, doppelklicken Sie auf das Personal. Vorschau. Und wir werden Login drücken. Schöner Fade-Übergang in unseren Login-Bildschirm. Und dann werden wir auf „Weiter“ klicken. Und eine schöne Einblendung auf unserem Home-Bildschirm. Toll, jetzt haben wir die drei Bildschirme mit einigen grundlegenden Triggern und Antworten verbunden . Als nächstes werden wir einige echte Texteingaben erstellen und freuen uns, Sie dort zu sehen. 11. Ein Anmeldeformular erstellen: Hey, willkommen zurück. In diesem Video werden wir ein funktionierendes Anmeldeformular erstellen. Um dies zu tun, werden wir prettify spezielle Texteingaben verwenden, die es uns ermöglichen, echte Steuern mit der nativen Tastatur einzugeben. Okay, wir stellen sicher, dass Sie in der Login-Szene sind. Wenn Sie dies nicht getan haben, können Sie eine StarterPython Datei herunterladen, wenn Sie nicht mitverfolgt haben. So kannst du mitverfolgen. Das erste, was wir tun werden, ist, dass wir eine Texteingabe rausziehen. Wir werden hier Texteingaben aus dem Steuermenü erstellen. Und wir wollten diese Eingabe SAT spiegelt unser Design hier wider. Das erste, was wir tun werden, ist, dass wir die Größe auf die gleiche Größe einstellen. Also überprüfen wir hier ist 343 von 48. Das hat das Gleiche gemacht. Okay, und wir werden uns von den Ecken abbiegen wollen. Also lassen Sie uns die Radiusecken einstellen. Das hat sich geflacht. Also werden wir den Radius auf 24 einstellen. Und wir werden die Hintergrundfüllung der Eingabe auf weiß setzen. Okay, also wollen wir auch mit dieser Polsterung übereinstimmen. Also werden wir etwas Polsterung auf der linken Seite hinzufügen. Und wir werden etwas Polsterung hinzufügen. Das ist, wenn C. Und ich werde einstellen, dass die Schrift den Daumen ändert. Sie können verwenden, was Sie wollen. Und ich werde Museo-Sounds verwenden, 516 Pixel groß. Und wir werden die ändern, hier steht der Eingang Punkt-Punkt-Punkt. Dies ist der Platzhaltertext. Also werde ich nur die Farbe ändern. Also werde ich Platzhaltertext finden. Und ich werde das auf sieben ändern. Okay, wie Sie jetzt sehen können, dass zwischen jedem entfernt, lassen Sie uns die Grenze loswerden. Also werde ich das einfach deaktivieren. Das war die ursprüngliche graue Grenze. Ok. Das sieht also gut aus. Wir werden die Position der Transporter direkt über das E-Mail-Feld verschieben. Und ich möchte den Platzhaltertext ändern. Also werde ich das einfach in E-Mail ändern . Ok? Und wir werden diese Eingabe umbenennen, E-Mail. Eingang. Okay, das ist also Duplikat. Also Kommando oder Kontrolle D. Und wir werden dieses Passwort nennen. Und ich werde das einfach über das Passwortfeld positionieren. Aber ich werde auch die Reihenfolge innerhalb des Ebenenbedienfelds ändern. Okay, das hat also den Platzhaltertext in Passwort geändert. Und wenn wir nach unten zu den Tastaturoptionen hier scrollen, so können wir den Tastaturtyp auf eine Reihe von Tastaturen ändern. So standardmäßig verwendet es die Steuertastatur, wo wir URL, E-Mail, Nummer, Text und Passwort und Nummer Passwort haben. Und wir werden die Tastatur auf Steuerpasswort ändern. Okay, also tatsächlich, wenn ich zurück zu meinem E-Mail-Eingabefeld gehe, werde ich auch diese Tastatur in E-Mail ändern. Und ich gebe uns einfach die, das App-Symbol auf der Tastatur. Okay, also das ist einfach schnell testen, sehen, was wir haben. Also, wenn ich auf E-Mail tippe, können Sie sehen, dass jetzt eine Tastatur erscheint. Jetzt ist diese Tastatur hier in der Vorschau keine echte Tastatur. Dies ist nur, um Ihnen zu zeigen, dass die Tastaturfunktionalität funktioniert. Aber wenn dies mit einem echten Gerät verbunden wäre, würden Sie eine echte funktionierende Tastatur bekommen. Wenn Sie in der Vorschau testen, können Sie immer noch Ihre echte Tastatur verwenden, die an Ihren Computer angeschlossen ist. Sie können einfach keine dieser Tasten innerhalb des Vorschaufensters, dieses Netzwerk, eingeben oder tippen. Also, wenn ich einfach auf meiner Tastatur hier tippen kann und Sie sehen können , dass ich alles bekomme, was ich brauche. Also sage ich meine E-Mail und wenn ich Passwort eingeben, wenn ich mit der Eingabe beginnen, Sie werden sehen, ich werde die Passwort-Punkte bekommen, weil wir Steuerpasswort als, als Tastaturtyp gewählt. Großartig, also haben wir jetzt erfolgreich unser grafisches TextField ersetzt, haben echte interaktive. So können Sie sehen, wenn wir in eines dieser Felder tippen, die Tastatur erscheint und verdeckt unsere Schaltfläche Weiter. Und so werden wir das auf zwei Arten handhaben. Zuerst werden wir die Go-Schaltfläche funktionieren lassen, so dass wir, wenn wir darauf tippen, zum Home-Bildschirm navigieren. Also lasst uns das jetzt machen. Also werden wir einen weiteren Trigger hinzufügen und es wird ein Return Trigger sein. Und aus dem Layer-Drop-down-Menü wählen wir das Passwort-Feld, Passwort-Eingabe. Und weil wir effektiv den gleichen Übergang verwenden , den wir bereits eingerichtet haben, ohne zu erfassen, und wir werden nur diese Sprungantwort kopieren. Also Befehl Z oder Control Z, wenn Ihre Fenster, und wir werden, dass in einfügen. Und wir testen dies jetzt sollten wir zum Home-Bildschirm navigieren. Also lasst uns mal gehen. Wenn ich also in mein Passwort-Feld tippe und dann auf die Return-Schaltfläche klicke, sehen Sie, dass ich auf den Home-Bildschirm übergegangen bin. Okay, das ist cool, aber wir wollen immer noch unseren Button als Option sichtbar machen. Also müssen wir über der Tastatur animieren, wenn es erscheint. Das erste, was wir tun müssen, ist, die Animation auszulösen , wenn sich ein Benutzer im E-Mail-Feld befindet. Ok, also hat das die Textfelder zusammen verschoben und gruppiert. Und das wird sie in einen Behälter stecken. Wir können tatsächlich entfernen, wie man grafische Passwortschichten als auch. Und wir werden dieses Containerformular nennen. Ok, also öffne das und wähle das E-Mail-Feld aus. Und jetzt werden wir einen Fokus-Trigger-Handler hinzufügen. Der Herbst, wir haben wir es befriedigt, was wir wollen. Ok? Also, das ist, dass eine Duns, die wir reflektieren, wie Form. Und wir werden nun eine Bewegungsantwort innerhalb unseres Fokus-Triggers hinzufügen. Beachten Sie, dass wir in diesem Raum unser Formular ausgewählt haben. Das ist besser. Ich werde den Draht auf 3-20 stellen. Okay, also lasst uns das testen. Also, wenn wir Leute im E-Mail-Feld, können wir sehen, dass unser Formular bewegt sich gut aussehen. Okay, also gehen wir zurück zu unserem Prototyp. Und das ist ein Duplikat dieser Bewegung. Das heißt Kommando Z oder Control D. Und dieses Mal werden wir die CTA primäre wählen, die unsere Continue-Taste hier unten ist. Ich werde das als Ziel setzen. Und wir werden das y auf vier 55 setzen. Und das ist noch einmal Test. Also wählen wir in unserem E-Mail-Feld aus, wir können sehen, dass unser Formular sich jetzt so anpasst, dass es über der Tastatur sitzt. Okay, cool. Also haben wir jetzt unser Login-Formular erstellt. Moment ist es ziemlich fertig, aber wir werden einige bedingte Logik in einem späteren Video hinzufügen, damit es wirklich funktioniert. Also haben wir einige ziemlich coole Sachen bereits mit Eingaben abgedeckt und animiert ihn basierend auf dem Eingabe-Fokus. Und die App fängt schon an, sich realer zu fühlen. Um es sogar noch realer fiel, ist es, es auf einem echten Gerät zu versuchen, was wir im nächsten Video tun werden, um Sie dort zu sehen. 12. Testen auf echten Geräte: Hallo da und willkommen zurück. Also in diesem Video, Ich werde nur Sie durch die Begleit-App für Prototyp höher nehmen, die Sie für iOS und Android herunterladen können beziehungsweise, ist kostenlose App und es ist ein Player-App. Und dies ist eine großartige Möglichkeit, Ihre Prototypen auf Geräten zu testen, in der Tat, ist auch für Sie unerlässlich, und in der Lage sein, Ihre Prototypen auf Geräten zu testen. Ich kann nicht betonen, wie wichtig es ist, Tests auf dem Gerät. Offensichtlich kommt es darauf an. Auch auf Beobachtung Ihres Gebäudes. Es gibt einige Dinge, die Sie auf dem Gerät testen müssen. Und tatsächlich werden wir in diesem Kurs einige Funktionen verwenden, die nur Geräte sind. So werden Dinge wie wir eine Kamera-App erstellen und wir werden später im Kurs haptisches Feedback verwenden. Sie müssen also in der Lage sein, ein Gerät zu verwenden, um das zu erleben. Wie funktioniert es also mit Geräten? Also, wenn wir einen Blick hier in diesem Menübereich hier haben wir sehen können, dass wir diese Geräteoption haben und wir haben diese Run Option. So können Sie jetzt sehen, dass das Gerätesymbol tatsächlich grün ist. Also, wenn ich darauf tippe, können Sie sehen, dass mein iPhone verbunden ist. Wir wissen, dass es verbunden ist, weil es blau ist, und es ist das kleine Spielsymbol daneben. Und es gibt ein paar verschiedene Möglichkeiten, Geräte zu verbinden. Also bin ich, Ich bin über USB verbunden, also habe ich ein USB-Kabel von meinem Computer an mein Handy angeschlossen. Das ist also eine Möglichkeit, es zu tun. Sie können sich auch über WLAN verbinden. Sie müssen nur sicherstellen, dass das Lauffeuer Ihres Computers und das WLAN Ihres Telefons gleich ist. Und dann kannst du eine Verbindung herstellen. So können Sie auch, wenn Sie Wi-Fi verwenden und dann können Sie diesen QR-Code scannen. Und Sie können diesen QR-Code von innerhalb der pro Versorgung an, dass auch ersparen Sie die Mühe der Eingabe in der IP-Adresse Ihres, Ihres Wifi. So stellen Sie sicher, dass Ihre Telefone in einer dieser Optionen verbunden sind. Und dann sendet der Run-Button grundsätzlich einen Prototyp an Ihr Gerät. Im Gegensatz zu der Vorschau, wo es eine Art automatisch ist. Also Vorschau, wenn ich das hier zeige, haben wir das auch Busse. Also, sobald ich eine Änderung in Ihrer drei Umgebung wird automatisch in der Vorschau aktualisiert. So funktioniert es nicht für das Gerät. Sie müssen auf die Schaltfläche „Ausführen“ klicken. Du wirst diesen kleinen Klang bekommen, und du wirst sehen, wie er auf deinem Gerät geladen wird. Und dann wirst du in der Lage sein, das zu testen. Also werden wir tatsächlich einen Blick auf unsere Host-Site werfen, wie sie derzeit auf unserem Gerät steht. Also werde ich jetzt auf unser Gerät umschalten. So können Sie hier sehen, ich sehe jetzt meinen Prototyp auf meinem, auf meinem Gerät. Also werde ich einfach vom unteren Rand des Bildschirms ziehen, um das Menü anzuzeigen. Also haben wir einige Optionen hier im Player, das ist der Name der App, die Sie für iOS und Android herunterladen. Und wir haben die Fähigkeit zu stoppen, wir haben die Möglichkeit, den Prototyp neu zu starten und wir haben die Fähigkeit zu sparen. So können wir den Prototyp auf dem Gerät selbst speichern, was sehr nützlich ist, wenn Sie eine wirklich schlechte Internetverbindung haben, wenn Sie einige Usability-Tests durchführen. Wir haben auch eine Basis, um die Spielergeschwindigkeit zu ändern, und wir können auch die Szene ändern, die wir sehen. So können wir, das können wir innerhalb des Kontrolltafels tun. Und wenn ich einfach den Prototyp hier stoppe, können Sie sehen, dass dies der Standardbildschirm ist, den Sie sehen werden. Wo Sie sehen können, kann ich mich über USB verbinden oder ich kann den QR-Code scannen. Sie können sehen, dass wir über USB an der Unterseite verbunden sind. Also nur um Ihre Aufmerksamkeit auf die Tab-Leiste am unteren Rand zu lenken. Also habe ich die Möglichkeit, auf Cloud zuzugreifen. Ich kann mich einloggen und meine Prototypen sehen, die ich in Cloud hochgeladen habe. Ich habe den Ordner, in dem ich auf die Prototypen zugreifen kann, die ich auf meinem Gerät gespeichert habe. Eine Sache, die ich Ihnen zeigen möchte, was wirklich, wirklich wichtig ist, ist der Font-Manager hier , den wir in den allgemeinen Einstellungen haben. Und wenn ich darauf klicke, Sie können sehen, die, Ich habe bestimmte Schriftarten installiert. Wenn Sie also die dynamische Typfunktion innerhalb von Pro pi verwenden möchten, die definitiv in zukünftigen Videos verwendet wird, können Sie tatsächlich benutzerdefinierte Schriftarten auf Ihr Gerät herunterladen. Und Sie können sicherstellen, dass Ihr Prototyping korrekt gerendert wird. Und das ist wirklich, wirklich, wirklich nützlich. Es gibt etwas, das innerhalb der Cloud nicht unterstützt wird, innerhalb des Internets, des Webparts der Presse Übernehmen. Aber Sie können völlig App auf Geräten tun. Und die Art und Weise, wie Sie dies tun, ist, solange Sie diese Schriftarten mit einer App auf Ihrem Handy teilen können . Also, ob es per E-Mail oder durch Schlacke Cloud oder, oder auf andere Weise, jede andere App, wo Sie diese Dateien auf Ihr Telefon übertragen können , können Sie sie einfach teilen. Wir produzieren eine Torte im Menü „Teilen“, und Sie können sie dann auf Ihr Gerät herunterladen. Okay, also lasst uns einfach unseren Prototyp starten, indem wir hier den Play-Button drücken. Okay, also bin ich in meiner App, also gehe ich einfach zum Intro meiner App. Wir drücken den Login-Button und ich werde den Continue-Button drücken und das hat mich zu Hause eingeloggt. Okay, so ist die Art, wie Sie Ihre Prototypen auf Geräten in der Vorschau anzeigen. Es ist wichtig für eine Menge von Funktionen in einem PPO-Plan. Ich ermutige Sie wirklich, Ihre Prototypen auf diese Weise auf Geräten zu testen. Und es gibt einige andere Funktionen in der App, die Sie vielleicht sehen möchten, wie die Möglichkeit, Hinweise ein- und auszuschalten. Also ja, es ist eine wirklich, wirklich tolle App und es ist eine wirklich gute Möglichkeit, Ihre Prototypen zu sehen. Okay, so dass das über packt unser Video, um zu sehen, wie Sie Vorschau auf dem Gerät. Und wir sehen uns im nächsten Video. 13. Den rollbaren Fotostream erstellen: Hey, da. In diesem Video werden wir einen scrollbaren Fotostream erstellen. Öffnen Sie also Ihre Datei, wenn Sie mitverfolgt haben. Wenn nicht, gibt es eine Sterndatei, die Sie herunterladen können. Also wollte ich über Container sprechen. Es gibt also drei Arten von Containern. Es gibt einen normalen Container, der wie eine Gruppe ist. Es gibt einen scrollbaren Container und es gibt einen Paging-Container, und Sie können hier über dieses Menü auf sie zugreifen. Eine Möglichkeit, auf sie zuzugreifen. Aber meistens wirst du verrückte Container von einer Gruppe in Schichten zusammen sein. Und es gibt einen, es gibt einen wirklich guten Grund dafür. Also, wenn ich nur eine leere erstellen scheint nur aus Gründen der Demonstration. Also erstelle ich einen Container von hier. Und es ist effektiv eine leere Kiste. Und Sie können es hier sehen, mein Ebenenbedienfeld. Also kämpfen Sie uns erstellen ein Rechteck. Und ich werde nur mein Rechteck hier positionieren. Und ich werde das in den Container ziehen. Sie können also sehen, dass, wenn ich den Mauszeiger über meinen Container führe, die Containergrenze ist, aber mein Rechteck ist eine Fabrik außerhalb dieses Containers. Jetzt muss ich mein Rechteck manuell in die gewünschte Position positionieren. Und was Sie sehen können, ist die, wenn ich meinen Container packe, kann ich das bewegen. Sie können sehen, dass sich die Rechtecke mit dem Container bewegen. Wenn ich das Rechteck auswähle, können Sie sehen, dass sich das separat bewegt. Aber es ist, es gibt eine Menge Handarbeit hier , um alles in die richtige Position zu bringen. Wenn ich sicherstellen möchte, dass meine Rechtecke in einem, in einer Position in der oberen linken Ecke. Und Sie können hier sehen, wenn ich Rechteck wähle, dass die Position relativ zum Container ist. Also im Moment, wenn ich, lass mich das einfach auf 00 ändern. Sie können also sehen, wenn ich den Mauszeiger über, dass sich mein Rechteck vollständig in der oberen linken Ecke befindet und seine Position relativ zum Container ist. Wenn ich den Container auswähle, können Sie sehen, dass seine Position ein anderer Wert ist, da er relativ zur Szene ist. Es gibt also diese Eltern-Kind-Beziehung zwischen Containern und Objekten, die in Containern verschachtelt sind. Okay. Das ist also eine Möglichkeit, Container zu verwenden. Aber wie ich schon sagte, wir werden meistens Container gruppieren, was viel nützlicher und einfacher ist, Dinge vielleicht zu bekommen. So wie ein Beispiel dafür. Also, wenn ich, wenn ich ein Rechteck und ein Oval erstelle, und ich werde nur verschieben, wählen Sie diese, und ich werde die gruppieren. Also, das ist Befehl G auf dem Mac Control G auf Windows. Sie können jetzt sehen, dass sie in einen Container gesteckt wurden. Und Sie können sehen, dass die Containerbegrenzung genau mit dem Bereich übereinstimmt, der von den beiden Objekten belegt wird. Dies ist also bei weitem eine viel bessere Möglichkeit, Container zu erstellen. Und Sie werden wahrscheinlich feststellen, dass Sie Container auf diese Weise öfter als auf die andere Weise verfolgen. Okay, also lasst uns diese Szene loswerden. Wir werden unsere Aufmerksamkeit auf die Heimatszene lenken. Und wir werden unseren Fotostream machen. Also unser Foto-Stream-Container hier mit Verkabelungsbildern. Und wir machen das in einen scrollbaren Container, damit wir nach oben und unten scrollen können. Das erste, was wir tun werden, ist, dass wir die Fotosaite auswählen. Und wenn wir im Eigenschaftenfenster nach unten scrollen, sehen Sie, dass es einen Abschnitt namens Scroll-Paging gibt. Also wählen wir Scroll aus. Und das hat nun unseren normalen Container in einen Scroll-Container verwandelt. Und Sie können das ein paar Möglichkeiten sagen. Nummer eins, Sie können sehen, dass sich die Symbole für diese zwei kleinen Pfeile im Inneren ändern, was bedeutet, dass es ein vertikaler Scroll-Container ist. Und auch wenn ich Scroll ausgewählt habe, können Sie sehen, ich habe ein paar weitere Optionen, die mir offenbart wurden. Also, nämlich die dritte, die die Richtung des Scrolls ist, die standardmäßig vertikal ist. Das neigt dazu, die beliebtere Scroll-Richtung zu sein. Durch kann es horizontal mit einem Wunsch ändern. Und ich habe auch diese Option über Scroll aufgerufen, was das Gleichgewicht ist, das Sie erhalten, wenn Sie Container scrollen und Sie bis zum Ende des Containers gelangen und Sie irgendwie ziehen es wie füllt seine nicht elastische. Dies ist sehr ein iOS-Muster. Und Sie können das, was standardmäßig umgeschaltet ist hier können Sie es auch deaktivieren, wenn Sie möchten. Die letzte Option ist diese Bildlaufposition. So kann ich die Standardposition meiner Container festlegen oder etwas anderes als 0 sein. Wir werden es für jetzt 0 behalten, aber das ist, was das ist, wenn du neugierig bist. Okay. Also im Moment, also haben wir diesen Scroll-Container. Aber im Moment, wenn ich nur eine Vorschau dies, so können Sie sehen, dass ich nicht wirklich einmal einziehen kann. Und das liegt daran, dass wir diese Gruppe an der Spitze ist Gerät und Blendengruppe haben, die effektiv unseren Zugang zum Fotostream blockiert. Also, das ist etwas zu beachten, wenn Sie versuchen, Container zu scrollen und es nicht scrollen, dann gibt es eine gute Chance, dass es etwas höher oben im Ebenenfenster gibt , das Block darin ist. Nun, es gibt ein paar Möglichkeiten, damit umzugehen. Ross, Wir brauchen diese Gruppe überhaupt nicht, also können wir hier einfach löschen. Aber ich möchte dir nur eine andere Art zeigen, mit Luft umzugehen. Also, wenn ich diese Gruppe behalten wollte, wenn ich sie ausgewählt halte. Und hier unten im Eigenschaftenfenster sehen Sie, dass diese Option niedrigere Ebenen berührbar macht. Wenn ich das auswähle, wird das, was effektiv ist, meinem Cursor sagen, dass er diese Gruppe, diesen Container und alle darin enthaltenen Objekte ignorieren soll. Also werde ich effektiv in der Lage sein, durch sie zu klicken und zu meinem Fotostream zu gelangen. Also, wenn wir nur Vorschau, dass wieder, richtig, so dass Sie jetzt sehen können, ich kann Anschein von Scroll, Ich kann meinen Fotostream scrollen. Nicht genau warum man, aber wenigstens komme ich dazu. Und hier können Sie das über Scroll-Untätigkeit sehen. Okay, wir werden diese Gruppe wirklich löschen, wenn wir sie nicht brauchen. Es war etwas, das von der verdickenden Ripple kam. Ok, und wir werden unsere Aufmerksamkeit zurück auf den Fotostream scrollenden Container. Die Art und Weise, wie Sie es tatsächlich scrollen, ist, dass Sie einen scrollbaren Bereich definieren müssen. Das ist also der sichtbare Bereich. Also für uns, Alveolarbereiche gehen diese Art von Bereich der Handy-Bildschirme sein. Es beginnt also knapp unter dem Schlagwort, aber wir wollen, dass es hier knapp über der Tab-Leiste endet. Die Art und Weise, wie wir das tun, ist, dass wir nur die Größe des Begrenzungsrahmens des Scroll-Containers selbst ändern müssen . Wir können hier einfach von unten ziehen und es ungefähr in ihre Position bringen. Die eine. Das sieht also gut aus. Also lassen Sie uns eine Vorschau darauf. Okay, jetzt können Sie sehen, dass ich tatsächlich den ganzen Weg nach unten scrollen kann. Aber jeder, wenn ich scrollen, wie es unter den Kategorien geht, die ich wollte, ging ich effektiv verschwinden, wenn es unter den Katzen-Skripten geht. Also, wie machen wir das? Also, was wir tun werden, ist, dass wir sicherstellen, dass unsere Fotostream Scroll-Container wieder ausgewählt. Und wir gehen zurück zum Eigenschaftenbedienfeld. Und wir werden diese Option namens Clips Sublayer auswählen. So Clips up Schichten effektiv ist, wiegen wir die Art und Weise, wie wir Prozess Pi maskieren. Und Sie können sofort sehen, dass es die, die, der Inhalt des Scrolls zu meinem Scroll-Begrenzungsrahmen abgeschnitten ist. Wenn wir nun eine Vorschau darauf sehen, können wir sehen, dass wir effektiv innerhalb dieses Fensters abgeschnitten sind. Klingt gut. Aber jetzt mag ich nicht wirklich, wie es ist, es kommt irgendwie auf den Bildschirm. Ich wollte irgendwie die Bilder unter der Tab-Leiste sein. Ich will nur nicht, dass sie unter den Kategorien verschwinden. Also werde ich das wieder nach unten verlängern. Okay? Und wir werden das noch einmal in der Vorschau sehen. Okay, das sieht schöner aus, aber jetzt kann ich nicht weiter scrollen. Und das liegt daran, dass die Bildlaufansicht nur bis zur maximalen Tiefe des Inhalts scrollt, der sich darin befindet. Und die letzten Objekte, die ich in meiner Scroll-Zustimmung habe, oder sind diese beiden Bilder? Also muss ich einen kleinen Hack machen, um es zu zwingen, ein wenig weiter zu scrollen. Also werden wir ein Rechteck erstellen. Und wir nennen diesen Scroll-Hack. Und wir werden das in den Fotostream ziehen. Ich werde einfach da unten sitzen. Und ich muss das positionieren. Also nur für die Lambdas und einfach um den Sublattice zu entklicken, damit ich sehen kann, was ich tue. Und ich werde nur nach unten üben. Okay, also sehen Sie sich das nur an. Also müssen wir herausfinden, wie weit die Entfernung ist. Also haben wir, wie Tab-Leiste, die 52. Also lasst es uns schaffen . Okay. Jetzt können wir einen Fall sehen, der gut aussieht. Das sind fast immer Wege. Aber ich will diese graue Schachtel nicht sehen. Also gehe ich einfach zurück zu dieser grauen Box und ich werde die Sichtbarkeit drehen , um die Deckkraft auf 0 zu füllen. Also können wir es nicht sehen. Okay, lassen Sie uns das ein letztes Mal ansehen. Ok, jetzt habe ich die richtige Scroll-Position bekommen und alles sieht gut aus. Süß. Wir haben jetzt einen schönen Bildlauf Fotostream. Scrolling-Ansichten sind das Arbeitspferd-Patent für mobile. Und wie Sie in pro upaya sehen können, ist es wirklich einfach, sie zu erstellen. Das war's also für dieses Video. Kommen Sie zu mir im nächsten Video, wo wir den Paging-Container erkunden und wir werden eine Seitenansicht erstellen. Wir sehen uns dann. 14. Paging zwischen Detailansicht: Hallo, da. In diesem Video werden wir einige Paging-Funktionen in unseren Prototyp auf dem Home-Bildschirm einbauen . Also haben wir diese Kategorie Scrollen Tab über den oberen. So werden wir es Benutzern ermöglichen, zwischen d heutigen Bildschirm und dem aktuellen Bildschirm Seite zu ermöglichen. Okay, dafür brauchen wir ein bisschen mehr Inhalt. Also habe ich eine andere Seite in der Figurdatei vorbereitet. Also haben wir diese aktuelle Startseite Seite, die ziemlich das gleiche Design ist, hat gerade so extra verschiedene Inhalte, so dass wir diese Funktion erstellen können. Da wir also den Rest der Grafik nicht brauchen, brauchen wir diesen Fotostream wirklich. Was ich dazu neige, ist nur eine neue Szene in meiner Py-Datei zu erstellen. Und ich werde diesen Impuls nennen. Und das ist nur ein Ort, wo ich coole Grafiken bin, die ich dann extrahieren kann die verschiedenen Stücke, die ich brauche. Okay, also gehen wir zu Import Fichman. Lassen Sie sich das einfach verbinden und wir werden unser neues Design zu Hause holen. Ok, also alles, was wir wirklich brauchen, ist diese wichtige Datei die Foto-Stream-Gruppen. Also werden wir nur diesen Befehl C auf dem Mac oder Control C oder Windows kopieren. Und wir wechseln zurück zu unserer Homeszene. Und wir werden das einfach einfügen. Und ich werde das vorerst lassen, wird das da lassen. Und ich werde diese Seite zwei nennen. Und ich muss dies effektiv das gleiche wie unser Fotostream in viel Elaine Page eins machen . Es ist ein scrollbarer Container und all das. Also lasst uns das jetzt einfach machen. Also überprüfen wir einfach, wie Seite 1716, also kann es das 716 hoch machen. Und wir werden auch eine kleine Polstergrafik brauchen. Also werde ich das einfach kopieren und das in hier einfügen. Das Gleiche. Ok, also müssen wir das in eine Scrollgruppe verwandeln. Scrollen Sie also nach unten zu unserem Paging und wählen Sie Scrollen. Und wir werden die Standardwerte hier festlegen. Also sollten wir jetzt effektiv eine doppelte Scroll-Seite haben. Also müssen wir diese beiden auf die rechte Seite versetzen , damit wir nicht bezahlen, dass sie sich rechte Seite fühlte. Wir wollen, dass es nur an der Grenze unseres Bildschirms steht. So wissen wir, dass unser iPhone 375 breit ist. Also werden wir nur mit Seite zwei ändern ausgewählt. Wir werden nur die x-Position 2375 ändern. Okay, also haben wir unsere Seiten. Also, was wir jetzt tun müssen, ist, dass wir, in der Tat, es würde, um diese Seite oben neu zu ordnen. Und wir wählen beide aus und machen eine andere Gruppe. So Befehl und Steuerung, G, Mac und PC. Wir haben jetzt Gruppen sind zwei Seiten in diesem anderen Container. Und weil wir Gruppen haben die Seiten, dass Container genau die gleiche Größe wie die beiden Gruppen Container, die zwei Gruppen Seiten. Also werden wir diesen Fotostream nehmen und wir werden das in einen Malbehälter verwandeln. Also gehen wir auf die gleiche Scroll-Seite und aber dieses Mal wählen wir Paging. Und Paging-Container standardmäßig horizontal, da Seite beabsichtigt, horizontale Woche zu sein, können Sie auch vertikale Paging verwenden. Und ähnlich wie die Art und Weise, wie Scroll-Container funktionieren, ist es die Seite wird durch den Begrenzungsrahmen definiert. Also müssen wir diesen Begrenzungsrahmen reduzieren, so dass es nur die Größe der einseitigen Auscheckseitenbreite ist. Wir können sehen, dass es für 343 ist. Also wollen wir nur unseren Foto-Stream-Paging-Container die gleichen drei für drei machen. Okay, Sie können jetzt sehen, dass die gleiche Grenze geerbt hat. Okay, Zeit für diese Treffervorschau beigefügt. Und es gibt Probe-Paging. So können Sie sehen, dass es Paging ist, es hat jährlichen Widerstand, den Sie mit Paging bekommen. Aber Sie können sehen, dass es nicht in genau der richtigen Position Paging ist, da wir immer noch den Rand unserer FirstPage sehen können. Und der Grund dafür, wir haben diese Rinne zwischen den beiden Seiten, aber wir verwenden die Paging-Containerbreite, um zu definieren, wie weit, wie nächste Bildschirmseiten. Wenn wir also nur einen kurzen Blick nach unten auf Scroll-Paging-Optionen haben, heißt es Seite für Container. Und unser Container ist 343. Es geht also um drei für drei, aber wir müssen das Benzin berücksichtigen. Also, was wir tun werden, ist, dass wir unseren Foto-Stream-Paging-Container auswählen. Und es gibt diese Optionsseite, auf der wir die zweite Option wählen, die benutzerdefinierte ist. So können wir tatsächlich eine benutzerdefinierte Breite definieren. Und ich weiß, dass dieser Brauch mit diesen sp3 zu berücksichtigen, die GSA. Also werde ich 360 eingeben, da rein und wir werden den Test ausgeben. Okay, jetzt können wir sehen, wenn wir alle Seiten in die richtige Position blättern. Ok, cool. Das ist also der erste Job, der erledigt wurde. Das zweite, was wir tun wollen, ist, dass wir in der Lage sein, auf diese Kategorie-Tasten zu tippen und zwischen den beiden zu wechseln. Also wollen wir in der Lage sein, effektiv, was ich diesen Reset-Button ein Tippen auf die Schaltfläche in dem Moment, den Sie keine dieser Arbeit sehen können. Und wir wollen auch machen, dass dieses Scrollen halb scrollbar ist. Also lasst uns das jetzt machen. Also zuerst werden wir die Kategoriengruppe aufschneiden. Und wir müssen das in eine scrollende Eindämmung verwandeln. Aber dieses Mal wollen wir, dass die Scroll-Richtung horizontal ist. Wie zuvor müssen wir die Breite des Begrenzungsrahmens ändern. So werden wir die Breite reduzieren 2343 Website entspricht der gleichen Breite wie unsere Inhalte. Und wenn wir das schnell testen, können wir sehen, dass wir jetzt scrollable Tab genannt haben. Ok? Also, wenn wir das öffnen, wollen wir den Grund finden, warum die letzten Butters und das ist, es gibt einen Container für Rennen. Und was wir tun wollen, ist, dass wir diesen zweiten Ball machen wollen. Wir werden also einen SAP-Trigger hinzufügen, also stellen Sie sicher, dass er hier im letzten Panel ausgewählt ist und Angriffsauslöser hinzufügen. Und wenn wir kürzlich ausgewählt haben, werden wir eine Farbreaktion hinzufügen. So erlauben Farbreaktionen, wie Sie vielleicht vermuten, uns, die Farbe der Dinge zu ändern. Farbantworten funktionieren nur bei nativen Profilobjekten. Sie können also kein PNG oder einfach nur ein SVG einbringen und die Farbe ändern. Sie müssen einige zusätzliche Schritte machen und einige von denen, bei denen das Anwenden einer Farbe zwei und einen Subcontainer bildet. Also, das ist alles irgendwie bereit zu gehen. Und wir werden das nur zu einer bestimmten Farbe machen. Also greifen wir die Referenz, die 00064 ist, und wir müssen sicherstellen, dass Phil 100 ist, sonst funktioniert hier. Ok? Also lassen Sie uns das schnell testen. Tos i. Wenn wir darauf getippt haben, können wir sehen, dass die Pillenform die Farbe geändert hat, aber wir können den Text nicht sehen. Wenn wir also unseren Container öffnen, können wir sehen, dass wir den Text haben und es ist dieses spezielle grafische Textobjekte. Also können wir derzeit nicht bewirken, dass die Hex-Farbe ist, weil es sich um diese grafischen Objekte handelt. Also müssen wir in Text umwandeln. Also lassen Sie uns das tun, indem Sie auf diese Schaltfläche hier tippen. Und Sie können jetzt sehen, dass das Symbol geändert wird und es ist jetzt echter Text. Wenn Sie das ausgewählt haben, werden wir eine weitere Farbreaktion hinzufügen. Und dieses Mal werden wir den Text in Weiß ändern, um sicherzustellen, dass Phil auf 100 gesetzt ist. Lassen Sie uns diesen Code testen, damit wir jetzt sehen können, dass wir Outs haben, hap, Zustand, vervollständigt es, aber wenn das, was passiert ist, ist kostenlos, also Owl heute noch ausgewählt. Wir wollen das Unselektierte als nächstes machen. Also, was wir wirklich einfach machen werden, Wir konnten nicht, Sie können ganze Teile von Interaktionen innerhalb des Trigger-Panels kopieren. Also wird es diesen Hut-Trigger auswählen. Und wir werden das nur kopieren. Und wir werden es einfügen. Also haben wir komplett dupliziert. Der Tap Trigger und der gesamte Inhalt. Und als eine andere Möglichkeit, lassen Sie mich das einfach löschen. Wir können Befehl D nicht auswählen und tun, um hier auch zu duplizieren. Okay, also wird dieser Tap Trigger für unsere zweitägige Taste sein. Also werden wir das Ziel auf heute ändern. Also, das ist nur geben Sie Suchbegriffe heute. Und wir können sehen, wir haben zwei Möglichkeiten, die wir heute bekommen, das ist der Container und heute sollten wir angreifen. Also werden wir den Container wählen. Und wir werden den Container für heute bis heute ändern. Und wir werden die kürzliche Klage ändern. Also für die letzten brauchen wir zwei. Entschuldigung für heute wurde heute geändert. Zunächst einmal die Textobjekte. Und wir werden einfach, wie wir es vorher getan haben, die Grafik in Text ändern. Kämpfe sind eine Antwort und wir werden die weißen 100 machen. Okay, also haben wir beide Tabs effektiv dupliziert. Wir haben unsere beiden Registerkarten erstellt. Also, wenn ich tippe auf, Reset wird sich ändern und wenn ich auf heute tippe, wird sich ändern. Aber wie wir sehen können, dass beide ausgewählt, so müssen wir den Zustand des anderen ändern. Also, wenn vor kurzem ausgewählt, Heute ändert sich, ändert die Farbe. Also, wie sollen wir das machen? Wir werden nur verschieben, wählen Sie diese beiden Farbantworten und wir haben eine Kopie diese. Und wir werden direkt hineinkleben. Und wir werden die Ziele einfach auf die anderen Tasten ändern . Also, hier ändern wir kürzlich in Blau und Weiß und jetzt werden wir uns heute ändern. Also werden wir heute finden, wählen Sie den Container aus und wir werden den in Weiß ändern. Und wir werden die nächste Farbreaktion auswählen. Wir werden heute suchen. Der Text. Und wir müssen das in diese Blüte ändern. Also dieser Mist dieser Hexadezimalwert. Und wir werden das hier S Gewissheiten auf Befehl D anwenden , um diese beiden in unserem zweiten Knopf zu duplizieren. Und wir werden dasselbe tun, denn wir werden diese umkehren, und wir wollen kürzlich, was weiß sein muss. Und lassen Sie mich eine neue, die Textobjekte. Und wir wollen das in unser Blau ändern. Okay, also geben Sie den Test. So haben wir heute angefangen, wir können über die letzten tippen, jetzt, vor kurzem ausgewählt, und heute ist nicht ausgewählt, weil wir die Farbeigenschaften geändert haben. Und das können wir auch, weil wir beide Taktik geschaffen haben, wie wir heute angreifen können. Und wieder, die letzte ist nicht ausgewählt. Okay, das bringt uns zum Ende dieses Videos. Also haben wir diese beiden Tap-Trigger erstellt. Wir haben die Möglichkeit geschaffen, zu blättern, und im nächsten Video werden wir diese beiden Dinge haken. Also, wenn Sie hier Seite, werden Sie ausgewählt Registerkarte ändern. Und ähnlich, wenn Sie den Hub hier auswählen, wird Ihre Seite auch verschoben. So sehen wir uns im nächsten Video. 15. Erstellen von scrolling mit Kette: In diesem Video werden wir die Scroll-Tabs mit einem Trigger namens Kette verbinden . Wenn wir also von einem Ort zum anderen streichen, soll der ausgewählte Tab verschoben werden. Hier gibt es ein wenig Komplexität. Wie wir sehen können, haben diese Etiketten verschiedene Lampen und Farben. Also müssen wir nicht nur übergehen, ihre Lemma ändern, wir müssen auch die Änderung der Etikettenfarbe handhaben. Also das erste, was ich auch tun werde, nur um es ein wenig dramatischer zu machen, werde ich nur einige der Kategorien hier neu ordnen. Also das erste, was ich tun werde, und das kann, um die Reihenfolge im Ebenen-Panel zu bekommen. Die richtige Reihenfolge. Ich mag meine Ebene, um hierarchisch zu reflektieren. Da heute das erste Element in der Liste ist, möchte ich, dass das ganz oben steht. Also lassen Sie uns die einfach bewegen. Also haben wir heute, ich will eigentlich als nächstes empfehlen , nur weil es ein etwas längeres Wort ist und es ein bisschen dramatischer machen wird. Funktionalität, die wir hier hinzufügen werden. Als nächstes wird es neu sein. Und dann können wir den Rest so lassen, wie sie sind. So süß, herzhaft und Huhn. Und ich will die Suche ganz unten. Ich will, dass das darunter ist. Nur aus einem bestimmten Grund, warum das so sein muss. Okay, also hat das zu den ersten Teilen und dem nächsten Teil müssen wir nur visuell ändern empfohlenen kürzlich herum. Also werde ich diese nur grob neu positionieren. Und ich kann all diese auswählen. Und hier drüben kann ich sie einfach gleichmäßig verteilen. Okay, das ist gut. Okay, also zuerst, wir brauchen noch einen beweglichen Tab. Wir wollen, dass sie die Bewegung der Pille zu max, um die Bewegung des Paging-Containers, wie wir es auch streichen wollen. Also, das erste, was wir tun werden, sind wir nur gekommen, um die Möglichkeit zu geben, Tabs zu wechseln, wenn wir, wenn wir sie mit angezapft auswählen, richtig? Okay, das erste, was wir tun werden, ist, dass wir ein Formrechteck erstellen. Und das wird unsere Pille sein. Also müssen wir irgendwie eine grafische Pille erstellen. Also machen wir dies die gleiche Größe wie unsere, als unsere grafische Pille, die wir bereits hier haben, diesen Container. Also werden wir nur 7727 machen. Wir werden den Radius auf 14 ändern. Und wir werden die Farbe 00, 0-6 oder d ändern , und wir werden diese Hilfe nennen. Und wir werden das nur unter die ersten beiden Registerkarten verschieben. Und wir wollen sicherstellen, dass es seine Position in genau der gleichen Position wie heute beginnt , nämlich 390390. Okay, das ist cool. Okay, das nächste, was wir tun müssen, ist, dass wir die Felder auf diesen beiden Containern selbst entfernen müssen . Also müssen wir nur Today lassen wir die Füllung senden, nicht die Deckkraft der gefüllten Antwort 0. Und wir werden ändern, empfehlen, es wird auch auf 0 ausfüllen. Ok? Das nächste, was wir tun wollen, ist, dass wir duplizieren wollen. Tippen Sie auf Behälter, sagen Sie Ware. Und wir werden sie unter die Pillengrafik bringen. Und wir werden das heute nennen. Und empfahl schwanger heute. Aber ich werde tippen, um Treffer auszuwählen. Es bedeutet, dass es Hex weiß ist, also müssen beide diese Texte sein, warum es der erste ist, was willst du? Dafür? Wir müssen nur die empfohlene ausgewählte Farbe ändern, weiß. Und wir können hier tatsächlich sehen, dass empfohlen noch kein text-natives Textobjekt ist. Also müssen wir zuerst diesen Text konvertieren. Das entsperrt dann, wie diese ETC, Farbe zu ändern, die wir ändern können, um zu warten. Ok. Ich gehe einfach zurück zu unseren zwei Behältern unter der Pille. Diese beiden müssen also das Blau sein. Also neben uns heute, lass uns das 00064 machen. Und das können wir einfach kopieren. Und für empfohlen, wieder, müssen wir dies in Text konvertieren. Und das hat schon die Kurbelfarbe, also ist das gut. Okay, alles sieht ein bisschen seltsam aus und wir müssen nur noch eine Sache tun , um das auf magische Weise zu verändern. Also werden wir die Pille auswählen und wir werden diese Option nach unten auf dem Eigenschaftenbedienfeld am unteren Rand wählen , gibt es ein Hindernis verwendet Masse, also gehen wir, um das auszuwählen. Okay, Sie können jetzt sehen, dass die beiden Objekte, die zwei Container über der Pille, Massen-CCS-basierten kleinen Pfeil waren. Also und die beiden darunter alles darunter ist keine Masse. Also, wenn ich nur die Pillen-Grafik schnappe und ich sie einfach bewegen, können Sie sehen, dass ich es magisch von blau zu weiß wechseln. Okay, das ist also die Farbänderung sortiert. Als nächstes müssen wir die Registerkarten mit dem Paging-Container verbinden. Dafür werden wir eine leistungsstarke Trigger-Call-Kette verwenden. Kette ermöglicht es uns, Cannes jede Eigenschaft Wertebereich zu jedem anderen Proxy-Wert richtig? Hier werden wir den Scrollbereich des Paging-Containers verwenden, um die Pille zu verschieben. Aber jetzt nur noch die Säule bewegen. Denken Sie daran, dass das zweite Etikett viel länger ist als das erste. Also werden wir ändern und die Lemma transformieren. Okay, also wählen wir die Foto-Zeichenfolge aus. Ich füge einen Kettenauslöser hinzu. Und wir werden den Ursprung der beiden Wasserhähne nur auf Top-Center Website passt aus Hill. Könnten Sie den richtigen Wert ablesen? Weil wir effektiv gehen, um von dieser heutigen Pille zu der empfohlenen Pille zu verwandeln . Okay, lassen Sie uns die Pille und wir werden eine Antwort auf die Kette hinzufügen. Wenn man sich die Kette anschaut, wird man sehen, dass sie aus sechs Kisten besteht. Und sicherlich für die Stimmungsreaktion. Die anderen Antworten wären also unterschiedlich, so dass die ersten beiden Boxen der Bewegungsbereich sind. Da wir also zum Paging-Container wechseln, beträgt der Abstand von einer Seite zur anderen 360. Also gehen wir von 0 auf 360. Das ist also unser Ausgangswert. Das ist also der Wert unserer, unserer gescrollt unsere Foci Distributor. Sie können hier oben sehen, wir haben diese Mapping-Infografik, die sich direkt auf die beiden Sätze von Boxen bezieht. Okay, also überprüfen Sie einfach die Werte der heutigen Pillen. Also, wenn wir nach der Position suchen, die zentrale Position. So gibt es uns eine Axt von 77,5 für den Stern. Also entfernen wir die Taten. Wir können diese weißen Kästchen ignorieren. Also werden wir hier 77,5 hinzufügen. Und dann müssen wir jetzt die empfohlene Box x Koordinate überprüfen, die 204 ist. Wenn wir diesen Wert hier reinpumpen. Okay, das ist also Test das. Ok? So können wir jetzt sehen, wie wir unseren Inhalt altern, aber wie Sie sehen können, müssen wir immer noch mit der Länge der Pille umgehen. Heute. Word ist viel kürzer als die empfohlene Arbeit. Okay, also gehen wir zurück zu unserem Kettenauslöser. Und wir werden eine skalare Antwort hinzufügen. Und wir stellen sicher, dass wir die Kissenschicht als Ziel festlegen. Und wieder werden wir einen Bereich von 0 bis 360 benötigen. Also verwenden wir den gleichen Bewegungsbereich oder den Fotostream, um die Größe der Pille zu ändern. So gut beginnende Skala. Also schauen wir uns heute an. Die Breite ist also 77 hier. Und die empfohlene Pille, die 126 ist. Ok, lassen Sie uns das testen. So wie wir mich Seite bewegen, können wir jetzt sehen, dass nicht nur unsere bergauf bewegt, sondern es skaliert auf die richtige Größe. So kann ich die empfohlene Registerkarte einkapseln und dann abkühlen. So haben wir jetzt erfolgreich unsere Seite und Tabs miteinander verbunden und erstellen eine coole Animation zwischen dem Band. Wenn wir zurückgehen, um in Tabs zu tippen, können wir sehen, dass die Dinge ein wenig kaputt sind. Und das liegt daran, dass wir den Tab-Übergang geändert haben. Im nächsten Video werden wir das beheben, um Sie dort zu sehen. 16. Tabs auswählen, um zwischen Seiten zu gehen: Hallo, da. In diesem Video werden wir unser Scrollen und Paging vervollständigen , indem wir unsere Tabs verbinden, um die Seiten zu verschieben. Niemand wird Benutzer in der Lage sein, den Bildschirm zu streichen, aber sie werden auch die Möglichkeit haben, auf die Tabs zu tippen. Okay, das erste, was wir tun werden, ist, dass wir unseren ersten Tab auswählen und das ändern, um empfohlen. Als nächstes werden wir alle Farbreaktionen entfernen. Wir brauchen diese nicht mehr, weil wir jetzt unsere neue Hill-Animation erstellt haben. Und wir wählen die Pille aus. Und wir werden eine Antwort auf die Bewegung hinzufügen. Ok, also setzen Sie das x auf 204. Und lassen Sie uns nun eine Narbenreaktion hinzufügen, so dass wir die Pille skalieren können und sich bewegen. Und wir werden die Breite hier einstellen, 2146. Okay, das ist cool. Das funktioniert wie erwartet. Okay, also gehen wir zu unserem nächsten Tab. Und wir werden den nächsten Hop-Trigger auswählen. Und wir werden diese Ziele ändern, wer heute. Und wieder wie zuvor werden wir alle Farbreaktionen entfernen. Ok? Weil unsere Animation, wir so ziemlich das gleiche wie die erste. Wir können diese Mover-Skala einfach kopieren. So funktioniert Befehl C oder Steuerung C oder Windows. Und wenn wir Tab auswählen, können wir es einfügen. Und das geht in Bewegung und wir wollen die Werte ändern. Wir wollen auch die Umstellung auf 77,5 Ampere ändern. Ok, lassen Sie uns das testen. Co.A. Also haben wir jetzt das Motion Design dupliziert, whens passiert auf unseren Tabs. Also, jetzt müssen wir verbinden, wie Tabs mit dem Scrollverhalten. Okay, also gehen wir mit meinem ersten Tab, und ich werde hier unten eine Scroll-Antwort hinzufügen. Und wir müssen sicherstellen, dass wir den Fotostream als Ziel wählen. Weil es das ist, was wir scrollen werden. Und wir werden zu drei Sechstel scrollen. Okay, also lassen Sie uns diesen Scroll kopieren und ihn in unsere Sekunden HAP einfügen. Und dieses Mal werden wir den Scroll-Wert auf 0 ändern. Ok, da, sehen Sie, ob das funktioniert. So wie empfohlen, meine Scrollansicht blättert ihn jetzt zurück. Und wenn ich es verschieben, indem ich tatsächlich agile Inhalte paging, haben wir auch unsere vorherige Animation. Ehrfürchtig. Wir haben verbunden, wie Registerkarten abgeschlossen. Ich will nur ein bisschen Hauswirtschaft machen. Also lassen Sie uns einige unserer Trigger umbenennen, so dass es ein bisschen einfacher ist zu identifizieren, was für ein Gesetz. Und so werden wir auf die erste Registerkarte doppelklicken und umbenennen, dass tippen Sie empfohlen. Wir können heute die zweite Registerkarte anrufen. Und schließlich werden wir diese Kette auf Seite für die SRI umbenennen. Ich glaube, wir sind fertig. Dieser Abschnitt wird also viel behandelt und ich hoffe, Sie bekommen ein echtes Gefühl dafür, wie die Sonde funktioniert ein bisschen komfortabler mit dem Konzeptmodell ist. Es ist wirklich ein bisschen so, als wäre das Bauen von Lego ein M. Vielleicht macht es deshalb so viel Spaß. Wenn Sie mehr üben möchten, versuchen Sie, eine dritte Seite zu erstellen und eine andere Registerkarte zu aktivieren. Das wird interessiert sein, weil Sie herausfinden müssen, wie Scroll-Bots haben, so dass die aktive Registerkarte auf dem Bildschirm ist. Das bringt uns also zum Ende dieses Abschnitts. Ich hoffe, es gefällt Ihnen so weit. Machen Sie eine Pause, trinken Sie eine Tasse Tee und kommen Sie mit mir in den nächsten Abschnitt, wo wir lernen, wie Sie eine Arbeit in der Tab-Leiste erstellen , mit der Sie zwischen den Szenen navigieren können. Wir sehen uns dort. 17. Aufbau der Tabakbar – das Setup: Hallo da. Und in diesem Video werden wir unsere Tab-Leiste so einrichten unsere Abflachungen glücklich sind, dass wir hier unten auf dem Bildschirm haben. Wir haben also neue Grafiken, neue Streams, die wir importieren werden. Erstens, bevor wir etwas Wichtiges tun, werden wir unsere Tab-Leiste hier auf dem Startbildschirm einrichten. Und wenn Tab-Leiste, werden Sie sehen, dass wir diesen schwebenden Hahn haben, unsere Gruppe, und wir haben zu zwei Untergruppen. Einer genannt ausgewählt, und wir nennen es nicht ausgewählt. Und hier drin haben wir die Staaten unserer vollständigen Tab-Artikel. Okay, das erste, was ich tun werde, ist, dass ich die einfach neu organisieren werde. Also haben die Häuser eine Tata effektiv genannt, wir kehren die Reihenfolge dieser um ein bisschen einfacher zu machen. Und wir werden das auch für unselektierte tun. Das ist nur etwas, was ich gerne mache. Ich möchte, dass das ganz linke Element in meinem Design das oberste Element ist, meine Ebenen in meinem Lineage-Panel. Okay, cool. Also sind wir bereits auf dem Home-Bildschirm, also möchten wir zuerst unser Home-Tab Element selektiv machen. Alles, was wir tun müssen, ist, wenn wir gehen und eine Gruppe auswählen und wir verschieben, wählen Sie die anderen drei. Und wir werden nur die Deckkraft auf 0 reduzieren. Das wird also unseren unselektierten Zustand enthüllen , der schön darunter sitzt. So ist das Dunkelblau ein selektives Patent. Sind die nicht ausgewählt? Okay, also gehen wir nach C und wir werden drei weitere Szenen erstellen. Und wir werden diese Favoriten, Updates und Profil nennen diese Favoriten, . Und das hat gerade den Impuls bewegt, den man demütig gesehen hat. Okay, cool. Lassen Sie uns also unsere Grafiken verwenden. Also, wenn wir zu Impuls Sigma gehen, Sigma für die Dauer dieses Tutorials, und ich werde meine wählen, so stellen Sie sicher, dass Sie Ihre Datei im Hintergrund geöffnet haben, ob mit SketchUp. Und ich werde wählen Lieblingskuchen ist als mein erster Import. Lassen Sie alle, dies sind die Standardwerte. Lassen Sie uns dasselbe für die anderen beiden Bildschirme tun. Und schließlich, Profil. Großartig. Okay, also gehen wir zurück nach Hause. Und was wir jetzt tun werden, ist, dass wir sie alle miteinander verbinden. Okay, also wählen wir unsere Herzen unselektiert aus. Und wir werden einen Tap Trigger hinzufügen. Und wir werden eine gemeinsame Antwort hinzufügen. Und wir werden unsere Lieblingsszene auswählen. Okay, und lassen Sie uns wiederholen, dass für die anderen beiden Registerkarten, so dass wir schlagen Balance, so dass Ted bei einem Tippen Trigger Chart Antwort auf Updates gesprungen. Und dann wählen Sie unseren Benutzer nicht ausgewählt. Tippen Sie auf Antwort. Tut mir leid, tippen Sie auf Trigger , John Befragten, und wählen Sie unser Profil gesehen. Okay, also lassen Sie uns eine Vorschau anzeigen und das testen. Sie können sehen, dass nichts funktioniert, also geht hier etwas vor sich. Also lasst uns versuchen herauszufinden und was ist, was passiert. Wenn wir also zu unserer Gruppe zurückkehren, können wir hier sehen, dass die ausgewählte Gruppe tatsächlich oberhalb der nicht ausgewählten Gruppe sitzt und die gleiche Menge an Platz belegt wird , die effektiv die nicht ausgewählte Gruppe überlagert, weil dies Diese ausgewählte Gruppe hat eine Deckkraft von 100, obwohl sie eine Füllung von 0 hat, ist sie effektiv tippbar, was bedeutet, dass sie den Zugriff blockiert, um sie darunter aufzuheben. Glücklicherweise gibt es eine sehr einfache Möglichkeit, die nicht ausgewählten Gruppenelemente zu aktivieren. Also mit der ausgewählten Gruppe, ausgewählt, werden wir nach unten scrollen, das Proxy-Panel und wir werden dies wählen, machen niedrigere Ebenen berührbar. Wir werden das Kästchen ankreuzen. Und was das tun wird, wird diese Gruppe effektiv ignorieren und uns erlauben, die Lichter darunter anzuzapfen. Das ist also unser Test. Jetzt können Sie sehen, dass ich zu meinem, meinem Auslöser komme und alles funktioniert wie geplant. Also müssen wir natürlich unseren Hahn auf den Alkohol anwenden hat b2 auf den anderen scheint. Ok. Bevor wir das tun, werden wir nur unseren Namen nennen, unseren Namen, unseren Namen, unsere Auslöser. Also werden wir S tippen Favoriten genannt werden. Das hier wird Tap Updates sein. Freundlichkeit war nicht Profil angezapft werden. Und dann werden wir nur verschieben, wählen Sie alle drei von ihnen und wir werden nur Befehl G, Kontrolle G unter Windows, um diese zusammen zu gruppieren. Und wir rufen diese Tab-Leiste an. Also werde ich jetzt tun, ist, dass wir Outs anwenden, BR auf alle anderen haben, die anderen drei gleich. Also, das ist wählen Sie Abflusssünden haben br im Ebenenbedienfeld. Und wir werden nur eine Kopie machen. Und wir wechseln zu unserer Lieblingsszene. Und anstatt nur diese vorhandenen Platzierungen zu geben, anstatt sie einfach einzufügen, werden wir dies verwenden. Interaktionsteile. Und was das tun wird, ist nur unsere Grafiken einfügen, aber auch unsere Auslöser und Antworten. Sie sind also Snack an diesem Gericht, damit Sie die Abladungen sehen können, die die Tab-Leiste hier ist. Ich bin auch alle unsere wahren, weil die Antworten auch hier sind. Aber Sie werden feststellen, dass es einen orangefarbenen Gegenstand gibt. Also, wenn Sie jemals über eine kommen, Hier ist orange in pro Pi im Trigger-Panel. Es bedeutet, dass es ein bisschen Informationen fehlt, wird nicht funktionieren. Du musst etwas tun. Und in diesem Fall, es ist die gemeinsame Antwort eingestellt, um zu Favoriten springen waren offensichtlich auf der Lieblingsszene. Also können wir nicht, wir können nicht zu den Siemer Almosen springen und deshalb ist es kaputt, weil es die Szene nicht zeigt. Wir sind auf Auktionen in der Dropdown-Liste. Aber das ist in Ordnung, weil wir das ohnehin zu Hause ändern wollen. Also werden wir dies umbenennen, um auf Startseite zu tippen. Und wir werden nach Hause wählen, nicht ausgewählt. Und wir werden ein gemeinsames Antwort-Omega festlegen und ich setze das auf Code springen. Updates kommen Profil sollte in Ordnung sein. Okay, also springe einfach zurück nach Hause. Und wir werden diesen Test bekommen, um sicherzustellen, dass dies nicht richtig funktioniert. Also fangen wir an, wie wir Favoriten auswählen. Wir gehen hierher und wir können sehen, dass wir vergessen haben, diesen Cisco zu ändern und das jetzt zu tun. Also wird es die Plätze Hut-Bar öffnen und wir werden die Kapazität des Home Selected Item reduzieren. Und wir werden die Kapazität des herzen ausgewählten Artikels erhöhen , weil wir jetzt in dieser Szene sind. Und so können Sie jetzt sehen, dass das richtig aussieht. Das ist also noch einmal Testknopf. Geh zurück zu Home. Vorschau. Wenn wir nach Hause laufen, schlagen wir Favoriten. Wir haben jetzt Favoriten ausgewählt und können jetzt wieder nach Hause gehen. Okay, das ist also effektiv arbeiten, richtig? Also müssen wir das nur auf die andere anwenden. Wenn du das Video pausieren willst und das selbst machen willst, tu das bitte jetzt. Und ich werde dich in einer Minute einholen. Okay, wenn Sie also das Video pausieren, hoffe ich, dass alles dann gut für Sie ist. Lassen Sie mich einfach mit Ihnen durch ein Update in meiner Datei aufholen, um diese zu entsprechen. Also gehe ich einfach zu meiner Lieblingsszene. Und ich werde meine Tab-Leisten-Updates kopieren. Ich werde diese Registerkarte Leiste Patienten Interaktionsstücke entfernen. Es gibt tatsächlich eine Verknüpfung Befehl Shift B, die Sie verwenden können. Art einer Änderung aktualisiert auf Favoriten und schlief die Favoriten nicht ausgewähltes Muster ausgewählt. Und wir werden zu Favoriten springen. Und dann muss ich meine wechseln, mein Zustand so HA, wird 0 und wir wollen nur auf diese 1000. Sieht gut aus. Okay, das ist also das. Tu das bis zur letzten Szene. In der Tat, lassen Sie mich einfach diese Tab-Leiste noch einmal kopieren. Sie müssen nicht so in einer Tab-Leiste halten, wie ich das tue, aber Sie können immer noch den ersten verwenden, solange alle Ihre Tabs der Struktur entsprechen, die in Ordnung sein sollte. Aber deswegen mache ich das. Nur irgendwie entlasten Dank-System präsentiert, wie Paso kommerzielle FV. Und ich werde nur das Profil ändern, wie wählt. Ich wähle Updates aus. Val ist jetzt ausgeglichen ausgewählt, wählen Sie Aktualisierungen aus. Und dann müssen wir endlich nur die Macht ausgewählte Zustände ändern. Der Bogen wird also nun deaktiviert und der Benutzer wird ausgewählt. Okay, das ist also das. Gehen Sie zurück nach Hause und machen Sie einen schnellen Test. Also lauf nach Hause. Wir können zu Favoriten navigieren, wir können zu Updates navigieren, und wir können zu unserem Profilbereich navigieren. Cool. Also haben wir grundlegende Tab-Navigation für unsere App ausgedruckt. Hoffentlich können Sie sehen, wie einfach das ist. Wo ist es aktiviert wurden? Wir ermöglichen es einfacher zu sein, weil wir Szenen verwenden und wir die Möglichkeit nutzen, zwischen Szenen zu wechseln, um nur unseren Prototyp zu partimentalisieren es auch einfacher zu machen, unsere Tab-Leiste zu erstellen. Hoffentlich sehe ich dich im nächsten Video, wo wir einen Bilddetailbildschirm erstellen. Und wir werden die Möglichkeit einrichten, zurück zu navigieren und von diesem Detailbildschirm fallen. Zurück zu unserem Fotostream ListView. 18. Benutzerdefinierte Navigation zum Bildschirm: Im vorherigen Video haben wir gelernt, wie man die Navigation zwischen den Szenen erstellt. In diesem Video lernen wir, wie man in einer Szene navigiert. Also das erste, was wir tun müssen, ist, gehen Sie einfach zu unseren Importen und entfernen Sie einfach alles aus dem Kopf ist löschen, löschen Sie das aus. Und wir gehen zu unserer Fema Datei oder Scatchard, um dieses Schlagwort dvx zu benutzen, dy. Und wir werden Al-Din sagt Ihnen importieren. Ok, cool. Lassen Sie uns wählen die enthalten die Gruppen und die gesamte Containergruppe namens DES wie Card. Und wir werden nur die Clip-Sublattic-Box überprüfen, damit wir alle Extremitäten um die Grenze ausschneiden können. Und wir werden diese Gruppe kopieren. Wechseln Sie zu unserem Home-Bildschirm. Und wir werden es einfach einfügen. Wir reduzieren ihre Vergangenheit C2 ist 0. Und wir sind auch werfen seinen Hut, dieses kleine Symbol rechts von der DES-Heul-Karten-Ebene. Und das liegt nur daran, dass wir, wenn wir daran arbeiten, zu den Objekten darunter kommen müssen. Und obwohl die Dieselautos Opazität 0 wird uns immer noch blockieren, wenn wir in der Authoring-Umgebung arbeiten. Also nur er ein kleines Icon, nur Höhen. Es kann von der Baugruppe gefaltet werden, kann durch klicken, um Elemente sind linear. Also, das ist cool. Wir werden dieses Harangue-Symbol als Ziel benutzen um zu zeigen, dass das Federn sind und das finden. Und wir müssen einen Klopfauslöser haben. Rufen Sie die wieder aus. Und wir werden eine Deckkraft hinzufügen. Und wir werden die Kapazität auf 100 erhöhen. Ich schätze, hat Mitarbeiter, die Code funktionieren. Also habe ich auf mein Harangue-Bild angezapft und ich habe die Gesundheit des D enthüllt. Sie können hier sehen wir den Bereich unterhalb des Bildschirms unter dem Bildschirm sehen, der MSC feste Apps als Code zurück zu unserer Szene betrachtet. Extraorales Rechteck Und wir wollen genau die gleiche Größe wie der Bildschirm machen. Also ein kleiner Tipp hier, und sie kann in die Größe Eingänge gehen und wir können einfach eine 100% in beide eingeben. Und es wird funktionieren, wie, wie groß die tatsächliche Größe unserer Szene ist und sie zu einer richtigen Größe machen. Okay, lassen Sie uns die Füllfarbe ändern. Ich werde diese zwei auf 1999 ändern. Und ich werde dieses Bg für den Hintergrund umbenennen. Das ist die Position darunter, dass diese Gruppe ausgehalten haben. Und wir werden beide zusammenfassen. Und ich werde diesen Container und die Detailansicht umbenennen. Okay, jetzt haben wir das Ziel der Kapazität geändert um unseren Auslöser und unsere Antwort zu bearbeiten. Also, das ist Änderungen von DES, wie Karten Details. Und wir müssen nur mit den Trübungen dieser beiden Gruppen herumspielen . Also für diese Heul-Karte wollen wir, dass die Kapazität 104 ist. Die neue Containergruppe hilft Ihnen. Wir wollen, dass das 0 ist. Es ändert sich also Bedürfnisse, weil die Container-Gruppe, die jetzt diese Gesundheit Sie ist, wenn diese 0, alles darin wird auch 0 sein. Ebenso, wenn wir diese Ansicht zeigen wollen, wollten wir testen erhöhen ihre pastöse dieser Gesundheit riesige 100er Jahre. Wenn also der detaillierte Cobb immer noch bei 0 lag, würde es immer noch nicht angezeigt. Also müssen wir sicherstellen, dass das schon bei 100 ist. Okay, lassen Sie uns das testen. wir sicher, dass unser Trick korrekt funktioniert. Okay, das sieht gut aus. Als nächstes müssen wir die Rücknavigation initiieren. Okay, also bringen Sie unsere Detailansicht-Kapazität auf bis zu 100, damit wir damit arbeiten können. Wir müssen daran denken, es zurückzudrehen, wenn wir gehen und testen. Und wir werden diesen Zurück-Button hier auswählen. Und wir werden einen Tab-Trigger hinzufügen. Okay, kopieren wir diese Deckkraft vom vorherigen Trigger und fügen Sie sie einfach in unseren neuen Trigger hier ein. Und wir werden diese Deckkraft auf 0 setzen. Okay, also gehen wir zurück zu dieser Gesundheit und drehen sie zurück auf Nullen. Wir haben mit ihm fertig gearbeitet. Und wir werden nur testen, testen, um zu sehen, ob unsere Rückeninteraktionen richtig funktionieren. Also tippen wir auf das Moränenbild, um die Detailansicht zu öffnen, und wir tippen auf die Zurück-Taste, um es zu schließen. Dort haben Sie es grundlegende Navigation innerhalb einer Szene. Das nächste, was zurück zur umgekehrten Animation, haben wir gerade getan. Wir benutzen ein pastöses, aber wir hätten etwas anderes gebrauchen können. Sie erinnern sich, was nützlich ist, um Objekte wieder in ihren ursprünglichen Zustand zu versetzen. Doch das ist richtig, die Reset-Antwort. Gehen wir also und ändern Sie jetzt die Deckkraft auf die Reset-Antwort. Also, das ist nur ein Reset hinzufügen. Um diese gesünderen zurückzusetzen, die bereits ausgewählt sind, ist das schön und praktisch fallen und ich werde einfach diese Deckkraft entfernen. Okay, das ist nur ein doppelter Scheck. Das wird funktionieren, damit wir öffnen und schließen. Sie fragen sich vielleicht, was der Vorteil des Zurücksetzens gegenüber der Umkehrung der Deckkraft ist. Oder in diesem Fall, um ehrlich zu sein, ist die Antwort nicht viel. Wenn ich jedoch beim Öffnen der Ansicht weitere Animationen hinzufüge, setzt das Zurücksetzen immer alle Objekte auf ihren Standardzustand zurück. Wir werden dies im Abschnitt „Bewegung“ näher untersuchen. Okay, so dass über wickelt es für dieses Video. Als Nächstes fügen wir unseren Login-Skripten ein wenig Navigation hinzu. So sehen wir uns dort. 19. Navigation zum Login hinzufügen: Also möchte ich die Sprungbefragten nur noch ein bisschen detaillierter überdenken. Um dies zu erkunden, werden wir einige Navigation zwischen den ersten beiden Sitzen hinzufügen. Also gehen wir zu unserem Eingabestrom, und wir kamen nur, um das Rückgrat hier zu kopieren. Gehen wir, um sich anzumelden und fügen Sie es ein. Nun, gehen wir zum Start C. Also haben wir diese Sprungantwort, die nur auf Fade eingestellt ist , um dies ein bisschen mehr von einer Feeder-Progression zu geben , die geändert wird, um in Übergang zu gleiten. Und wir lassen die Übergangsrichtung von rechts nach links. Okay, wechseln wir zurück zur Login-Szene. Und das schlief, wie Back Button. Und wir werden einen Tab-Trigger hinzufügen. Und dazu werden wir noch eine Sprungantwort hinzufügen. Okay, also wollen wir, dass dieser Knopf zur vorherigen Szene zurückkehrt. Und wenn wir, wenn wir öffnen diese Auswahl sehen Drop-down, können wir alle unsere Szenen sehen, aber wir können auch sehen, diese Optionals Hop zuvor das gleiche gezeigt. Und das ist sehr nützlich, wenn Sie mehrere Szenen als Ziele haben und Sie nicht wissen, Sie werden nicht wissen, aus welcher der Benutzer gekommen ist. Sie können zuvor die gleiche angezeigt verwenden. Also werden wir das hier benutzen. Und wir werden einen Rutsch-Übergang wählen. Und wir werden es wählen, um von links nach rechts zu gehen. Also wieder, wir bekommen diese Kontinuität der Animation. Ok? Die Sache über zuvor gezeigte Senior funktioniert nur, wenn Sie Ihren Prototyp aus der vorherigen Szene testen , weil er sich an diese Geschichte der Aktionen erinnern muss. Also werden wir zurück zu unserem Start C navigieren und wir werden den vorherigen Test schlagen. Wenn ich nun auf Login klicke, komme ich zu meinem Login-Bildschirm. Und wenn ich den Zurück-Button betätige, navigiert zurück zu meiner vorherigen Szene. Okay, das bringt uns das Ende des Navigationsabschnitts. Im nächsten Abschnitt werden wir alles über Vorgänger Bewegungsfähigkeiten lernen. So sehen wir uns dort. 20. Eine Animation hinzufügst: In diesem Video werden wir eine kleine Animation erstellen, wenn Sie zwischen Szenen navigieren, indem Sie die Tab-Leiste verwenden. Also werde ich es jetzt für dich demonstrieren. Also, wenn ich tippe und tippe auf das Herz, und du siehst, gibt es diese kleine Bounce-Animation, die zwischen diesen beiden geht. Okay? So verwendet der Sappho Szenen für die Navigation. Also brauchen wir eine Möglichkeit, automatisch eine Animation ausgelöst, wenn der Seed geladen wird. Und dafür werden wir den Sternauslöser benutzen. Gehen wir also zu unserem Home-Bildschirm. Und wir brauchen nur seine Hände zurück Hand getroffen wurde. Okay. Und wir werden einen Stop-Trigger hinzufügen. Wir fügen irgendwie eine Skalenantwort hinzu. Und wir werden diese Haag ist Home ausgewählt. Lassen Sie uns nur einen Blick auf Home ausgewählt. Wir wollen unsere Animation, wenn sie springt, um von den mittleren Verkaufsstellen zu springen. Also müssen wir sicherstellen, dass unsere Herkunft aus unserer homöostatischen Gruppe zur Zensur geschickt wird. Andernfalls wird dieser Ursprung als Punkt der Skala verwendet, stehend oder nach unten skaliert. Oberfläche aus links und es wird von links zu animieren, was mehr wir wollen. Okay, also gehen wir zurück zu unserer Skalenreaktion. Also müssen wir Waage wiegen. Wir können entweder auf eine bestimmte Größe skalieren oder wir können um einen Faktor skalieren , der effektiv ein Prozentsatz ist. Also werden wir Faktor auswählen. Das nächste, was wir berücksichtigen müssen, ist, ob wir auf einen bestimmten Wert oder eine Skala um einen bestimmten Betrag skaliert haben. Ich werde hier ein 122 beides hinzufügen. Also werde ich auf einen bestimmten Betrag skalieren. Verwenden Sie Gao Bi ist rein eine Präferenz. Ich denke, dass ich, weil ich durch einen sehr spezifischen wörtlichen Wert gehe, fühle ich mich Skalierung zu. Ist es ein wenig verständlicher, aber fühlen Sie sich frei, ein Spiel um damit zu haben. Okay, lassen Sie uns das testen und sehen, wo unsere erste Animation aussieht. Also werde ich hier einfach „Aktualisieren“ drücken, wenn du dich nur auf das Home-Icon konzentrierst. Sie können sehen, dass dort ein wenig sprunghaft ist. Das ist also die erste Hälfte der Animation. Okay, Sie können also, ziemlich schwer zu sehen, aber Sie können feststellen, dass die Waage beschleunigt und sich dann verlangsamt. Und das liegt daran, dass es standardmäßig eine Beschleunigungskurve Appliance passt. Und die Beschleunigungskurve, die es standardmäßig hat, ist leichtes Ein- und Auslassen. Mit Lockerung fügt also ein natürlicheres Feld hinzu, wenn Objekte und Sonde ich einige zur Auswahl habe. Es gibt viele verschiedene Beschleunigungskurven oder Sie können auswählen. Also hast du am Anfang, du hast linear. Das hat also keine Geschwindigkeitsänderungen, ist ein komplett Has, es sagt eine sehr lineare Animation. Also ist es sehr flach von der einen Animation, aber es ist großartig für Schleifenanimation heute wirklich wollen, um zu verlangsamen oder zu beschleunigen und Animationskurve und Sie sind Schleifen, weil Sie werden bemerken, wenn diese, diese Sprünge passieren. Okay, also IES, der nächste Schritt ist, dass effektiv geht. Beschleunigt und verlangsamt sich. Aber Sie haben keine Möglichkeit, den sogenannten Interpolator zu ändern, zu dem ich in einer Minute kommen werde. 0s in der Animationskurve, die sich am Ende verlangsamt. So ist es fast man sich vorstellen, eine Art beginnt mit Geschwindigkeit und sein Ausmaß verlangsamt sich. Aber wenn wir dies auswählen, können Sie sehen, dass dies uns die Möglichkeit gibt, das zu ändern, was der Interpolant genannt wird. Also, was ist effektiv die spezifische Kurve, dass die Animation Bleistift folgen kann, wird zu denen in einer Minute kommen. Auf der anderen Seite der Leichtigkeit in und erleichtern unsere Kurve. Das fängt also langsam an und endet schnell. Und wieder, wenn wir das wählen, sehen Sie, dass wir Zugang zu den Interpolationen haben. Als Nächstes geht es einfach rein und raus. Das ist also eine Mischung aus der Leichtigkeit in und Leichtigkeit, die wir haben, wir haben uns gerade angesehen. Und das ist bei weitem, die häufigste Animationskurve, die Menschen dazu neigen zu verwenden, ist eigentlich eines der Disney 12 Animationsprinzipien des Denkens über die Physik eines Objekts und wie es in der realen Welt funktionieren würde, wenn Sie jemals auf Bewegung von jemandem zu Fuß oder laufen em, wir laufen nicht einfach plötzlich auf zwei Meilen pro Stunde. Wir bauen Geschwindigkeit auf. Wenn man sich das Auto anschaut, baut es Geschwindigkeit auf und dann verlangsamt es sich. Es fängt nicht sofort an, hört sofort auf. Dies ist also bei weitem die natürlichste Animationskurve, die Sie verwenden können. Cubic Bessie BCA ist ein, ist eine ähnliche Animationskurve, aber Sie haben jetzt die Kontrolle über die vier Punkte. Sie können benutzerdefinierte Beschleunigungskurven mit kubischen Basen erstellen. Und tatsächlich können Sie hier sehen, wenn ich darauf tippe, haben Sie tatsächlich eine kleine kubische Bessie, ein Diagramm, in dem Sie effektiv Ihre eigenen Animations-Interpolationskurven erstellen können . Okay? Und schließlich haben wir Frühling. Und so Frühling ist eine sehr andere Animationskurve beeindrucken würde Pi gibt Ihnen stattdessen diese beiden Schieberegler, einmal eine Steuerspannung und eine Reibung zu steuern. Also, und wir werden diese Lockerung in einer Minute für eine Animation verwenden und Ihnen erklären, wie diese beiden Schieberegler miteinander arbeiten. Die zweite Hälfte des Animationspuzzles ist also Interkalatoren. Also, wenn wir zurückgehen, um zu erleichtern und tatsächlich können Sie klicken, werden wir auf diese klicken, sehen Sie die Unterschiede hier. Und ich werde nur Frame bringen. Das ist also die Dokumentation für das Essen von Kurven. Auf der Website. Hier können Sie sehen, wie unterschiedlich die Kurven sind und sich die verschiedenen Kurven ändern werden. Sie können hier sehen, wenn Sie nur mit der Maus über, können Sie sehen, dass verschiedene Animationen, die Sie erhalten werden, indem Sie diese verschiedenen Kurven verwenden. Und diese Kurven sind alle Voreinstellungen, die mit und stolz auf höhere kommen. So können Sie definitiv bald hier eine Bucht haben, bei Lockerung in Kurven und hier unten auf die Lockerung Kurven. Und dann haben wir es. Und lockere Kurven. Schauen Sie sich diese Webseite an und schauen Sie sich an und spielen Sie mit den Animationen. Die Animationskurven innerhalb, verschönern sie. Ich bleibe für den Moment mit Leichtigkeit rein und entspannt. Und dann das nächste, was wir brauchen, um seine Dauer zu betrachten. Denn für die meisten U ist irgendwo zwischen 0,20,4 eine gute Faustregel für die Dauer einer Animation. Obwohl dies stark von einigen Dingen abhängt, wie der Größe eines Objekts, der Entfernung, die es über den Bildschirm zu reisen hat, und der Betonung, die es für den Benutzer benötigt. Eine andere Sache, die ich dazu neige, ist, eine etwas längere Animationsdauer als die animierte Auswanderung zu haben. Beispielsweise wäre ein Dialogfeld etwas länger, als wenn er verschwindet. Wenn Sie Antworten zu einem Auslöser hinzufügen, Sie überrascht sein, dass aus der Perspektive der Emotionen die Reihenfolge, die Sie sie hinzufügen, irgendwie irrelevant ist. Die Reihenfolge, in der die animierenden Antworten ausgeführt werden, basiert auf Dauer und Verzögerung. Das bringt uns ordentlich in die Verzögerung. Verzögerung ist nur ein Punkt, an dem die Animation beginnt. Wenn Sie mit traditionellen Animationen vertraut sind, verzögern Sie Ihr Startschlüsselbild. Das Endschlüsselbild wird durch die Kuration selbst definiert. Es gibt eine Möglichkeit, eine traditionellere Ansicht Ihrer Animationen hier in pro Pi zu sehen. Und es ist nur hier auf der rechten Seite des Triggerbedienfelds. Also werde ich das einfach rausziehen. Also derzeit die funktionale, so dass die Timeline ziemlich begrenzt ist. Es fungiert nur als eine andere Möglichkeit, Dauer und Verzögerung zu ändern. Hier können Sie meine Skala Animation sehen. Ich kann darauf klicken und dorthin bewegen, und Sie können sehen, dass das Verschieben meine Dauer und meine Stopp Verzögerung ändern wird . Iran die Rechte und auf der rechten Seite hier. Ok, lassen Sie uns das einfach auf die Standardwerte zurücksetzen. Also lassen wir es auf Ebene 0. Okay, also lassen Sie uns mit unserer Bounce-Animation fortfahren, damit wir sehen können , wie all diese Funktionen und Trolle zusammenpassen. Also werde ich nur diese Zeitleiste hervorheben, weil diese spezielle Animation, okay, für unsere Bounce, wir sind aufgesprungen, aber jetzt müssen wir abprallen. Also müssen wir die Animation rückgängig machen und wir wissen, was eine wirklich gute Antwort auf Game-Batch-Standardwerte ist, richtig? Richtig, zurücksetzen. Lassen Sie uns ein Reset Response Ziel in der gleichen Heimat ausgewählten Container hinzufügen. Was am Zurücksetzen schön ist, ist, dass ja, es wird wieder auf den ursprünglichen Zustand zurückgesetzt. Aber wie es Feinde, dorthin zu gelangen, kann völlig anders sein. Also möchte ich ein bisschen Spaß und leichte Persönlichkeit zu meiner Animation hinzufügen. Also werde ich die Lockerung in den Frühling ändern. Okay, also werde ich hinzufügen, ich werde die Spannung auf 500 ändern. Und ich werde zehn zur Reibung hinzufügen. Okay, lassen Sie uns das testen. Okay, Sie können sehen, dass sich hier nichts geändert hat, und das liegt daran, dass wir tatsächlich eine Verzögerung setzen müssen. Also, wenn wir zurückgehen und betrachten, wie skalierte Animation, können wir sehen, dass es eine Dauer von 4.2 dauert. Also müssen wir hier 0.20.2 hinzufügen und fragen, ob das schraffiert ist. Tränen, das machen wir. Okay, jetzt kannst du es sehen. Dass der erste Teil der Animation ausreichend ist und nach oben und der zweite Teil gibt es, dass schöne Bounce. Und wir nutzen die Verzögerung, um diese beiden Animationen auszugleichen. Und tatsächlich, wenn wir hier wieder zu unserer Timeline zurückkehren, können Sie sehen, dass meine erste Animationsdauer hier ist, und dann ist meine zweite Animationsdauer hier. Und Sie können natürlich mit diesen verschiedenen Größen herumspielen. Was Sie beim Zurücksetzen bemerken werden, ist, dass es diese kleinen Griffe nicht hat. Also diese kleinen Griffe in ihrer Ansicht zu ändern die, die Größe effektiv wie die Dauer Ihrer Animation geändert. Aber weil dies, das eine Federanimationskurve auf sie angewendet hat und es sehr stark von bei Aufmerksamkeit und der Reibung gesperrt ist, können Sie sehen, dass die Dauer hier tatsächlich ausgegraut ist. Wir können die Iteration nicht ändern. Wir ändern die Dauer, indem wir die Spannung und die Reibung ändern. Also etwas, etwas andere Situation mit diesem wird erhalten, dass, zurücksetzen. Ok, ich denke, das sieht gut aus. So haben wir jetzt unsere Feinde werden ersten Teil unserer Animation. Wir müssen das jetzt auf eine andere Szene anwenden. Lassen Sie uns also unseren Triggerblock kopieren. Wie stark Triggerblock. Also komm schon C. Und wir gehen in unsere Lieblingsszene. Und wir werden es einfügen. Und weil ich einen Trigger-Block kopiert habe, muss ich nichts auswählen, was genau wissen wird, wo man ein setzen soll. Sie können sehen, ich habe es unten in meinem Trigger-Panel hier hinzugefügt. Okay, damit wir sehen können, dass wir ein paar orangefarbene Antworten haben. Das liegt daran, dass die Dinge, mit denen sie verbunden waren, nicht auf dieser gleichen existieren, so dass wir unsere neuen Ziele hinzufügen müssen. Und in der Tat werden wir ein ganz anderes Tab-Element anvisieren. Also werden wir darauf abzielen, dass die Herzen Gegenstand haben. Also lasst uns zu unserer Scour Antwort gehen und das ist unsere Herzen ausgewählt finden. Okay? Und wir werden alles gleich lassen. Und wir werden auch unsere Resets ändern, unser Haus ausgewählt. Und wir müssen auch sicherstellen, dass der Ursprungspunkt auf Mittelpunkt gesetzt ist. Zentriert, die Sie standardmäßig sehen werden, ist immer oben links eingestellt. Okay, also gehen wir zurück nach Hause und testen. Also werde ich meine Favoriten auswählen. Und Sie können auf der Animation ihr Logo sehen, um mein Zuhause zu schnappen. Und Sie können sehen, dass es keine Animation gibt. Okay, das liegt daran, dass die Antworten in einem Stern-Trigger standardmäßig nur einmal pro Sitzung ausgelöst werden. Also müssen wir das ändern. Als nächstes gehen Sie zu unserem Star-Trigger. Und Sie können hier sehen, dass es eine Option gibt, jedes Mal neu zu starten, und das ist, was wir auswählen möchten. Also wollen wir wählen, dass auch auf unserer Lieblingsszene kollabiert ich auslöse. Richtig, also liest das Halbstab. Okay, also, wenn ich meine Startseite, Ausgewählt, sorry, wenn ich meine Favoriten teilen, können Sie sehen, Animation ist Lücken gibt. Ich wähle Zuhause aus. Und Sie können sehen, dass Animation auch da ist. Aber Sie können sehen, dass wir immer noch das Weiß unselektiert unten sehen können. Also müssen wir nur sicherstellen, dass die Deckkraft 0 fast scheint. Kommen wir zurück zu unserer Homeszene. Und das ist OWL unselektierten Zustand für zu Hause in der Tab-Leiste finden Sie hier. Unselektierte Hormon-Methode, wir werden nur ihre Pastizzi 0 reduzieren. Und wir gehen durch unsere Favoriten und wir werden genau das Gleiche tun. Aber für Harfe auf ausgewählten, werden wir das auf 0 reduzieren. Gehen wir zurück nach Hause und testen Sie es noch einmal. Jetzt können wir sehen, dass wir eine schöne saubere Animation zwischen den beiden haben. Okay, nun, das über wickelt es für dieses Video. Das ist eine Übung. Und bevor Sie mit dem nächsten Video fortfahren, möchte ich, dass Sie die Bounce-Animation auf die anderen Registerkarten anwenden. Fühlen Sie sich auch frei, um mit den Lockerungsoptionen zu spielen und zirkuliert, wie verrückt, schaffen Sie etwas Einzigartiges. Im nächsten Video werden wir einen Übergang suchen, der ein bisschen mehr Choreographie erfordert. So sehen wir uns im nächsten Video. 21. Animieren: Hallo, da. In diesem Video werden wir einen Bildschirmübergang zwischen zwei Szenen anpacken. Zuvor hatten wir einen sehr einfachen Übergang zwischen dem Start- und dem Login-Bildschirm. Und jetzt werden wir die Dinge mit einigen benutzerdefinierten Animationen aufpeppen. Also lassen Sie uns gehen, um sicherzustellen, dass Sie Bildschirm verstehen, wenn Sie entlang folgen und wir werden es betrachten, wir werden einen Sprung Übergang, die derzeit Luft ist. Und stattdessen wird es unsere, unsere grundlegende Übergangsphase abheben. Und wir werden tatsächlich den ganzen Sprung nur für die Minute deaktivieren und unsere benutzerdefinierte Animation auf diesem Bildschirm einrichten. Also werden wir einen Abschnitt der Animation auf diesem Bildschirm haben. Also werden wir das Logo und die Riemenlinie und die Knöpfe animieren. Und dann springen wir raus und sagen Login-Bildschirm. Und wir werden die Animation, die Introanimation für den Anmeldebildschirm hier einstellen . Also, das ist auf dem Startbildschirm getan. Okay, also lassen Sie uns das Logo animieren. Wählen wir also die Logografik aus. Und wir werden den Ursprung in die Mitte bringen. Das ist der Punkt, an dem wir die Animationsdrehpunkte treffen wollen und mit dem Logo ausgewählt, wir werden nur in diese Taktik hinzufügen oder wir werden eine Bewegung Antwort hinzufügen. Okay, und wir werden sagen, es ist Y 2119. Wir wollten auch mit dem Animations-Timing herumspielen. Also werden wir die Dauer 2,4 einstellen. Und wir werden das Relais auch zwei Eingänge für ok einstellen. Also der erste Teil wird noch die Arbeit, die sich an die Spitze des Schreien bewegt, will auch, dass es skaliert. Also werden wir eine Skalenantwort hinzufügen. Und wir werden die Skala festlegen, damit wir sie standardmäßig belassen. Also werden wir eine Skala Größe 257 12 festlegen. Und wieder, wir werden die gleiche Dauer festlegen, 0.410.4. Okay, also werde ich, ich wähle Stimmungsverschiebungen aus, wähle beide Antworten aus. Und ich möchte die Lockerungskurve in eine Leichtigkeit ändern. Und wieder, dies hat nur mit dem Timing der Animation zu tun. Wir haben 1,5 in dieser ersten Szene passiert, und die andere Hälfte war auf der zweiten Szene. Okay, also lasst uns den schnellen Test machen. Wenn ich also auf Login tippe, sehe ich, dass mein Logo in Position animiert wird. Das sieht also gut aus. Lassen Sie uns jetzt unsere Aufmerksamkeit auf die Gurtlinie richten. Stellen Sie sicher, dass das ausgewählt ist. Wir werden eine Kapazität hinzufügen und an seiner Sarah vorbei kommen, wie sollen wir ihr eine Dauer von 0,3 K geben? Das ist noch einmal ein Test. Also das effektiv verblasst die Gurtlinie wirklich ist nur nehmen Sie das weg vom Bildschirm. Okay, so cool. Okay, also müssen wir endlich für diesen Bildschirm etwas mit den groben Fraktionen machen. Also lassen Sie uns die primäre CTA, CTA wählen. Und wir werden einen Zug hinzufügen. Und wir werden die x 2x minus drei für drei Durchläufe einstellen, trifft es, gehen aus dem Bildschirm, weg zur linken Seite des Bildschirms. Und wieder, ich werde mit der Animation rumspielen. Kurven gehen, um Interkalatoren zu Sand, die zurück. Und ich werde die Dauer dieses Satzes ändern. Die Dauer noch setzen Sex und die Gassen. Und 1.6, Ich möchte nur etwas versetzen, die Bewegung dieser Call-to-Action ist weg von der Animation des Logos. Okay, also das ist nur Bewegung Antwort. Und ich werde das Ziel in die tertiären Busse umstellen. Und auf diesem werde ich nur die Verzögerung etwas auf 0,8 ändern. Das ist also, wenn Sie diese Schaltfläche von der Other Button versetzen. Okay, gehen wir und schalten unsere Sprungantwort wieder ein. Und um sicherzustellen, dass wir diese Animation tatsächlich laufen sehen können, müssen wir auch unsere Sprungantwort verzögern. Sonst geht sofort zu springen und wir werden keine dieser Animation sehen passiert. Also werden wir die Verzögerung davon auf 1,4 setzen. Okay, das ist das Beste. Testen Sie das und sehen Sie, wie das aussieht. Also, wenn wir Login drücken, unsere m, unsere Aktion kann dies verlangsamen. So können Sie sehen, dass es in der Sklaverei passiert. Gelistet, um es nicht auf eine Viertelsekunde zu nehmen. Also habe ich den Login getroffen. Mögen Logos ausblenden und meine beiden Tasten rutschen ab. Cool. Also haben wir die Hälfte unseres Übergangs abgeschlossen. Wir werden jetzt auf dem Bildschirm fertig sein. Also, das sind Switch-Szenen. Okay, also fügen wir einen Startauslöser hinzu. Ich werde es einfach nach oben schieben. Und wir müssen einige der Standardeigenschaften auf den Sternauslösern ändern. Also werden wir es auswählen, um mit Sprung statt Stab den Sprung zu stoppen. Und all dies bedeutet, dass die Animation ein bisschen schneller beginnt und wir jedes Mal unseren Neustart überprüfen werden. Und das ist vor allem, weil wir wollen, dass dies jedes Mal läuft, wenn die Samen geladen werden. Okay, das ist also wählen Sie unsere Begrüßungslinie zurück. Und wir werden, zu diesem Star-Trick, werden wir eine Kapazität hinzufügen. Und wir werden seine Kapazität auf 0 setzen, MSN seine Dauer auf 0. Was dieser Stern-Trigger also tut, ist, einen Standardzustand einzurichten , bevor diese Szene geladen wurde. Wenn Sie sich erinnern, haben wir das Logo bereits in einer bestimmten, animierten, an einer bestimmten Position in der Startup-Szene. Und wir haben auch schon die Gurtlinie ausgeblendet. Also müssen wir fortsetzen, dass die Animation dieser Szene und setzen diese Standardstatus, weil sie diese Dinge haben und effektiv passiert. Okay, als nächstes werden wir die Formulargruppe anvisieren. Und wir werden einen Zug hinzufügen. Und wir werden als x 2375 sagen. Und wieder ist es die Dauer auf 0 k. Wir werden jetzt das CTA anvisieren. Und wir müssen noch einen Schritt hinzufügen. Und wir werden auch als X2 375 und Dauer auf 0 setzen. Ok, also haben wir jetzt unsere Laufzeit-Standardwerte eingerichtet. Als nächstes machen wir das letzte Stück des Übergangs. Also werden wir einen weiteren Stern hinzufügen. Und wieder, wir werden voll reden. Und wir werden eine Reset-Antwort hinzufügen. Wir werden den Interpolator des Reset auf „Zurück“ ändern. Und wir werden die Dauer auf 0,6 einstellen. Okay, das ist jetzt Ziel dieser primären CTA auf einem anderen Reset. Ich werde auch den Interpolator in den Rücken wechseln. Wir werden die Dauer auf 2p 06 einstellen. Und wir werden es eine leichte Verzögerung geben, wird 0,2 sein. Okay, lass mich einfach erklären, was wir hier gemacht haben. Wir haben, wir haben einen Standardzustand einiger Objekte basierend auf der Animation festgelegt , die in der ersten Szene im Stern c passiert . Und wir verwenden effektiv diesen anderen Stern-Trigger, um unsere Standardwerte mithilfe der Reset-Antworten umzukehren. Okay, wir haben hier viel getan, also haben wir Änderungen müssen sehen, was wir haben. Gehen wir also zurück und wählen Sie den Stil der Szene aus, denn dort beginnt unsere Animation. Und das ist diese Animation laufen. Also fangen wir an, den Stern c zu lösen, wir drücken Login. Wir kriegen die Animation ist ASI, richtig? Und ein Viertel Geschwindigkeit, damit Sie es sehen können. Und dann kommen wir unsere zweite CMB rein. Also lassen Sie uns einfach diesen Pat Full Speed Code ausführen. Sieht gut aus für mich. Lassen Sie uns also überprüfen, was wir in diesem Video getan haben. Wir haben Zuhälter wie Übergang zwischen zwei Szenen. Wir haben gelernt, wie Laufzeit-Standardwerte festgelegt werden. Wir haben ein bisschen mehr über Animationskurven und Interpolator gelernt. Ich denke, jetzt ist es Zeit für eine Tasse Tee, bevor wir zum nächsten Video übergehen. Und im nächsten Video werden wir Inbrunst erkunden Kundenanimationen, indem eine benutzerdefinierte Animation hinzufügen, wenn ein Benutzer auf ein Foto in seinem Fotostream tippt. Wir sehen uns in ein paar Minuten. 22. Erstellen einer benutzerdefinierten Animation: Hallo, da. In diesem Video werden wir Interaktion erstellen, die es Benutzern ermöglicht, ein Bild aus ihrem Fotostream in den Favoritenbereich zu speichern. Lassen Sie uns einen kurzen Blick auf die Demo werfen, aber wir werden bauen. Also werde ich einfach nach unten zu diesem Bild hier scrollen. Ich werde nur doppeltippen. Wir werden seine Lieblings-Ikone bekommen. Und ein kleines Thumbnail fällt einfach in den Lieblingsbereich. Und Sie sahen einige dieser anderen Bilder ausgeblendet. Bestest laufen, dass mit einer viel langsameren Geschwindigkeit. So können wir einfach Schritt für Schritt k durchgehen, also werde ich nach unten scrollen. Also zuerst werden wir die Lieblings-Interaktion auf dem Doppeltippen erstellen , die in unsere Lieblingstaschen in die USA bringen wird, können sehen, was sie angezapft haben, dann verblassen die anderen Bilder, um das Bild zu betonen, dass wir bevorzugt. Als nächstes werden wir die Bild-Miniaturansicht Feind, die uns helfen wird, zu verstehen, was das Bild gespeichert wurde, wird ein paar Animationsprinzipien hier wie Antizipation und Inszenierung, folgen und Überlappen in Aktion, sowie Timing und Übertreibung. Dies wird angezeigt, wenn ein Miniaturbild auf das Herz trifft, wodurch das Herz reagiert. Schließlich werden wir alle anderen Bilder wieder in das komplette Set der Animatoren einblenden. Es gibt eine Menge los in diesen kleinen Mikro-Interaktionen, um sicherzustellen, dass der Benutzer weiß, was passiert. Und das ist nach allem, unsere bisher komplexeste Animation. Ok, lass uns knacken. Also werde ich nur meine vorherige Datei hier öffnen. Also zuerst müssen wir gehen und unsere Grafik aus unserer Sigma-Datei oder, oder Sketch oder dvx, dy abrufen, abhängig von dem, was Sie verwenden. Also werde ich nur Sigma umschalten. Und ich werde nur meine Grafik kopieren, hat ein SVG-Comeback, um es zu verschönern. Ich werde nur zehn kleben. Okay, wie zuvor gesehen, wird die SVD bei einem x kommen, also müssen wir das einfach mit drei multiplizieren. Und wir werden es nennen, indem wir Lieblingsplätze umbenennen. Okay, gehen wir auf Seite eins über Fotostream. Und wir werden all diese Kontexte zusammenfassen. Und wir werden diese Fotos nennen. Und wenn wir das einfach öffnen, werden wir dieses Pi-Bild finden, das neun abgebildet ist, und wir werden es einfach außerhalb der Sünde oben ziehen. Ich werde jetzt meine Lieblingsplätze ihn knapp über dem Bild neun bewegen. Und wir werden das nur zentral über dem Bild positionieren. Okay, ich bin endlich, wir werden nur eins sein. Wir wollen, dass dies erscheint, also müssen wir ihre Vergangenheit T 0 machen. also das Setup erledigt. Also als nächstes werden wir wählen, wie Bild neun. Und wir werden zu unserem Trigger-Panel kommen und wir werden einen Doppeltipp hinzufügen. Gehen wir zu unseren Favoriten, Boston. Und wir wollen nur sicherstellen, dass der Ursprung in ist. Wir wollen warten, wollte aus der Mitte animieren. Und halten, dass bevorzugt Taste ausgewählt, werden wir eine Kapazitäten hinzufügen, die Outs haben Auslöser? Ich werde eine 100 machen. Und wir werden die Dauer auf eine etwas schnellere und 0,01 einstellen. OK. Wir werden auch eine Skala hinzufügen. Und wir werden auf einen Faktor von 120 skalieren. Und wir werden die Dauer hier auf 0.01. OK, lassen Sie uns den Test bekommen. Also, wenn wir nach unten zu unserem Bild scrollen und sagen, was passiert ist, so können wir sehen, dass das Bild gerade erscheint sofort. So wollte etwas verzögert, so dass wir sehen können, die Skala tatsächlich geschieht. Das hatte also nicht plus 0,1 verzögert. Und lassen Sie uns das noch einmal testen. Okay, das ist ein bisschen besser. Als nächstes möchte ich betonen, welche Leute, die ein wenig mehr ausgewählt wurden. So wählen Sie die Fotogruppe. Ich werde eine Kapazität hinzufügen. Und ich werde es 10% machen, weil Sättigung auf 0. Und wir werden es auch zum Nullpunkt des Labors hinzufügen. Okay, das ist ein Duplikat, das ich übergeben habe. Und wir werden es auf 100 erhöhen. Dies werde ich eine Richtung auf drei und die Verzögerung auf 0,4 setzen . Okay, das ist gut. Dieser Test. doppelten Tab und wir können sehen, dass wir effektiv ausgeblendet sind. Das ganze Nachbild ist wie eine Art Wow-Fett und dann verblassen sie langsam wieder. Lass es uns einfach noch mal ausspielen. Okay, als nächstes werden wir die Miniaturansicht Animation hinzufügen. Also, was wir tun werden, ist, dass wir unser Bild neun duplizieren werden. Und wir bekommen eine echte Umbenennung dieses Bild neun Daumen, Hämatit Unterstrich Daumen. Und wir werden den Ursprung in der Mitte, Mitte festlegen. Und was kann dies skalieren, stellen Sie sicher, dass Ihr Seitenverhältnis dies nicht auf eine Breite 20 skaliert. Und das gibt uns einen Taschenrechner. Hi, ich bin etwas höher, 2126. Und wir werden das außerhalb unseres Paging-Containers verschieben. Wir wollen nicht, dass das scrollt. Also werden wir das hier in eine feste Position setzen und wir werden es in eine andere Position bringen. Effektiv wollen wir dort gerade oben bewegen, wo die Favoriten ganz AS grob Köpfe lokalisiert. Und es wird das auf 600 Grad verkaufen. Es ist wie eine gute Position. Okay, also werden wir jetzt seine Deckkraft auf 0 setzen, auch die zweifache Möglichkeit, ganz noch zu zeigen. Und wenn wir es selektiv halten, werden wir unserem Auslöser eine weitere Deckkraft hinzufügen, wo wir die Unsichtbarkeit der Thumbnail auf 100 erhöhen werden. Und wir werden die Dauer auf 0,2 einstellen und wir werden eine Verzögerung von 0,2 hinzufügen. Also, immer noch mit dem Immunsystem, werden wir eine weitere Antwort in dieser Zeitskala hinzufügen. Und wir müssen in die aktuellen Größenwerte pumpen, weil wir Größe nach oben müssen und wir wollen, dass die mehr pro Pi funktionieren, wie die Dimensionierung Wälder richtig. Also wissen wir nur irgendwie, was auch immer das ist 20 mal 21,6. Also, das ist nur ziehen Sie das in diese Werte zunächst, 1.6. Und mit dem Seitenverhältnis abgehängt, können wir jetzt diese Seite zwei fehlerhaft ändern und es wird die richtige Höhe für uns herausfinden, K. Und wir werden die Dauer auf 0,4 setzen. Und wir werden die spätere 0,2 einstellen. Ok, lassen Sie uns den Test machen. Doppelklicken Sie also auf. Und jetzt m ist Tom scheint jetzt gut aussehen. Okay, was ich jetzt tun will, ist imitieren, dass es fallen in die Favoriten wird auch eine der 12 Kern Animationsprinzipien verwenden , die Disney Animation Prinzipien hier, was Übertreibung ist. Also, wenn der Daumen fällt in die härteste gehen, um aufquellen, nur Glück absorbiert das Bild. Also wieder, es wird nur die Animation betonen, dass ein wenig. Was wir tun werden, ist, dass wir hierher zurückgehen. Wir werden diese Skala duplizieren. Und wir werden die Breite auf zehn ändern. Und das wird automatisch Größe höher. Und wir werden die Dauer auf 0,2 ändern. Und wir werden es im Labor eins geben. Aber auch zu bewegen Tierärzte gehen, um eine Bewegung Antwort hinzufügen. Und wir wollen es, wir wollen, dass es sich bewegt. Dies ist, wo es geht in die fallen, in die Favoriten Symbole. So können wir uns irgendwie bei zwei positionieren, wo wir denken, dass es sein sollte. So etwas wie das. Das ist nur auf sechs runter. 669 und kehrte zu unserem Umzug zurück. Ok. Also ja, das ist wirklich, Mrs. rückgängig zu machen, das gleiche schnell über Raum, richtige Position. Jetzt wissen wir also, was dieser Wert ist. Wir können ein in das Warum S6 69 pumpen oder bewegen. Und das ist manchmal ein müssen Sie Dinge tun weil wir keine Fähigkeit haben, Timelines und solche Dinge zu schrubben. Wenn Sie Ihr Objekt an Ihre endgültige Position verschieben, können Sie den Wert erhalten. Dann stellen Sie sicher, dass Sie es tun wollen und verschieben Sie es zurück. Und dann können Sie diesen Wert in Ihre Antwort setzen. Ok, ja, die Dauer, Dauer 0,2, ich werde dies um 1 Sekunde verzögern. Okay, es gibt Tests, die sehen, wie das aussieht. Doppelklicken Sie also und das Miniaturbild verschwindet im Herzen. Jetzt ist es eigentlich hinter die Kulissen zu gehen, wird der Hut so schnell sein, dass die Leute das nicht wirklich bemerken werden. Wenn wir die nächste Animation hinzufügen, mit der das Herz anschwellen wird, neigt das menschliche Gehirn dazu, die Frames dazwischen herauszufinden , so dass wir nicht ständig super genau sein müssen, wie die Dinge reagieren. Manchmal können wir mit sehr, sehr schnellen Animationen davonkommen , indem wir dem Gehirn erlauben , die Animation von einem Frame zum anderen herauszufinden. Okay, also lass uns unser Herz unselektierte Gruppe in unseren Schwimmern finden. Es passiert hier. Und wir werden sicherstellen, dass der Ursprung auf Sensor, Sensor eingestellt ist, weil wir das Herz sind, um von der Mitte aus zu animieren. Es ist sehr natürliche und natürliche Art und Weise für seine y-Domäne. Und wir kommen wieder auf unsere Doppeltipp-Antwort zurück. Und wir werden eine weitere Skala hinzufügen. Wir werden Späher mit Faktor. Und dieser Faktor wird 120 sein. Wir werden die Dauer einstellen, wo die Hebeldauer tatsächlich 0,2 antwortet, und wir sind die Verzögerung auf eins gesetzt. Okay, das ist also die erste Hälfte der Herzanimation, um diese Bedrohung anzuschwellen, wir müssen das jetzt abschließen. Also werde ich tun, ist, dass ich eine Resets Antwort hinzufügen werde. Stellen Sie sicher, dass Sie den Satz haben, setzen Sie X auf die Herzgruppe nicht ausgewählt. Und dieses Mal werden wir wählen Frühling hat unsere Lockerung Kurve. Und wir werden die Spannung 500 machen. Und wir werden die Reibung auf zehn setzen. Und schließlich werden wir das um 1,2 Sekunden vergehen verzögern , wenn der erste Teil der Animationen ausgeführt wird. Damit wir diese zusammen choreografieren können. Und eigentlich, wenn wir nur einen kurzen Blick haben, weil ich hier auf eine ganze Reihe von Werten gepumpt habe. Aber Sie können sehen, wie die Dinge tatsächlich animieren Haar Vita Timeline. Und Sie könnten dies tatsächlich verwenden, um es zu rauen, wenn Sie verstehen wollen, wenn Sie hier optimieren wollen, können Sie Ihre Haare twittern, indem Sie Dinge vorwärts und rückwärts für Verzögerung bewegen . Und dann können Sie auch die Dauer von uns durch Ziehen ändern. Entweder. Entscheiden Sie, ob Sie den Rest ziehen, sehen Sie Ihre Änderung in der Verzögerung, sowie das Dauer System. Tun Sie das. Denn ich bin und wir setzen die Werte ein. Und das ist nur einen kurzen Blick und sehen, wie das aussieht. Server scrollen Sie nach unten, doppelklicken Sie auf meine Pipe. Es muss Favorit sein. Und das Thumbnail fällt in das Herz und das Herz reagiert, um in diesem Thumbnail zu absorbieren und macht diese kleine Bounce-Animation. Cool, gut, das vervollständigt die Lieblings-Animation. Und das bringt uns zum Ende dieses Videos. Hoffentlich gibt Ihnen dies einige weitere Ideen über die möglichen Dinge, die Sie tun können. Wir spielten mit einigen neuen Triggern und verbrachten viel Zeit mit Animationschoreografie. Im nächsten Video werden wir unseren letzten Blick auf Bewegung haben, indem eine Fantasie des Übergangs von einem Foto auf seinen Detailbildschirm hinzufügen. 23. Einen benutzerdefinierten Bildübergang erstellen: Hallo, da. In diesem Video werden wir einen benutzerdefinierten Übergang zu unserem Foto-Detail-Bildschirm erstellen. Bevor wir das bauen, wollte ich dir nur zeigen, wie das aussehen wird, was wir bauen werden. Also werde ich auf dieses Thumbnail-Bild hier tippen. Mit dieser Kundenüberstellung haben wir einen Übergang in diese Detailansicht. Und dann werde ich in der Lage sein, diesen Zurück-Button zu drücken und wieder raus zu gehen. Okay, also kommen wir zu F. Also, wenn Sie mitverfolgt haben, können Sie mit Ihrer bestehenden Akte weitermachen. Andernfalls können Sie die Starter-Datei öffnen, um dieses Kapitel angehängt ist. Okay, also navigieren wir zum Startbildschirm. Und wir werden diese Gesundheit Sie und diese Heul-Karte öffnen. Und wir werden nur kommen, um die Deckkraft der ganzen Sache hervorzubringen. Und dann wollen wir zuerst, diese Gruppe oder diesen geringeren Inhalt zusammen. So wird dies zu verschieben wählen , dass wir eine Gruppe sind, die zusammen und wir werden diese Karte Details nennen. Und wir tun das, weil wir es sein werden, später werden wir Animationen sein. Und das war eine große, große Gruppe. Ok, das ist also Versteck. Er ist gesund für eine Sekunde und wir gehen runter zu unserer Fotogruppe. Und wir werden Bildbaum finden, das ist das Bild, zu dem wir als glücklich oder benutzerdefinierte Übergang sein werden. Und wir werden das gruppieren, um es in einen Container zu stecken. Und wir werden diesen Container-Image-Baum nennen. Und wir werden wieder darauf zurückgehen, wie diese Gesundheit Sie unsere Hauptseite kopieren werden. Und wir werden es in unsere neu erstellten Bilder einfügen, die Treffer enthalten. Ok. Lassen Sie uns die Breite auf 163 reduzieren, aber im Grunde nach unten skalieren. Es hat also die gleiche Größe wie die Miniaturansicht. Wir erstellen hier effektiv ein Thumbnail. Und wir werden dieses Bild anpassen. Seine Position, so ist in der gleichen Position, hat die, hat den aktuellen Daumen jetzt. Und es ist gut. Und wir werden die Unterschicht abschneiden. So wählen Sie, wie Gruppe, und scrollen Sie den ganzen Weg nach unten und wählt Clip Sublayer Option. Das wird also alle anderen langsamen Inhalte verbergen, die hinzugefügt wurden. Wir werden den Radius dieser Conservancy 16 festlegen. Okay, jetzt sieht es aus wie unser ursprüngliches Miniaturbild. Okay, also werden wir unser neues Bild in Bildvergewaltigung innerhalb dieses Containers umbenennen. Und wir können jetzt sagen, durch bewegen unser altes Bild. Ok. Das ist also das erste Stück getan. Zu dem Problem, das wir haben, ist, dass wir dieses Bild haben, das sich innerhalb eines Scroll-Containers befindet. Aber wir, wenn wir öffnen die, wenn wir auf diese benutzerdefinierte, benutzerdefinierte Feeds gesund, wir wollen dies nicht. Diese müssen scrollbar sein und es wird abgescrollt. Es befindet sich immer noch innerhalb der Bildlaufansicht. Wir müssen also eine Möglichkeit finden, die Exposition immer noch mit der Scrollansicht zu verbinden. Aber auch, wenn wir darauf tippen, damit es außerhalb der ScrollView ist. Offensichtlich müssen wir immer noch das Thumbnail scrollen lassen. Die Art und Weise, wie wir das tun werden, wird einen Trigger namens Kette verwenden. Ich werde tun, ist, dass wir unseren Bilderbehälter duplizieren. Und wir werden diese Bildkette umbenennen. Und wir werden es außerhalb des Scrollens bis zur Hüfte unter diesen gesunden bewegen . Und mit der Seite enthält man eine ausgewählte Kleidung. Okay, mit der Seite eine Scrollansicht ausgewählt, werden wir eine Änderung hinzufügen, wo wir an die Scroll-Position verketten werden. Das ist also standardmäßig, also das ist gut. Und wir werden wählen, wie Bildkette Gruppe Gruppe. Und wir werden zu diesem Auslöser hinzufügen, wir werden einen Zug hinzufügen. Ok. Wenn wir also eine, einen Trigger zu einer, sorry, eine Antwort auf den Kettenauslöser hinzufügen einen Trigger zu einer, sorry, , erhalten wir diese andere Art von Box und die Art und Weise, wie sie verketten, verbindet sie Bereiche. Wir würden also nicht sehen, dass der Bewegungsbereich der Bildlaufansicht auf einen Bewegungsbereich bei der Bewegungsantwort für unsere Bilddatenkettengruppe verkettet wird. Also zuerst, wir werden in diese Hälfte passen, die der Bereich der Scroll-Ansicht ist. So Scroll-Ansichten weg beginnen bei 0. Das ist also ein schöner, einfacher Ausgangspunkt. Und wir werden es einfach so einstellen, dass tausend Pixel scrollen. Daher müssen wir nun die y-Position unserer Bilddatenkette auf diesen Bereich von Nullen unter 1000 abbilden. Das erste, was wir tun müssen, ist in Ordnung und Position. Und wir können hier sehen ist, dass zu acht. So ist es schön zu wissen, dass unsere Ausgangsposition. Und weil wir eine Eins-zu-Eins-Zuordnung zwischen dem Bereich des Scrolls und der Geschwindigkeit des Verschiebens haben wollen . Wir müssen sicherstellen, dass sie die gleiche Anzahl von Pixeln bewegen. So funktionieren Bildlaufansichten in die entgegengesetzte Richtung und bewegen sich in die entgegengesetzte Richtung zu Objekten, die sich unterhalb des Bildschirms bewegen. Derzeit beginnt also die Position eines Objekts in der oberen linken Ecke. Und alles, was draußen oben ist, wird negativ sein, und alles, was unten wird im Positiven sein. Für Scrollen funktioniert es jedoch in die andere Richtung. Also up ist positiv und das ist negativ. Also müssen wir die umdrehen. Und die Industriekette beginnt zu AAA und wir mussten tausend Pixel bewegen. Also müssen wir nur ein bisschen Karten machen. Und wir müssen nur diese 28 Tausend minen und das gibt uns minus 712. Also, das bewegt sich jetzt von zu a zu minus 712, das ist eine 1000 Pixel. Und das passt direkt zu unserer Scrollansicht, die sich von 0 Position auf 1000 Pixel bewegt. Okay, also lassen Sie uns das einen Test machen. Sie können sehen, dass sich das bewegt und seine genaue Position. Wenn das ist, wenn ich die Over Scroll ziehe, können Sie das andere Bild darunter sehen. Okay, also werden wir das in Ordnung bringen. Also gehen wir zurück zu unserer Akte. Und wir werden die Deckkraft der Bilddaten auf 0 reduzieren. Und das wird zwei Dinge beheben. Erstens, es wird das Bild verbergen, damit wir das nicht über Scroll sehen. Und Nummer zwei ist, wenn ein Benutzer sich entschieden hatte, durch Tippen auf dieses Bild zu blättern , wird dieses Bild, weil es 100% ist und außerhalb des Bereichs liegt, die Bildlaufansicht blockieren. Also müssen wir Opazitätstheorie so sein, dass es nicht im Weg steht. Okay, cool. Als nächstes werden wir die Aufmerksamkeit auf die eigentliche Übergangsanimation lenken. Das erste, was wir tun müssen, ist, dass wir diesen Tap Trigger reparieren müssen. Also müssen wir auf Trigger tippen, um auf unsere Bilddatengruppe zu zeigen, die die Gruppe innerhalb unseres Scroll-Containers ist. Okay, das ist cool. Und wir können diese Kapazität entfernen. Und wir werden eine neue Deckkraft hinzufügen. Und wir werden das Bild drei Kettengruppe anvisieren. Und wir werden seine Deckkraft auf 100 einstellen. Wir werden auch die Dauer auf 0 setzen Cuz wir wollen, dass sofort erscheinen. Als nächstes fügen wir eine Skala hinzu. Und wir können die Industriekette, 2359764, Atombewegung skalieren 2359764, . Und wir werden die Bildkette 240 nach unten verschieben. Okay, also im Grunde diese beiden Antworten skalieren unseren Daumen jetzt und kommen in die richtige Position, so dass es unserer ursprünglichen Detailansicht entspricht. Ok. Wir werden jetzt müssen wir die Größe des Bildes im Inneren so auf eine bestimmte Position. Also lassen wir unser Bild drei und wir werden eine Skala hinzufügen. Und wir werden das auf 359 mal 8 setzen . Okay, also lassen Sie uns das testen, sehen, ob das funktioniert Code. So können wir hier sehen, wir haben unsere Bilder skaliert. Wir können sehen, dass wir unsere obere Hälfte unseres Containers haben, aber wir können sehen, dass es diesen leeren Raum gibt und Sie können immer noch das Bild darunter sehen. Okay, also was wir tun werden, ist, dass wir zurück gehen. Wir werden tatsächlich den Hintergrund der Bilderkette auf eine 100 setzen. Und wir werden wieder in sind diese gesund? Wir werden unseren Hintergrund greifen, das ist, wie Claire Dosen Hit Box und deren TNC jetzt der Hintergrund der ListView, es wird, dass unter wie Bildkette bringen. Und wir werden diese Deckkraft auf 0 reduzieren. es ausgewählt halten, fügen wir unserem Auslöser eine weitere Deckkraft Antwort hinzu. Und wir machen die, die Hintergrund-Shim 70%. Okay, wir gehen zurück zu unserer Bilderkette und fügen einen Radius hinzu. Also wollen wir die Krümmung der ändern, dieses ursprünglichen Thumbnail, die 16 Pixel ist. Wir wollen, dass wir diesen Radius vergrößern, damit er den Telefonformen entspricht, und wir werden den Radius zwei von 16 auf 32 ändern . Und lassen Sie uns das testen. Das sieht also so aus. So können wir jetzt sehen, dass wir unsere Ecken mit größerem Radius haben. Wir wären nie weißer Hintergrund. Wir haben diesen schönen Radius, der unseren Handys entspricht. So sieht es aus wie die Kundenwende, die ich Ihnen am Anfang gezeigt habe. Okay, also gehen wir zurück zu unserer Akte. Okay, als nächstes müssen wir unsere Inhalte und Steuerelemente unter dem Bild zurückbringen. Wenn Sie sich erinnern, weit zurück zu Beginn dieses Videos, wir gruppieren sie zusammen in einen Behälter und wir nannten es geschnitzt dieses Haus. Also lasst uns gehen und finden, dass DES genannt wird. Wie geht's der Gruppe? Wir haben ein Hier und wir werden das kopieren. Und wir werden diese Intel Bilddatenkettengruppe einfügen. Und wir werden seine y-Position 2561 festlegen. Okay, das sind Tests, die, sehen, ob das wahr ist. Das war wie, OK, also tippen Sie darauf und wir können sehen, dass unser unterstes Konzept jetzt in Position kommt. Ok, also hat sich das wieder ausgespielt. Okay, also das ist, wir werden es mit koppeln und bezahlen. Das ist, um sicherzustellen, dass Animation sucht. Also gehen wir zurück zu ihm. Das ist unsere Quad Leads behalten. Diese Haus selektiv. Wir werden, wir werden ihre Passwörter ändern 0. Und wir werden eine Deckkraft Antwort auf unseren Tap Trigger hinzufügen. Und wir werden die Deckkraft auf 100 setzen. Und wir geben ihm eine Dauer von 0 Punkt drei und eine leichte Verzögerung oder 0,1. Also schauen wir uns das an. Hey, ich, das ist jetzt nur verblasst und wir hatten keine Art von unten, wie es vorher war, mit etwas seltsam. Okay, also sieht alles gut aus. Das letzte, was wir tun müssen, ist, den Zurück-Button zurückzubringen , damit wir unseren umgekehrten Übergang machen können. Also lasst uns gehen und zurückgreifen. Also, wenn wir in, wie diese sehen wieder gehen, nehmen wir unsere Rucksäcke und wir werden das kopieren. Und wir werden das in den Geräteknopf zwei einfügen. Und wir werden seine Position festlegen. Also wird x sieben sein, wird acht sein. Und wir müssen auch unsere Ziele auf Outs ausschalten haben Trigger, also müssen wir unsere ursprüngliche Tap Back-Taste finden und wir müssen zwei Schalter finden, wechseln Sie das. Okay, das letzte, was wir tun müssen, ist die umgekehrte Animation hinzuzufügen. Also lassen Sie uns dieses Zurücksetzen auf die Zielbildkette ändern. Und wir werden einen weiteren Reset hinzufügen. Und dieses Mal werden wir den Hintergrund anvisieren. Shim Scrim, hol das richtige Wort. Und dann werden wir endlich ein drittes Resets hinzufügen. Und wir werden das Bild Baum Bild Ziel. Und es gibt ein paar Bilder, die gleich herumstochen, aber stellen Sie sicher, dass Sie das Richtige haben. Du konntest es nicht. Sie können sehen, wenn Sie eine Auswahl hier haben, es wird in Ihrem Ebenenbedienfeld hier ausgewählt. So können Sie sehen, dass dies derjenige ist, den wir tatsächlich zurücksetzen möchten. Und wir wollten die Dauer und ein wenig auf 0,3 ändern. Okay, das ist gut. Dieser Test. Also werden wir auf unser Bild klicken ist irgendwie groß. Wir werden unser Rückgrat treffen und es wird wieder groß sein. Das sieht ein bisschen schnell aus. Also gehen wir einfach zurück zu unseren Resets und ich denke, wir haben sie wahrscheinlich alle auf die frühen Trails geändert. Probieren Sie das aus. Test hat das etwas besser. Ok? So können wir sehen, dass es nicht schlecht ist, aber es ist nicht perfekt. Und wenn wir ein wenig scrollen und es dann öffnen und schließen, können wir sehen, dass es nicht wirklich zurück notwendigerweise zum Positionierer, Perfekte Position, wo es war. Er ist dahin zurückgegangen, wo es ursprünglich war. Aber es ist nicht so schlimm für den Moment. Wir werden wieder zu dieser Hand kommen. Wir werden diese Probleme beheben. Aber tun Sie das, wir müssen über Formeln lernen. Okay, das war also ein langes Video. Ich hoffe, ich habe ein großes Gehirn a2 viel. Wir haben es geschafft, ziemlich schnell immer noch mit so ziemlich dem gleichen Zeug, das wir zuvor gelernt haben. Und wir hatten ein bisschen mehr Übung, Bewegung zu schaffen. Im nächsten Video werden wir den Start-Login-Übergang erneut besuchen, da es einige Dinge gibt, die wir beheben müssen, bevor wir in Formeln im nächsten Abschnitt. 24. Erstellen von benutzerdefinierten Übergänge mit Reset und der Timeline: Hallo, da. Also in diesem letzten Video, Blick auf Bewegung, gehen wir zurück zum Anfang unserer App. Wir schauen uns das Zeug auf den Login-Bildschirmen an. Und wir werden einen benutzerdefinierten Übergang zwischen diesen beiden Schreien hinzufügen. Wenn wir nur eine Rezension von dem, was wir bisher haben, haben wir den Login, nicht konzentriert Ausgabe auf m, aber wenn Sie sich erinnern, haben wir einen Zurück-Button in einem vorherigen Video hinzugefügt. Und wenn ich diesen Zurück-Button drücke, können Sie sehen, dass das nur ein grundlegender Übergang ist. Und auch unser erstes Grün baut nicht ein. Die Komponenten fehlen, also werden wir das beheben. Okay, also das ist einfach aktualisieren und zu unserer Akte gehen. Und wir werden mit der mit dem Start s2 räumlich auf das Mitarbeiterteam beginnen, wenn Sie entlang folgen, weiter mit Ihrer Datei. Andernfalls können Sie für dieses Video eine Starterdatei herunterladen. Also fangen wir jetzt an zu sehen, und was wir tun werden, ist, dass wir einen Startauslöser hinzufügen. Und wir werden einen starken Trigger hinzufügen, weil wir wollen und Animationen, die es automatisch ausführen, wenn die Szene geladen wird. Also heute starten Trigger, wir werden dieses Feld zurücksetzen, jedes Mal neu starten. Dies, dieser Neustart jedes Mal bezieht sich auf die Junk-Antwort zu springen und wir verwenden Junk-Antworten, um von Szene zu Szene zu navigieren. Deshalb ist dieses Kontrollkästchen nicht zu. Und wir werden für jedes einzelne Objekt, das wir in unserer Animation haben, einen Reset hinzufügen. Also haben wir ein Logo mit Riemenlinie. Wir haben die primäre CTA, wir haben das Tertiär-CCA. Also müssen wir für jede von ihnen eine Reset-Antwort hinzufügen. Also werde ich den ersten Schritt tertiären CCA, und ich werde einen Reset hinzufügen. Dann werde ich den primären CTA auswählen. Bei einem Reset. Als nächstes wird das Logo sein. Und ich werde dort einen Reset hinzufügen. Und schließlich werde ich einen Reset für die Gurtlinie hinzufügen. Ok? Was wir hier effektiv tun, ist, wenn der Startvertrag geladen wird, werden wir die Ausgangsposition dieser Objekte zurücksetzen. Wenn wir also auf den Tipp-Trigger oben tippen, wird das unsere Objekte in einen bestimmten Positionszustand animieren und es wird sie verlassen. Da. Wird sich an diesen Aufenthalt erinnern. Wenn wir auf diesen Bildschirm zurückkommen, wollen wir eine Animation ausführen, die zurücksetzt und zurück in ihren ursprünglichen Zustand. Also lasst uns einen schnellen Test machen, um zu sehen, was wir bisher haben. Also tippen wir auf den Login. Wir gehen zum zweiten Anmeldebildschirm. Wenn wir zurückschlagen, wird es diese auslösen. Und Sie können sehen, dass sie alle auf einmal kommen. Sie haben, sie haben alle die gleichen Bewegungseigenschaften. Und wir wollen das ändern, so dass besser die Umkehrung der benutzerdefinierten Animation nachahmt , die wir in der ersten Instanz haben. Also, bevor wir das tun, werden wir Reese einfach diese Antworten umbenennen, damit wir verstehen können , was jeder ist im Moment, sagen sie alle Rezeptor ein bisschen verwirrend. Nennen wir diesen einen tertiären CTA. Als Nächstes drauf, primäre CTA, Logo. Und schließlich Strap Line. Ok. Für diese Situation. Und nur damit wir mit der Timeline spielen können, werde ich die Timeline verwenden, um diese Bewegungseigenschaftswerte zu ändern. Ich möchte Ihnen nur zeigen, wie Sie diese Highline nutzen können und wie sie optisch nützlich sein kann , wenn Sie choreographierte Animationen wie diese machen. Lets zuerst, diese Arbeit von oben nach unten. Also die tertiäre CTA, ich möchte, dass dominant bis 4,6 pro Sekunde dauern. Also werde ich das einfach auf 0,6 ziehen. Sie können sehen, dass wir noch die Eigenschaftswerte hier haben. So können wir sicherstellen, dass wir auf der rechten Seite sind, auf der richtigen Menge. Und ich werde die Verzögerung bei 0 belassen, weil ich möchte, dass dies zuerst läuft. Als nächstes bin ich Gaines, die die gleiche Dauer von 0,6 befriedigen. Und Sie bemerken es Art von Druckknöpfen Auferlegung. Das ist also sehr hilfreich. Und für diesen bin ich, wenn du es um 0,2 Sekunden verzögerst, Kabel-Logo, wir werden es bei der Dauer von 0,2 Sekunden belassen. Aber wir wollen, dass das erst passiert, wenn wir eine Sekunde in unserer Animation sind. Also bringen wir sie auf 1 Sekunde raus. Und dann endlich die Gurtlinie. Wir werden auch die Dauer bei 0,2 belassen. Aber wir wollen, dass dies zuletzt geschieht, und wir wollen, dass das bei 1,3 Sekunden geschieht. Ok? Die andere Sache, die wir tun wollen, ist, dass wir einen Blick zurück auf unsere ersten Bewegungen Antworten für die beiden Tasten, die wir sehen können, dass wir Interpolate mit zurück verwendet haben. Also wollen wir das auch in unserer umgekehrten Animation replizieren. Wählen Sie also Shift aus, wählen Sie Tertullian Primary CTA und verfolgen Sie den Kubikwert, interpoliert ihn zurück. Okay, lassen Sie uns den Test geben. Also loggen wir uns ein, wir bekommen unsere erste benutzerdefinierte Animation. Und dann gehst du zurück und wir bekommen, wie Animation? Okay, das sieht ziemlich gut aus. Das ist also die erste Hälfte der Kosten für Animation, die wir dieses Video erstellen. Als nächstes werden wir die hintere Animation erstellen, die der Ausgang aus dem Anmeldebildschirm ist. Also das ist Gehen Sie rüber zu unserer Login-Szene. Und wir werden zuerst die Schaltfläche Zurück auswählen. Und Sie werden feststellen, dass ich dies wahrscheinlich einige Male in früheren Videos erwähnt habe, aber wenn Sie etwas in der Ebenenpalette im letzten Panel auswählen, werden automatisch alle Verwendungsinstanzen davon in Ihren Triggern ausgewählt, die wirklich verwendet Schweden CS ist hellgrau, Highlight hier. Vor allem, wo ich mehrere TAP-Trigger habe und ich nicht sehr gut darin war , sie zu benennen, die wirklich tun sollten. Aber das ist, ist, dass wir diese zwei Trigger haben, also gibt es hilft uns, den richtigen zu finden. Ok. Also werden wir uns die Sprungantwort ansehen. Und Sie können hier sehen, wir haben, wir haben zuvor, hey, grundlegende Übergänge. Wir werden den Übergang drehen, den wir auf keinen setzen werden. Ok? Und wir gehen zu unserem ersten Stop-Auslöser. Und das ist dieser Start-Trigger ist der Trigger, der im Grunde alle unsere Objekte in ihre Anfangspositionen setzt. Und wenn Sie sich erinnern, die Art, wie wir diese Animation gemacht haben, war, dass wir die Star Trek zwei Sätze von Anfangspositionszuständen verwenden . Deshalb ist die Dauer und Verzögerung 0. Und dann verwenden wir bei diesem zweiten Sternauslöser, um die Befragten zurückzusetzen, um sie wieder in ihren ursprünglichen Zustand zurückzusetzen. Und so haben wir dies und Summierung erstellt, da wir zurückgesetzt haben, um die erste Eintragsanimation zu erstellen, können wir in diesem Fall nicht zurücksetzen verwenden, um die nächste Animation zu erstellen. Wir müssen einige Standard-Bewegungstechniken verwenden, um das zu schaffen. Das ist es, was wir jetzt tun werden. Also gehen wir zurück zu diesem ersten Startauslöser, und wir werden ausgewählte Antworten verschieben. Wir werden sie kopieren, und wir werden sie in unsere Backup-Buttons einfügen haben Auslöser. Und, aber stellen Sie sicher, dass ich meine, das ist nicht unbedingt super wichtig, denn wie ich bereits sagte, Dauer und Verzögerung entscheiden, wann die Dinge ausgeführt werden, aber nur für und Ihre Vernunft, denke ich. Und um sicherzustellen, dass Sie beim Betrachten die Reihenfolge von Dingen sehen können, wie, neige ich nur dazu, die Reihenfolge immer noch beizubehalten oder versuche, die Reihenfolge dieser Dinge in der Reihenfolge zu halten, die sie ausführen. Also werden diese Objekte zuerst passieren und die Sprünge können zuletzt passieren. Also sind wir auf den Grund gesprungen. Ok? Wir werden unsere Aufmerksamkeit zuerst auf die Opazitätsreaktion richten und ihre Dauer auf 0,2 setzen. Als Nächstes beschäftigen wir uns mit dem Verschieben von Antworten , die die Eingabefelder und den primären CTA steuern. Das sind also Verschiebungen, die diese passieren. Und wir werden die Dauer auf 0,6 setzen. Wir wollen, dass sie sich beide gleichzeitig bewegen. Aber wir wollen auch tun, wir wollen, wieder, wenn wir uns diese ansehen, von diesen Reset, Wir haben wieder Interpolator. Daher möchten wir auch für diese beiden Objekte einen Back-Interpolator zu unserer Reverse-Animation hinzufügen . Und nur um einen Blick dort zu werfen. Also haben wir, in der Tat, wir können es hier am Ende sehen. Dies ist ein weiterer Grund, warum die Timelines ganz verwenden, wo Sie sehen können, die Leistungskapazität ist Art von R1 und R2 Züge werden alle zur gleichen Zeit laufen, die Schnecke Feind zur gleichen Zeit. Und Sie können die Job-Antwort sehen, was dieser kleine Punkt ist, der auch sofort ausgeführt wird. Offensichtlich, wenn unser Sprung sofort springen, werden wir keine dieser Animationen sehen. Also müssen wir tatsächlich sicherstellen, dass ich springen nach den Animationen von ausgeführt geschieht. Was wir also tun werden, ist, wenn ich mich hingesetzt habe, werden die Antworten eine Verzögerung hinzufügen. Alle 0.06, die längste Dauer für AR-Objekte ist 0.6. Und wir werden gehen wir sicher wissen, dass alle Animation abgeschlossen ist. Und wir werden auch sicherstellen, dass alle Startantworten, die wir hier haben, diese doppelte Überprüfung, dass wir wollen, dass sie alle jedes Mal neu gestalten. Und das wollen wir tun, weil wir Sprünge für den Übergang verwenden. Wir wollen also, dass diese Dinge geschehen, diese Animationen jedes Mal passieren, wenn wir hin und her springen. Ok? Also ich denke, das ist alles, wird einfach zurück zum Anfang zu sehen. Und wir werden eine Vorschau unserer neuen Updates und benutzerdefinierten Animationen. Also tippe ich in meinem Eintrag schauen, benutzerdefinierte Animation auf dem Anmeldebildschirm. Und wenn ich dann zurückstöße, werde ich meine gewohnte Rückenanimation auf den Startbildschirm bringen. Ok, cool. Damit ist der Fix für diesen benutzerdefinierten Übergang für dieses Video abgeschlossen. Auch Runden des Bewegungsabschnitts. Im nächsten Abschnitt werden wir die Welt der Bedingungen und Variablen erkunden. Dies sind zwei wirklich leistungsstarke Funktionen, die es uns ermöglichen, echte Logik in unsere Prototypen zu integrieren. Und dass dies nur die Dinge noch realistischer aussehen lässt, wird wirklich cool sein. Und dann werden wir in dieser Fähigkeit verwendet werden, um einen echten Login zu machen. Außerdem, was wir im nächsten Abschnitt tun werden, ist die Möglichkeit für Benutzer zu geben , Fotos, die sie Favoriten haben zu sehen. Wir werden also etwas Personalisierung mit unseren neuen gefundenen Fähigkeiten hinzufügen . Wir haben Bedingungsvariablen. So sehen wir uns im nächsten Abschnitt. 25. Anmeldung mit Bedingungen machen: Hallo, da. In diesem Video werden wir Bedingungen verwenden, um die Logik hinter unserem Login-Formular zu erstellen. Wir werden sowohl Erfolgs- als auch Fehlerzustände mit einigen zugehörigen Messaging erstellen . Also, wenn Sie entlang der Schuhe verfolgt, um zu scheitern, dass Sie, die Sie haben. Wenn Sie nicht mitverfolgt haben, dann können Sie die Starterdatei herunterladen, die zu diesem Video gehört. Okay, also fangen wir natürlich mit unserem Login-Bildschirm an, stellen Sie sicher, dass Sie zur Login-Szene gehen. Und wir werden zuerst, wir werden einige dieser Ebenen umbenennen, weil sie ein bisschen verwirrend sind. Also werden wir diese, diese erste Schicht umbenennen und nach Hause gehen. Und wir werden diese Ebene umbenennen, zurückgegeben. Der Fokus, wir werden Focus weiblich nennen. Dies wird zurück sein, weil es mit unserem Zurück-Button verbunden ist. Dieser erste Star Trek und wir werden kinetische Initiale pro Einweihung nennen. Und das liegt daran, dass wir einige unserer, einige unserer Staaten hier initiieren . Das ist der Grund, warum normalerweise meine Top-Gruppe anrufen, wenn ich irgendwelche, irgendwelche, irgendwelche, irgendwelche Mitarbeiter haben, um diese einzurichten, wir werden das Intro coole. Dies ist, wie Intro Animation. Und lassen Sie uns lesen, organisieren, sie sind in einer guten Ordnung. Ich werde es hier unten heraufbringen. Das ist in Ordnung. Das ist alles. Gut. Ok. Nun, wir lassen es bei dem Holder-Fall, den wir drin haben. Introfokuss-E-Mail geht an die Startseite, kehrt zu ihr zurück und tippen Sie zurück. Eine letzte Sache, die ich tun werde, ist, dass ich diese beiden Gruppen wieder gruppieren werde. So kann ich, ich kann gruppieren, ich kann Gruppen von Gruppen gruppieren. Also werde ich eine Gruppe einer Gruppe zusammenfassen, Vega. Das ist also eine wirklich gute Möglichkeit, Ihren letzten Stack, Ihren, Ihren Interaktion-Stack zu organisieren , sollte ich sagen, weil es ziemlich lang werden kann. Wie Sie mehr und mehr Funktionalität hinzufügen, wird Hauskoch offenlegen. Okay, das erste, was wir tun werden, ist, dass wir die Logik für das E-Mail-Feld erstellen. Also lasst uns zu unserem Home-Abzug gehen. Und wir werden eine Bedingung hinzufügen. Und wir werden die E-Mail-Eingabe wählen. Und Sie können hier sehen, dass wir eine ganze Reihe von Eigenschaften haben, die wir anvisieren können. All-weibliche Impuls bewusst, lernen und suchen Sie nach der Texteigenschaft. Und Sie können hier sehen. Wir haben ein paar verschiedene Optionen, wie wir diese Bedingung einrichten wollen. Also suchen wir nach Gleichheit. Also wollen wir den Wert des Textfeldes auf einen bestimmten Wert abgleichen. Also werden wir das gleich halten. Und wir werden den Wert festlegen. Du kannst, du kannst hineinlegen, was du willst. Ich werde nur meine E-Mail-Adresse eingeben. Ok? Und wir werden jetzt unsere Sprungbedingung nehmen. Ich werde es in die Kabine bringen. Responsive sagt, hey, ich werde in den Sprungzustand bewegen. Ok. Also gehen wir einfach und machen einen Test. Und was ich Ihnen nur zeigen möchte, ist, dass wir jetzt eine Bedingung nennen, die nach diesem besonderen Wert hier sucht. Also, wenn wir einfach etwas eingeben und auf Weiter klicken, wir nicht auf den Home-Bildschirm weitergehen. Und das liegt daran, dass wir den Sprung gemacht haben. Die Antwort befindet sich jetzt innerhalb dieser Bedingung, also ist dieser Sprung falsch, wird nicht ausgeführt, es sei denn, diese Bedingung entspricht wahr. In diesem Fall gebe ich diese E-Mail-Adresse in das E-Mail-Feld ein. Okay, nur um dir zu zeigen, dass es tatsächlich funktioniert, das ist politisch korrekt. Und wenn ich fortfahre, können Sie sehen, dass ich auf den Startbildschirm gehe. Ok. Das ist also die erste Bedingung, die eingerichtet wurde. Offensichtlich, für eine Anmeldung, Sie brauchen sowohl sie, eine E-Mail und ein Passwort oder einen Benutzernamen und ein Passwort und jetzt Fälle und E-Mail und Passwort. Also, das ist eine weitere Bedingung hinzufügen. Und dieses Mal werden wir einen Zustand an einem anderen Ort hinzufügen. Wir werden nicht eine ganz neue Bedingung hinzufügen, wie wir, wie wir es normalerweise vom unteren Rand des Menüs tun, können wir tatsächlich eine weitere hinzufügen, einen weiteren Vergleich zu unserer einzigen Bedingung. Und so können Sie einer Bedingung mehrere Unterbedingungen hinzufügen. Und Sie können darüber nachdenken, wenn Sie etwas mit mehreren Werten vergleichen müssen. Also all diese, all diese mehrere Werte müssen wahr sein , damit diese Bedingung ein Erfolg wird. Und genau das müssen wir tun. Ihre Anmeldung, wir beide benötigen die E-Mail und das Passwort, um korrekt zu sein , bevor wir jemand in den Home-Bildschirm erlauben. Es gibt also einen App-Button, den Sie vielleicht oder nicht bemerkt haben, nur unten unten hier. Also werden wir das drücken, um eine zweite Bedingung hinzuzufügen. Und dieses Mal werden wir das Passwort-Eingabefeld auswählen. Wir gehen und die Text-Eigenschaft wieder, es wird der gleiche Vergleich sein. Und dieses Mal werden wir ein Passwort eintragen. So können Sie einfach ein Passwort erstellen. Ich werde nur einen Passwortwert erfinden. Ok? Und wir werden das testen. Also jetzt, wenn ich meine E-Mail-Adresse eingeben, aber ich werde es in das falsche Passwort setzen. Es ist kein Alanin. Wenn ich das richtige Passwort einfüge. Es erlaubt mir rein. Es sucht also und vergleicht diese beiden Bedingungen und stellt sicher, dass beide wahr sind, bevor diese Sprungbedingung ausgeführt werden kann. Okay, cool, also das war's für dieses Video. Im nächsten Video werden wir mit der integrierten Logik für die Lautstärkeform fortfahren. Und wir werden im Moment einige Fehlerbehandlungs-OC einbringen. Wenn Sie in die falschen Anmeldeinformationen, das Kabel einfach verschwand und wird nur leere Bildschirm Arena ging los. Also wollten wir etwas tun, um die Benutzererfahrung hier ein bisschen besser zu machen. Und damit wir einen benutzerdefinierten Fehlerstatus hinzufügen werden. So sehen wir uns im nächsten Video. 26. Fehlerzustände beim Login behandeln: Hey, da. In diesem Video werden wir unseren Schritt fortsetzen, unsere Login-Logik, und wir werden uns damit beschäftigen, wie die Schnittstelle reagiert, wenn wir die falschen Anmeldedaten eingeben. Da dies aus Sicherheitsgründen ein Login ist, möchten wir nicht darauf hinweisen, welcher Wert falsch ist. Also werden wir nur eine generische Nachricht zeigen, die der Benutzer hat, bekam einige Informationen in Rom. Also, um das zu tun, gehen wir und schnappen uns einen Vermögenswert. Also, das ist überspringen zu Feige, Scatch oder Adobe XD abhängig von was, welches Programm wir verwenden. Ich benutze Sigma und ich bin nur, ich habe diese Fehlermeldung. Hey, Sie können offensichtlich eine MSD erstellen. Nun, wenn du willst, oder du kannst das Asset kopieren, das ich für dich erstellt habe. Und wir werden das nur als SVG kopieren. Und wir gehen zurück zu PowerPoint und fügen unsere Grafik ein. Weil es SVG ist. Wie üblich müssen wir es mit drei multiplizieren, um die richtige Größe zu erreichen. Und wir werden es einfach irgendwo unten in diesem Raum hier unten platzieren , muss nicht super exakt sein. Und wir werden seine Fehlermeldung umbenennen. Und wir werden uns umdrehen, um t auf 0 zu übertreffen. Ok, also gehen wir zurück zu unserem Zustand und wir werden diese Bedingung tatsächlich umbenennen, um den Erfolg der Anmeldung zu erreichen. Also begannen sie, ein paar weitere Bedingungen zu schaffen. Also wollen wir sicherstellen, dass wir wissen, was wir tun. Und wir werden jetzt sehen, wie diese Bedingung dupliziert wird. Also Befehl D Kontrolle Deal Fenster, und wir werden diese E-Mail zu nennen scheitern. Wir werden den Sprung entfernen, weil dies ein Szenario mit unserer Jumpstart Home-Szene sein wird. Und wir werden in den Zustand gehen und wir werden den Vergleichsoperator hier ändern. Also statt gleich, wollen wir, dass es nicht gleich ist. Und nicht gleich ist dieses kleine Gleichheitszeichen bei der durchgestrickten Liebe Diagonale durch sechs. Möchten Sie für beide auf nicht gleich umschalten. In unserem, in unseren Antworten, werden wir die Fehlermeldung auswählen und wir werden eine Kapazität hinzufügen. Und wir werden das in eine 100 ändern. Also werden wir im Grunde in der Fehlermeldung verblassen. Wir werden auch ausblenden Eule weiter Taste. Also unsere primäre CCA, wenn wir mit angefangen haben, wählen wir das aus. Und wir werden auch eine Deckkraft hinzufügen. Und sie werden es auf 0 abreißen. Ok? Wir werden diese Bedingung jetzt noch einmal duplizieren. Also die, die wir gerade erschaffen haben. Und wir werden den Namen ändern, ich nenne dieses Passwort fühlte. Während wir also eine erfolgreiche Bedingung hatten, in der wir, brauchten wir beide dieser E-Mail und Passwort, um wahr zu sein, um den Benutzer in zu ermöglichen. Diese beiden Bedingungen, wir wollen diesen zusammengesetzten Zustand hier nicht haben , denn im Grunde, wenn ein Benutzer die E-Mail falsch bindet, aber tatsächlich das Passwort richtig bekommt, wird das immer noch nicht, das wird nicht, das wird nicht einen Vergleich der erfolgreichen Vergleiche bei s haben, also wird es scheitern, was falsch wäre. Also brechen wir unsere L2-Bedingungen in zwei separate Blöcke auf. Also für E-Mail-Datei, wir wollen nur, dass die E-Mail-Bedingung ausgeführt wird, so dass wir nur zu treffen, um die Passwort-Bedingung zu entfernen. Und ähnlich auf der Passwortdatei müssen wir die E-Mail-Bedingung entfernen. Also im Grunde haben Sie jetzt einen, den Zustand in jedem. Und diese werden einfach einzeln laufen. Was dies zulässt, ist, dass der Benutzer beide Anmeldeinformationen falsch bekommen kann, Ball, entweder eine korrekte und die andere Rolle bekommen kann. Und sie werden immer noch den Fehler erhalten, die Fehlerbehandlungsmeldung. Also, das ist nur dieser Test, so Predators in falsche Anmeldeinformationen setzen. Ich bekomme die Nachricht. Wenn ich tatsächlich ein korrektes Passwort eingebe. Aber ich habe das falsche Passwort eingegeben. Ich erhalte auch die Fehlermeldung. Es befasst sich also mit all den verschiedenen Szenarien. Das sieht also gut aus. Okay, als nächstes müssen wir uns mit dem Staat auseinandersetzen. Nach einem Fehler möchte der Benutzer es erneut versuchen. Wenn wir zurückgehen und eine Vorschau auf diese, wenn ich habe, wenn ich die falschen Anmeldeinformationen einfüge und ich auf Weiter klicke, wird mir den Fehler geben, aber auch gibt es keine Möglichkeit, dass ich auf die Schaltfläche Weiter zurückkomme. Daher brauche ich eine Möglichkeit, das Formular zurückzusetzen, damit der Benutzer es erneut versuchen kann. Okay, das ist es, was wir tun müssen. Also, aber um das zu tun, was wir tun werden, ist, dass wir unsere zwei Deckkraft kopieren. Und wir gehen zum Fokus-Email-Trigger und fügen sie hier ein. Das zieht drunter. Und was wir tun werden, ist, dass wir diese umkehren werden. Also die RMSE wollten wir verschwinden und der Call-to-Action, der Login, aber wir wollten hier wieder aufmachen. Außerdem müssen wir den Jungen kopieren, die bedingte Logik. Also diese drei bedingten Blöcke, und wir müssen es auch in unseren Return Key Trigger hinzufügen. Wenn Sie sich erinnern, gibt es zwei Möglichkeiten, wie wir das Formular absenden können. Wir können entweder durch Gesetz weiter drücken, wir können schlagen, da gab es Sankey, damit wir diesen Sprung entfernen können. Und wir können einfach die ganze Menge hier reinkleben. Okay, also haben wir unsere bedingte Logik in beiden Interaktionen. Dies ist, wenn der Benutzer die Schaltfläche „Weiter“ drückt oder wenn der Benutzer auf der Home-Taste auf „Return“ klickt. Das haben wir auch hinzugefügt. Dies sind Pastoren, die den Fokus E-Mail, so dass, wenn der Benutzer erhält eine dieser Anmeldeinformationen, dann kann er auf das E-Mail-Feld tippen und die Schaltfläche Weiter zurück erhalten. Eine letzte Sache, die wir tun müssen, ist, dass wir nur diese Fokus-E-Mail duplizieren müssen , weil wir es nicht getan haben. Wir müssen es auch dem Passwort-Feld hinzufügen, nur für den Fall, dass sie das Passwort falsch haben. Also werde ich dies umbenennen, um Passwort zu fokussieren. Und wir werden nur das Ziel in das Passwortfeld ändern. Ok? Also, wenn wir es vorziehen , dass, wenn ich die falschen Konventionen in und ich drücke weiter, und wir erhalten die Fehlermeldung. Wenn ich in das E-Mail-Feld tippe, bekomme ich die Schaltfläche Weiter zurück. Und wenn ich dann auch in das Passwortfeld tippe, bekomme ich auch die Schaltfläche Weiter zurück. Ok, genial. So haben wir jetzt eine funktionierende Form echter Logik. Als Nächstes werden wir einige Variablen verwenden, um den Login noch flexibler und dynamischer zu machen. So sehen wir uns im nächsten Video. 27. Variablen für den Login verwenden: Hallo, da. In diesem Video werden wir die harten Werte für unsere E-Mail, unser Passwort durch einige Variablen ersetzen . Wenn Sie also die Daten in Variablen haben, werden sie von der anderen Logik getrennt. Und das gibt uns einfacheren Zugriff auf Dinge wie Veränderung des Wertes oder sogar des Datentyps. Wenn wir in Zukunft einen Prototyp erstellen wollten, bei dem der Benutzer seinen Login setzt. Wir können dann einfach darauf zugreifen und es in unserem Login-Flow verwenden. Ein weiterer Grund, warum wir vielleicht Variablen verwenden möchten, ist, dass wir andere Berechnungen durchführen können oder die Formatierung endet. Wie es passiert, haben wir jetzt ein Problem mit unserem Login. Wenn wir getestet haben, wird die Anmeldung wahrscheinlich fehlschlagen, da bei der Anmeldung zwischen Groß- und Kleinschreibung unterschieden wird und Geräte tendenziell das erste Zeichen groß geschrieben wird. In einem späteren Abschnitt werden wir einen Blick auf Formeln werfen, um dieses spezielle Problem zu überwinden. Okay, also schauen wir uns Variablen an. Ok? So gibt es Variablen unten in diesem Panel in der unteren linken Ecke. Das ist also Ihr Variablen-Panel. Und wenn wir auf diesen kleinen Add-Button tippen, können Sie sehen, es gibt zwei Arten von Variablen, die wir hinzufügen können. Es gibt eine Variable für alle Szenen, und dann gibt es eine Variable nur für dieses C. Also, wenn Sie auf einen variablen Wert über Ihren gesamten Prototyp zugreifen möchten , iOY in den Szenen Ihres Prototyps, müssen Sie Wählen Sie diese erste Option aus. Wenn Sie jedoch nur die Variable benötigen, auf die innerhalb des aktuellen Senior in zugegriffen werden kann, oder wenn Sie überhaupt keine Szenen verwenden, können Sie diese zweite Option verwenden. Ok? Also werde ich meine Optionen offen halten und ich werde für alle zu wählen scheint nur für den Fall, dass ich in der Zukunft in einer anderen Szene verwenden muss. Es ist auch erwähnenswert, dass Sie, sobald Sie einen Variablentyp auswählen, ihn ändern können. Also kann ich jetzt nicht global konvertieren. Es gibt für alle Szenen eine Variablenänderung bei Jagd in eine. Für diese Szenenvariable. Ich müsste eine neue Variable erstellen, diese Variable löschen und mich ändern. Und das kann ziemlich problematisch sein, besonders wenn wir die Variablen in vielen Bedingungen und solchen Dingen verwenden. Also denken Sie hart darüber nach, welche Art von Variable Sie, Sie, verwenden werden. Sie könnten einfach globale Variablen für alles hinzufügen , auf die Sie immer Zugriff haben. Der einzige Nachteil davon sind all diese Variablen für alle Szenen, ich nenne sie globale Variablen. Sie sind im Variablenbedienfeld für jede einzelne Szene zugänglich, unabhängig davon, ob Sie sie verwenden oder nicht. Und dass, wenn Sie eine Menge Evolution verwenden, kann ziemlich langwierig werden. Also ja, es ist, jemand muss einfach sehen, was für Sie funktioniert, sehen, was innerhalb des Prototyps funktioniert, den Sie bauen. Okay, also werde ich bei der vollen Szenenvariablen bleiben, nur für den Fall, dass ich sie und andere Szenen später verwenden muss. Und wir werden sicherstellen, dass wir hier in der Login-Szene sind. Und wenn Sie wieder, wenn Sie zusammen mit Ihrer Datei begegnen, wenn nicht, können Sie eine Starterdatei für dieses Video herunterladen. Also werden wir diese Variable umbenennen. Also doppelklicken Sie einfach, um es umzubenennen und wir werden E-Mail einschließen. Und wenn Sie die Variable auswählen und auf die rechte Seite schauen, können Sie sehen, dass es tatsächlich drei verschiedene Arten von Variablen gibt , auf die wir diese Variable setzen können. Dies sind also Variablentypen. Sie haben also Nummer, Text und tatsächlich Hex-Farben. Abhängig davon, was der Wert in dieser Variablen beibehalten wird, möchten Sie den richtigen Variablentyp auswählen. Farbe ist ruhig, Nische. Sie werden wahrscheinlich nicht unsere ganzen Texte in ihnen verwenden. Du wirst definitiv eine Menge gebrauchen. Für uns. Wir speichern den Textwert unserer E-Mail und unserer Passwörter. Also wollen wir Texte als Variablentyp auswählen . Sie haben auch die Möglichkeit, einen Anfangswert hinzuzufügen. Es ist unten textuell. Das werden wir tun. Das ist also unsere E-Mail. Also werden wir ihn Ni E-Mail pumpen , die wir in unseren Bedingungen verwenden wollen, wie wir es vorher getan haben. Okay, das ist gut. Ok. Wir müssen das Passwort auch aufgeben, damit Sie Variablen auf die gleiche Weise duplizieren können, wie Sie anderswo bezahlt haben. Lassen Sie uns diese E-Mail machen und wir werden dieses Passwort anrufen. Und wir werden den Wert auf unser Passwort ändern. Cool. Also, jetzt haben wir Variablen eingerichtet. Lassen Sie uns sie auf unseren Login anwenden. Sie möchten also zur Erfolgsbedingung für die Anmeldung navigieren. Also dieser hier. Und wenn wir unsere erste Unterbedingung betrachten, haben wir diesen harten Wert hier drin. Also, wenn Sie sich die Box direkt oben ansehen, wo es einen Wert sagt, können wir tatsächlich darauf klicken und wir können eine ganze Reihe von verschiedenen Sachen wählen, die ich in diesem Fall beenden würde, wir wollen unsere Variablen wählen, damit Sie sehen können, wie zwei Variablen sind hier aufgelistet. Für diesen brauchen wir E-Mail-Variablen, die wir wählen werden. Jetzt. Gehen wir zu unserer zweiten Bedingung, die Passwort ist. Wir müssen die gleichen Dinge tun, die wir brauchen, um die Passwort-Variable zu wählen. Okay, lassen Sie uns das testen. So effektiv, für die Erfolgskriterien, nichts sollte, ändern. Wir sollten in der Lage sein, sich auf die gleiche Weise anzumelden wie zuvor. Und mein Passwort, damit Sie sehen können, dass wir so gesperrt sind, aber es verwendet jetzt die Werte in unseren Variablen anstelle von b-Werten. Denn wir müssen das nur auf unsere anderen Bedingungen anwenden. Also haben wir den Login-Erfolg gemacht, lassen Sie uns die E-Mail-Foul-Bedingungen tun, ändern Sie dies in E-Mail und Passwort Foul Zustand werden wir zu Passwort ändern. Wir müssen es auch in unserer Rückkehr zu Hause Trigger setzen. Also, was Sie tun könnten, ist eigentlich einfach alles hier draußen zu löschen. Und wir können einfach kopieren, kopieren Sie unseren bedingten Block und diese Einfügung hinein. Also haben wir das Set jetzt auch mit unseren Variablen. Cool. So wie Sie sehen können, ist bereits die Dinge ein bisschen zugänglicher gemacht. Und auch wir müssen den Wert nur an einem einzigen Ort ändern. Nun, wie Sie bereits sehen können, haben wir diese, diese genau sechs Bedingungen oder mit harten Werten hätten diese sechs Mal ändern müssen. Jetzt können wir einfach den Wert in einer Variablen aktualisieren. Ok, so dass über wickelt es für die Anmeldung und dieses Video. Im nächsten Video werden wir Variablen und Bedingungen verwenden, um eine favorisierte Telefone in unserem Lieblingsbereich zu zeigen . So sehen wir uns dort. 28. Staaten mit Variablen und Bedingungen verwalten: In diesem Video werden wir Variablen und Bedingungen verwenden, um diese Favoritenansicht aus dem leeren Zustand zu ändern , den Sie hier sehen können , um unsere Favoriten ID Kuchen anzuzeigen. Wenn Sie sich also im vorherigen Video erinnern, haben wir eine Animation zu einem der Bilder in unserem Fotostream hinzugefügt, die dann bitten würden, dieses Bild zu bevorzugen. Und wir haben im Grunde diese Animation, wo es fällt in die, in die Höhe. Also werden wir jetzt die Logik zu diesem Bildschirm hinzufügen. Wir können tatsächlich sehen, dass Bild Pop-up als Favorit Pi. Dies ist also ein gutes Beispiel dafür, wie Sie Variablen und Bedingungen für die Statusverwaltung verwenden können. Und Staaten sind wirklich wichtige Teile von Apps. ist also eine wirklich wichtige Fähigkeit, Zustände zu Prototypen zu erlernen. Also wirst du einige wirklich coole Sachen in den kommenden Videos lernen. Das erste, was ich tun will, ist, ich will Impulse, macht einige Grafiken für eine leicht aktualisierte Version dieses bestimmten Bildschirms. Also überspringe ich zwei Sigma. Das ist also mein neues Favoriten-Design. So können Sie hier sehen, Ich habe eine Tab-Navigation hier für Favoriten Kuchen und auch einen Maya-Platz Abschnitt hinzugefügt . Sie können sehen, dass hier ein Thumbnail ist, Floor. Schlagen Sie vor. Das ist effektiv, was unser Bildschirm ist, Gainesville kann jemand aussehen. Also, das ist der Sprung zurück zur Sonde. Und wir gehen dahin, wie die Leute sehen. Und lassen Sie uns einfach alle alten Grafiken davon löschen. Und wir werden unser neues Design aus Sigma in diese Szene importieren , um alles als Standardwerte zu belassen. Und dann werde ich sehen, ob wir eine Skizze oder Adobe XD verwenden, dann tut NFO, wie Sie zuvor getan haben. Ok, cool. Unsere Grafik ist also reingekommen. Für den Moment. Wir werden nur die Standard-Headergrafik greifen. Das wird es kopieren. Und wir gehen zurück zu unserer Favoritenszene und wir werden unsere Kopfzeile einfügen. Und wir werden nur das Wort Kopie vom Ende nehmen, wir werden die bestehenden Standard-Header Graphic Gruppe löschen, die wir dort hatten. Und wir werden das einfach positionell durch unser neues ersetzen. Als Nächstes möchten wir die Grafiken gruppieren, die die leeren Zustände bilden. Das ist also Illustration, die Texte und der Button. Also wird es sie zusammenfassen. Und wir werden diesen leeren Zustand nennen. Ok? Und wo wir als Nächstes gehen, werden wir unsere Art von staatlichen Management-Framework einrichten. Das erste, was wir tun werden, ist, dass wir eine Variable für alle Szenen erstellen. Und wir werden diesen Sex variabel machen. Und wir nennen diesen F-Staat, F-Unterstrich. Wieder, die Benennung. Struktur ist wichtiger ist die Art und Weise, wie ich Dinge gemacht. Okay, und wir werden festlegen, dass wir dieser Variablen einen Standardwert von leer geben. Und was wir hier tun, ist, dass wir die Variable verwenden , um zu kontrollieren, welchen Zustand wir tatsächlich zeigen. Unser Standardzustand sind also die leeren Zustände, also würde am ersten Tag als leerer Aufenthalt als unser Standardstatus für unseren State Manager aufsteigen . Okay, als Nächstes fügen wir einen Sternauslöser hinzu. Und wir werden deinstalliert behandelt, weil Start-Trigger der Trigger ist , der automatisch ausgeführt wird, wenn die Szene geladen wird. Also wollen wir unsere Staatsmanager, die initiieren, wenn die Szene. Deswegen benutzen wir einen Sternauslöser. Und wir werden diesen Startauslöser in Zustände umbenennen. Und wir werden es bewerten, um mit Sprung anstatt mit einem Stern nach dem Sprung zu beginnen, weil wir wollen, dass der Zustand eingestellt wird, bevor der Bildschirm gerendert wird. Mit Start mit Sprung, passiert einfach ein bisschen schneller als Stern nach dem Sprung. Wenn wir Staff benutzen, dann bekommen wir wahrscheinlich ein Flimmern von dem, was vorher da war, bevor wir Steaks verkaufen und auch das wollen wir nicht. Und wir wollen den Neustart jedes Mal überprüfen, weil wir wollen, dass der State Manager überprüft, wie bleiben jedes SQL, wenn wir dazu kommen, sehen Sie, wir gehen zurück zu unseren leeren State-Grafiken. Und wie gesagt, wir wollen unseren State Manager tatsächlich verwenden , um den leeren Zustand zuerst standardmäßig zu initiieren. Also wollen wir tatsächlich die Deckkraft davon abschalten, also wollen wir nicht, dass es standardmäßig da ist. Wir wollen, dass das von unserem Manager initiiert wird. Und wir werden unserem Staat eine Bedingung hinzufügen. Und wir werden das leer nennen. Und wir werden die Bedingung festlegen, um unsere F-Zustandsvariable zu wählen. Und wir werden schauen, denn das ist der leere Zustand, den wir hier tatsächlich beurteilen. Wir wollen nach dem Wort leer suchen. Also in Großbuchstaben, also entspricht es dem Wert, den wir unserer Variablen hinzugefügt haben. Und wenn die Bedingung gleich MC, Wir wollen effektiv den Anti-Status laden. Also werden wir eine Deckkraft hinzufügen. Und wir müssen bis zu 100 Jahre alt werden. Und wir werden die Dauer auf 0 setzen, weil wir wollen, dass dies sofort geschieht. Ist es nicht. Es wird also animieren in Dies ist, wie wollen wir nur dort sein , wenn dieser bestimmte Zustand der Zustand ist, der angezeigt werden muss. Ok? Also, das ist nur den Test geben. Offensichtlich setzt dies standardmäßig den leeren Zustand ein. Also sollten Sie einfach Ihren leeren Zustand sehen, wie Sie zuvor gesehen haben. Aber offensichtlich können Sie das in unserer echten Akte sehen. Also vorbei hier 0. Also wissen wir, dass unser Staatsmanager arbeitet, weil wir den Staat hier Kern sehen können. Also haben wir effektiv Süden, wie State Manager. Und wir haben an unserem ersten Tag gesessen, was unser leerer Zustand ist. Also haben wir alles an Ort und Stelle, um weitere Zustände hinzuzufügen, während wir Fortschritte machen. Im nächsten Video werden wir unsere bevorzugten Funktionen einrichten. So können wir tatsächlich unseren Spaß jetzt aus dem Foto-Stream in diesen Stream hinzufügen. So sehen wir uns dort. 29. Erstellen eines Lieblings: In diesem Video werden wir einige Personalisierungen hinzufügen sind n Variablen und Bedingungen sind wirklich gut für das Hinzufügen von Personalisierungsfunktionen. In Abschnitt sechs begannen wir, die Favoriten zu erstellen ein Fotomotiv zu sehen. In diesem Video werden wir mit dieser Funktion fortfahren, indem die Möglichkeit entwickeln, das Foto im Favoritenbereich zu zeigen. Predator hat zum Beispiel nicht die Möglichkeit, Objekte zwischen Szenen tatsächlich von Ort zu Ort zu verschieben . Es hat auch keine Möglichkeit, reale Daten zu importieren. Also müssen wir etwas Fakery hinzufügen, damit das funktioniert. Aber das ist in Ordnung. Dieser Ideenprototyp der Regel. Okay, wenn Sie also folgen, machen Sie Ihre Akte weiter. Andernfalls können Sie eine Starterdatei für dieses Video herunterladen. Und wir werden abholen, indem wir zum Home-Bereich gehen, dem Home-Bildschirm. Und wir werden Bild neun innerhalb unserer Fotos Gruppen oder Foto-Stream-Gruppeneffekte nicht öffnen dann OpenFlow Stream Traube und auf Seite eins kopieren unserer Fotos Gruppen oder Foto-Stream-Gruppeneffekte nicht . Und wir werden uns dieses Bild neun hier schnappen. Und wir werden das nur kopieren. Und wir gehen zurück zu unserem Lieblingsbereich. Und wir werden einfügen. Und wir werden es umbenennen. Und wir werden an der Zentrale Koordinate 16 für X und 96 für y positionieren also ist es in der oberen linken Ecke. Und wir werden das Bild gruppieren, so dass wir es können, damit wir es in einen Behälter geben können und wir diesen Container Lieblings-Kuchen nennen. Okay, also werden wir die Deckkraft der Container reduzieren, deren Ära. Und wir werden auch das Pi One Bild zu reduzieren. Als Nächstes erstellen wir eine numerische Variable für alle Szenen. Standardmäßig erhalten Sie eine numerische Variable, die ich diesen Pi eins nennen werde. Und wir belassen den Standardwert 0. Okay, also schaffen wir einen neuen Star-Trigger. Und wir werden Content-Manager beenden, sagt ein anderer Manager erstellen und setzen es jedes Mal neu starten. Und heute werden wir eine Bedingung hinzufügen. Und wir werden diesen Pi eins nennen. Also in dem Zustand werden wir unsere pi eine Variable wählen. Und wir werden, wir werden nach einem Wert von eins suchen. Okay, also gehen wir zurück zu unserem Player ein Bild und wir werden das auswählen und wir werden eine Deckkraft Antwort innerhalb dieser Bedingung hinzufügen. Wir werden es auf 100 setzen. Und wir werden die Dauer auf 0 reduzieren. Ich komme zurück zum Manager unseres Staates, den wir im letzten Video eingerichtet haben. Und wir werden einen neuen Zustand hinzufügen, also eine neue Bedingung. Und wir werden es als Favoriten nennen. Und wir werden den F-Zustand festlegen. Und wir werden nach den Wert-Favoriten suchen. Klappkappen, wie Sie zuvor im vorherigen Video gesehen haben, verwende ich alle Großbuchstaben für meine Staatsnamen. Und wenn das wahr ist, wenn wir gehen, wenn wir einen gleich Favoriten bekommen, wollen wir die Kapazität analysieren. Und wir wollen unseren leeren Zustand auswählen. Und wir wollen die Deckkraft auf 0 setzen. Und wir wollen die Dauer auf 0 setzen. Wir möchten dann unsere Lieblings-Scheiterhaufen Gruppe auswählen. Wir möchten eine weitere Deckkraft hinzufügen. Hey, wir wollen es auf 100 setzen. Und wieder wollen wir auch eine Dauer. Okay, also haben wir hier zwei Dinge getan. Wir haben Concept Manage gesattelt, das ist im Grunde das Ein- und Ausblenden unserer Pi L favorited Pi-Bilder zu verwalten. Hier haben wir einen weiteren Zustand zu unserem Bühnenmanager hinzugefügt , der effektiv unseren Lieblingskuchen zeigen wird, wenn unser f Aufenthalt gleich Favoriten ist. Und wir werden auch den leeren Zustand verstecken. Hat Alpha c wird Änderungen von leer nehmen, um etwas zu glänzen. Ok, also als nächstes müssen wir die Bilder stoppen, die das Bild favorisiert werden soll. Also gehen wir zurück zum Startbildschirm. Wir werden den doppelten Tap Trigger herausfinden. Und das hat sich geöffnet. Und wir werden eine neue Antwort hinzufügen. Und das wird eine zuweisende Antwort sein. Und zugewiesene Befragten ermöglichen es uns, Variablen Werte zuzuweisen. Und wir werden unsere f Zustandsvariable auswählen. So können Sie sehen, weil dies eine Variable ist, die von allen Szenen gesehen werden kann. Sie haben in allen Dingen Zugriff darauf. Und der Grund, warum ich F Unterstrich bleiben genannt ist F offensichtlich für Favoriten. Also, weil du all deine Szenen sehen wirst, musst du nur sicherstellen, dass es einen eindeutigen Namen hat. Also werde ich das als unsere Variable wählen. Und wir werden den Wert in Favoriten ändern und sicherstellen, dass es alle Großbuchstaben sind, richtig, also was ist hier schief gelaufen? Wir können sehen, dass der volle Spiegel immer noch orange ist. Eine Orange, wie wir wissen, bedeutet, dass etwas nicht stimmt. Ok, also weil wir den Hex-Wert von Hilfsmitteln analysieren. Wenn wir einen Textwert innerhalb einer Formel hinzufügen, müssen wir ihn in doppelte Anführungszeichen umschließen. Sonst wird es nicht funktionieren. Also wickeln Sie das Wort einfach in doppelte Anführungszeichen. Und jetzt können Sie sehen, dass die, unsere Interessen verschwunden. Okay, wir werden eine weitere Zuweisungsantwort hinzufügen. Und dieses Mal werden wir unsere pi one Variable wählen. Und wir werden in der Formel auf eins setzen. Ok, lassen Sie uns das testen. Also werden wir unseren Home-Bildschirm laufen. Welche Art von Flamme für unsere Pi eins. Und wir werden, naja, sie werden sich von den Favoriten befreien, was ich glaube, dieser hier ist. Wir werden darauf doppelklicken. Wir haben die Animation, die wir vorher gemacht haben. Und wenn wir jetzt zu unserem Lieblingsbereich gehen, können wir sehen, dass die r Pi erschienen ist. Okay, das ist cool. Wir haben nun eine coole Personalisierung zu unserer App hinzugefügt. Das heißt, mag zu komplex erscheinen, aber wir alle zukunftssicher net, wo wir vielleicht mehrere Favoriten hinzufügen möchten. Das Verschleiß gibt uns die Kontrolle über einzelnen Bilder und die Favoriten, die Sie als Ganzes haben, was die Dinge auf lange Sicht viel einfacher machen wird. Eines der Dinge, die wir einen Kuchen werfen, besonders wenn Sie anfangen, viele Funktionen zu erstellen, ist, dass die Dinge ziemlich schnell ein wenig unhandlich werden können. Dies ist, warum eine gute Struktur und guten Namen und seine lebenswichtig. Okay, also schließt das Abschnitt sieben ein. Ich hoffe, das hat Ihnen eine gute Grundlage für Verständnis oder Variablen und Bedingungen gegeben und wie sie verwendet werden können. Ich habe herausgefordert, dass Sie ein paar ziemlich fortgeschrittene Konzepte sind. Also für alle macht Sinn und Sie sind auf dem besten Weg, um einige erstaunliche Dinge zu schaffen. Wenn es ein bisschen schwer ging, Key, Pass it, spielen mit den Funktionen, und versuchen Sie andere Möglichkeiten, Dinge zu tun. Es gibt sicherlich verschiedene Möglichkeiten, die gleiche Funktionalität zu erstellen. Im nächsten Abschnitt werden wir einige der Pro Pies Hardware-Funktionen untersuchen. Du willst das hier nicht verpassen. So sehen wir uns dort. 30. Erstellen einer echten in-app: Hallo, da. In diesem Video werden wir eine echte In-App-Kamera kuratieren. In Abschnitt sieben haben wir unserer Pintrest-App eine neue Funktion namens My Pies hinzugefügt. Mit dieser Funktion werden wir unseren Benutzern die Möglichkeit geben , ihre eigenen Python-Hoffnungen hinzuzufügen. Wir können dies mit Predator Pies Fähigkeit, auf die Kamera auf dem Gerät zugreifen Prototypen. So können wir uns auf die Kamera-Funktion konzentrieren. Ich habe bereits gebaut, wie die Paging-Ansicht und Registerkarten alles Idee identisch mit dem ist, was wir in Abschnitt vier behandelt haben. Also fühlen Sie sich frei, einen Sprung zu haben, um diese Halb-Funktion selbst zu bauen. Alternativ können Sie die Starterdatei einfach dort herunterladen, wo sie bereits integriert sind. Okay, also haben wir unseren Pager und unsere zwei Sub-Bildschirme. Sie können sehen, dass ich einen Platzhalter namens my hat. Lassen Sie uns zunächst unser Design aus dem Ordner „Assets“ importieren und diese Ansicht erstellen. Also werde ich zur FISMA überspringen. Verwenden Sie offensichtlich das Werkzeug der Wahl, das Sie zusammen mit folgen. Und ich werde Impulse geben, ich wollte Ihnen nur die beiden Ansichten zeigen. Also habe ich diese beiden Ansichten über die Geisterspiele Ansicht und ich habe die Kameraansicht. Okay, also werde ich importieren, dies kann als Sie gelten. Gehen wir zur Impulsszene in unserer Datei und löschen Sie einfach alles da draußen. Und wir werden importieren. Und ich werde nur dieses Design importieren, so dass meine Upaya entworfen wurde, um die N zu verbessern. Jetzt bin ich nur interessiert an der Kamera-Taste hier, also werde ich das einfach kopieren. Und ich werde hier wieder zu meinen Favoriten wechseln. Und ich werde es einfach an Ort und Stelle einfügen. Okay, also möchte ich, ich möchte, dass es innerhalb meiner Spielgruppe ist, was dieser Seiteninhalt direkt auf der rechten Seite hat, und es wird es in diesen Gruppencontainer verschieben. Und ich werde die Acts auf 1-0 setzen und sicherstellen, dass das Y auch 0 ist. Es ist also in der oberen linken Ecke. Mein PI ist Container. Okay, cool. So großartig. Also haben wir unseren leeren Aufenthalt Blick bereit zu gehen. Nächster Typ, wollen wir die Kamera modal erstellen. Leider gibt es keine Möglichkeit, Fotos zu speichern oder sie zwischen Szenen im Gebet zu Pi zu verschieben. Alle Fotos, die mit der Kamera aufgenommen wurden, können also nur in der Szene existieren, in der sie aufgenommen wurden. Dies ist ein bisschen eine Einschränkung, aber wir können damit arbeiten. Also effektiv, was wir tun müssen, müssen wir unsere Kamera-Modalansicht innerhalb der gleichen Szene erstellen , die wir das Foto verwenden wollen, das begann zu machen. Und in diesem Fall muss es alles innerhalb unserer Lieblingsszene existieren. Also gehen wir zurück zu dem Impuls, der wieder gesehen wird. Und wieder. Wir werden alle unsere Grafiken hier löschen. Und dieses Mal werden wir unser Kamera-Design auf Kamera-Modus oder Design Impulse. Also werden wir die Kamera wählen und das ziehen. Das erste, was wir tun werden, ist, dass wir diesen Bessel-Leitfaden löschen , den dies nur für unsere war, für meine Verwendung, als ich die Designwissenschaftler der Gruppe glauben, wie vollständig. Und wir werden ein Rechteck hinzufügen. Und wir machen es genau so groß wie unser Telefongerät. Also wirklich schnelle und einfache Art, dies zu tun, ist nur die Breite und Höhe auf 100% zu setzen. Und dann Sonde werde ich die genaue Breite und Höhe für uns herausfinden. Wir werden dies auf den Grund unserer letzten App verschieben. Und jetzt werden wir alles zusammenfassen. Okay, der einzige Grund, warum wir dieses Rechteck korrigieren , war , dass die Gruppe die genaue Größe des Bildschirms hat. So, jetzt der Rechteck-Statusjob, können wir einfach das Rechteck vollständig entfernen. Wir werden diese Container-Kamera umbenennen. Und wir werden die Hintergrundfarbe des Behälters auf ein E1, E setzen , wenn E. und sicherstellen, dass es eine 100% Füllung hat. Und jetzt werden wir die ganze Gruppe kopieren. Und wieder, um zu unserer Lieblingsszene zurückzukehren und wir werden es einfach einfügen. Lass uns einfach die Kaffeetasse loswerden. Also, jetzt, was wir tun müssen, ist die Kamera-Schicht hinzufügen, um auf die Flur-Kamera zugreifen, wir müssen tatsächlich eine spezielle Schicht hinzufügen. Und diese Ebene existiert innerhalb dieses Medienmenüs hier. Also hier sind es Kameras. Also wählen wir eine Kamera, um eine spezielle Kameraebene hinzuzufügen. Und du wirst sehen, dass es eine kleine Ikone einer Kamera in der Mitte hat. Und was wir tun wollen, ist, dass wir es in der gleichen Größe wie unsere Fotoplatzhalter-Ebene innerhalb unseres Designs machen wollen. Also, das sind drei 5-9 wo 359. Also lasst uns das gleich machen. 259 von 359. Und wir werden es in unsere Kamera-Container-Gruppe direkt über dem Foto einfügen. Und wir bewegen uns einfach in Position Standorte in der gleichen Position wie die, als die Führer Feinde WHO-Layer. Und dann können wir jetzt das Hotel Aristoteles Job entfernen. Und wir können diese Kamera umbenennen. Okay, das ist, wenn Sie sicherstellen, dass Ihre, Sie haben Ihre Kamera zuletzt ausgewählt. Wir gehen zum Eigenschaftenfenster und wir werden dieses Kästchen neben Autostart aktivieren. Und das wird automatisch unsere Kamera starten, sobald dieses Layout, die effektiv sind, sobald der Prototyp geladen ist. Und Sie können hier sehen, dass wir tatsächlich die Kontrolle über die vordere und die rückseitige Kamera haben. Für diese spezielle Funktion möchten wir verwenden. In Kameras wollen wir ein Foto von unserem Kuchen machen. Also belassen wir es auf dieser Standardeinstellung. Und wenn wir uns eine Vorschau ansehen, können wir sehen, dass wir diese Zickzaggy-Linie Sache los haben. Dies ist also im Grunde unser Kameramabor und weil die Vorschau auf unserem, auf unserem Computer ist und jetzt Computer keine Kamera oder es keinen Zugriff auf die Kamera hat. Wenn Sie eine eingebaute Kamera auf Ihrem Computer haben, wird es uns nur diese Lichter zeigen. Also, was wir jetzt tun werden, ist, dass wir unseren Prototyp tatsächlich an unser Gerät schicken. Und dann, wenn es auf dem Gerät ist, wer tatsächlich die echte Kamera abholt, sehen Sie, wie die echte Kamera funktioniert. Also lasst uns das jetzt machen. Also schließen Sie ab, Rezension. Und was wir tun wollen, ist, dass wir die Presse öffnen wollen, einen Spieler auf unser Gerät anwenden. Also werde ich einfach auf die Kameraansicht umschalten, damit du sehen kannst, was ich tue. Sie können hier sehen, ich habe die Sonde, die ich Spieler offen habe. So und Sie können hier unten sehen, dass wir bereits über Wi-Fi mit unserem Prozess hoch oben verbunden sind. So können Sie dies entweder tun, indem Sie einen QR-Code scannen. Wenn ich dir das zeige. Wenn Sie also auf das Gerätemenü klicken, können Sie sehen, dass Sie diesen QR-Code haben. Und Sie können sehen, dass ich mein Telefon bereits hier angeschlossen habe, also müssen Sie nur diesen Code scannen. Okay, so einmal fragen alle verbinden sagte, wir gehen, um den Run-Button zu drücken. Und du wirst das hören und es wird klingeln. Das heißt, es ist nur der Prototyp für mein Handy. Und Sie können sehen, dass es gerade hier geladen ist. Und Sie können jetzt sehen, dass mein Prototyp geladen ist. Und Sie können sehen, dass die Kamera, die echten Kameras tatsächlich funktionieren. Und Sie können sehen, dass ich mein Stillleben von meinem Pi Shot eingerichtet habe und ich sehe es mit meiner Kamera an. Das ist also ziemlich cool. Das ist alles gut in Arbeit. Ok, also als nächstes wollen wir die Kameraansicht modal machen. Also, was wir tun werden, ist, dass wir unsere ganze Kamera-Gruppe auswählen. Und wir werden es einfach vom unteren Bildschirmrand verschieben. Wir wollen vermissen, um modal vom unteren Bildschirmrand zu animieren. Und wir werden unsere Kamera-Taste auswählen, das ist dieses große Thumbnail innerhalb unserer Maya-Spielgruppe, die wir zuvor hinzugefügt haben, eine, die ausgewählt wurde. Und wir werden einen Tetramer hinzufügen. Und wir werden diesen Tap-Trigger Open Camera nennen. Und wir werden unsere Kameraansicht wieder auswählen. Und wir werden eine Bewegungsantwort zu unserem neu erstellten Auslöser hinzufügen. Und wir wollen die Kamera lambda_2 0 y Position bewegen. So effektiv eine, die Animate von unten ist. Und wir werden nur die Dauer zu erhöhen 0,4 ist Reisen ziemlich, eine ganze Strecke den gesamten Bildschirm in der Tat, so dass wir nicht wollen, dass die Dauer zu schnell zu sein, sonst wird es zu schnell sein. Tempo. Und als nächstes wollen wir den Schließen-Knopf anschließen. Wenn wir also in unsere Kamera-Layer-Gruppe schauen, haben wir eine innerhalb der Standard-Header hier, wir haben eine Schließen-Schaltfläche, also will er das auswählen. Und das wirst du bemerken. Eigentlich, wenn ich nach unten scrolle, können Sie sehen, dass meine Schließen-Schaltfläche hier ein ziemlich kleines Ziel ist. Also haben Sie diese Fähigkeit und Sonde Piloten, die tatsächlich die taktile Pflege ohne Add-In wie ein Rechteck oder so etwas erhöht die taktile Pflege ohne Add-In . Also machen wir das jetzt. Also, wenn wir das ausgewählt haben und wir scrollen bis zum Ende unserer Eigenschaften Panel, Wir haben diese Option Touch-Bereich. Also werden wir das Kästchen ankreuzen. Und das wird sich öffnen und uns die Möglichkeit geben, Polsterung auf einer Seite oder auf allen Seiten unserer, unseres Knopfes hinzuzufügen . Wir wollen, dass es den ganzen Weg gepolstert wird. Also werden wir nur dieses Kästchen gleich m für alle Seiten und wir werden nur 16 in einem der Boxen hinzufügen. Und wenn wir auf „Rückkehr“ klicken, wird es es den ganzen Weg herum hinzufügen. Und Sie können sehen, jetzt habe ich viel größere Gewindebohrungen. Das wird viel einfacher zu Köpfen sein. Ok? Was wir jetzt tun werden, wird einen weiteren Tab-Trigger für unsere Schließen-Schaltfläche hinzufügen. Und dazu werden wir ein Resets und Effekte hinzufügen. Wir, was wir tun wollen, ist, dass wir die Animation der modalen Ansicht Öffnung zurücksetzen wollen. Wir wollen also sicherstellen, dass wir unsere Kamera-Modalansicht haben. Das ist also irgendwie die Hauptstadt C. Das ist cool. Und wir werden die Dauer auf 0,3 setzen. Wie ich in der sagte, im Animationsbereich, neige ich dazu, eine, eine schnellere Dauer auf etwas zu setzen , das schließt oder, oder Paar, das unsere Animation tut, als ich auch, es ist in der Animation. Deshalb habe ich mich auf eine Zehntelsekunde schneller eingestellt. Cool, also haben wir jetzt ein Setup davon in unseren Kameras abgeschlossen. Also nochmal, wir werden das ausführen und das auf unserem Gerät testen. Was wir jetzt tun werden, ist, dass wir überqueren, dass wir vier bekommen. Wir werden unser Kamera-Modal öffnen. Das wird unsere modale Sicht dort aufzeigen. Und wir können sehen, dass wir jetzt haben ist, wie Live-Kameraansicht noch. Und dann können wir diese Schließen-Schaltfläche drücken, um die modale Ansicht zu schließen. Also gehen wir hin. Wir sind alle eingerichtet und bereit, den nächsten Teil der Funktionalität zu machen, nämlich das Foto zu machen. Und das ist es, was wir im nächsten Video machen werden. Wir werden ein Foto machen. Also und wir werden dieses Foto Miniaturbild im Marketplace-Bereich erscheinen lassen. 31. Ein Foto hinzufügen von der In-App-Kamera: Hallo, da. In diesem Video werden wir mit dem Build unserer, unserer Funktion fortfahren, damit Benutzer Fotos von ihren eigenen Scheiterhaufen machen und sie in die App bringen können. Und speziell, wir werden versuchen, ein echtes Telefon zu nehmen. Nachdem du also ein Foto gemacht hast, werden wir unserem Prototyp ein paar realistischere Kamera-Interaktionen hinzufügen . Also lasst uns gehen. Das erste, was wir tun wollen, ist, dass wir, wenn Sie entlang folgen, können Sie die Starter-Datei herunterladen. Sie möchten sicherstellen, dass Sie zu den Lieblingsszene Haar navigieren. Das ist, wo ich gerade bin. Und das erste, was wir tun werden, ist, dass wir die Knopfgruppe innerhalb der Kamera-Gruppe finden, die hier eine R-Gruppe ist. Und wir wollen diese Knopfgruppe hier. Und ich werde einfach nach unten scrollen, damit wir sehen können, wie die Kamera zuletzt ist. Also ist es dieser, dieser Knopf in der Mitte. Also wollen wir sicherstellen, dass das ausgewählt ist. Und wir werden Angriffsauslöser hinzufügen. Und wir werden es „Take Photo“ nennen. Und dazu werden wir eine Kameraantwort hinzufügen. So funktioniert die Kameraantwort in Verbindung mit Kameraebenen. Wir haben nur eine Kameraebene auf unserer Projektseite. Das ist die, die wir zuvor erstellt haben. Also wählen wir hier unsere Kameraebene aus. Und wir haben hier zwei Möglichkeiten. Wir können die Kamera starten und die Kamera stoppen. So haben wir bereits das Telefon auf die In-App-Foto-Funktionalität eingerichtet , um automatisch mit Kameras an die Kameras zu starten war es bereits ausgeführt. Wenn Sie das vorherige Video gesehen haben, Sie einen Hut gesehen, der Live-Feed. Also, um ein Foto zu imitieren, werden wir effektiv diese Risiko-Fehler verwenden, um die Kamera zu stoppen. Also wählen wir Stopp aus. Und die Art und Weise, wie das Kameralayout funktioniert BET. Wahrscheinlich ein bisschen ungewöhnlich in Bezug darauf, wie Sie das denken, diese Funktion weiß, wie es innerhalb von Protein Pi funktioniert. So kann das Kameralayout entweder starten oder stoppen, wie ich bereits sagte, wenn es stoppt, erinnert es sich an das letzte Bild. Es war, das Leben, das er in, dass aussehen würde und wie effektiv hält das Video. Du hast also ein Standbild. Also werden wir das nutzen, diese Funktionalität , um uns tatsächlich ein Foto zu imitieren. Und das ist es, was diese Antwort tut. Es stoppt die Kamera und auf dem, auf dem, auf dem, auf dem Feed. Was wir tatsächlich tun können, ist, wenn wir das einfach ausführen und wir werden wie Prototyp hier auf unserem Gerät laden. Und wir gehen rein und ich werde Ihnen zeigen, dass ich unsere Kamera, Kamera-Funktionalität starten werde. Also haben wir unseren Live-Feed hier, wie ich es war, wie ich schon sagte. Und ich werde jetzt nur den Knopf drücken und Sie können jetzt sehen, dass wir ein Standbild haben, Kamera hat jetzt offensiv gestoppt. Dies ist also der erste Teil der Nachahmung. Ich habe ein Foto gemacht. Cool. Also wechseln wir zurück zu hübschem Studio. Also haben wir den ersten Teil gemacht, wo wir haben. Effektiv eingefroren das MSC Huhn bis Bild, aber es sieht nicht wirklich so aus, als hätten wir das Foto gemacht. Also möchte ich nur noch ein paar Interaktionen hinzufügen, mehr visuelle Interaktionen, damit es sich ein bisschen leichter anfühlt. Wir haben tatsächlich ein Foto gemacht. Und was wir eigentlich tun werden, ist, dass es ein wenig Effekt hinzufügen wird, um die Kameras aussehen zu lassen, als wäre es geblinzelt. Und das ist, um die Art zu imitieren, wie ein Kameraauslöser funktioniert. Und es gibt dir das Gefühl, dass du tatsächlich ein Foto gemacht hast. Ok? Was wir tun werden, ist, dass wir ein Rechteck hinzufügen. Und wir machen es schwarz. Und wir werden es in der gleichen Größe wie unsere Kamera dort machen. Also hat es tatsächlich in unsere Kameragruppe direkt über der Schicht getrunken. Und wir werden nur die Koordinatengröße bei NIH und eine 101 bekommen. Und das Gleiche. Und wir wollen, dass die Abmessungen, die Breite und die Höhe gleich sind, 359 Quadrat. Und wir werden diese Kennzeichnung nennen. Ok, also wollen wir es so anfangs drehen, wenn seine Deckkraft 0 ist. Also werden wir das auf 0 zurückstellen. Und wir gehen zurück, um jetzt Fotos zu machen. Whoa, Auslöser. Und wir werden sicherstellen, dass wir die, die Blink-Layer ausgewählt haben . Und wir werden eine Deckkraft hinzufügen. Und wir werden es zu 100 machen. Und wir geben ihm eine Dauer von 0. Ok? Wir werden die Deckkraft duplizieren. Und wir werden es auf 0 zurückstellen. Und wir werden nur eine Verzögerung von 0,12 Durchgängen hinzufügen. Hey, cool. Das ist also mit der Animation befasst. Wir wollen auch, dass wir nicht wollen, dass diese CPA zeigt, bis wir das Foto tatsächlich gemacht haben. Also werden wir seine anfängliche Arbeit hinter den Zähnen setzen 0 sind. Und um sicherzustellen, dass es ausgewählt ist, werde ich eine weitere Deckkraft hinzufügen, um Leute zu überholen WHO-Trigger dafür, für diesen CTA. Und wir werden seine Deckkraft auf 100 ändern. Wir werden die Dauer bei 0,2 halten und wir werden nur hinzufügen und 0,3. Verzögerung. Okay, gehen wir rüber zu unserem, unserem Gerät und testen das. Also lassen wir es irgendwie laufen. Wir können hier sehen, dass gerade auf mein Gerät geladen wurde. Und ich werde meine Kamera initiieren und meine Leute WHO bereit machen. Und Sie können hier jetzt sehen, dass der CTA jetzt am unteren Rand des Bildschirms fehlt. Also werde ich mein Foto machen. Und du siehst, dass ich mein kleines Blinzeln habe und mein Standbild habe. Okay, das sieht gut aus. Gehen Sie zurück ins Studio. Ok, sag Harry Studio zurück. Und ich möchte noch eine letzte Sache hinzufügen. Und das heißt, ich möchte der eigentlichen Schaltfläche selbst eine kleine Animation hinzufügen , damit sie so aussieht, als ob sie gedrückt wurde. Dies ist alles, um ihnen einen realistischen Effekt zu geben oder ein Foto zu machen. Also, was ich tun werde, ist, dass ich den Button Container auswählen werde. Und ich werde einen Touchdown-Trigger hinzufügen. Und dann werde ich nur den inneren Kreis meiner, meines Knopfes auswählen. Und ich möchte sicherstellen, dass der Ursprung auf Mitte, Mitte gesetzt ist , weil ich werde politische Animation auf diesem. Und halten Sie die Eingabetaste, die Eingabetaste ausgewählt. Ich werde diesem Auslöser eine Skalenantwort hinzufügen. Und ich werde es um den Faktor 90 skalieren. Also werden wir seine Skalierung nur um 10% reduzieren. Und ich werde die Dauer davon auf 0,01 sagen. Okay. Ich werde jetzt einen Ausbesserungsauslöser hinzufügen. Und ich möchte, dass das auf dem Knopfcontainer ist. Ruft eine Kopie dieser Skala ab, die Skalierungsantwort vom anderen Trigger. Und ich werde es in meine Berührung hier oben einfügen. Und ich werde die Skalierung wieder auf 100 ändern. So effektiv werden wir es wieder auf seine ursprüngliche, ursprüngliche Position skalieren. Okay, lassen Sie uns sie testen. Okay, das ist also auf dem geschwollenen Gerät laufen. Und wir werden unser Foto wieder initiieren. Stellen Sie sicher, dass Sie c o sehen können und ich werde den Knopf drücken. Und hoffentlich haben Sie diese niedrige Animation dort gesehen. Wir haben jetzt unser Standbild und wir haben auch unsere sicheren Fotos CCA gezeigt. Cool. Jetzt haben wir also eine echte realistische In-App-Kamera, die Fotos macht. Nun, zumindest ein Foto, dass über packt für dieses Video. Im nächsten Video machen wir das aufgenommene Foto und konstruieren jetzt einen Spaß und fügen Sie dem Abschnitt Kurzsichtigkeit hinzu, um Sie dort zu sehen. 32. Ein Foto als Thumbnail speichern: Hallo, willkommen zurück. Und in diesem Videowerden wir das letzte Video fortsetzen, werden wir das letzte Video fortsetzen dem wir ein Foto mit der Kameraebene erstellt haben. Und in diesem Video werden wir sparen, dass Leute Vermögenswerte haben. Und jetzt haben wir jedoch ein bisschen ein Problem, denn die Art und Weise, wie es mit dem Kameralayout funktioniert, ist, dass wir dieses Bild nicht vom Standbild der Kameraebene wiederverwenden können , die wir im letzten Video aufgenommen haben. Also haben wir mit unseren Rauch und Spiegeln zu tun, um die Funktionalität zu imitieren, Funktionalität, dieses Foto so als Miniaturbild zu speichern. Was wir also effektiv tun müssen, ist, dass wir eine andere Kameraebene verwenden müssen. Und nur um ein wenig darüber zu erklären, ein bisschen mehr über die Kameraebene. Weil Sie nicht tatsächlich Fotos mit einer Kamera machen oder tatsächlich nur die Kamera durch eine Ebene betrachten. Sie können tatsächlich viele und viele Kameraebenen hinzufügen. Und sie werden alle dasselbe tun. Sie werden alle durch die Kamera schauen. Also, was wir eigentlich tun werden, um das Speichern der Fotos zu imitieren , waren tatsächlich zu Kamera-Layer, die zur gleichen Zeit laufen. Eins, was wir schon gebaut haben, aber eins, das du nicht sehen wirst, welches das Thumbnail sein wird. Und da kommt der Rauch- und Spiegelteil ins Spiel. Nächste Gastkünstler, also wird es mehr Sinn machen, wenn wir weitermachen. Also das erste, was wir tun werden. Also, wenn Sie nicht gemacht haben, nur um zu sagen, wenn Sie nicht entlang verfolgt haben, dann laden Sie bitte die Starter-Datei, die mit diesem Video kommt. Ansonsten wird von dort weiter, wo wir aufgehört haben. Also hören wir jetzt Pintrest an und wo in der Lieblingsszene. also sicher, dass Sie in den Favoriten navigieren. Wir können auf derselben Seite sein, die wir sind. Und das erste, was wir tun werden, ist, dass wir unsere Kameraebene duplizieren. Und wir werden es in Kameradaumen umbenennen. Und ich werde in die Maya spielen Ansichten positionieren. Also bringen wir es hier runter. Und was wir tun wollen, ist, dass wir Sie die gleiche Größe haben und sie der gleichen Stelle wie die Kamerataste hier platzieren wollen. So sündigt die Karabach 163 nach dem anderen, 76. Also lassen Sie uns einfach unsere Schicht und die gleiche Wissenschaft um 17 machen. Und dann müssen wir nur die Position ergreifen, die 00 ist. Das ist schön und einfach zu verkaufen die Zöliakie und weißer 00. Ok. Was Sie auch sehen könnten , ist, dass, wenn ich einfach diese Kamera verstecke und diese hat abgerundete Ecken dieses Mal, und ich will meine Thumbnails oder haben abgerundete Ecken als auch. Leider haben Sie keinen Zugang zu Radius Ecken auf der Kamera. Lera selbst müssen wir das tun? Wir müssen die Ebene gruppieren, so funktioniert Befehl G, Kontrolle g von Windows. Und wir sind einfach nett zu Saturn Radius jetzt der Gruppe 16. Und wir werden nach unten gehen, um Sublayer zu schneiden. Jetzt können Sie sehen, dass wir unsere abgerundeten Ecken haben. Wir wickeln gehen um eine Ecke Kameraschicht. Und wir werden dieses Bild eins nennen. Und es wird uns anfangs sagen, wir seine Deckkraft auf 0 sagen müssen. Okay, zurück zu unserem Take a Photo Trigger. Also dieser hier. Mit unseren Kamera-Fonds wählen, werden wir eine weitere Kamera-Antwort hinzufügen. Und wir werden die Kameradaumen so einstellen, dass sie aufhören. Was wir vorher getan haben. Wir werden eine Deckkraft hinzufügen. Wir zielen darauf ab, wie, wie Bild eine Gruppe. Und wir werden die Kapazität zu einer 100 hinzufügen. Endlich sind wir immer auf Eule, speichern Sie einen Foto-Button, scrollen Sie nach unten. Cta primär. Wählen Sie das aus. Und wir werden einen Tap Trigger hinzufügen. Und wir müssen den Reset kopieren, den wir zu unserer Schließen-Schaltfläche hier hinzugefügt haben. Kopieren Sie das. Ich werde in diesen Tap Trigger eingeben. Okay, das ist, das sieht gut aus. Also effektiv, was wir wollen passieren, ist, wenn wir die Taste Speichern drücken, wollen wir nur, dass die gesamte Kamera-App verschwinden. Also, was wir jetzt tun werden, ist, dass ich das auf dem Gerät testen werde. Okay, das ist das Laden hier oben auf meinem Gerät. Also werde ich fragen, bevor ich gehen werde und ich werde meine, meine Taste wählen, um in den Kamera-Modus zu gehen. Und ich werde ein schönes Foto von meinem, meinem wunderschönen 2k Pi hier, wo mein schönes kleines Setup. Scott und ich sangen, kamen zurück. Hey, nimm das Foto, das sieht gut aus. Okay, also haben wir mein Bild Handzettel. Also werde ich nur auf die Schaltfläche „Foto sagen“ drücken. Und voila, wir haben unseren Pool-Punkt auf unsere Favoritenliste gespeichert. Also, was wir hier wirklich getan haben, da Sie, wie Sie spalten können, haben wir tatsächlich die beiden, die zwei Ebenen zur gleichen Zeit laufen. Wenn wir also die Kamera stoppen, hielt sie in beiden Kameraebenen an und wir bringen nur die Deckkraft auf. Also oft Repro Pi, Sie müssen ein bisschen aus der Box denken, um die Ergebnisse E1 zu erreichen, okay, es gibt eine letzte Sache, die ich im Moment tun möchte. Sie können sehen, dass ich nur ein Foto machen kann, da die Kamera-Taste von den ersten Leuten versteckt wurde, die auswählen, korrigieren Sie das zurück ins Studio. Okay, also was wir tun wollen, ist, dass wir unsere Kamerataste etwas über einen bewegen wollen. Wenn wir also das Foto auf der linken Seite sehen, wollen wir nach rechts gehen. Wir werden also zu unseren Fotos zurückkehren, aber ein paar McKenna werden wir jetzt die Kamera-Taste auswählen. Das ist also das hier. Und wir werden eine Antwort auf die Bewegung hinzufügen. Und wenn wir uns die Breite der wie unserer Kamera-Taste betrachten, können wir sehen, ist ein 163. Also würden wir mit einem besseren Muster dorthin ziehen wollen. Also werden wir tatsächlich vorbeiziehen und wir werden dort um eine 180 auf dem X bewegen und wir werden die Dauer auf 0 setzen, weil wir nicht haben, wir wollen nicht, dass du das siehst. Wir wollten nur für die Haare lösen. Also werden wir nur die Dauer auf 0 setzen, also besonders in der richtigen Position. Okay, wir werden das nur noch mal testen. Zurück zu unserem Gerät, einem Fall, der unseren Prototyp betreibt. Okay, also sind wir wieder hier. Also lass uns gehen und ein Foto machen. Und wir werden das Foto speichern. Und Sie können hier sehen, wir haben unsere Leute hier drüben und wir können sehen, dass wir unsere Kamerataste haben , die auf die rechte Seite verschoben wurde. Perfekt. Da gehst du. Wir haben gerade einen Vorgänger an, dass nimmt echte Fotos und speichert sie in den MyPlate Abschnitt wird hier stoppen. Aber Sie könnten weiterhin die Möglichkeit hinzufügen, mehr Fotos zu machen, wenn Sie möchten. Sie müssen nur mehr Kameraebenen verwenden. Okay, das bringt uns zum Ende dieses Videos. Im nächsten Video werden wir einige Tüpfelchen auf den Kuchen setzen, indem wir einige Haptik Kachel-App hinzufügen . So sehen wir uns dort. 33. Haptisches Feedback mit haptic hinzufügen: Eine andere Gerätefähigkeit, über die wir Kontrolle haben, ist Haptik-Sonde, Ich nehme an, arrangieren der Haptik für iOS und Android, wie es echte Hap-Sex verwendet. Die Feedback-Auktionen für die beiden Plattformen sind unterschiedlich. In diesem Video werden wir das iOS verwenden, aber wenn Sie ein Android-Handy haben, können Sie auch Ihre eigene Haptik auswählen. Also ich denke, es gibt zwei Orte, an denen wir einige Hapsburgs zur Pinterest-App hinzufügen könnten , wenn wir einen Favoriten speichern und wenn wir auf die Kamera-Taste tippen, lassen Sie uns zuerst die Gefallen tun 1. Also lass uns nach Hause gehen. Ich bin zu Hause, auf dem Home-Bildschirm hier. Und wir werden den Doppeltipp-Auslöser öffnen. Okay, also werden wir eine Vibrationsreaktion hinzufügen. So wird die Haptik innerhalb von Pro Pi vibrieren genannt. Und wenn Sie Vibrieren auswählen, können Sie sehen, dass es eine Reihe von Optionen gibt. Also haben wir iOS hier und wir haben Android, und es ist hap sechs hier. Also werden wir uns auf mein Betriebssystem konzentrieren. Und wir können sehen, es gibt eine Reihe von Handys, Benachrichtigung, Segues, Auswirkungen, Haptik, und hatte eine Auswahl hilft als auch. Also werde ich mit Heavy gehen, um den Hut willen, den ich benutzen will. Und Sie können buchstäblich das auf Ihrem Gerät laufen und dann fühlen, Offensichtlich gibt es nicht, Ich kann es Ihnen nicht wirklich in diesem Video zeigen cuz wir nicht kommunizieren und Vibration durch, durch, durch sein Medium, aber laufen Es läuft es auf Ihrem Handy, wie wir zuvor laufen. Sie möchten also auf das Gerät gehen und den QR-Code scannen und ihn auf Ihrem Telefon ausführen. Das ist also der erste Ort, an dem ich denke, wo ich ein paar Haptik setzen möchte. Okay, also gehen wir zur Kamera. Also lasst uns zur Lieblingsszene gehen. Und wir gehen zur In-App-Kamera. Also, diese Gruppe, die wir hier haben, und wir werden zum Touchdown-Trigger gehen. Das ist, wo wir unsere Busse drücken. Es ist also wirklich schön, Heimweh zu ertragen, wenn man Knöpfe drückt. Also werden wir in unsere Foto-Button hier hinzufügen. Also werden wir wieder, wir werden eine Vibrationsreaktion hinzufügen. Und dieses Mal, wo Gaines, die den Erfolg Haptik verwenden, wie ich denke, es funktioniert gut hier. Führen Sie es erneut aus, indem Sie Ihr Gerät mit Ihrem Prototyp verbinden und sehen Sie, wie sich das anfühlt. Und das ist, das ist buchstäblich so einfach wie es ist, Haptik zu Ihren Prototypen hinzuzufügen. Okay, so fühlen Sie sich frei, um ein Spiel mit verschiedenen Hap, Sex und fühlen, wie unterschiedlich sie sind und fühlen, was richtig ist. Es gibt ein wenig sehr Experimentieren geht entlang, so dass wir wirklich fordern, dass Sie mit diesen für diesen speziellen sehr physikalischen Sensorexperimentieren diesen für diesen speziellen sehr physikalischen Sensor , den Sie hier im Petabyte zur Verfügung haben. Okay, das ist also ein Wrap auf unseren Blick auf Geräte-Hardware. Fühlen Sie sich frei, einige der anderen Hardware-Antworten zu erkunden, wie, wir haben Kompass hier, und wir haben auch Neigung als gut. So und auch wir haben 3D Touch, was für iOS jetzt veraltet ist. Aber wenn Sie ein älteres haben und Sie müssen einen Gründer haben, die 3D-Touch unterstützen. Aber wenn Sie zum Beispiel ein iPhone zehn haben, dann können Sie auch experimentieren. Ok? Im nächsten Abschnitt werde ich Ihnen Formeln vorstellen, die einige erstaunliche Superkräfte hinzufügen , damit Sie wirklich einige erweiterte Funktionen erstellen können. So sehen wir uns im nächsten Abschnitt. 34. Formulierung zur Position: Hallo, da. In diesem Video werden wir also Formeln verwenden um die Position in einigen der Komponenten zu verfolgen, die wir bereits in unserem Prototyp gebaut haben. Also gehen wir zurück zum Startbildschirm und gehen zum Scroll-Tab. Und anstatt die manuellen Werte zu verwenden, die wir für die Trigger hatten, werden wir eine Formel in diese setzen und wir gehen zu diesen Werten dynamisch. Das kommt also dazu. Erstens wollen wir zu der Home-Szene navigieren. Ok? Und wir werden den Wasserhahn heute hier auslösen. Nur um Sie daran zu erinnern, der Hahn heute Trigger mit diesem heutigen Hab verbunden ist. Und darin, wo wir effektiv diese Pillengrafik bewegen. So zentriert sie sich in der Krabbenposition auf der Registerkarte, wenn Sie das auswählen. Und wenn, und wenn Sie die Verschiebungsantwort hier auswählen, können Sie sehen, dass wir hier einen harten Wert haben, also haben wir 77,5. Wenn du in dieses Feld tippst, wirst du sehen, dass es dieses FX-Symbol einen Schriftsteller gibt. Und wenn es wo immer Sie sehen und fx Symbol innerhalb eines Eingabefeldes, innerhalb einer Pro Pies UI. Das bedeutet, dass Sie stattdessen eine Formel hinzufügen können. Also, was wir tun werden, ist, dass wir auf das FX-Symbol tippen. Und es wird hier aus diesem kleinen Feld herauskommen. Und hier können wir anfangen, unsere Formeln zu erstellen. Und was wir tun werden, wir werden nur den harten Wert hier entfernen. Und was wir tun werden, ist, dass wir auf den Plus-Button tippen. Und wir werden nach der Gruppe suchen, die heute angerufen wurde. Stellen Sie also sicher, dass Sie Gruppen, das ist ein gepunktetes Quadrat Symbol daneben. Also wählen wir das aus. Und Sie können hier sehen, dass wir diese kleinen Häkchen haben. Das ist also der Dank von Lee. Wie Sie innerhalb einer Formel auf ein Layout oder eine Gruppe von Layern innerhalb Ihres Prozess-Hype verweisen. Okay, also haben wir unsere Gruppe. Nun möchten wir nun eine bestimmte Eigenschaft dieser Gruppe hinzufügen. Also, um auf eine Eigenschaft in einer Gruppe zugreifen, das erste, was wir tun, ist, dass wir eine Periode angezapft, so adoptiert. Und sobald Sie darauf tippen, wird ein Menü angezeigt. Und Sie können sehen, dass Sie Zugriff auf die üblichen Eigenschaften haben, die Sie in verschiedenen Phasen durch diesen Kurs gesehen haben. Und wir können tatsächlich auf diese Eigenschaften dieser Gruppe direkt über diese Formel zugreifen. Also, was wir tun werden, ist, dass wir die x-Eigenschaft auswählen. So können Sie sehen, wenn ich Banken tippe auch abgeschlossen und dann im Grunde filtert diese Dropdown-Box in alles, was x in S bekommen hat, also wollten wir einfach die x-Werte. Also wählen wir das aus. Und wir werden auf OK klicken. Und wir werden das testen. Und was wir wirklich suchen, ist keine Veränderung. So tippen wir auf empfohlen, dass ich Werke wie zuvor sehen, wenn wir heute angezapft, können wir sehen, dass auch funktioniert. Aber jetzt wird heute tatsächlich verwendet. Formel, es verwendet die x ist der x-Wert der, der heutigen Gruppe. Und Fledermäuse treiben dieses Verhalten jetzt an. Wenn wir also diese Gruppe effektiv an einen anderen Ort verschieben , funktioniert das Becken immer noch. Es war immer noch das Zentrum dieser Gruppe zu finden, weil es tatsächlich direkt mit einem dynamischen Wert in der Gruppe selbst verbunden ist. Okay, das ist die erste Verwendung von Formel, die wir in unserem Prototyp verwenden. Als nächstes werden wir, wir eine Animation reparieren, die wir vor einer Weile gemacht haben. Und es war die Animation, in der wir auf diesem Home-Bildschirm waren. Und was wir eigentlich tun werden, ich werde nur, es wird diesen Hintergrund absperren, nur damit wir auf andere, andere Komponenten zugreifen können. Also haben wir dieses Bild von diesem Moränen-Meringue-Kuchen bekommen. Und wenn Sie sich erinnern, im vorherigen Abschnitt vor einiger Zeit haben wir im vorherigen Abschnitt vor einiger Zeitim Grunde eine Detailansicht erstellt. Wenn Sie dies auswählen, lassen Sie uns das einfach ausführen, damit Sie sehen können, wie das aussieht. Soft hat Maya, mein Vorschaufenster hier. Also werde ich auf sie oder Imperium klicken. Und wir haben das hier. Und das ist alles in Ordnung. Es wuchs irgendwie aus dem Daumen heraus. Nun, wir hatten auch eine Rückenanimation, bei der ich gerade diesen Zurück-Button drücke und die effektiv zurückschrumpft. Und das ist in Ordnung. Es funktioniert gut, wenn die Bildlaufposition in dieser Standardposition ist. Aber wenn ich jetzt diese Schriftrolle, diese Lemma, Marine Scheiterhaufen Grafik bis zum oberen Rand des Bildschirms bewegen . Und wenn ich es jetzt drücke, werden Sie sehen, dass es an der richtigen Position beginnt. So wächst immer noch aus dem Miniaturbild heraus. Aber wenn ich auf den Zurück-Knopf klicke, wirst du sehen, dass er hier unten wieder hinuntergegangen ist. Und lassen Sie mich das verlangsamen. So können Sie das sehen. Also werden wir, wir werden nach oben Haus Roll Position und tippen Sie auf die Pi. Und Sie können sehen, dass das richtig herauswächst. Aber wenn wir zurücktippen, können wir sehen, dass es tatsächlich in seine Startposition Leerzeichen geht, nicht nach der Scroll-Position. Wenn es ist, wenn wir daraus kommen, dass diese gesund. Das ist, was wir jetzt beheben werden, indem wir Formeln verwenden. Okay, was wir tun werden, ist, dass wir zu dem Tap Trigger gehen , der auch mit dem Zurück Button verbunden ist. Also müssen wir den Zurück-Button herausfinden, zu dem hier ist. Also haben wir diese Gruppe hier hinten in Boston. Und hier ist der Hut-Trigger. Und eigentlich ist das umbenennen, um es ein wenig leichter zu finden. Und wir werden das öffnen und diese drei Aussparung entfernen. Wir werden sie einfach komplett löschen, so dass wir diese, diese hintere Animation neu erstellen werden. Aber dieses Mal wird es folgen die richtige Position der Scroll-Position unserer, unserer Ansicht. Okay, also werden wir in diesen Auslöser direkt oben gehen. So ist es in der Tat einfach umbenennen Sie diesen tippen Detailansicht Registerkarte für. Das ist also unsere Einstiegs-Animation und wir Effekte, wir wollen dies für X-Animation umkehren. Okay, also nochmal, um die Deckkraft der Karte zu kopieren, dieses Haus oder dieses erste. Und wir werden das wieder in unseren Wasserhahn einfügen. Und wir werden die Deckkraft auf 0 setzen. Und wir werden die Dauer auf 0 Punkt 1 setzen. Und wir werden die Verzögerung beseitigen. Der nächste, den wir kopieren werden, ist der Hintergrund oder Pasiphae. Und das werden wir einfügen. Und wir werden das auf 0 setzen. Dies ist also das Hintergrundzelt, das effektiv das unten markiert, wenn die Ansicht herausspringt. Als Nächstes werden wir den Radius kopieren. Fügen Sie das ein. Und wir werden den Radius auf 16 setzen , weil das die ursprüngliche Krümmung unseres Daumens ist. Nun, als nächstes werden wir das Bild drei Skala kopieren. Ich werde das hineinkleben. Und wir werden die Skala auf eins setzen. Und ich gebe euch zwei für 4,5. Und wir werden die Dauer bei zwei belassen und die Verzögerung bei 0 belassen. Das ist alles gut. Und k Als nächstes werden wir kopieren und einfügen, dass in. Und wir werden das x auf 16 setzen. Und das ist, wo unsere voll da jetzt ins Spiel kommen wird, weil der Zug ist die, ist die Schlüsselantwort, um die Animation in der richtigen Position auf diesem Scroll zu bekommen, auf dieser Scroll-Position. Also werde ich einfach mit Y in das Y-Feld und wir werden das FX-Symbol treffen. Und wir werden den Herzwert entfernen. Und wir werden es binden und all unsere Mathematik. Das erste, was ich tippe, ist 19 bis plus 96. Und wir werden das in ein paar Klammern einwickeln. Und was dieser Grund, warum wir getan haben, ist, dass wir diese beiden Werte zusammen hinzufügen wollen , bevor wir die nächsten Berechnungen erarbeiten , die wir in Klammern empfehlen , die die Formel zwingen, diese beiden Werte zuerst zusammen hinzuzufügen, erhalten Sie das Ergebnis und verwenden Sie dann dieses Ergebnis. Und manchmal muss man das tun. Andernfalls können Sie ein anderes Ergebnis erhalten, wenn sie wie Wert zuerst arbeiten? Also werden wir dann ein Minus hinzufügen. Also wieder, c minus das von etwas. Und dann werden wir den Raum gießen. Sie müssen nicht in Raum M gehen, aber es macht es nur ein wenig lesbarer. Und wir werden jetzt auf den Plus-Button tippen. Und wir wollen nach Seite eins suchen, das ist unsere erste Scrolling-Ansicht hier. Also wollen wir Seite eins wählen. Wir werden den Doppler vorbereiten, den wir vorher gemacht haben. Und dieses Mal wollen wir einen anderen Wert. Wir wollen etwas namens Scroll-Offset. Dies wird uns also den Wert des Scrolls und eine bestimmte Zeit geben , wenn der Benutzer nach unten scrollt. Okay, wir werden also auf OK klicken. So vervollständigt die Formel. Okay, also werden wir jetzt das Bild drei Skala kopieren. Das ist die geheimnisvolle Kettenwaage. Ich werde das hier kopieren. Und wir werden das in umgekehrter Richtung einfügen. Und wir werden das auf 163176 setzen. Und dann schließlich werden wir das Bild drei Kette Deckkraft kopieren. Ich werde das hineinkleben. Und wir werden eine Dauer 0 lassen, aber