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 wir werden das um 0,2 verzögern, weil wir wollen, dass das zuletzt passiert. Also effektiv, was wir hier tun, ist, dass wir das Kettenbild wieder ausblenden. Eigentlich neigt es zu 0 genau in der letzten Minute, in der letzten Minute. meiste davon ist
also, das ist, das ist eine Art von umgekehrter Animation selbstgefällig MOSFET ist ziemlich gleich. Wir kehren nur die Werte um. Und wie ich schon sagte, der Umzug ist die,
ist, wo wir den dynamischen Wert hinzugefügt haben. Okay, also geben Sie den Test, um zu sehen, ob das funktioniert. Also, ich habe es immer noch auf einem kühlen Begriff,
Geschwindigkeiten, so dass wir unsere Schriftrolle in eine Position bringen können, damit wir sehen können, dass dies funktioniert oder nicht. Also werde ich das angreifen und wir haben unsere offene Animation, die wir nicht geändert haben,
die bereits funktioniert, aber das ist die, die wir ändern. Wenn wir also auf Schließen klicken, können
wir jetzt sehen, dass die Animation zum Umkehren N tatsächlich
wieder in die richtige Scroll-Position unseres Scroll-Mantels animiert . Das bringt uns also zum Ende
unseres ersten Blicks auf Formeln und wie wir Formeln verwenden können, um Positionen zu verfolgen. Im nächsten Video werden
wir einige weitere Beispiele für Formeln verfolgen. Also sehe ich dich dort.
35. Einen notification erstellen: Hallo da. In diesem Video werden wir Formeln verwenden, um einen Benachrichtigungszähler zu erstellen. Also, das ist zuerst mal schauen, was wir bauen werden. Das erste, was wir tun werden, ist, dass wir
dieses neue Design für unseren Update-Bildschirm importieren . Und dieser Update-Bildschirm wird uns drei Orte zeigen. Also drei potentielle Pi-Enthusiasten, die wir vielleicht folgen wollen. Und wir werden dieses Benachrichtigungs-Abzeichen auf Updates Symbol in der oberen Leiste hinzufügen, die uns sagen wird, dass wir drei Elemente haben, die wir auschecken müssen. Wir werden Variablen verwenden, um diese Zahl zu kontrollieren. Und wenn wir dann auf den Home-Bildschirm springen, werden
wir sehen, wie diese kleine Animation knallen, die uns das Abzeichen
zeigen, während wir uns anmelden. Das ist also, was wir in diesem Video eingebaut werden. Also lasst uns dazu kommen. Also hier bin ich wieder ihm meine Teller Rest App. Wenn Sie mitverfolgt haben, können
Sie einfach verwendet werden, Sie können einfach die gleiche,
die gleiche Datei verwenden , die Sie gewesen sind, Sie zusammen mit mir erstellt oder verfolgt haben. Wenn nicht, können Sie eine Starterdatei herunterladen. So können Sie daraus folgen, aus diesem Abschnitt. Das erste, was ich tun werde, ist, dass ich zur Update-Szene gehe. Und ich werde alle Ebenen zusammen gruppieren, abgesehen von den Strömungen, die Dinge passieren. Diese Layer stellen also den leeren Zustand dar. Also wollen wir nur diese Welle jetzt hervorheben. Also werden wir es leeren Fleck nennen. Und das ist nur das anheuern. Als nächstes werden wir importieren, wie neue Bildschirm von unserem aus dem Abschnitt neun Assets, die auch an die angehängt ist, zu diesem Abschnitt, zu diesem Video-Abschnitt. Und ich werde Figur verwenden, wie ich war, ich habe alles durchgemacht. Und nur um Ihnen einen Blick zu geben, das ist das Design, das wir aus unserer speziellen Datei einbringen werden. Aber natürlich, wenn Sie zusammen mit Skizze folgen oder Sie können einfach die Grafiken aus diesen Apps verwenden. Und was ich tun werde, ist, dass ich zu
unserer Szene gehe und ich werde einfach löschen, wenn irgendetwas dran ist, das einfach abführt. Es ist also völlig klar. Und wir werden unsere Grafiken importieren. Bis auf die beiden Full-Stack-Küstenwolkendesign Impulse es. Das nächste, was wir tun werden, ist, dass wir nur
unsere drei Benachrichtigungen zusammenfassen , sind drei Preise zusammen. Ich werde die Gruppe Paestum nennen. Wie spielen Liebhaber. Und wir werden nur einige der Abstände und die Größe ausgleichen. Also gehen wir zu, für jede Pice Untergruppe. Also, wenn du nur Herzl runter zu
diesen drei freien Einzelgruppen zurückkommst und wir werden sie nur 200 machen. Hi, das ist ein bisschen Setup für jemanden oder sie später. Und ich möchte auch nur den Abstand zwischen jedem machen. So können Sie einfach, wenn Sie diese kleine Grafik bekommen wollen, wo es Ihnen irgendwie den Raum in den Entfernungen zeigt. Wenn Sie nur ein Objekt auswählen, Mauszeiger über das Objekt, zwischen dem Sie messen möchten. Und dann halten Sie einfach den Knopf gedrückt. Dein Gad, dass du ein bisschen bekommst, wird helfen. So können wir sehen, dass wir dies nur um ein Pixel anpassen müssen. Und das eins nach zwei. Weil ich jetzt alles dazwischen sein sollte. Das sieht gut aus. Okay, also werden wir jetzt kopieren Orte Gruppe und seinen Titel. Es wird Befehl C oder Kontrolle C unter Windows. Und wir werden zu unseren Updates zurückkehren. Und wir werden diese Grafiken einfach einfügen. Ok, also lassen Sie unsere Appliances Group und wir wollen ein in eine Scroll-Ansicht verwandeln. So verlassen wir Will die Gedanken, ihre Preisgestaltung eine vertikale Schriftrolle. Und wir werden nur den Bildlaufbereich so ändern, dass sie innerhalb unserer, innerhalb unserer Szene sitzt, dass, wie wir zuvor gelernt haben, um eine Gruppe zu scrollen, müssen
Sie den sichtbaren Bildlaufbereich einstellen
, der was wir gerade getan haben. Und es muss nicht super genau sein. Es ist nur grob geht immer um die Tab-Leiste, dann wird es gut. Und dann werden wir endlich die Hutleiste unseres Photons ganz nach oben verschieben. Das wollen wir. Wir möchten, dass unsere Scroll-Ansicht effektiv unter der heißen Bar dort scrollt. Das ist der Denker. So wird die Ansicht eingerichtet. Wir wollen einfach nur denken, dass ich all diese Auslöser auch gruppieren werde, damit wir uns auf unseren neuen oder neuen Trick
konzentrieren können , ist, dass wir einige
hinzufügen, um diese zusammen zu gruppieren. Und ich werde diese Navigation nennen. Also, das ist nur ein paar Sachen, die wir in einem vorherigen Video gemacht haben. Verstecken Sie das nur aus dem Weg, und das ist unser Update-Bildschirm eingerichtet. Als Nächstes werden wir unsere Aufmerksamkeit darauf richten, den Krebs zu erschaffen. Okay, also werden wir die Konten jetzt erstellen und funktional, wir wollen jetzt zählt zu Robert, die die Anzahl der
Freundesanfragen darstellt , die ausstehen. Also im Grunde die Freunde, die Empfehlungen der Freunde, die wir hier aus unserer Sicht haben. Das erste, was wir tun werden, ist, dass ich zum Impuls zurückkehren werde. Und wir wollen unsere Abzeichengrafik bekommen. Das ist immer noch eine kleine Grafik, die sich hier auf das Glockensymbol konzentriert. Also werden wir das kopieren. Und wir gehen zurück zum Startbildschirm. Ich werde es einfügen. Okay, also bringen wir die Abzeichen rein,
die Abzeichen in OWL, in seine Hutstange. Lassen Sie mich einfach schließen einige dieser Gruppen darüber, wie tippen Sie unsere Gruppe, wir werden die Abzeichen verschieben oder sie sind einfach an der Spitze gibt es in Ordnung. Und wir werden es neu positionieren. Gehen wir also zu unserem Eigenschaftenfenster und ändern Sie diese Werte in 225. Und wir können sehen, dass wir gerade in
der oberen rechten Ecke unseres Bel Air sitzen . Ok. Wenn wir also zurück zu unserem Abzeichen mit dem letzten Panel gehen, wollen wir nur
diese Abzeichengruppe öffnen und Sie wollen die Textebene finden, die diese ist, das kleine Symbol, die Lasten hier und S. Also das ist derzeit, wie Nummer eins, wir wollen Wählen Sie das aus. Wir wollen in der Lage sein, diesen Text zu bearbeiten. Wir wollen einen echten Wert in das übergeben. Also müssen wir das in eine echte native Sonde Höhe Textobjekte verwandeln. Also, wenn Sie es im Ebenenbedienfeld auswählen und dann den ganzen Weg über zum
Eigenschaftenfenster gehen und einfach auf diese Umwandlung von Texten Vaseline,
CO tippen . Und jetzt können Sie sehen, dass es ist, die Symbole ändern ist es diese TI prägnant jetzt ein bearbeitbares Textfeld geändert. Wir werden diesen Zähler umbenennen. Und das nächste, was wir tun wollen, ist, dass wir
eine Variable erstellen wollen , die den Wert unseres Rates hält. Also werden wir hier zum Variablen-Panel kommen. Und wir werden eine Variable für alle Szenen erstellen. Und wir werden diesen Zähler umbenennen. Und wir werden den Anfangswert einstellen 23 besagt, dass wir drei Benachrichtigungen in unserem Design erhalten haben. Ok, als nächstes werden wir aufhören, an einigen Triggern zu arbeiten,
wie konzentriert um einige unserer älteren Trigger, so dass wir uns an etwas Platz erinnern können, mit dem wir arbeiten können. Und wir werden einen starken Auslöser hinzufügen. Und wir werden es vorerst auf seine Standardwerte belassen. Und dann innerhalb dieses Aktienauslösers, werden
wir einige, einige Antworten hinzufügen, aber bevor wir das tun, werden wir es einfach in Gegenstein umbenennen. Und als nächstes werden wir unsere erste Antwort hinzufügen, die eine Text-Antwort sein wird. Und wir werden wählen, wie Rat Steuerlabor. Und wir werden den Inhalt von Texten ändern, die Formel. Also wollen wir hier eine Formel verwenden und wir werden nicht sehen, den Wert unserer Variablen übergeben. Also drücken wir den Effektknopf und dann den Plusknopf. Und Sie müssen Ihren Zähler wählen wollen, die Zählervariable, die nur am Ende der Liste steht hier. Wir werden auf OK klicken. Okay, das ist also Test, um zu sehen und sicherzustellen, dass unsere Variable erfolgreich an unseren Rat weitergegeben wird. Okay, cool. So können Sie sehen, es hat eine Nummer drei in unserem, in unserem Batch hier können Sie in unserer Datei sehen, es hat eine Nummer eins. Zur Laufzeit können wir sehen, dass unsere Variable tatsächlich in unseren Zähler übergeben wird. Ok, also als nächstes möchten
wir die Benachrichtigungspopup-Animation erstellen. Also wollen wir, dass diese Animation nur das Auge
des Benutzers zieht sich einloggt und er kann ihm sagen, dass es Benachrichtigungen gibt und seine Aufmerksamkeit braucht. Also lasst uns das jetzt machen. Schließen Sie, wie verrückt es wissen würde. Und wir werden die Batch-Gruppe auswählen. Und wir werden seine Deckkraft auf 0 ändern. Okay, wir gehen zurück zum Gegenlager Auslöser und wir werden hier eine Kapazität hinzufügen. Und wir werden unsere Bank als Ziel auswählen. Und wir werden die Deckkraft auf 100 setzen. Ich werde die Dauer in einen etwas kürzeren Speedo 0 Punkt eins ändern. Und wir gehen um 0.22 ins Land. Okay, als Nächstes fügen wir eine Antwort auf den Umzug hinzu. Und wieder möchten Sie sicherstellen, dass das Badge als Ziel ausgewählt ist. Und wir werden anerkennen, dass wir Animationssystem in der ersten Hälfte tatsächlich gehen Animation. Also werden wir unsere Ärzte ändern, die
vorbeiziehen, weil wir sie nur um ein paar Pixel verschieben wollen. Manchmal ist es einfach, MOOC durch einen Schritt zu verwenden, abhängig davon, was Sie tun. Weil ich die Marke ein wenig nach oben und unten schiebe. Es ist einfacher für ihn, mich zu benutzen, anstatt den absoluten Wert herauszufinden. Und ich werde den Wert im Y-Feld T minus zehn festlegen. Ich werde die Dauer so belassen, wie sie ist, und wir werden das auch um 0,2 verzögern. Okay, also werden wir jetzt den Umzug zu Apple Command oder Control D unter Windows duplizieren. Und wir werden das nur bearbeiten. Wir können das Minus entfernen, also werden wir es um zehn verschieben, um es
effektiv wieder in die Position zu bringen, an der es begonnen hat. Diesmal spielen wir ein bisschen um das Essen herum. Wir werden eine Leichtigkeit aussuchen. Und wir werden die Interpolate von kubisch zu elastisch ändern. Okay? Und dann werden wir endlich die Dauer auf 0,5 erhöhen. Und wir machen die Verzögerungen oder 0,3. Okay, also das ist gut. Das ist unsere kleine Animation. Okay, lassen Sie mich das ein paar Mal ausführen, damit Sie ein wenig wackeln von unserem Kreditantrag schlecht
sehen können . Es kommt nur, wenn wir die Homeschooling-Codes laden. Das bringt uns also zum Ende dieses Videos. Im nächsten Video werden
wir untersuchen, wie wir den Zähler dynamisch
ändern können , wenn wir Freundschaftsanfragen annehmen.
36. Eine Funktion für Freundinnen zu erstellen: In diesem Video werden
wir weiter an unserem Benachrichtigungszähler arbeiten. Und wir werden jetzt Funktionalität hinzufügen, so dass sich der Zähler dynamisch ändert, wenn wir akzeptieren, den Empfehlungen und
den Empfehlungen zu folgen , dass der Update-Bildschirm an uns gegeben wird. Also, das ist zu knacken. Das erste, was wir tun werden, ist, dass wir wieder unser Zuhause hier sehen. Natürlich, wenn Sie mitverfolgen möchten, verwenden Sie
weiter die Datei, die Sie verwendet haben. Andernfalls können Sie eine Datei herunterladen. Und um mit diesem Video-Fall zu folgen, werden
wir, wir werden, wir werden, wir werden, auf dem Home-Bildschirm beginnen. Und das erste, was wir tun werden, ist, dass wir zu unseren Platzierungen gehen, und wir werden die Abzeichengruppe kopieren. Und wir werden mit unseren Updates gehen. Und das werden wir hier reinkleben. Und wir werden es einfach in die Plätze stecken. Haben Sie Bill hier. Ok. Als nächstes gehen wir zu kopieren, gehen Sie zurück zum Home-Bildschirm und wir werden den Counter-Stern-Trigger kopieren. Und wir werden das auch in unserem Update c,
k. einfügen, also werden wir ein wenig an diesem Thekenstern arbeiten. Also werden wir die Option ändern, um mit dem Sprung zu beginnen. Und wir werden nur die letzten drei Antworten entfernen. Wir wollen nur die Steuerantwort behalten. Und wir werden nur die Steuerantwort wieder mit dem Steuerauslöser verbinden. Also werden wir nur nach unseren Gegentexten suchen. Und wir werden das auswählen. Ok, das nächste Mal soll der Zähler nur angezeigt werden, wenn er einen anderen Wert als 0 hat. Also wollen wir den Zähler in dieser Situation dynamisch verstecken. Der Weg, dies zu tun, ist, dass wir unserem Counter-Stil Trigger eine Bedingung hinzufügen. Und wir werden die Bedingung festlegen, um unsere Zählervariable zu betrachten. Und wir werden sehen, ob diese Variable, der Wert dieser Variablen größer als 0 ist. Also werden wir das Größer-als-Symbol verwenden, das hier ist. Und wir werden nach dem Wert suchen, der größer als 0 ist. Okay, wir werden
dieser Bedingung erneut eine Kapazität hinzufügen , um das Ziel als Batch-Gruppe festzulegen. Und die Suche nach Batch hier. Und wir werden die Deckkraft auf 100 setzen. Und wir werden nur die Dauer auf 0 reduzieren. Also, was wir hier im Grunde tun, wird
diese Bedingung sehen, ob die Zählervariable mehr als 0 ist. Und wenn es mehr als 0 ist, wird
es den Batch zeigen. Ok. Als nächstes wollen wir, dass der Zähler abnimmt, wenn wir jeden Anhänger akzeptieren. Also lasst uns das machen. Das erste, was wir tun werden, ist, dass wir in unsere Pastoren gehen und den ersten auswählen. Und wir werden einen Tab-Trigger hinzufügen. Wir werden dann eine Zuweisungsantwort hinzufügen. Und wir werden unsere Zählervariable auswählen, die gerade hier ist. Und wir werden hier eine Formel machen. Also tippen wir auf FX und dann auf das Plus. Und wir werden unsere Zählervariable wählen. Und wir werden hier etwas über Mathematik tun. Wir werden einfach einen davon entfernen. Also nehmen wir die Zählungen sind variabler Wert und wir bekommen ein Minus eins davon. Und wir werden auf OK klicken. Also müssen wir das auf die anderen beiden Pipes anwenden, das, also werden wir diese Taktik einfach duplizieren oder ein paar Mal. Und wir gehen einfach in den Tap Trigger und ändern das Ziel auf die anderen beiden. Also wollen wir Tortenloch und wir wollen Jack Horner. Guter alter Jack, steckte dort in seiner Ecke fest. Ok. Also als nächstes werden wir einen Erkennungsauslöser hinzufügen weil
wir erkennen müssen, wenn sich der Zählerwert ändert. Und wieder ein Ziel als Zählervariable zu wählen. Und dazu werden wir eine Text-Antwort hinzufügen. Und wir werden das Zähler-Textfeld wählen. Und wir werden hier noch eine weitere Formel hinzufügen. Also werden wir das Konzept von Text oder Formel wechseln. Und wieder werden wir die Effektteile in treffen, und wir werden den Berater auswählen, die Variable. Ok, also wird dieses Erkennen erkennen, wenn sich der Zählerwert i0 ändert. Wenn wir tippen diese folgen Tasten um eins verringern, wie wir in SSI und Trigger hier getan. Und wenn es eine Änderung erkennt, wird
es im Grunde das Textfeld aktualisieren. Also, das ist die kleine Bash, wo es die Nummer hat, wird es auf den Wert aktualisieren. So wie wir außer den Anhängern, wird
der Wert kommen. Okay, als nächstes wollen
wir die folgenden aus der Liste entfernen, wie sie befolgt werden. Also wollen wir, dass diese verschwinden und die ganze Lektion muss sich bewegen, um den Raum einzunehmen. Das ist es, was wir jetzt tun werden. Das erste, was wir tun werden, ist, dass wir unseren ersten Tipp hier auswählen. Und wir werden eine Deckkraft Antwort hinzufügen. Und wir werden, Wir haben die,
stellen Sie sicher, dass der Kuchen 3-1 für Gruppe ausgewählt ist. Und wir werden ihre Vergangenheit T2 0 ändern. Und wir machen die Dauer 0.01. Als nächstes werden wir eine Bewegung Antwort hinzufügen. Und im Grunde wollen wir, wir wollen, dass diese anderen beiden Anhänger nach oben gehen, den Raum nehmen, während wir diesen ersten akzeptieren. Also in unserer Bewegung Antwort, werden
wir die Pi ganze Gruppe wählen. Und wir werden wählen, wir werden es vorbeiziehen lassen. Und wir werden den y-Wert zwei minus 213 ändern. Und wir werden es nur um 0,1 verzögern. Und das lässt nur Zeit für die Deckkraft auf dem ersten Objekt passieren, denn es verschwindet vollständig, bevor der Rest der weniger scrollt, um seinen Platz einzunehmen. Als nächstes werden wir
diesen Bewegungsauslöser duplizieren und wir werden nur seine Ziele ändern. Wer? Jack Horner. Und das ist, weil wir wollen, müssen
wir auch den Jack Horner Artikel verschieben. Beide müssen also zusammen nach oben gehen. Okay, also werden wir die Kapazität und die Antwort des ersten Umzugs kopieren. Und wir werden es in unseren nächsten Tipp hier einfügen. Es wird es da drunter stellen. Und wir werden das Ziel der Deckkraft in Python ändern. Und wir werden den Umzug zu Jack Horner ändern. So wird dies oft berücksichtigt, wenn wir diesen Gegenstand hatte, wird diese beeinflussen. Endlich werden wir unsere Deckkraft kopieren. Ich werde es in unseren letzten Bereich einfügen. Und wir werden das Ziel in Jack Horner ändern. Ok, schließlich möchten wir das Badge entfernen, wenn der Wert des Zählers gleich 0 ist. Also lasst uns das jetzt machen. Also gehen wir zu unserem Detect-Trigger. Und wir werden eine Bedingung dazu hinzufügen. Und wir werden es so einstellen, dass wir die Zählervariable betrachten. Und wir werden sehen, wenn die Zählervariable gleich 0 dieser Bedingung ist. Und wir werden eine Deckkraft hinzufügen. Wir werden das Abzeichen als Ziel festlegen. Und wir werden die Deckkraft auf 0, k. also wird diese Bedingung suchen, wenn der Zähler gleich 0 ist. Und wenn es keine Benachrichtigungen mehr gibt, werden
wir den Stapel verstecken. Okay, also fügen wir noch eine Bedingung hinzu. Und dieses Mal werden wir
die Zählervariable setzen und wir werden suchen, wenn es größer als 0 ist, IE, wenn es noch einige Benachrichtigungen hat. Und wir werden diese Text-Antwort verschieben, die wir erstellt haben. Ich werde das in diesen Zustand bringen. Diese Bedingung wird also ausgeführt, wenn der Wert größer als 0 ist. Und das ist, wenn es erlaubt, den Wert in der Charge zu dekorieren. Also werden wir das immer noch sehen,
das Abzeichen dort und der Wert, der herunterzählt. Okay, als nächstes gehen wir zurück in unsere leeren Staaten. Wenn Sie sich erinnern, in dem vorherigen Video, wir erstellt diese leeren Zustandsgruppen oder die End-Zustands-Grafiken zusammen wir nur, wir haben nur die Ebene getroffen. Also wollen wir diese Ebene tatsächlich aktivieren. Aber wir wollen jetzt zu reduzieren, diese Trübungen sind Nullen. Wir möchten es nur so einrichten, dass sie eingeblendet
werden kann , wenn wir alle Benachrichtigungen erhalten haben. Wir gehen zurück zu diesem Detektionsauslöser. Und in der ersten Bedingung werden
wir eine weitere Deckkraft hinzufügen. Und wir wollen unseren Titel hier ausblenden. Benennen Sie dies einfach in Titel um, um es einfacher zu finden. Und wir werden diese Zeit wählen. Also, wie werden wir die Deckkraft auf 0 setzen? Schließlich gehen, um eine weitere Kapazität hier hinzuzufügen. Und dieses Mal werden wir nach dem leeren Zustand suchen. Und wir wollen den leeren Zustand zeigen, wenn wir
keine Benachrichtigungen mehr haben , die so grau erhöhen hier, übergeben T2 100. Okay, also haben wir viel gemacht, also ist das testen,
sehen, wie das funktioniert. Also, wenn wir unsere Vorschau laufen, sagt
es mit diesem aus dem Weg. So können Sie hier sehen, ich habe ein Abzeichen von drei Benachrichtigungen. Wenn ich also auf die erste Schaltfläche „Folgen“ tippe, verschwindet
das erste Element, die anderen beiden Elemente bewegen sich nach oben. Und Sie können sehen, dass unsere Chargen diese Währung zu zwei. Wenn ich dann ist es passiert nächsten Folgen-Button,
traf, dass Ströme zu einem, und wenn ich den letzten Folgen-Button trage, verschwindet es, das Abzeichen verschwindet und es lädt in wie vorherigen leeren Zustand. Okay, das sieht gut aus, das funktioniert alles. Ok, also haben wir jetzt unseren dynamischen Benachrichtigungszähler abgeschlossen. Wir haben sehr ausführlich erforscht, wie wir die Leistungsfähigkeit von Formeln nutzen können , die uns dabei helfen, einige wirklich reichhaltige Funktionen in unseren Prototypen zu schaffen. Hoffentlich gibt
Ihnen diese kurze Einführung in Formeln genügend Informationen, um sie weiter zu erkunden. Wir haben nur wirklich die Oberfläche gekratzt hier ist viel mehr zu lernen. Im nächsten Abschnitt werden
wir weitermachen und den ersten Blick auf die Komponenten werfen. Du willst das nicht verpassen. So sehen wir uns dort.
37. Komponenten erstellen: Hallo da und willkommen zurück. In diesem ersten Video, in dem wir uns Komponenten betrachten, werden
wir eine Komponente
aus unserer Tab-Leiste Datei schwebende Tab-Leiste bauen , die wir hier haben. Innerhalb unserer pinterest-App. Komponenten sind wirklich eine wirklich nützliche Dinge zu haben. Es ist ein wirklich großes Feature innerhalb von Pro Pi. Komponenten ermöglichen es Ihnen, Teile der Benutzeroberfläche über Ihre Prototypen hinweg wiederzuverwenden, haben
aber immer noch eine zentrale Quelle der Wahrheit. So können Sie in die Master-Komponente gehen und Sie können Änderungen vornehmen, und das wird sich durch alle, alle Instanzen,
die Sie verwenden, vermehren . Also werden wir unsere Tab-Leiste in eine Komponente verwandeln. Das erste, was wir tun werden, ist, dass wir unsere Tab-Leisten-Gruppe auswählen. Und wir werden das in eine Komponente verwandeln. Und es gibt ein paar verschiedene Möglichkeiten, das zu tun. Ich kann entweder auf die Komponenten-Schaltfläche hier oben in der Benutzeroberfläche tippen, oder ich kann mit der rechten Maustaste auf die Gruppe klicken und ich kann eine Komponente aus dem Flyout-Menü konvertieren. Also werde ich von hier aus einfach in Komponente konvertieren wählen. Okay, wir können jetzt sehen, dass unsere Gruppe zu einer Komponente geworden ist. X-Symbol ist Veränderung hat diesen kleinen Blitz im Inneren von dort. Und wenn wir zum Bedienfeld „Komponenten“ gehen, das sich nur auf der Seite der Benutzeroberfläche befindet, können
wir sehen, dass wir eine neue Komponente in unseren lokalen Komponenten für unsere schwebende Tab-Leiste haben. So werden alle Objekte, die Sie in Komponenten in Ihrer Stapeldatei verwandeln,
automatisch zu Ihrer lokalen Komponentenliste innerhalb des Komponentenbedienfelds hinzugefügt. Und nur um ein paar Sekunden im Bedienfeld „Komponenten“ zu verbringen, schauen Sie sich einfach um. Also, was wir haben, so können Sie hier
die Möglichkeit,
Komponenten zu suchen oder zu sehen, wir haben bereits eine Komponente des Augenblicks. Aber wenn Sie beginnen, eine lange Liste von Komponenten bei einer wirklich nützlichen Feature-Suche zu erstellen, können
wir unsere Ansicht aus dieser Rasteransicht in eine ListView verwandeln. Und schließlich, das letzte, worauf ich Sie in diesem bestimmten Zeitpunkt aufmerksam
machen möchte , ist dieser Stift. So können Sie das Bedienfeld „Komponenten“ effektiv an der Seite der Benutzeroberfläche anheften. Und es wird nur für die Dauer dort bleiben. Wir werden es ausschalten, weil wir etwas mehr Bildschirmplatz brauchen. Okay, also habe ich jetzt meine Komponente erstellt. Ich möchte meine Komponente bearbeiten. Und ich kann meine Komponente bearbeiten, indem ich Eva im Bedienfeld „Komponenten“ auf Luft doppelklicke. Oder ich kann eine Komponenteninstanz auswählen, die dieser Typ hier ist. Und ich kann wieder das Rechtsklick-Menü verwenden und ich kann Goto Master-Komponente wählen. Ich werde das tun. Okay, also sind wir jetzt in den Komponenten. Das ist also die Master-Komponente. Die Macht der Komponenten,
wie ich bereits sagte,
besteht also darin, dass Sie diese zentrale Quelle der Wahrheit haben. Wenn Sie Komponenten aus dem Bedienfeld „Komponenten“ hierher ziehen. Sie werden effektiv ausgetrocknet Kopien Ihrer Komponente, die wir Komponenteninstanzen nennen. Alle diese Komponenteninstanzen sind mit den Master-Komponenten verbunden. Es ist also genau das gleiche, wie Komponenten in Apps wie Sigma und Sketch voll erzählt werden. Es. Wir haben die gleiche Beziehung. Okay, also was wir tun werden, ist, dass wir auf unser Auslöserplateau gehen. Und Sie können sehen, dass, wenn ich diese Komponente erstellt habe, tatsächlich alle meine Trigger eingebracht
wird, meine Antworten, die an diese Komponente angehängt sind. Also wird es, es wird die innerhalb der Komponente zu bündeln. Das ist also wirklich nützlich. Ich habe jetzt diesen Bereich in meiner Master-Komponente, der komplett in
sich geschlossen ist. Ich habe die Möglichkeit, Trigger-Antworten hinzuzufügen. Ich kann alle meine Interaktionen innerhalb dieser Komponente hinzufügen. Und wann immer ich diese Komponente benutze, wird all diesen eingebauten Schweiß haben. Wie ich bereits sagte, ist eine wirklich gute Möglichkeit, Teile der Benutzeroberfläche zu partimentalisieren. Auf eine Weise hilft Ihnen,
die Menge der Trigger-Antworten, die Sie in Ihren Szenen als auch haben, zu vereinfachen . Okay, also werden wir anfangen, dieses Ding zu bauen. Also werde ich duplizieren Das ist Hut-Sprunggruppe. Also, das ist seine Kleider aus. Also eins von diesen, lasst uns eins davon duplizieren. Und ich werde es nennen, tippen Sie auf Home. Und ich werde das Ziel in Home Selected ändern. Entschuldigung, nach Hause nicht ausgewählt. Und ich werde zum Sprungabzug gehen und ihn nach Hause wechseln. Also müssen wir nur diesen zusätzlichen Hahn innerhalb unserer Komponente erstellen, weil jetzt OWL, OWL Tab kauft effektiv jede bestimmte gleiche Knoten weil es scheint, dass eine Komponente zuvor wir nur hinzugefügt, um zu erfassen, weil für die anderen drei, weil wir immer auf der gestartet, auf dem Startbildschirm. Und jetzt müssen wir diese Lücke schließen. Also, das hast du gerade getan. Okay, als nächstes müssen wir die Art und Weise ändern, wie wir zwischen Staaten wechseln. Und um dies zu tun, müssen wir etwas Pulled Nachrichten verwenden. Okay, Nachrichten sind also etwas sehr spezifisches für Komponenten. Nachrichten sind das, was wir verwenden, um
mit Objekten und Interaktionen innerhalb unserer Komponente zu kommunizieren. Und es ist auch, wie wir mit
unserem Protest hoch oben von innen unserer Komponente zwei außerhalb kommunizieren . Also, wo wir mit etwas in einer Szene reden wollen, würden
wir, wir werden Nachrichten verwenden, um das zu tun. Und es gibt zwei Teile zu Nachrichten. Es gibt Senden und Empfangen, und es ist eine Mischung aus Triggern und Antworten. Also gehen wir durch die Nachrichtennachrichten, um zu machen, wie Tab-Leiste funktioniert, und das wird Ihnen wirklich helfen, zu verstehen, was Asche ist. Also das ist, das ist, das ist weiter und tun Sie das. Also werden wir einen empfangenen Trigger hinzufügen. Und wir werden uns zu Hause abkühlen. Und wir werden uns hier die Details der Immobilie ansehen. Und wir gehen zu diesem Kanal, fliegen aus. Und wir können sehen, dass es ein paar verschiedene Möglichkeiten gibt, die wir hier haben. Also zuerst, ignorieren Sie einfach alles unter dem Bridge-Abschnitt, das völlig andere Funktionalität ist. Also ignorieren Sie das einfach und konzentrieren Sie sich auf die Optionen, die sich unter der inneren Pi-Kategorie befinden. Wir werden, wir werden wählen, empfangen aus der aktuellen Szene, die ist, was standardmäßig ist. Und was das im Grunde bedeutet, ist, dass wir nach einer Botschaft suchen , die von einer bestimmten Szene ausgestrahlt wird. Wir haben hier einige andere Optionen, die es uns ermöglichen, Nachrichten von
anderen Orten zu empfangen , damit wir Nachrichten von den Eltern erhalten können. Alle Objekte, in denen sich diese bestimmte Komponente befindet, wären also ihr übergeordnetes Element. Jetzt ist in diesem Fall tatsächlich das Elternteil auch die Szene. Aber weil Sie Komponenten verschachteln können, könnten
wir diese Komponente auch in einer anderen Komponente haben. Und in diesem Fall möchten
wir vielleicht mit der übergeordneten Komponente sprechen und nicht mit dem gleichen. So können Sie wählen, Nachrichten aus dem Parameter zu hören. Wir können auch Nachrichten von untergeordneten Komponenten empfangen, das sind alle Komponenten, die sich innerhalb dieser Komponente befinden. Und wir können endlich auch Nachrichten von der aktuellen Komponente empfangen, die eigentlich die halbe Leistungskomponente ist, in der wir uns gerade befinden. Es gibt also viele verschiedene Orte, von denen wir Nachrichten empfangen können. In diesem Video konzentrieren wir uns nur darauf, der Szene zu
sprechen und mit unseren einzelnen Komponenten zu sprechen. Also werden wir unsere App von der aktuellen Szene erhalten lassen. Und der letzte Teil, den wir tun
müssen, ist, dass wir die Botschaft erstellen müssen, wo wir suchen, wir unsere Botschaft nach Hause bringen werden. Und ich werde es in Viehlagern tun. Und das ist etwas, was ich tue. Ich erstelle meine Nachrichten immer in Großbuchstaben, hauptsächlich weil Nachrichten Groß- und Kleinschreibung beachten. Also muss ich mich nicht erinnern, was der Fall ist. Sie könnten offensichtlich oder wenn Kleinbuchstaben, aber ich neige dazu, es in Großbuchstaben zu tun, nur um Nachrichten von anderen Dingen innerhalb des Kredits zu unterscheiden. Okay, also was dieser Auslöser tun wird, er eine Nachricht von der aktuellen Szene erhalten. Und die Botschaft wird suchen, ist zu Hause. Okay, das erste, was wir tun müssen, ist, dass wir
einen Reset für alle von uns hinzufügen müssen , nur für den Fall, dass sie bereits ausgewählt wurden. Wir wissen nicht, wann wir auf der Registerkarte Startseite waren, wo wir vorher waren. Um das zu tun, werden
wir einen Reset hinzufügen. Und wir werden nach Hause wählen. Wählen Sie es aus. Und wir werden das dreimal duplizieren. Und wir werden ein Reset-Ziel für alle unsere oberen Stampfen setzen. Also das ist Arbeit durch diese. Also werden wir wählen die Hälfte ausgewählt. Und wir können einfach tippen ausgewählt. Und wir werden die ausgewählte Datei auswählen. Und wir werden endlich wählen, Benutzer ausgewählt. Okay, jetzt müssen wir unsere Bounce-Animation neu erstellen. Also werden wir eine Deckkraft hinzufügen. Und wir werden das Ziel als unselektiert festlegen. Und wir werden die Deckkraft auf 0 setzen. Wir werden eine weitere Deckkraft hinzufügen. Und dieses Mal wählen wir „Zuhause“. Ausgewählt. Und wir werden seine Deckkraft zu einer 100 sagen. Okay, also setzen wir die Deckkraft von Zuhause nicht ausgewählt auf 0. Denn wenn unsere Bounce-Animation passiert, weil sie skaliert wird, können
Sie effektiv immer noch das andere Symbol darunter sehen. Deshalb müssen wir es, wir müssen das verbergen. Okay, als nächstes wollen wir die Skala vom Sternauslöser kopieren. Also gehen wir runter zu unserem Star-Trigger hier. Und wir werden die Skalenantwort kopieren. Und wir werden es hier hineinkleben. Ok, also können wir dieses Mal kein Reset für unsere Animation verwenden, da es unsere Pastizzi 0 zurücksetzt. Stattdessen werden wir eine andere Skala verwenden. Das ist also HapMap. Und stellen Sie sicher, dass Sie Home als Ziel ausgewählt haben. Und wir werden skaliert um zwei einen Faktor setzen. Und das wird uns eine Skala x und y von 100 geben, was wir wollen. Wenn wir uns unsere vorherige Skala ansehen, können
wir sehen, dass wir sie auf 120 skaliert haben, also wollten wir sie auf 100 zurückskalieren. Als Nächstes möchten wir unsere Lockerungskurven ändern. Wir schauen uns das Reset an. Wir können sehen, dass wir diese Frühlingsanimation verwenden. Also wollen wir diese Werte in unsere Skala kopieren. Also wählen wir Frühling sieben neigt zu 500. Die Reibungen wie Henne. Und wir werden 0,2 als Verzögerung hinzufügen. Das letzte, was wir tun müssen, ist, dass Sie nur sicherstellen müssen, dass unsere Heimat ausgewählten Gruppen Ursprung ist auf Mitte, Mitte eingestellt. Andernfalls wird die Animation von
oben links animiert , als ihre Drehpunkte, die ich auf Mitte, Mitte gesetzt habe. So können Sie sehen, dass das jetzt ist Das ist unser Animieren schön. Okay, das ist alles, was wir für die erste Szene tun müssen. Also haben wir im Grunde den empfangenen Auslöser für die Homeszene eingerichtet. Wir werden jetzt diese duplizieren und wir werden es für wie Lieblingsszene erhöhen. So können wir, wir können effektiv zwischen diesen beiden navigieren und Sie können sehen, dass dies funktioniert. Okay, also lassen Sie uns unseren Empfangs-Trigger-Block duplizieren. Und wir müssen nur irgendwie durch das gehen und
alle Heimziele auf das Favoriten-Ziel ändern . Also lasst uns das jetzt machen. Also möchte ich Herz nicht ausgewählt Herz für diese Kapazität ausgewählt wählen. Für Waagen Wieder wollen wir zu Herz ausgewählt ändern. Wir können alle Resets so belassen, wie sie sind, weil sie funktionieren, egal was die Registerkarte ist. Und schließlich möchten wir dies in Favoriten umbenennen. Und wir möchten die Nachricht auch als Favoriten festlegen. In Kappen. Das ist nur, wieder, meine Vorliebe. Das nächste, was wir tun müssen, ist, dass wir unser Home Selected Icon
zurücksetzen müssen , um nicht ausgewählt zu werden, weil wir innerhalb einer Komponente sind. Wir möchten nicht, dass eines unserer Symbole ausgewählt wird. Am Anfang bekamen wir unsere Resets und unsere empfangenen Auslöser, wie wir mit all dem umgehen können. Also lassen Sie uns zur Startseite Selected Gruppe gehen und wir werden nur ihre Deckkraft auf 0 reduzieren. Und wir gehen auf die nicht ausgewählte Version von Homestay Today. Wir werden das auf 100 bringen. Jetzt haben wir vier Icons und alles sieht gut aus. Eine letzte Sache, die wir tun müssen, bevor wir im Inneren der Komponenten fertig sind, müssen
wir unseren ursprünglichen Star-Trigger entfernen. Dies war ursprünglich die Veranlassung der Balance-Animation, als es in unserer Szene war. Aber wieder, wir haben jetzt unseren empfangenen Auslöser und alle Antworten innerhalb von Köpfen oder behandeln das. So können wir das einfach entfernen. Okay, jetzt haben wir unsere zwei Tabs eingerichtet. Wir müssen nun einige Dinge zur Szene hinzufügen, damit das alles funktioniert. Also, das ist navigieren Sie zurück zu unserem Home-Bildschirm. Und wir werden einen Startauslöser hinzufügen. Und wir werden sicherstellen, dass der Sensor jedes Mal neu startet. Und zum Startauslöser werden
wir eine Send-Antwort hinzufügen. Und senden ist die andere Hälfte des Vernetzungssystems. So haben wir bereits gesagt, dass High-Power-Empfang innerhalb unserer Komponente. Wir müssen
diese Botschaft nun innerhalb unserer Szene senden , damit diese Komponente darauf reagieren kann. Also werden wir wieder den Kanal verlassen, um Währung zu spüren, denn dort holen wir die Nachricht ab. Innerhalb von San-Antworten haben Sie zwei Optionen in der Szene. Sie haben die Möglichkeit, an eine Komponente oder Sensorstrom senden scheint, so werden wir verwenden sendet eine Währung. Und wir gehen zur Nachrichteneingabe. Und wenn wir darauf klicken, können wir sehen, dass wir bereits Anleitungen und Sondenhöhe haben. Od weiß, was diese Semester sind, weil wir eine Instanz unserer Tab-Leistenkomponente in der Szene haben. Und innerhalb dieser Komponente, die wir bereits festgelegt haben, um diese Nachrichten zu empfangen. Das ist also eine wirklich praktische Sache zu haben. Es erspart Ihnen, Ihre Fragen erneut einzugeben. Und es ist auch ein bisschen Validierung, dass wir die Dinge richtig angeschlossen haben. Okay, also wählen wir die Home-Nachricht aus, weil wir auf der ganzen Szene sind. Und das ist jetzt alles, was wir tun müssen, damit unsere Komponente in dieser Szene funktioniert. Also werden wir diesen Stop-Block kopieren. Und wir werden zu unserer Lieblingsszene überspringen. Zuerst werden wir unsere Komponente hinzufügen. Also schnappen wir uns einen Schwimmer. Dinge passieren Komponente in der Ferne hinaus in unsere Szene. Und wir werden das nur in der Krabbenposition positionieren. Sie können auch die andere Instanz aus der anderen Szene kopieren. Das ist absolut in Ordnung. Ich werde nur meine ursprünglichen Orte entfernen, haben Bao Gruppe und ich werde
meinen Auslöser einfügen , den ich von der vorherigen Homeszene kopiert habe. Und ich werde das öffnen. Und ich muss nur die Sendenachricht an
Favoriten ändern , weil wir jetzt auf den Favoriten sind. Okay, also können wir das jetzt testen. Also, das ist einfach zurück zu unserem Haus zu sehen. Okay, also wenn wir hier in der Vorschau schauen, wenn ich nur aktualisieren, können
Sie sehen, dass wir GAO erste Bounce Animation auf dem Home-Bildschirm. Und wenn wir dann zu den Favoriten navigieren, bekommen
wir auch die Bounce-Animation dort. Also können wir jetzt zwischen diesen beiden Dingen wechseln. Und das wird alles innerhalb der Komponente gehandhabt. Und es verwendet diese Trigger und Antworten, Probleme in der Nachricht,
das Senden oder Empfangen, um all diesen Code zu behandeln. Wir haben jetzt unser erstes wiederverwendbares Bauteil für unseren piscivorous Stand entwickelt. Für ein paar Hausaufgaben. Ich überlasse dich, um die anderen beiden Scheinbar anzuschließen. Okay, also im Moment, wie Komponente nur wirklich nützlich in diesem App-Projekt ist. Im nächsten Video werden
wir weiter erforschen, wie wir die Komponente noch
wiederverwendbarer machen können , so dass Sie auch andere App-Projekte verwenden können. So sehen wir uns dort.
38. Bauteilsymbole heißes verschließen: Hey, willkommen zurück. In diesem Video werden wir
unsere Tab-Icon-Grafiken umgestalten , so dass wir sie leicht gegen andere Symbole austauschen können. Dies ist ein wirklich wichtiger Teil, um Ihre Komponenten wiederverwendbarer zu machen. Okay, also das erste, was wir tun werden, ist, dass wir in
unser Komponenten-Panel gehen und wir gehen in unsere Strömungssünden haben Komponente. Und wir werden auf den Menüpunkt Bild tippen. Und was wir tun wollen, ist, dass Sie es in unsere Grafik bringen wollen. Also habe ich diese SVG-Symbole bereits gespeichert, jedes für die Auswahl und der nicht ausgewählte Zustand unserer vier wird dadurch geholfen. Also, das wird verschieben, wählen Sie diese und ich werde beschäftigen, in einem, in einem Rutsch beschäftigt. Ok. Und wieder, weil wir diesen Fehler in der Sondenhöhe in dem Moment haben, wo es die SVGs nicht vergrößert. Basierend auf der Pixeldichte müssen wir nur durchgehen und jede mit 34 multiplizieren. Sie ist eine etwas mühsame Aufgabe. Du musst es individuell machen, aber das ist einfach durchgehen und das jetzt tun. Okay, jetzt haben wir alle unsere Symbole auf ihre richtige Größe vergrößert. Was wir tun werden, ist, dass wir die ausgewählten und die nicht ausgewählten Gruppen öffnen. Und was wir tun werden, ist, dass wir jedes Symbol einfach in seine jeweilige Gruppe ziehen. Also für die ersten Icons, wir werden sie nur in unsere fallen, in unsere unselektierten. Also haben wir das Home-Icon, Favoriten, Updates und Profil. Und dann für ausgewählte, haben wir diese Häuser ausgewählt. Favoriten, Updates und Profil. Und ich werde einfach schnell diese Container umbenennen, so dass sie, sie passen zu den Namen, Favoriten und sie werden zu Updates und nutzbare Änderung zu Profil ändern. Ich würde immer noch sagen, dass die anderen ausgewählt. Als nächstes möchte ich nur die neu hinzugefügten Grafiken
in die Mitte neu positionieren, damit sie sich in der richtigen Position aufstellen. Also schlitz eins nach dem anderen. Und wir gehen hier zu diesem Ausrichtungspaddel, und wir werden sie einfach ausrichten. Also, das wird
einfach loswerden unsere ursprünglichen Ich nannte Trauben als auch. Okay, das ist also unsere neue Grafik ersetzt und eingerichtet, damit wir aus unserer Tab-Leiste kommen und zu unseren Gesängen zurückkehren können. Lass uns nach Hause gehen und sehen. Und was Sie jetzt tun können, ist, dass wir diese Grafiken jetzt gegen andere Grafiken
austauschen können , die wir auf unserem Dateisystem haben. Als Beispiel werde
ich dieses Sternsymbol mit hoher Kontur ändern. Sie können es also auf Instanzebene oder auf Komponentenebene tun. Also werden wir Ihnen nur zeigen, wie Sie es auf Instanzebene machen. Also habe ich meine Komponente hier. Ich werde das nur aufmachen. Und Sie können sehen, dass, wenn Sie mit Komponenten arbeiten, können
Sie immer noch alle internen Funktionen von ihnen im Ebenenbedienfeld sehen. Und ich kann auf alle diese Gruppen und Textebenen zugreifen und ein solches Symbol ändert eine ganze Reihe von Eigenschaften im Eigenschaftenfenster. Was ich tun werde, ist, dass ich in meine
unselektierten gehen werde und ich suche nach den Favoriten. Also hier ist mein Favoriten-Symbol, das ich gerade hinzugefügt habe, also werde ich das auswählen. Und wenn wir zum Eigenschaftenbedienfeld gehen, können
Sie sehen, dass es den Befehl Ersetzen gibt. Also werde ich nur ersetzen treffen. Und ich werde in meinen Lieblings-Star-Ordner gehen und ich werde die nicht ausgewählte SVG auswählen. Und Sie können jetzt sehen, dass sich das zu einem Stern geändert hat. Ich werde es auch mit dem Auserwählten tun. Und komm hier rein. Wer ist mein Ausgewähltes Symbol? Und Sie können hier sehen, dass ich den Stern habe. So einfach ist es also, GraphX zu ersetzen. Sobald Sie ein Bild haben, habe ich ein SVG verwendet, Sie können auch ein PNG-Bild verwenden, und es wird genau so funktionieren, wie Sie es können. Sie können diese Möglichkeit weiterhin verwenden, um Bilder aus dem Dateisystem für Bilder zu ersetzen, die sich innerhalb einer Komponente befinden. Okay, großartig, also können wir jetzt Grafiken austauschen und ihre Ebene und auf Instanzebene vergleichen. Und das gibt uns mehr Modularität innerhalb unserer Komponente. Das bringt uns also zum Ende dieses Videos. Und im nächsten Video werden
wir uns ansehen, wie wir die
Tab-Leiste von unserer Pinterest-App weiter entkoppeln können , damit wir sie in anderen Projekten verwenden können. So sehen wir uns dort.
39. Die tab in anderen Projekte wiederverwendbar: Hallo da und willkommen zurück. Okay, also haben wir immer noch, wir haben ein weiteres Problem mit unserer Tab-Leiste, und das ist, dass es derzeit nur wirklich in unserer Pinterest-App nutzbar ist. Und das liegt daran, dass wir
die gesamte Navigationssprungantwort fest in die Komponente codiert haben. In diesem Video werden wir unsere Komponenten umgestalten, so dass wir
die Tab-Leisten-Sektoren mit jeder Szene verbinden können , ohne Änderungen an der Komponente selbst vornehmen zu müssen. Okay, das erste, was wir tun werden, ist, dass wir in unsere Tab-Leisten-Komponente gehen. Und wir werden nur einige unserer Antworten neu organisieren, nur um
sicherzustellen , dass Tap und Trigger alle irgendwie sitzen zusammen oben im Trigger-Panel. Und wir werden öffnen, wie Hähne. Und wir werden mit den Sprüngen löschen. Okay, also das ist gut zu unserem Tap Home Trigger. Und wir werden Aufstiegsantwort hinzufügen. Und wir werden, dieses Mal werden wir den Kanal als Zentrumseltern einstellen. Und wir werden die Nachricht nach Hause bringen. Unterstrich getappt. Und wir werden das kopieren und in die anderen drei Trigger einfügen. Und prospektiv werden wir
die Vorderseite der Nachricht ändern , um den eigentlichen Abschnitt darzustellen. Dies wird also Favoriten, Updates und Profil sein. Okay, also haben wir jetzt eingerichtet, wie vier Abschnitte innerhalb unserer Komponenten. Und jetzt können wir zu unserer Szene zurückkehren. Und was wir tun werden, ist, dass wir einen Empfangsauslöser hinzufügen. Und wir werden diese Zeit von Komponente erhalten wählen. Und wenn Sie von der Komponente erhalten wählen, erhalten
Sie dieses zusätzliche Dropdown-Menü. Wo fragt man dich? Ich frage dich, okay, von welcher Komponente soll ich eine Nachricht erhalten? Wenn wir das öffnen, können
wir sehen, dass die jemenitische Verbindung, die wir haben, hier ist unsere gefrorene Tab-Leiste, also werden wir das wählen. Und sobald Sie Ihre,
Ihre Komponente ausgewählt haben und Sie in das Nachrichtenfeld tippen, können
Sie sehen, dass wir jetzt alle Nachrichten sehen können ,
die von dieser bestimmten Komponente kommen. Das unterscheidet sich also von den Wellen, die die Szene empfangen und Nachrichten senden, die wir im vorherigen Video gemacht haben. So kann ich jetzt genau sehen, welche Netze von der Komponente kommen. Während Sie dieselbe Route verwenden, wissen
Sie nicht, welche Komponente. Die Maschen kommen, kommen aus. Und das ist wahrscheinlich eine gute Möglichkeit, darüber nachzudenken, wann Sie 11 Art von Messaging-System über das andere verwenden sollten. Wenn Sie nicht genau wissen müssen, woher die Nachricht kommt, können
Sie sie auf die Szene setzen. Wenn Sie jedoch wissen möchten, ob die Nachricht stammt, von der die Komponente stammt, dann möchten Sie den übergeordneten Stamm auswählen. Ok, also für diesen speziellen, werden
wir nach
Favoriten suchen , weil wir bereits auf dem Home-Bildschirm also müssen wir den Holmes-Hut nicht einstellen. Und wenn wir die Nachricht Favoriten Steuer erhalten, werden
wir unsere Sprungantwort hinzufügen, und wir werden zu der Lieblingsszene wählen. Also werden wir das jetzt nochmals für unsere anderen beiden Sprüche duplizieren. Und wir werden die Nachricht ändern, und wir werden dasselbe an Feiertagen ändern. Und das ist nur umbenennen Sie diese
Lieblings-Updates Profil. Okay, also gruppieren wir jetzt einfach die Kursnavigation. Und wir werden es hier nur kopieren. Und wir gehen rüber zu wie Lieblingsszene. Und wir werden kleben. Und wir müssen nur diese wieder verbinden, diese Dinge sind, offensichtlich sind wir jetzt auf die Favoriten scheint, so dass wir nicht brauchen die Favoriten Job. Wir müssen immer nur die anderen drei machen. Also werden wir ihre Favoriten ändern, um jetzt nach Hause zu kommen. Und sie werden Produktlizenz auf halbem Weg zu Hause getippt Nachricht erhalten. Und wir werden vergessen, dass wir auf den Startbildschirm springen werden. Und wir werden diese anderen einfach wieder verbinden. Okay, also gehen wir zurück auf den Startbildschirm und geben einfach den Test. Also bin ich auf der Heimszene. Ich tippe auf Favoriten. Und Sie können sehen, dass ich zu meiner Lieblingsszene navigiert habe. Also haben wir jetzt die Navigationslogik genommen
, die Komponente überlisten und sie in unsere Szene gesetzt. Und wir haben jetzt Süd-L-Komponenten, so dass
es im Wesentlichen Nachrichten sendet, wenn die Busse Es ist Hut. Dies bedeutet, dass wir jetzt diese Tab-Leistenkomponente abholen können. Wir können es in eine andere App setzen. Wir könnten die Symbole ändern, und wir könnten auch die verschiedenen Szenen in
unserem neuen Prototyp einrichten und verbinden, dass wie Tab-Leiste. Okay, das bringt uns zum Ende dieses Videos. Bis zum Ende des Blicks unserer ersten Blick auf die Komponenten in verschönern ihn. Also hoffe ich, das war nützlich für Sie, und ich sehe Sie im nächsten Video.
40. Lieblingssatz mit Komponenten machen: Hallo da und willkommen zurück. In diesem Video werden wir
die Favoriten-Funktion reparieren , die wir in einem vorherigen Video gemacht haben. Denn als wir unsere Tab-Leiste in eine Komponente verwandelten, haben wir die Funktionsweise bestimmter Funktionen gebrochen. Ich werde Ihnen zeigen, wie Sie hier inkrementieren, Sie der Tab-Leisten-Komponente in diesem Video. Also lasst uns knacken. Okay, das erste, was wir tun werden, ist, dass wir
den Doppeltipp-Auslöser greifen. Das ist das ursprüngliche Stück von Oxiden, das die sichere Favoriten-Funktion aktiviert hat. Wir packten, dass aus einer anderen Datei und
Sie können, können Sie diese aus der Datei zu diesem bestimmten Abschnitt
wird viel einfacher sein, hier aus einer anderen Datei zu kopieren. Während für sich eingeschlichen, weil wenn wir in unsere Photonen gehen, glücklich hier, können wir sehen, lassen Sie mich einfach öffnen. Wir können diesen Doppeltipp-Trigger hier sehen und er ist orange und alle Antworten orange. Und effektiv, als wir Harbor zu einer Komponente gemacht haben. Und weil innerhalb dieses Auslösers gab es ein paar Antworten, die mit einem Objekt in
Verbindung standen , das passiert. Der ganze Abzug wurde in das Bauteil gezogen. Jetzt leider, weil das passiert ist, alle diese anderen Antworten, die Ratten zu verschiedenen Dingen verbunden sind, sie effektiv alle gebrochen, weil die Objekte, die sie mit einem Teil der Komponente verbunden waren, die wir, dass wir, die wir gemacht haben
und dass sie immer noch ihn gezogen wurden, weil sie Teil des gleichen Auslösers waren. Und es wird ein Alter dauern, um diese wieder zu verbinden. Es ist also viel einfacher für uns, nur einen
dieser Trigger zu greifen, der bereits in der vorherigen, vorherigen Datei ausgeführt wurde. Also werde ich mir das jetzt einfach schnappen. Also in einem Diagramm ist verdoppelt Spuren, Doppel-Tap-Trigger. Ich werde das nur kopieren. Und ich komme zurück zu unserem Home-Bildschirm. Und wir werden das einfach einfügen. Und wir können sehen, dass wir jetzt irgendwie das Gegenteil haben. Wir haben alle, was war Orangen jetzt y.
aber was Y war, ist jetzt orange. So können wir
die tatsächlichen Antworten sehen , die wir in der Komponente benötigen oder jetzt vom Haar trennen. Also, das ist in Ordnung. Die haben wir schon in der Komponente. Also können wir diese beiden orangefarbenen Antworten einfach aus
diesem Bezirk löschen, und wir brauchen sie nicht. Okay, also hat das all unsere Funktionalität eingebracht, sie wieder eingesetzt. Also eine letzte Sache, die wir zu diesem Trigger hinzufügen, weil wir unsere Komponente sagen müssen, wann die Favoriten-Funktion tatsächlich passiert ist. Und wenn Sie sich erinnern, tatsächlich können wir es hier in unserem, in unserem Vorschaufenster ausführen. Also unser Safe zu Favoriten war dieser Pi hier. Also, wenn ich verdoppeln, was passiert ist, können
Sie sehen, dass, wenn die Miniaturansicht fällt in die Tab-Leiste, was wir eigentlich hatten, war, dass das Symbol nur unlogisch allein. Springen Sie nach oben und unten, wenn das endet, haben
wir das jetzt verloren, weil die Komponente und die Szene und sind nicht miteinander verbunden. Also müssen wir das wieder verbinden,
dieses kleine Animations-Backup. Das werden wir als Nächstes tun. Okay, was wir tun, um das zu tun, müssen
wir eine Nachricht in die Komponente schicken,
um einer Komponente mitzuteilen, dass wir tatsächlich einen Favoriten gespeichert haben. Um das zu tun, werden wir eine Send-Antwort hinzufügen. Und wir werden uns entscheiden, mit uns zu reden, um die Nachricht an eine Komponente zu senden. Und die Komponente, an die wir die Nachricht senden werden, ist natürlich der Fluss scheint Tab-Leiste. Und die Nachricht, die wir senden werden, ist günstig. Und wie in unseren vorherigen Videos, bitte, äh, ging in Großbuchstaben, Sie müssen nicht, aber so schreibe ich meine Nachrichten. Also werden wir die Nachricht an Favorit senden. Und das ist effektiv alles, was wir in diesem speziellen Auslöser tun müssen. Und was wir jetzt tun werden, ist, dass wir wieder zu
unserer Komponente gehen , um zum Editor zu doppelklicken. Und es wird diesen Doppeltipp-Trigger
für sie schließen und wir werden einen neuen Trigger hinzufügen. Und das wird ein Empfang sein. Sobald Sie diese Nachricht erhalten haben, haben wir gerade eingerichtet. Also wollen wir das von den Eltern erhalten. Also, wenn Sie sich daran erinnern, dass,
wenn Sie Nachrichten senden, wenn ich eine Nachricht an unsere Komponenten schicke, dann muss ich innerhalb der Komponente tun, Ich muss wählen, empfangen von Eltern. So funktioniert die Kommunikation genau so. Wenn Sie also an eine Komponente senden, Ihren Empfänger vom Parameter, wenn Sie an die Szene senden, dann empfangen Sie von derselben, so dass es
zwei sehr explizit unterschiedliche Kommunikationslinien gibt , die Sie innerhalb Ihrer Empfangs- und Sendekanäle verwenden. Okay, also werden wir wählen, erhalten von den Eltern. Und wir werden nach dieser Nachricht suchen, die wir, dass wir gerade hinzugefügt, die Favoriten hinzufügen wurde. Also werden wir das wählen. Okay, wir gehen jetzt zu unserem orangefarbenen Doppelauslöser, der innerhalb unserer Firma ist, und
wir werden die weißen Antworten ergreifen und wir werden nur die weißen Antworten auswählen. Und wir werden die kopieren. Und wir werden sie in unsere erhaltene Trigger-Score hinzufügen. Wir können jetzt tun, ist, dass wir diesen Doppeltippauslöser jetzt komplett entfernen können. Brauche das nicht mehr. Und dies sollte hoffentlich eine fixierte, wie Favoriten in. Also, das ist einfach zurück zu unserer Home-Szene. Und dann ist das die Von-Name-Vorschau. Also gehen wir runter zu unserem Piloten will Lieblings will doppelt tippen auf das. Und wir können sehen, jetzt haben wir unsere kleine Animation passiert, wenn die Miniaturansicht fällt in die, in den Abschnitt Registerkarte Leiste Element. Ok, cool. Das ist also, das schließt dieses Video ein. Der erste Teil von ihm wieder verbinden einige
der Funktionen, die wir brach, als wir draußen eine Komponente ausleihen. Im nächsten Video werden
wir uns die Lösung des Krebses ansehen,
den wir in einem früheren Video erstellt haben, dass es ein anderes Element gibt, das versehentlich kaputt wurde, wenn wir unsere Tab-Leiste in die Komponente verwandeln. So sehen wir uns dort.
41. Daten in Komponenten überspringen: Hallo, da. In diesem Video werden wir unseren Badge-Berater wieder verbinden, wir in unserer Update-Szene haben, die sich jetzt in unserer Komponente befindet. Wir werden das wieder mit
den Interaktionen verbinden , die in diesem speziellen Gleichen geschehen. Wieder etwas, das innovativ getrennt wurde, als wir
unsere Tab-Leiste zu einer Komponente gemacht haben , die verschwunden ist, und das Backup wieder verbinden. Okay, das erste, was wir tun werden ist nur sicherzustellen, dass Sie auf dem Update sind, das hier zu sehen ist. Und wir werden eine Tab-Leistenkomponente hinzufügen, da wir
in dieser speziellen Datei immer noch die vorberechnete Tab-Leiste haben, so dass wir eine Instanz unserer Tab-Leistenkomponente in die Szene einfügen können. Und wir werden es in Kraft setzen. Stellen Sie einfach sicher, dass ich das Recht habe. Und das ist cool. Wir können jetzt die Drohungen die Hälfte unserer Fraktion entfernen. Ok, also gehen wir zum ersten Tab-Trigger hier. Lassen Sie uns diese orangefarbenen Schreibweisen ignorieren. In der Minute. Wir gehen in den ersten Tap Trigger hier, und wir werden eine Sende Antwort hinzufügen. Und wir gehen in unsere Zellantwort, wir werden Senden an Komponente wählen. Und wir werden wählen, dass unsere Ziele schweben. Und dieses Mal werden wir eine Nachricht erstellen, die gekühlt Update-Zähler werden wird. Und was wir tun wollen, ist, dass wir
den Zählerwert senden wollen, der innerhalb dieser Variablen ist. Wir wollen es in die Komponente schicken. Und wir können das mit Nachrichten tun, indem wir diese Sendewert zusammen Option überprüfen. Und dies ermöglicht es uns, den Wert mit der Botschaft in unsere Komponente zu packen. Also in diesem Feld werden wir unsere Zählervariable wählen. Und das ist effektiv die Sandantwort setzt Harfen. Also werden wir das kopieren und wir werden es einfach in die
andere einfügen, um Trigger zu tippen, weil die drei,
die drei Nachrichten, die wir wollen, außer und jedes Mal, wenn wir akzeptieren, was wir diese Nachricht
senden möchten , in die Komponenten, so dass unser Rat oder Update, okay, und wir müssen auch daran denken, dass wir mehrere Szenen hier haben. Also müssen wir auch sicherstellen, dass wir Updates im Zähler für die anderen Tampa-Instanzen in anderen Szenen sind. Also gehen wir einfach auf den Home-Bildschirm. Und wir werden den Star Trick finden, wo wir die Nachricht in unsere Tab-Leiste senden, die uns sagt, wie, na ja, wir haben Ihre eigenen gesehen. Hier, und wir werden den gleichen gesendeten Auslöser hier einfügen. Und wir müssen nur wieder verbinden, haplotype, dass das Ziel zum Floats Ints Handler. Und wir machen es auch zweimal in unserer Lieblingsszene. Starten Sie jetzt Trigger. Und wir werden unsere senden einfügen und wir werden bis zu dieser Szene zu
verbinden ist flacht HEPA-Komponente. Okay, als nächstes müssen wir den Zähler innerhalb unserer Komponente aktualisieren. Also lassen Sie uns auf, wie Komponenten-Panel gehen und doppelklicken, um unsere tippen Sie unsere Komponente zu bearbeiten. Und das erste, was wir tun werden, ist, eine Variable im Inneren von hier hinzuzufügen. Und wir werden es Zähler nennen und
sicherstellen, dass als numerische Variable. Und wir werden den Anfangswert drei festlegen, wie wir es vorher getan haben. Okay, also fügen wir einen empfangenen Trigger hinzu. Und wir werden den Kanal einstellen, der vom Elternteil empfangen wird. Und wir werden unsere Update Counter Nachricht wählen. Okay, wir werden das überprüfen, das dem Variablenfeld zugewiesen ist. Denken Sie daran, dass wir den Wert von
der anderen Zählervariablen außerhalb unserer Kampagne senden, sie schickte ihn in diese Komponente schickte ihn mit der Nachricht. Daher müssen wir diesen Wert jetzt
einer anderen Variablen innerhalb unserer Komponenten zuweisen , damit wir darauf zugreifen können. Und wir werden unsere Zählervariable wählen. Das Lustige, was wir tun werden, ist, dass wir nur in unseren Counter-Stern-Abzug gehen. Und wir werden diese Textantwort kopieren. Und wir werden es in unseren neu erstellten empfangenen Auslöser einfügen. Dies wird also sicherstellen, dass der Textwert, im
Grunde dieses Label innerhalb unserer Counter-UI-Grafik ist, es aktualisiert wird. Ok, das ist also herausgekommen. Also müssen wir es hier tun. Okay, als nächstes kopieren wir unseren Navigationsauslöser und navigieren zu den Updates. Und wir werden es hineinkleben. Und wir werden es nach oben bringen. Und wir werden diesen alten Navigationsblock entfernen. Das ist jetzt irrelevant. Und wir können diesen Navigationsblock öffnen und wir werden diese, diese Gegenstände wieder verbinden. Also nav nach Hause. Ich verbinde das Gehäuse einfach mit der schwebenden Tab-Leiste hier. Und dann für Updates, werden
wir zu Favoriten wechseln. Und wir wählen den Tapper aus. Ich werde die Nachricht in die Favoriten ändern. Und dann gehen wir zur Sprungantwort und wir werden die Favoriten auswählen. Okay, und dann endlich werden wir nur Hub wieder verbinden, das Ziel auf dem Profilauslöser zur Abflachung HEPA. Okay, jetzt sollten wir in der Lage sein, zu sehen, dass wir erfolgreich tippen. Ok, das ist außer einigen dieser Orte zu folgen. Und wenn wir nun über diese anderen klopfen, können
wir sehen, dass wir das Holz beharrt haben. Aber was Sie auch sehen können, ist, dass wir noch diese Sprunganimation haben. Denn ursprünglich war die Sprunganimation nur in der Home-Szene passiert. Und weil es nicht in einer Komponente war, konnten
wir einfach zulassen, dass dieses Jumpin-Netz in den Haaren passiert, es einmal
gemacht, dann würde es nicht wiederholen Satz. Aber jetzt, da es sich innerhalb der Komponente befindet, wird
es es jedes Mal tun, wenn eine Instanz der Komponente geladen wird. Wie, wenn Sie sich daran erinnern, dass auf jeder dieser Szenen jetzt haben wir eine separate Indizes der Komponenten. Also alle diese Auslöser Antworten innerhalb der Komponente werden von brandneu laufen. Im nächsten Video werden
wir die Komponenten so reparieren, dass die Animation nur auf der Jagdszene läuft, um Sie dort zu sehen.
42. Componentising der app: Hallo da und willkommen zurück. In diesem Video werden wir weiterhin beheben in den Teilen der Funktionalität, die wir versehentlich brach, als wir uns herausstellten, in eine Komponente passieren. In diesem Video werden wir unsere App Ladeanimation im Moment reparieren. Wie Sie sehen können, wenn wir den Prototyp ausführen, bekommen
wir diese kleine Bounce-Animation auf der Nitrifikation Charge, die wir tatsächlich bekommen, sagen wir, jede gesunde Woche auch. Und das liegt daran, dass jede dieser Szenen Instanz
einer Tab-Leistenkomponente verschwunden ist und diese Instanz zum ersten Mal ausgeführt wird. Diese drei Instanzen sind also in einer Komponente verbunden. Obwohl es eine Komponente gibt, gibt es immer noch separate Instanzen und sie sind wie untergeordnete Elemente der Komponente. Und sie haben, jeder von ihnen hat seinen eigenen Lebenszyklus. Für jedes Mal, wenn Sie zunächst zur ersten Szene gehen, werden
Sie diese Komponenteninstanz auslösen, um alles zu tun, was sie tun muss. Und momentan drinnen haben
wir diese Animation am Laufen. Also müssen wir es reparieren. So passiert sie nur, wenn wir, wenn wir landen auf der Startseite Registerkarte und nur auf, wenn wir landen auf den Häusern haben zum ersten Mal. Wie Sie sehen können, wenn ich jetzt zu diesen anderen Abschnitten zurückgehe, wird
diese Animation nicht mehr ausgeführt, weil wir die Abschnitte
bereits besucht haben und sie bereits zum ersten Mal ausgeführt wird. Ok, was wir tun werden, ist, dass wir zu
unserer Akte kommen und wir werden in unsere schwebende Komponente gehen. Und wir werden eine weitere Variable hinzufügen. Und wir werden diese unveränderliche App-Ladung nennen. Und wir lassen es als Zahl und mit seinem Standardwert. Und wir gehen auf den Hahn Home-Auslöser. Und wir werden eine Zuweisung hinzufügen. Und wir werden unsere Apollos-Variable wählen und auf den Wert eins
setzen. Okay, also werden wir jetzt einen Detect hinzufügen, der unten unten abgeschliffen ist. Und wir werden nach dieser App Lastvariablen suchen. Also denken Sie daran, erkennen, erkennt, wann, wenn sich etwas ändert und wir suchen, wenn sich die bei niedriger Variable ändert. Okay, wir holen uns unsere Gegenanimation. Das ist also derzeit in unseren Zählern Startauslöser. Also werden wir all diese vier Antworten packen, die diese kopieren werden. Und wir werden es in unseren Detects Trigger hinzufügen. Und lassen Sie uns das einfach ausschalten,
dieser Startauslöser für eine Sekunde. Und wir gehen zurück zu unserer Go-to out Batch-Schicht. Wir werden die Deckkraft standardmäßig auf 100 einschätzen und dann den Hut auswerten. Wir werden eine abstoßende Antwort hinzufügen. Und wir werden unsere Charge wählen. Und wir werden seine Deckkraft auf 0 setzen. Und wir werden die Dauer auf 0 setzen. Was wir hier tun, ist, dass wir zunächst die Deckkraft unseres Badges auf 0
setzen wollen , damit wir dann unsere Animation ausführen können. Aber für alle anderen Szenen möchten
wir, dass der Batch standardmäßig da ist. Deshalb setzen wir in den Ebenen tatsächlich seine Deckkraft auf 100 ein. Also werden wir einen weiteren Auslöser hinzufügen. Wir werden unseren Anfang hinzufügen. Und wir werden das auf Breitensprung setzen. Und wir wollen unsere Textzählerantwort greifen, damit wir es von hier aus greifen können, sagt Copy this und fügen Sie es in unseren Sternauslöser. Also endlich wollen wir die App-Last in der Home-Szene auslösen. Also müssen wir aus unserer Komponente zurück in unsere Homeszene kommen. Und wir werden noch einen Sternauslöser hinzufügen. Und das ist es einfach unter seine anderen zu bewegen, damit Sie sie alle zusammenhalten können. Und wir werden eine Send-Antwort hinzufügen. Und wir lassen das an die Währung senden. Und wir werden die Home-Nachricht hinzufügen. Aber dieses Mal werden wir einen Wert übergeben. Und so werden wir unsere Sendewerte
zusammen tippen und wir werden einen Wert von eins übergeben. So imitiert dieser Trigger effektiv die erste, die erste Ladung von zu Hause. Nur beim ersten Mal wird dieser Wert gesendet,
weil wir ihn auf den Staffelauslöser gesetzt haben, dass er nicht jedes Mal neu gestartet wird. Während auf diesem anderen Lager Trigger, der ist derjenige, der jedes Mal lädt, wenn wir auf die Tab-Leiste tippen und nach Hause gehen. Das wird jedes Mal neu gestartet, also wird er es immer wieder tun, wenn wir zurückkommen. Okay, also gibt es noch eine letzte Sache, die wir tun müssen, damit all das funktioniert, und wir müssen wieder in unsere Komponente gehen. Und wir müssen die empfangene Nachricht für zu Hause finden. Hier ist also, und wir müssen diesen Wert erhalten. Also senden wir in diesen Wert von eins in,
in die Komponente, wenn wir auf zu Hause tippen. Also, wenn wir in den Nachrichtenbereich kommen und wir einfach tippen, um eine Wissenschaft der Variablen auszuwählen. Und wir wollen diese App Lastvariable hier wählen. Okay, also sollte das dabei sein. Zurück aus dieser Komponente, Fledermäuse sind Heimszene und das wird ausgeführt. Ok. Also, wenn es zuerst geladen wird, kommen
wir raus oder springen Animation, dass jetzt, wenn ich zu den verschiedenen Registerkarten navigiere, wir nicht die Wiederholung der Sprunganimation bekommen. Das behebt also dieses Problem. Okay, also wenn wir einfach wieder zur Updateszene kommen, und wir werden das tun, außer dem folgenden, diesen drei Plakaten. Und Sie können sehen, dass, wenn wir auf 0 kommen, wir sollten dieses Abzeichen verstecken, aber wir sind immer noch in diesem Wert. Wenn wir zurück zu unserer Updateszene gehen, können
wir sehen, dass wir diesen orangefarbenen Dom unter diesem erkennt bekommen haben, und das ist der Ort, an dem wir das Abzeichen effektiv versteckt haben. Also lasst uns gehen und das jetzt reparieren. Ok, also das erste, was ist, entfernen Sie diese orangefarbenen Elemente und wir können diese ganze Bedingung entfernen. Okay, also gehen wir in unsere Komponente. Und wir werden runtergehen und den Auslöser finden, wo wir den Gegenwert erhalten. Das ist also hier unten. Also haben wir diesen Update-Zähler und wir werden nur eine Bedingung hinzufügen, um dies. Und wir werden die Zählervariable wählen. Und wir werden suchen, wenn Luft 0 erreicht. Und wenn die Zählervariable 0 erreicht, werden
wir eine Deckkraft hinzufügen. Und wir werden unsere Marke wählen. Und wir werden dir nur pasty bis auf 0 sagen. Und wir können wahrscheinlich auch die Dauer auf 0 setzen. Okay, mal sehen, ob das unser Problem behebt und davon zurücksagt. Ok, das geht also mit unserem Vorschaufenster. Also werden wir anfangen, unseren Plakaten zu folgen. Und Amen, wir kommen endlich zur 0. Wir können sehen, dass unsere Charge vollständig verschwunden ist. Cool. Also das über schließt alle unsere Fixes für unsere Tab-Leistenkomponente ein. Und hoffentlich haben Sie viele
verschiedene Möglichkeiten gesehen , wie wir Komponenten verwenden und Netze verwenden und wo und wie wir diese Funktionen bei der Verwendung von Komponenten architektonisch gestalten. Und es wird Ihnen hoffentlich ein bisschen mehr Übung gegeben. In diesem ersten Blick auf Komponenten zu diesem über wickelt den Abschnitt Komponenten. Und im nächsten Video werden
wir unsere Aufmerksamkeit auf die Bibliotheksfunktionalität innerhalb, innerhalb von Kredit pions. Also werden wir OWL,
OWL Tab Bar Komponente in die Anfänge einer Komponentenbibliothek verwandeln. Und wir werden gebeten, diese Bibliothek in vielen other.py Dateien zu verwenden. Also werde ich Ihnen zeigen, wie das alles funktioniert im nächsten Video. So sehen wir uns dort.
43. ProtoPie: Hallo da und willkommen zurück. In diesem Video werden wir also einen Blick auf Protokollbibliotheken werfen. Bibliotheken sind separate Dateien, die innerhalb von Cloud und
Bibliotheken gedrückt werden, und sie wurden verwendet, um
gemeinsame Komponenten für alle Ihre Stapeldateien zu erstellen und wiederzuverwenden . Die Art und Weise, wie Bibliotheken arbeiten, ist sehr ähnlich wie andere Apps wie Figaro und Skizze. Also sollten sie vertraut aussehen. Und um zu untersuchen, wie Bibliotheken funktionieren, lassen Sie uns eine Bibliothek von Ausbrüchen Rest API erstellen. Okay, also habe ich bereits ein paar weitere Komponenten erstellt. Also habe ich unseren Folgen-Button in unsere Komponente und auch unsere primäre CCA in eine komponierte verwandelt. Wir haben diese drei Komponenten, die derzeit lokale Komponenten sind. Sie sind also nur in unserer höheren Akte. Okay, also werden wir diese Pi-Datei jetzt in eine Bibliothek konvertieren. Also, wenn wir zum Datei-Menü gehen und wählen X4 ist neue Bibliothek. Kay, also werden wir dieses Dialog-Popup bekommen, in dem wir unserer Bibliothek einen Namen geben und ihr eine Beschreibung geben können . Sie können hier sehen. Je nach Gesetz, Lizenztyp, Sie haben, können
Sie wählen, ob es sich um eine Bibliothek, Ihr persönliches Konto handelt oder ob Sie innerhalb eines Teams arbeiten oder das Unternehmenskonto verwenden, dann können Sie Ihr Team auswählen. Hier. Wir werden es persönlich halten. Und ich werde einfach auf Kreationen tippen. Okay, es wird also ein paar Minuten dauern, bis die Datei konvertiert und als Bibliothek in die Cloud hochgeladen wird. Okay, wir haben jetzt eine neue Datei, die geöffnet wurde und das ist unsere Bibliothek. Zuerst mag es aussehen, als wäre es die gleiche Datei, aber Sie können sehen, dass sich dieser lila Streifen oben in der Datei befindet. Das sagt Ihnen sofort, dass Sie sich jetzt in einer Bibliothek befinden und Sie mehr im Bibliotheksbearbeitungsmodus sehen können. Wir werden, wir werden veröffentlichen. Obwohl wir die Bibliothek erstellt haben, haben
wir keine Bibliothek veröffentlicht, also können wir sie nicht in unserer Datei verwenden und drücken die Schaltfläche „Veröffentlichen“, also tun Sie das jetzt. Und wenn wir, wenn wir auf veröffentlichte Bibliothek tippen, werden
wir mit diesem Dialog präsentiert werden. In Bibliotheken haben Sie also Versionskontrolle. So können wir eine Version Kommentare jedes Mal hinzufügen, wenn wir eine Änderung vornehmen. Das wird also nur unser erster Upload sein. Also werde ich das einfach in dieses Beschreibungsfeld hier setzen. Und wir werden auf Veröffentlichen tippen. Ok, Sie können sehen, jetzt haben wir erfolgreich unsere Bibliotheksdatei veröffentlicht. Also gehen wir zurück zu unserer Seite Stress. Und wenn wir das Bedienfeld „Komponenten“ öffnen und hier unten
schauen, schließen wir diese anderen einfach ab. So können Sie hier unten in meinen persönlichen Bibliotheken sehen, ich habe jetzt diese hohe Express-Bibliothek. Okay, also tippen wir auf die Bibliothek und navigieren dann zu unserer Bibliothek. Und wir können unsere drei Komponenten hier in unserer Bibliothek sehen. Okay, was wir jetzt tun werden, ist, dass wir einfach zu einer unserer Szenen gehen und die Tab-Leisten austauschen. Dieser Tipp, unsere Komponente ist immer noch die lokale Komponente in unserer PY-Datei. Also werden wir es mit der Tab-Leiste aus unserer Bibliothek austauschen. Also, wenn Sie die Registerkarte Leiste Element auswählen und wir werden hier
in die Eigenschaften Panel kommen , wo es heißt Komponente und wir werden einfach auf den Thread tippen. Söhne haben unseren Konkurrenten. Und wir gehen zwei runter. Sie können sehen, dass es diesen Abschnitt für Bibliotheken gibt und wir werden unsere Pinterest-App-Bibliothek
auswählen. Und wir gehen rüber und wählen unsere Float-Szenen waren OK. So haben wir nun erfolgreich
unsere lokale Komponente durch die Komponente aus unserer Bibliothek ersetzt . Okay, als Nächstes zeige ich dir, wie du die Bibliothek aktualisierst. Also gehen wir zurück zu unserer Bibliotheksdatei. Steh einfach hinter unsere Py-Akte hier. Und wir werden, wir werden Sie in einem vorherigen Video aktualisieren, wir haben unser Herz-Symbol in ein Stern-Symbol geändert, aber wir haben es nur auf Instanzebene geändert. Daher werden wir es jetzt innerhalb der Komponente aktualisieren, damit es in allen unseren Tab-Leisten-Komponenten in unserer App
verfügbar und aktualisiert wird . Offensichtlich haben wir bereits einen getauscht, tippen Sie auf unsere Komponente. In outfile fossil, Wir müssen die anderen tauschen, aber dies muss die Komponente aktualisiert werden. Also werde ich einfach in meine nicht ausgewählte Gruppe gehen und meinen Lieblings-Zyklus finden. Und ich werde ersetzen. Sehen Sie mein Sternsymbol. Dies ist also die nicht ausgewählten Modi gehen, um meine nicht ausgewählte SVG zu wählen. Das ist jetzt Stopp. Und ich werde dasselbe für die ausgewählte Gruppe tun. Aktualisieren Sie mein Symbol. Ausgewählt 1. Mai, siehe Ich habe mein Ausgewähltes Symbol an Ort und Stelle und Sie können sehen, mein Stil-Icon ist jetzt aktualisiert ihn meine Komponenten. Also mit dem Update fertig, ich werde auf öffentliche und private Pilot wird mich auffordern, die Datei zu speichern. Und die Datei muss gespeichert werden, bevor sie auf dieser Art von Hexan veröffentlicht werden kann. Und Sie können jetzt hier sehen wir bekommen in unseren neuen Änderungen, speichert, es wäre ein Upload in der, synchronisiert durch die Cloud. Okay, also wenn es bereit ist, zu veröffentlichen, wird mir diese Aufforderung erneut
geben, um eine Version zu speichern. Also bin ich nur eine Art Beschreibung hier in diesem, aktualisiert meine Firma und ich werde Publish drücken. Das ist nun erfolgreich veröffentlicht. Ich gehe zurück zu meiner Pinterest-App. Und Sie können dann, wenn Sie gerade bemerken, dass diese kleinen blauen Punkte auf dem Bedienfeld „Komponenten“ verschwunden sind. Das sagt mir also, dass es ein Update gab. Also werde ich auf mein Komponenten-Panel-Symbol tippen. Und Sie können jetzt einen blinkenden roten Punkt sehen
, der nur auf diesem Symbol pulsiert. Dies ist also das Symbol für Bibliotheksaktualisierungen. Und es wird hervorgehoben, wenn Sie Bibliothekselement aktualisieren, es wird nur angezeigt, wenn
Sie tatsächlich die Komponente verwenden, die in Ihrem Profil aktualisiert wurde. Wenn Sie also eine Komponente aktualisieren und sie nicht verwendet haben, wird
es im Hintergrund. Update in der Bibliothek wird immer noch aktualisiert, aber es wird Sie nicht auffordern, etwas zu tun es sei denn, Sie haben tatsächlich eine Instanz von Luft in Ihrer Einsicht darauf, Sie werden sehen, okay, also haben wir einen Tipp darauf. Und wir können in der Aktualisierung meinen Aubrey-Dialog sehen, die Protoplasten Tetanus, die Komponente, die aktualisiert wurde. Und wir haben ein paar Knöpfe hier. Also haben wir bereits eine Komponente aktualisiert. Also haben wir hier eine Update-Schaltfläche und ein Update alles, wenn Sie mehrere Änderungen vorgenommen haben, erhalten
Sie eine ganze Liste der Komponenten, die aktualisiert wurden. Und Sie können
sie entweder einzeln aktualisieren oder Sie können einfach auf die Schaltfläche „Alle aktualisieren“ unten tippen. Also werden wir nur auf Update tippen. Okay, also wurden alle unsere Updates ausgeführt, also tippen Sie auf Schließen. Und Sie können jetzt innerhalb meiner Komponente sehen, es wurde jetzt in den Stern geändert. Okay, so einfach ist es, Aktualisierungen an Bibliotheksdateien
vorzunehmen und sie dann innerhalb von your.py Dateien zu verwenden. Also eine letzte Sache, die ich nur durch Sie führen möchte, ich möchte Sie einfach durch und werfen Sie einen Blick auf die Bibliothek in der Cloud. Also gehen wir einfach zu unserem Browser. Und lasst uns das hier rüber bringen. Also das ist, lass mich das einfach auffrischen. Okay, also bin ich in Cloud angekommen. Sie können sehen, ich habe hier zwei Bibliotheken. Das ist also unsere fromme Teres-Bibliothek, die wir erstellt haben. Damit wir das angreifen können. Und Sie können sehen, dass wir unsere drei Komponenten hier haben. Und es gibt ein paar Dinge, die wir hier tun können. Wir können die Bibliothek in Proquest Studio aus der Cloud öffnen. Wir können darauf tippen, um unseren Versionsverlauf zu sehen. Also, wenn wir in eine bestimmte Version gehen, können
Sie das Gemeinsame sehen, das wir gemacht haben. Und wir können Dinge tun, wie wir eine bestimmte Version im Studio öffnen können. Also, wenn wir auf eine andere Version zurücksetzen müssen, so wiederherstellen und eine vorherige Version, um auch die aktuelle Version zu sein. Es gibt also einige Möglichkeiten, die uns helfen, unsere Bibliotheksdateien zu verwalten. Wie Sie sehen können, macht das
Protokoll es wirklich einfach, wettbewerbsfähige Bibliotheken zu erstellen und zu verwalten. Wenn Sie ein persönliches Konto
haben, können Sie Bibliotheken für Ihren persönlichen Gebrauch erstellen. Wenn Sie Bibliotheken für andere Personen in Ihrem Team freigeben möchten, benötigen Sie entweder ein Team- oder eine Enterprise-Lizenz. Und wenn Sie eine davon haben, dann können Sie Rollen verwalten. Für Bibliotheken. Sie können bestimmte Personen in Ihrem Team haben, die Bibliotheken verwalten. Sie können andere Personen haben nur Zugriff auf Bibliotheken haben, in denen sie sie nicht wirklich bearbeiten können. Es gibt also eine ganze Reihe von Funktionen, um das herum. Und wieder, sehr ähnlich der Art, wie Sie fühlen und verwalten und wie Fichman-Bibliotheken funktionieren. Okay, so dass über unseren kurzen Blick auf Bibliotheken abschließt. Es sollte genug sein, damit du mit ihnen anfängst. Hoffentlich hast du etwas Spaß mit ihm. Einige Kisten und coole Sachen, die Sie in all Ihren different.py Dateien wiederverwenden können. Im nächsten Video werden
wir ein wenig mehr sehen was noch pro pi cloud zu bieten hat. Also sehe ich dich dort.
44. ProtoPie Cloud: Hallo da und willkommen zurück. In diesem Video möchte
ich nur ein wenig über das Teilen von Dateien sprechen und iCloud einige der anderen Funktionen testen, die pro pi cloud zu bieten hat. So haben wir jetzt
unsere Pintrest-App effektiv abgeschlossen und möchten jetzt mit anderen Teammitgliedern teilen. Also, was ich tun werde, ist, dass ich meine Python hochladen werde. Ich werde sicherstellen, dass ich auf dem Startbildschirm bin. Und ich werde auf Upload tippen. Und ich habe das offensichtlich schon mal hochgeladen, also habe ich Änderungen vorgenommen. Also habe ich diese Option. Also entweder dieses Update, meine vorhandene py-Datei oder Upload ist ein brandneues Python. Also werde ich nur wählen, Upload ist eine brandneue Pipe. Und das wird hochgeladen. Und es wird Ihnen geben, wenn Sie mehrere Konten wie ich haben, wird
es Ihnen Zugang zu geben, um zu wählen ,
welches Konto Sie es hochladen möchten. Susan hat hier mit meinem persönlichen Raum zu tun. Und das wird hochgeladen. Okay, cool. Also das ist fertig hochgeladen und es hat mir diese URL gegeben, die
ich einfach hier kopieren kann und ich könnte das an
einen Kollegen oder ein Teammitglied senden , mit dem ich meinen Prototyp teilen wollte. Wenn sie das bekommen, werden
sie darauf klicken und es wird hochladen, tut mir leid, es wird die Datei in den Wolken öffnen und das ist einfach tippen Sie auf diese URL. Also werde ich das aufmachen. Okay, also das ist nur Gott, wir sind jetzt in einem Webbrowser. Also, das wird nur meinen Geist Prototyp in der Cloud öffnen. Und Sie können sehen, weil wir eine Vibrationsantwort verwendet haben, die eine hardwarespezifische Funktionen sind
, die uns nur sagen , dass diese spezielle Funktion nicht
innerhalb eines Webbrowsers auf unserem Desktop-Computer unterstützt wird . Alle Sensoren, die Sie verwenden, wie Kamera und was haben Sie, sie werden nicht funktionieren, wenn Sie Ihren Prototyp in der Cloud selbst betrachten. Also schließen wir das einfach ab und schauen uns um. Also habe ich hier ein paar Kontrollen auf der Unterseite. Ich kann, im Grunde kann ich gehen und tippen Sie dies und kann in wie einen kompletten Vollbildmodus gehen. Also werde ich einfach das ganze Unordnung loswerden. Und ich habe meine Multiplikatordatei direkt verwendet. Und ich kann einfach die Escape-Taste drücken, um da rauszukommen. Ich kann auch in diesen anderen Modus gehen, wo ich immer noch meinen, meinen Rahmen sehen kann. Wenn Sie also einige der,
einige der Voreinstellungen in Pro Pi auswählen , erhalten
Sie einen Geräterahmen. Wir bekommen sie nicht für alle, aber Sie werden sie für die beliebtesten bekommen. Ich kann einfach den Mauszeiger über den unteren Bildschirmrand bewegen, um wieder zu meiner normalen,
normalen Ansicht zu gelangen . Wir haben die Möglichkeit, die Geschwindigkeit zu ändern, mit der der Prototyp ausgeführt wird. Wenn Sie also die Dinge verlangsamen oder beschleunigen wollen, können Sie das tun. Und dann auf diesen, auf diesem Überlaufmenü, haben wir das Bessere. Ändern Sie unseren Cursor, wenn er anstelle des Berührungspunkt-Cursors ein Pfeilcursor sein wollte. Okay, also drüben auf der linken Seite hier haben wir dieses Beschreibungsfeld. Wieder kann ich drei Punkte treffen. Ich kann hier alle Informationen bearbeiten. Ich kann es sagen. Jede Beschreibung, die ich innerhalb dieses Beschreibungsfelds möchte, würde bis zu tausend Karat betragen, die Sie verwenden können. Ich habe auch Zugriffseinstellungen. Wenn ich also meinen Prototyp mit anderen teile, kann
ich ändern, welchen Zugriff sie haben. Im Moment kann
jeder mit diesem Link den Prototyp anzeigen und jeder
, der den Link hat, kann die Pipeline auch herunterladen. Das kann ich ändern. Ich kann sagen, ich will nur, dass ich Zugang dazu habe. Das bedeutet also, dass die Leute es in der Cloud ansehen können, aber sie würden es nicht herunterladen können. Normalerweise möchten Sie dies haben weil Leute in der Lage sein werden, den Python auf
ihr Gerät herunterzuladen und den Prototyp tatsächlich auf
ihrem Gerät mit den drei kostenlosen Pro-Pie-Plan auszuführen , den Sie in den iOS-Store und den Android Play Store. Es gibt also ein paar Features. Wir haben auch einige Anzeigeoptionen. Also, das ist effektiv, was ich hier unten getan habe. Also, wenn Sie all dieses Unordnung verstecken wollen, wenn Sie steuern wollen, ob sie Touch-Hinweise sehen oder nicht, das Gerät Mockup, all diese Arten von Dingen. Sie können hier Ihre Optionen auswählen und dann den Link in
Ihren Garr-Link kopieren , in dem alle diese Einstellungen angewendet wurden. Das ist also auch sehr nützlich. Und schließlich, wenn Sie diesen Kuchen loswerden möchten, können
Sie diesen Pi einfach aus der Cloud löschen und dann werden sie von Ihrem Konto gelöscht. Endlich hier unten haben wir Versionsgeschichte for.py Dateien als auch. Wenn Sie Änderungen vornehmen und Ihr Profil in die Cloud hochladen. Es wird neue Version auf die gleiche Weise erstellen, wie wir es mit Bibliotheken im vorherigen Video
gesehen haben . Und Sie haben hier einige Möglichkeiten. Sie können Zugriff auf einen QR-Code erhalten. Also, wenn Sie dies von innerhalb von Pro Pi-Player scannen, dann wird die Python Datei in den Player herunterladen. Sie können auch einfach auf Ihren Computer heruntergeladen oder einen anderen Designer der an der Stapeldatei
arbeitet, und Sie möchten es bearbeiten so dass Sie einfach die Python Öffnungen in Studio herunterladen können. Und schließlich, wie wir zuvor gesehen haben, können
Sie auf Ihre Freigabeoptionen zugreifen. Wenn wir also aus meinem polnischen Pi zurückkehren, wie Sie sehen können, bin ich wieder in meinem persönlichen Raum und hier lebt meine Bibliothek. Also my.py Dateien sind in einem Abschnitt. Und wie wir zuvor gesehen haben, sind
meine Bibliotheken in diesem anderen Abschnitt. Okay, das sind also alle Funktionen, die mit Pro iCloud geliefert werden. Wenn Sie ein persönliches Konto haben. Im nächsten Video werden
wir einen Blick auf eine sehr spezifische Funktion werfen, die in Cloud integriert ist, die nur für Teamkonten oder Unternehmenskonto verfügbar ist. Sie haben also keinen Zugriff darauf, wenn Sie nur ein persönliches Konto haben. Und diese Funktion wird als Interaktionsrezepte bezeichnet. Das wird also das sein, was wir uns ansehen werden. Interaktionsrezepte ermöglichen es Ihnen, alle Werte in Ihren Animationen in, in Ihrem, in Ihrem, in Ihrem, in Ihrem, in Ihrem, in Ihrem, in Ihrem, in Ihrem Prototyp zu sehen. Dies ist eine wirklich coole Funktion, wenn Sie Ihre Prämisse höher an einen Entwickler weitergeben und Sie möchten, dass Sie ihnen Zugriff auf Macht geben möchten, um Ihre Animationen zu brechen und alle Werte der Animationskurven und all das zu sehen Art von Zeug. Das ist also, was Interaktionsrezepte voll sind. Und das sehen wir uns im nächsten Video an. So sehen wir uns dort.
45. Kochen von Interaction: Hallo, willkommen zurück. In diesem Video werde
ich Ihnen die Funktion innerhalb der Pi-Cloud für Teams und für Unternehmen zeigen, die Interaktionsrezepte genannt wird. Also Interaktionsrezepte, eine Möglichkeit,
Ihre Prototypen an Entwickler zu übergeben , so dass Sie sehr spezifische Mikrointeraktionen Animationen
präsentieren können . Und Sie können dies mit Ihrem Team teilen und sie können dann sehen, was
die Werte sind und dann als Bezugspunkt verwenden, um die reale Sache zu erstellen. Also werden wir jetzt eine Aufruhrruhe schaffen. Also habe ich die Pinterest-App in die Cloud hochgeladen und ich werde zu dieser Interaktion Rezepte Handles gehen. Also nochmal, sehen Sie das, wenn Sie ein
Team-Unternehmenskonto haben und ich werde den Aufnahme-Button drücken. Okay, also werde ich in einen Aufnahmemodus gehen. Ich werde diese Speisekarte hier verstecken. Und ich werde mich einfach in die App einloggen. Und ich werde nur ein paar falsche Informationen eintragen. Also wir Gao Fehlerbehandlung Zustände und ich traf Continue Handling Zustand. Okay, ich werde jetzt die Aufnahme stoppen. Das wird die Aufnahme verarbeiten. Und es wird mich in diese ganz spezifische Ansicht bringen. Und Sie können hier sehen, dass wir diese Timeline-Ansicht am unteren Rand des Bildschirms haben. Ich habe diesen Spielkopf hier, ich durch
die Timeline schrubben kann, damit du sehen kannst es jetzt wiedergibt, was ich gerade aufgenommen habe. Und ich kann tatsächlich alle Antworten und Auslöser, die ich gesessen habe, durchbohren. Und ich kann alle auswählen, aber wir müssen das Logo hierher verschieben. Und Sie können in diesem Panel hier sehen, Ich habe die Verzögerungen werden die Dauer oder die Lockerung Kurven genannt. Und ich habe all die Prophezeiungen, die dieses Panel verändert haben. Dies ist ein Weg, den Sie zeigen können, um
Entwicklungsteam zu bauen , was Sie getan haben, und sie können dies verwenden und dies interpretieren. Und dann von diesem Tablett, das Echte, das Echte. Es ist also ein ziemlich cooles Feature. Du hast diese kleine, kleine Timeline-Sache hier wo du diese Ernte von meinem längsten Shortstop klettern kannst. Und doch können Sie einfach, Sie können einfach durchgehen und alle Werte introspektieren. Und dann kannst du das benutzen. Was ist wirklich cool darüber auch, dass klar Fähigkeit zu Wolken ist. Ihr Entwicklungsteam braucht mein Studio nicht sondieren, ich brauche Zugriff darauf. Und Sie können das einfach teilen. Und tatsächlich, wenn wir, wenn wir tatsächlich nur zurück zum Hauptbildschirm gehen, können
Sie tatsächlich viele und viele Interaktionsrezepte aufzeichnen. So können Sie hier das Rezept sehen, das ich gerade aufgezeichnet habe. Ich kann das bearbeiten. Ich kann dies ändern, um sich anzumelden oder wie auch immer ich es nennen werde. Und ich kann hier eine ganze Reihe von Rezepten für alle verschiedenen Interaktionen und Mikro-Interaktionen in meiner App haben. Und dann kann die Entwicklung des Entwicklungsteams, mit
wem auch immer ich arbeite,
das spezifische durchgehen , an dem wir arbeiten, und sie können all diese Werte bekommen. Okay, also ist dies ein kurzer Blick auf Interaktionsrezepte ist eine wirklich coole Funktion. Ich bin sicher, es ist, Es ist eine wirklich interessante Interpretation, wie Sie
tatsächlich geben Sie Ihre Entwürfe an das Entwicklungsteam aus einer Interaktionsperspektive. Ich habe noch niemanden gesehen, wie es so gemacht hat. Okay, also schließt das unseren Blick auf Interaktionsrezepte innerhalb der Cloud ein. Und wir sehen uns im nächsten Video.
46. Das ist ein Wrap! Wohin du von hier gehen sollst.: Hey, es sieht so aus, als hättest du es bis zum Ende des Kurses geschafft. Gut gemacht. Also haben wir ziemlich ein paar Kuchen zusammen auf diesem Kurs. Ich hoffe, Sie haben den Kurs genossen. Ich habe es sicherlich genossen, es zu machen. Und hoffentlich haben Sie es geschafft, diese Propylaia-Designfähigkeiten zu verbessern. Und Sie fühlen sich viel selbstbewusster mit der Software und Sie haben ein paar coole Sachen erstellt. Eigentlich bin ich ziemlich erstaunt. Ich habe eine Menge Designer pro Lieferant beigebracht. Und es erstaunt mich immer, wie schnell diese Leute zu sehr fortgeschrittenen Interaktionen
kommen, sehr, sehr schnell. Also hoffentlich hast du es auch geschafft, das zu tun. Also, und wenn Sie sie Lodos an Sie haben, Gut gemacht. Also möchte ich nur auf ein paar nächste Schritte ansprechen,
ein paar Dinge, die Sie in Betracht ziehen könnten, um Ihre Erkundung von Proto Pi fortzusetzen. Also zuerst, überprüfen Sie definitiv seine Website. Es gibt einen guten Dokumentationsabschnitt und er geht viel tiefer in Bezug auf die Trigger, die Sie verwenden können, und alle Antworten, die Sie verwenden können. Es hat auch Dokumentation zu Formeln, hat viel mehr in Bezug auf Formeln und auch Komponenten zu lernen. Es gibt definitiv andere Dinge auf der Website als auch. Es gibt also einen Abschnitt, in dem andere Verwendungszwecke their.py Dateien hochgeladen haben, von einem Pro-Anbieter
kuratiert wurden. So können Sie diese herunterladen, Sie können diese Reverse Engineering. Und das ist eigentlich eine wirklich gute Möglichkeit, um zu lernen, wie man die Software benutzt. Das ist etwas, was ich in der Vergangenheit definitiv getan habe. Andere Dinge, die Sie tun können, ist, dass Sie, ich habe einen YouTube-Kanal namens Proto Pilot laufen. Also lade ich Videos mehr oder weniger wöchentlich über eine breite Palette von Themen hoch. Alles von mobilen entwickelt bis tief taucht in bestimmten Preis durch Funktionen bis hin zu neuen Funktionen, die herauskommen. Einige der Dinge, die ich tun werde, sind TV-Schnittstellen und Spiele als auch. Also ja, eine ganze Reihe von Sachen gibt es für dich, um einen Blick zu werfen. Also, wenn das etwas ist, das Sie für Sie nützlich fühlen, dann gehen Sie und abonnieren Sie diesen Kanal und Sie erhalten Benachrichtigungen, wenn neue Videos geladen sind. Du kannst mir auch auf Twitter folgen. Es sollte jetzt einige Links auf dem Bildschirm sein. Und auch Sie fühlen sich frei, mir auf LinkedIn zu folgen. Fühlen Sie sich frei, auf diese Kanäle zu erreichen. Und ich bin immer glücklich, Fragen zu beantworten und euch zu helfen. Also ja, nicht zeigen, fühlen Sie sich frei, um zu erreichen. Außerdem möchten Sie vielleicht protoplanet App folgen und das ist bei protoplanet App. Es posten auch Sachen auf Twitter auf einer regelmäßigen Basis. Und andere Dinge, die Sie tun können, ist, können Sie folgen, Entschuldigung, Sie könnten der Facebook-Gruppe beitreten. So gibt es Ansatz anwenden Facebook-Gruppe. Und ich half, das zu moderieren, zusammen mit einer ganzen Reihe anderer Pro-Lieferanten-Enthusiasten und Pro-Supply Profis, einschließlich Jungs von Process Pi als auch. Das ist also eine sehr aktive Gruppe und das ist definitiv einen Besuch wert. Abgesehen davon, weiter zu erforschen, weiter Experimente in. Und es gibt so viel mehr zu lernen. Ich werde in naher Zukunft weitere Kurse über Prozessor Pi machen. werde nur darüber nachdenken, woran ich als Nächstes arbeiten werde. Also wahrscheinlich etwas, vielleicht um Komponenten oder einen Fortgeschrittenenkurs über Formeln. Wieder, fühlen Sie sich frei, auf
den sozialen Kanälen zu erreichen , wenn Sie irgendwelche Ideen über Dinge haben, die Sie denken, dass Sie
möchten , dass ich einen Kurs machen, und sind glücklich, das zu berücksichtigen. Okay, das bin ich,
unfruchtbarer Bennett, der sich abmeldet. Ich hoffe, du hattest eine tolle Zeit, den Kurs zu machen. Und hoffentlich sehen wir uns das nächste Mal.