Framer X Crash-Kurs: Erstellen eines voll funktionsfähigen Prototyps!

1. Willkommen: I Der Fall meines Namens und ich bin die Benutzeroberfläche in der Verwendung von Erlebnislinie Ich bin spezialisiert auf die Erstellung, warum Frames Prototypen in High-Fidelity-Layouts. Im Laufe meiner Designkarriere habe ich einen konsistenten Workflow entwickelt, indem ich die Branchentrends im Technologie- und Designbereich auf dem Laufenden hielt. Dies hat mich dazu geführt, neue Wege zu finden, um den Produkten, die ich in dieser Klasse erstelle , ein einzigartiges Maß an Dynamik hinzuzufügen , würde Rahmeneier betrachten. Ich werde Sie durch den gesamten Prozess begleiten, um Ihre Entwürfe lebendig zu machen. Also nutzt sie Komponenten, fügt Events hinzu und erkundet die internen Freeman Stores, die Sie Erfahrungen mit der Nutzung des neuesten Potenzials sammeln können. Hinter dieser Software ist immens. Während wir durch jede Phase des interaktiven Prozesses gehen, werde ich mir die Zeit nehmen, um zu erklären, was jede Gesamtfunktion tut und warum hat es eine bestimmte. Bevor wir mit dieser Klasse fortfahren, gehen Sie vor und laden Sie die angehängten Projektdateien in Es wird ein Klassenprojekt geben, das Ihnen die Möglichkeit gibt, in der Praxis zu experimentieren, um rechtzeitig. Wenn Sie mehr von meiner Arbeit sehen möchten, stellen Sie sicher, dass Sie zum Skill-Share-Profil gehen oder mich auf anderen sozialen Plattformen verbunden . Solche Drivel auf Twitter fühlen sich auch frei, dieses Profil der Folgen zu halten, um über alle zukünftigen Klassen über alles, was in Ihnen entwickelt, auf dem Laufenden zu halten wissen, dass es verwandt ist. Fühlen Sie sich frei, mich zu kontaktieren, wenn Sie Fragen oder Feedback dazu haben, wie dieser Kurs verbessert werden könnte , bereit für den Einstieg, also lasst uns beginnen. 2. Übersicht von Framer X: Hallo, Leute. Und willkommen zurück zum nächsten Teil dieses Videos. Ich gebe Ihnen einen schnellen Überblick über die Frame X Software, wie z. B. über jede Schnittstelle, und werfe einen Blick darauf, was einige der Funktionen tun. Dies ist nur, um Ihnen ein Gefühl dafür zu geben, wie die Plattform aussehen wird, bevor wir tatsächlich einen Prototyp erstellen. Was daran cool ist, ist ein Potenzial dahinter und die Art und Weise, wie es innerhalb der Community aufgenommen wurde , speziell unter Designern. Wie ich das Gefühl hatte, dass es mit der vorherigen Version eine ziemlich steile Lernkurve hatte, was bedeutet, dass, wenn Sie nicht mit JavaScript vertraut waren, sich mit den Grundlagen der Steuern auseinandersetzen und den Prototyping-Prozess optimal schien für viele Menschen wie ein Punkt und Aufgabe. Und trotz Rahmen von X immer noch die code-basierte Engine diesmal reagieren, Der eigentliche Prototyping-Prozess selbst wurde viel freundlicher und intuitiver gemacht, und definitiv Rivalen wie das Vorstellungsstudio in einem Doobie übertrifft Prototyping, Funktion oder weit überwiegen im Prinzip in Bezug auf Einfachheit. Daher halte ich es für vorteilhaft, dies zu lernen, denn als Designer können wir nicht nur erstaunliche Interaktionen schaffen . Wir können auch die Kraft des Reagieren sehen, wie es funktioniert, ohne tatsächlich eine Reaktivierung selbst schreiben zu müssen. Also ohne weiteres, lassen Sie uns die Haupt-Schnittstelle öffnen und explosiv mit den Funktionen. Okay, also hier sind wir in freien Mags, wie Sie sehen können, nicht viel los. jedoch Wir haben diesen Typjedochhier ausgewählt, wo die Hauptzauber beginnt. Das passiert, es heißt Werkzeuge und darin ist in vier Abschnitte aufgeteilt, die Layout interaktiv ist. Zeichnen in Canvas-Entscheidung ermöglicht es Ihnen, nicht nur den Designprozess, sondern auch den Prototyping-Prozess zu steuern . Diese Umfrage scheint Ihnen wahrscheinlich sehr vertraut, aber um mehr von der Schnittstelle zu öffnen, lassen Sie uns frei wählen und wählen Sie einen Campus, in dem das Design für Senator Wie vorstellende Skizze Haben wir die Möglichkeit, Uhr zu wählen, Telefon, Tablet, Computer oder TV? Für die Zwecke dieses, lassen Sie uns iPhone Eier wählen, und es ist wie die Rundtour, um das Eigentum Zeug zu öffnen. Jetzt, da ich Kreis erstellt habe, werden Sie auf den Ebenen Wanne sehen, die in diesem iPhone für ihn hier verschachtelt ist, haben Sie die Eigenschaft Zeug, die sie wahrscheinlich sehr vertraut aussieht, um es auf Skizze hier zu haben , können Sie Richten Sie es aus. Stellen Sie die Position in für Reaktionsfähigkeit, wie durch die Animation unten gesehen, wobei die innerhalb der Höhe, der Überlauf ein- oder auszublenden, sowie Dinge wie die A, Passy, die Drehung und der Radius. Sie können dies auch in einen Link verwandeln, indem Sie dies zu einem anklickbaren Ereignis machen, das Sie zur nächsten Seite führt, ist das, was den Code bearbeiten wird. Es ist wie die Fülloption oder ändern Sie andere vertraute Dinge, die fühlende Farbe und andere Stilelemente wie die Grenze in den Schatten haben sollten . Sie können es auch einzeln oder als ganze Leinwand erkunden. Abhängig von den Anforderungen, wird jedoch auf Nachrichten in einem späteren Video innerhalb eines Tool-Bereichs berühren. Sie werden auch drei andere wichtige Elemente sehen, die ein Stapel-Link und Scroll-Stack im Wesentlichen ein Flex-Bücherattribut ist, mit dem Sie eine organisierte Liste verteilen können , aber für die horizontale Reinigung in einer einfachen und effizienten Weise. Link ist im Wesentlichen der Prozess der Verknüpfung Bildschirm, so dass Sie zwischen ihnen gehen und Scroll ist eine Scroll-Komponente ermöglicht es Ihnen, innerhalb einer Maske auf einer bestimmten Seite unter, dass unter Zeichnung, Sie haben Grafik, , wo Sie Vektorformen und -pfade erstellen und bearbeiten können. Und schließlich, unter Leinwand, haben Sie grundlegende Navigationsoptionen. Eine solche Auswahl zoomen und schwenken Sie dieses Problem, so dass Sie sich auf der Seite bewegen und vergrößern können, während Sie entwerfen. In Ordnung, also habe ich nicht auf die Designseite der Dinge geschaut, und ich fühle das Bedürfnis, zu viel ins Detail zu gehen. War es irgendwie bereit, in ähnlich wie alle Software unkompliziert zu sein? daher Komponenten, Betrachten wirdaher Komponenten,die jetzt mit Symbolen vergleichbar sind, und Skizzierkomponenten sind im Wesentlichen wiederverwendbare Elemente. Es könnte auf mehrere Seiten verteilt werden , muss jedoch nur einmal bearbeitet werden. Um Ihre eigenen Komponenten zu verwenden, können Sie sie mit sogar Design oder Code erstellen. Wenn Sie ein Designer sind, natürlich, Ihr Gefallen das. jedoch Wenn Siejedochein Entwickler sind oder jemand mit überreagierendem Code vertraut ist, können Sie ihn erstellen. Verwendung dieses auf dem News Visual Studio-Code ist eine Workflow-Integration. für die Zwecke dieses Videos mit Code erstellen, Lassen Sie unsfür die Zwecke dieses Videos mit Code erstellen,damit ich zeigen kann, wie diese Integration von Anfang an funktioniert. Lassen Sie uns es etwas Einfaches nennen, wie Hello World Click, Erstellen Sie es. Es ist Was passieren wird, ist der Visual Studio-Code wird geladen, der alle Reaktionseigenschaften für diese Komponente anzeigt . Ich werde nicht zu viel in das kommen ist, wie ich sagte, obwohl es verwendet reagieren, müssen wir uns keine Sorgen darüber machen, obwohl diese zu Ihren Komponenten oder sollte ich sagen, dass Komponente für ihn erstellt wird. Eggs bietet auch die Möglichkeit, Dinge wie den Titel zu überschreiben. Wie es grundlegende Styling-Elemente noch in Visual Studio-Code getan werden müssen, um zu zeigen, wie Komponenten auf zwei Seiten funktionieren. Lassen Sie uns schnell wieder eingehen und einen der Elemente ändern. Ist es nicht ein einfaches Ändern der Farbe des Textes von Black Control S, von dem aus ein bisschen Veränderung über die Like ist , sagte ich, meisten von Ihnen haben dies wahrscheinlich im Design getan. Allerdings bietet der Framers Store auch eine Vielzahl von verschiedenen You I Kits und Komponenten bereits für Sie, um neu auf Ihre Projekte zu installieren. Lassen Sie uns das als Nächstes erkunden. In Ordnung, also habe ich auf Komponenten angefasst und wie Sie ungewöhnliche eigene erstellen können. jedoch Wenn esjedochum Rapid Prototyping geht, ist es manchmal nicht möglich, Ihr eigenes von Grund auf neu zu erstellen. Glücklicherweise bietet Rahmen einen ganzen internen Speicher oder Menschen innerhalb der Gemeinschaft können Ihnen eine Vielzahl von verschiedenen You I Kinder auf Komponenten bereit für Sie zu verwenden geben. Dies ist besonders praktisch für Leute wie mich. Sie möchten nur schnell Dinge wie das Laden von Symbolen ziehen. Und denken Sie nicht zu viel darüber nach. Wird diese Konstante aktualisiert? Also empfehle ich definitiv, dies zu überprüfen. 3. Updates und Framer: Na gut, Leute, willkommen zurück zum nächsten Teil dieses Videos. In ein bisschen Forschung heute Morgen, und die neueste Version, die am 16. Oktober veröffentlicht wurde, ist eigentlich Framer X drei. Nun, ehrlich gesagt, für in der X fünf in der Beta-Version sieht genau das gleiche aus. Es ist Rahmen extra. Ich denke, es ist meist nur eine verbesserte Funktionalität. Also, wenn Sie dieses Tutorial befolgen wirklich keinen Unterschied machen. Sie könnten entweder diese oder diese verwenden, denn wenn Sie zur Schnittstelle zurückkehren, ist dies die neueste Version. Es sieht genau gleich aus. Wie ich schon sagte, es sind meist nur verbesserte Dinge. Ähm, und sie hatten eine Menge Dinge, die die Gemeinschaft auch empfohlen hat. So benutzerdefinierte Overlay-Übergänge. Was wirklich seltsam ist, ist, dass ich das für Feedbacks im Besitz geschickt habe. Wenn sie den Krankenwagen ziemlich cool genommen haben. Ein Teil dieses Videos war gut, war vor allem nur, dass Sie einen Überblick über die eigentliche Website. Also die Community dahinter auf die anderen Leute, die es unterstützen, weil sie hinter sich stehen und nur, du weißt schon, die allgemeine Art von Unterstützung, die du auf Twitter und Dribble finden würdest. Und noch eine Sache, die ich empfehlen würde, sich auch anzuschauen. Jetzt bin ich eher eine Hand auf Person. Ich mag es, in Software einzutauchen und zu lernen. Jedoch gebe ich immer. Die Dokumentation für neue Software ist eine schnelle Lektüre, weil es wirklich praktisch war, um tatsächlich durchzugehen. Sie werden alles erklären. Ja, es ist sehr wortlich, aber und visuelle Bilder sind da. Sie sind sehr nett. Und wie ich schon sagte, wenn Sie gehen und das überprüfen wollen, gehen einfach zu Frame ex dot com. Aber ja, Auf dem nächsten Video werden wir es importieren und exportieren aus der Skizze und auch nur einen kurzen Überblick darüber geben, wie die Reaktionsfähigkeit innerhalb des Designs funktioniert und dann, ja, wir kommen in Prototyping. 4. Importieren: Also, in diesem Video, wir versuchen, Ihre Entwürfe direkt aus der Skizze in Freeman zu importieren, jetzt 22. Lange ist es ein wirklich einfacher Prozess. Aber sagen wir, Sie haben eine Denkskizze entworfen und Sie mögen jeden Prototyp. Es muss schnell sein und schnell sein. Was wirst du tun müssen? , Entschuldigen Sie,die schreckliche Ebenenhierarchie war implizierter Befehl. Siehst du, um es zu kopieren , kommst du in Freeman. Komm schon, V und das gehst du. Und was es tun würde, ist, dass es alle Ebenen behalten und auch Eltern hinzufügen wird. Diese Gruppen haben also, obwohl keine Frames, obwohl keine Frames, verschachtelte Lagen in ihnen. Es behält seine und von dort aus können Sie einfach markieren, was Sie tun möchten. Leichte Link sagen, bekommen Sie es auf diese Seite. Und wenn Sie es in der Vorschau sehen, ist das einfach. Ist jetzt wichtig von Skizze ist nicht ohne seine Einschränkungen. Du wirst es sofort bemerken. Nun, Sie haben vielleicht nicht bemerkt, , dass diese beiden Grafiken hier im Port in, egal wie oft ich versucht habe, die hier zu übersetzen, das passiert einfach nicht. Es sind nur reine weiße Quadrate. Es gibt also einige Störungen in Bezug auf die Übersetzung des Designs von dort in eine andere Software. Eine weitere coole Sache, die direkt aus der Skizze importiert wird, ist im Wesentlichen alle Layer-Eigenschaften aus der Originaldatei beizubehalten . Wenn Sie Last-Minute-Entwurfsanpassungen vornehmen möchten, müssen Sie nicht in die ursprüngliche Skizze zurückkehren, denn Sie können es direkt im Rahmen tun, indem einfach doppelt darauf tippen, um die Ebeneneigenschaften aufzurufen. Von dort aus können Sie die Farbe ändern. Ändern Sie Ihre Plessy gegebene Änderung der Irritation, was bedeutet, dass Sie ständige Kontrolle behalten können. Der Entwurfsprozess, der es gleichzeitig von der ursprünglichen Skizzendatei getrennt . 5. Entwerfen in Framer X: Okay, das letzte, was wir schnell betrachten werden, sind die Eltern- und Kind-Beziehungen innerhalb des Entwurfsprozesses, der die Ebenenhierarchie bildet, gut, es ist eine reaktionsfähige Seite der Dinge, die auf dem Flex-Box-Design basieren. Airframe Eier ist wirklich in sie, und alles ist bereits für Sie organisiert. Wenn Sie einen Typ-Player erstellen, Hello, bestimmt Hello, Forever X automatisch die übergeordnete und untergeordnete Beziehung zwischen diesen beiden Ebenen. Das bedeutet, dass alles organisiert bleibt. Du brauchst dir keine Sorgen darüber zu machen, wohin die Gruppe geht. Dies macht es auch für die reaktionsfähige Seite der Dinge, die hier demonstrieren werden, einfacher . Reaktionsfähigkeit haben diese drei Jahre geschaffen. Ich setze dies hier fort, die jeweils zwei Elemente innerhalb von acht Pixel-Rand Figurehead enthalten und schließt ungeöffnet verantwortungsvoll. Sie werden drei Frames sehen, die jeder dieser Container hier mit ihnen repräsentieren . In diesen Frames haben Sie die beiden Kinder, den Text und den Kreis. Dies ermöglicht Framer Exit bestimmen die Reaktionsfähigkeit genau. Okay, also habe ich gerade gezeigt, dass Sie eine Hierarchie und Reaktionsfähigkeit legen und sie zeigen, dass der Export wirklich offensichtlich so ist wie jede andere Software. Jedoch, Es ist coole Show sowieso, nur für den Fall. Also, was wir tun, wenn Sie Ihren gesamten Campus exportieren möchten, wählen Sie den exportierenden Titel aus. Ich werde über die Exploit gehen, diese kleine Drop-down-Liste. Würden Sie Ihre Größe erwarten und gehen Sie ein X, ich denke, zwei x oder drei x Wenn ich für Dribble komprimiere, höre ich nie einen solchen Dateityp, so dass Sie sehen können, die volle ist PNG. jedoch Sie könnenjedochaus J. Peg Ah Web-Paket wählen , das im Grunde ein komprimierendes Format für Bilder ist, die Sie im Web setzen und dann haben Sie PDF-Export und frisches Gemüse ist ein etwas anderer Prozess ist es erfordert, dass Sie die SPG-Coats, die Sie direkt in Ihren Texteditor einfügen können, kopieren. Dies ist besonders praktisch für Export und Ikonographie für Ihren Entwickler, um zu demonstrieren, wie dies funktionieren könnte. Gehen Sie in den Werkzeugtyp in der ausgewählten Grafik, erstellen Sie Rahmen, und was dies tun wird, ist eine Vielzahl von verschiedenen Optionen zu öffnen, die Pfad, Rechteck, Oval, Polygon und beginnen sollte Rechteck, Oval, zu zeigen, wie zu exportieren es. Lassen Sie uns eine Grundform mit dem Zug erstellen. Es wird nichts zu verrückt geworden sein, gerade genug, um zu zeigen, wie wir es ausbeuten. Setzen Sie Phil auf, wissen Sie, die 100 und jetzt haben Sie Ihre Form. Es sei denn, sagen Sie, Sie müssen exportieren. Dies wird es vollständig essbar zu halten. Sie in der Produktionsphase sind, gehen Sie einfach zum Kopieren. Sie haben die Möglichkeit, den SPG-Code zu kopieren. Jetzt, da ich den Export behandelt habe, denke ich, dass es an der Zeit ist, zum vollständigen Prototyp überzugehen. Gehen Sie also voran und öffnen Sie die Übungsdatei. Und unter Hauptdateien ist es wie der Ordner Benutzer, wo Sie die Datei finden, die die Arbeit von dort aus in der Lage sein wird, durch den Prototyp erhöht zusammen zu gehen . Wir sehen uns im nächsten Video. 6. Bildschirmeinstellung: Alles klar, Willkommen zurück zur nächsten Etappe dieses Kurses. Darin werden wir eigentlich anfangen, einen einfachen Prototyp zu bauen. Ich gehe davon aus, dass Sie die Projektdateien geöffnet haben. - Was? Sie werden sehen, dass ich vier Bildschirme erstellt habe. Obwohl relativ einfach, Diese vier Bildschirme enthält vier der wichtigsten Funktionen in Frame-Expeditionen, Stapel Cree unergründliche Komponenten Linking Bildschirme und Verwendung von YouTube-Videos. Halten Sie es einfach. Wir werden uns Lincoln-Bildschirme ansehen und einen grundlegenden Fluss innerhalb der APP erstellen. Ich denke, ich habe das kürzlich früher gezeigt, wenn ich nicht aus der Skizze importieren muss. Es ist ein wirklich einfacher Prozess, also lassen Sie uns das jetzt demonstrieren. Auf der Eintrittsseite haben Sie ein aber hier drin, was Angst hat, dass ich eingegeben wurde. Was wir tun werden, ist, wenn ein Link es ist, dass die Seite auf die Kategorieseite hier übergeht , um zu tun. Going Cook Link, Ziel es auf diese Seite und Sie werden eine Vielzahl von verschiedenen Optionen wie der Übergang und die Richtung, in der es kommt in ist, was tut, welche Seiten auf einem Ziel zu oder eine Überschreibung nicht zu tun, dass. Sie können sogar hier runterfallen. Nehmen wir an, Sie wollen zum Haupt gehen. Sie werden einfach wählen Menü, wo Sie einfach wieder klicken können, und es wird wirklich selbst sein. Es ist nicht, dass der Lynch zu sehen, dass die vollen Übergänge von dem, was funktioniert, und lassen Sie mich Vorschau . Wir klicken darauf, setzen Sie Ihre Schlafkategorien Seitenübergänge in wirklich einfach, wirklich effektiv und gut zu zeigen, wie der Apfel fließen. Ich werde weiter gehen und mehr von den Bildschirmen sehen. Also sage ich aus den Kategorien Seite, wir haben diesen Rahmen hier, das ist ein Menü, was wir tun werden. Wir werden auch mögen, dass dieses Menü Hoover Leasing können Sie es so mochte es in die Übergangsoption gehen derzeit eingestellt ist, um Feed, das ist, was funktioniert Sie Recht von verschiedenen haben. Sie haben einen Push-Overlay-Modus. Auch wenn es wie ein Pop-up-Instant war, sie die eigentliche Animationsabteilung will. Ich würde das einfach nicht benutzen und umdrehen, ich habe es benutzt. Es ist chaotisch, aber verblasst. Es wird ein schönes wenig zu schaffen übermäßig wird keine Bewegung sein und Sie werden sehen, dass, wie wir wieder in, so aktualisieren Sie es. Sie werden sehen, dass das Menü erscheint. Okay, von hier aus wissen Sie, wie es als Nächstes ist, aber natürlich haben wir keinen Bruch. Ich meine, was für Dinge gut zu fließen. Gehen wir zurück. Schlüpfen Sie den X-Rahmen und wieder Hübsche, ziemlich einfache Prozess, was Sie verlinken praktische stimmt. Nicht schieben. Du wolltest wieder verblassen lassen, mich zurückgehen, Leute frisch. Kein Glaube nach zwei Kategorien. Was wir jetzt tun werden, ist von Videomaterial zu gehen. Wir gehen auf die letzte Seite, um den Lincoln-Teil dieses Prozesses zu beenden. Wir kriegen wieder Videomaterial. Link-Videos Seite haben, dass wieder schieben. Also, was wir tun werden, sind Dinge wie Menüs, die jeder glaubt, dass sie verblassen werden. Alle Seiten haben im Übergang von der von rechts nach links zu gehen. Und jetzt lassen Sie uns eine Vorschau auf das Ganze sehen, wenn es tatsächlich schwarz wird. Vielleicht nicht. Aber so oder so, wenn Sie also auf Videomaterial klicken, werden Sie sehen, dass geht auf die Videoseite. Deshalb schauen wir uns die GT-Büros an. Sie können die Hervorhebung sehen, ihre aktiven. Es ist wirklich cool, aber wir schauen uns diese Luft spät Stadium Jetzt, wo wir mit den Bildschirmen verbunden haben, lassen Sie uns eine Vorschau des Ganzen aus, um zu sehen, wie es fließt Vollbild, dass Sie sehen können, wir sind immer noch in diesem schönen pH-Wert. Hier klicken Sie auf Geben Sie den Kosmos, führen Sie nicht durch, um jede Seite zu schneiden. Von dort aus können Sie das Menü drücken, und dann wählen wir ein Videomaterial aus, um zur letzten Seite zu gelangen. Und noch eine Sache, die ich auch zeigen muss, ist, dass dieser Bakker auch schneidet, stimmt zu . Wenn Sie darauf klicken, werden die gegenüberliegenden Übergänge angezeigt, um einen schönen, dynamischen Tod innerhalb des Entwurfs zu erzeugen . 7. Stapel erstellen: Okay, jetzt, da wir Zeitalter miteinander verknüpft haben und sehen, wie die Abflüsse der nächste einzelne Looker Stacks sind und wie wir Listen auf einfache und effiziente Weise organisieren und verteilen können, ist dies besonders nützlich, weil Frame die genaue Position, wo die letzte war, so dass sie an Ort und Stelle einrasten, ohne dass Sie sich Sorgen machen müssen, sie auf eine andere Weise zu organisieren . Sie zeigen dir also, wie du das machst. Um mit jedem dieser Frames ihre einzelnen Elemente über zu beginnen Um sie in eine Aktie zu setzen könnten Sie über den Werkzeugbereich gehen und auf dem Layout Hit Stack oder s sicher. , Ich lasse die Elemente ausführen, die Sie in den Stapel legen möchten, und warte, bis das Eigenschaftenfenster angezeigt wird. Wie Sie hier sehen können,haben Sie ein Padding, mit dem Sie auf der Seite verteilen können, wenn Sie diese Null behalten möchten. Wie Sie hier sehen können, haben Sie ein Padding, mit dem Sie auf der Seite verteilen können, wenn Sie diese Null behalten möchten Und für diese hatte ich einen 30 Pixel-Marge zwischen ihnen wurden eine Lücke auf 30 geändert. Wie Sie sehen können, dann sehe ich genau gleich aus. jedoch Sie können siejedochin der Regel bewegen und organisieren und ihn eintreten lassen. Wie Sie möchten, war es in der Lage, die Lücke in der Partei in zu setzen, weil es ein Flex-Bücherattribut ist. Er verwendet auch viele der ursprünglichen Flex-Bücher. Terminologie Starten Sie einfach in der Mitte ist, was gibt Ihnen die Möglichkeit, eine Richtung entweder horizontal oder vertikal aus zu setzen . Jetzt mit diesem Stapel, im Wesentlichen auf eine Maske zugreifen, was bedeutet, dass sie hier zurückhaltend ist. Also, wenn Sie es zu verkaufen vertikale sorry horizontal, nicht viel passieren, wie es buchstäblich in diesem Abschnitt enthalten ist. Normalerweise würde es aus der Seite für die Zwecke dieser gehen, oder sie werden es nicht wirklich brauchen. Demonstrieren Sie, wie das funktionieren würde, so wie Sie sehen können, und ich gebe es ein wenig Platz um die Seite, weil es eingestellt ist, um zu beginnen, verteilen Sie es sagte, dass es Ansicht, um das in der Mitte zu setzen. Wie Sie sehen können, ist es in der Moschee nicht duftet. Wenn Sie am Ende gesagt haben, natürlich, Sie sind auf den Boden der Moschee als auch, dass Sie auch eine Linie haben, so dass, wenn Sie sagen, dass es beginnen, wie Sie sehen können, es ist eine Linie auf der linken Seite. Sie sagten das bis zum Ende, gut auf der rechten Seite ausgerichtet, und das späte Stadium wird dies in eine Schulkomponente verwandeln. So ist es immer praktisch, diese zuerst in einem Stapel zu treffen, so dass alle Last-Minute-Anpassungen leicht durchgeführt werden können. Jetzt, da Sie wissen, wie Sie Stacks verwenden und Ihren Zuhörer organisieren, aber im nächsten Video weg, werden wir uns diese unbeschreiblichen Komponenten drehen. 8. Scrollbare Abschnitte erstellen: Alles klar, Leute. Jetzt, da wir Hirsche bedeckt haben, schauen wir es scrollen. Dies ist, wo die interaktiven Seiten lassen uns viel interessanter. Also erste Dinge zuerst und da würde es scheinen, ein wenig lang gewickelt wird diese aus dem Weg zu bewegen . Danke als das, Dann dieser Video-Footage-Link Der Geist war eine Video-Seite, die wir entfernen werden. Ich werde diese Seite duplizieren. Nun, ich weiß es gut, weil CD da ist. Ich werde das einfach löschen. Wir haben diese Kategorien gekühlt. Eine Schriftrolle, die ich machen werde, macht es 910 Pixel. 110. Werden Sie die los. Jetzt setzst du dich einfach auf die Stapel. Was du tust, wird diesen Stapel entfernen. Besuchen Sie ST Bilder von oben, jemand im Wesentlichen Fotografie. Duplizieren Sie diese. Jetzt ist es alles zu extreme ist nur zu zeigen, wie sie auf das scrollen würden, was wir tun. Platzieren Sie eine Minute. Steck nur so, dass sie organisiert wurden, falls du irgendwelche Last-Minute-Anpassungen von dort vornehmen willst , wie wir es letztes Mal getan haben. 30 Pixel auf mit Station, soll ich sagen? Und jetzt haben Sie diese Schriftrolle hier. Also, jetzt werden wir tun, wird zu Werkzeugen gehen. Du wirst wie Schriftrolle sitzen. Sie werden hier auf diesen Handel ziehen, wo die Partiturkomponente gehen muss. Also 37 Pixel auf 375 Pixel in der Breite und etwa 654 Pixel in der Höhe. Also habe ich das Stupa aufgespürt, und dann was wir tun werden, bevor wir das Gonna wieder mit der Videoseite verknüpfen , also werde ich da verdammen, wir gehen. Verknüpfen Sie es, dass es Nein, nicht verwenden, dass innerhalb eines Stacks auf eine zukünftige Scroll-Komponente jetzt auch verknüpft ist. Gehen Sie nun zurück zum ersten Scroll-Abschnitt. Wir verknüpfen es damit. Wie Sie sehen können, sind sie gerade erschienen. Es sieht genau gleich aus. Allerdings würden wir in der Vorschau gehen, dass ich es aktualisieren. Das Videomaterial funktioniert nicht nur noch, sondern Sie können auch nicht scrollen 9. Youtube hinzufügen: Okay, also willkommen zurück in der letzten Phase dieses Prozesses. Nun, in diesem Video, werden wir mit der E t Medienkomponente Nickel beten in Echtzeit, Sie RL ist in niedrigen Projekten. Das coole daran ist nicht nur, dass es mit dem YouTube-Baby I es hilft auch, alle ursprünglichen Thumbnails als auch zu behalten. Wenn wir eine Vorschau erhalten, werden Sie sehen, dass dies alle aktiven Links waren. Sie klicken dort, sehen Sie, das Video wird an Ort und Stelle geladen, die normalerweise nicht ihre verschiedenen Arten Themen und Sachen ausgeben würde . Das war irgendwie das, was hier vorging. Und um dies zu tun, müssen Sie nur hier nicht gezeigt beenden. Konnte immer nicht Selbstmord Demonstration. Aber du gehst zu deinem, was. Ich zeige Ihnen, was es ursprünglich herunterladen. Also ist es das hier jetzt schon voran gegangen und hat das heruntergeladen und es sah so aus. So wird ein YouTube-Rahmen sein. Wie Sie sehen können, dass das Telefon ein Frame X Intro-Video ist, gut, Ich habe voran gegangen und getan ist, auch hier, dass ich dort verwenden. Es ist also nur Raumfahrt-Team. Sie ist also dein bestes Essen. Hasty, du wirst es wirklich einfach machen, wir werden den Euro gut kopieren, du gehst zurück und du wirst sehen, dass der Euro hier ist. Komm schon, Vey viel dieses Mal ändert sich jetzt, wenn ich getroffen habe. Geben Sie noch eine coole Sache ein. Sie können auch die Auto-Platzierung Dinge geringfügig. Jetzt. Dies bestimmt im Wesentlichen, wie das Video wiedergegeben wird, wenn Sie zum ersten Mal die gerade abgelegte Seite aufrufen , was bedeutet, dass Sie es physisch in altem Video klicken müssen, um es zu laden. Ich denke, Sie können auch von an wählen, was im Wesentlichen ermöglicht die Videos automatisch starten abzuspielen sowie Luke, die das Video in einem kontinuierlichen Zyklus abspielen wird. Also, was ist, dass Sie das Code-Video über rechts schlitzen wollen? Ich bearbeite auch den tatsächlichen Beispielcode für diese Komponente. So ist es wirklich cool, wirklich vielseitig. Und, ja, wissen Sie, ein echtes Maß an Tiefe für Ihre Animationen fühlen sich auch nicht durch diese Dimensionen eingeschränkt, die Sie hier sehen können. Dies ist im Grunde in 1920 von 10 80 p Dimension. Wie auch immer Sie hier sehen werden, habe ich es tatsächlich geändert, und das ist im Wesentlichen eine Clipping-Maske. Also, wenn ich darauf klicke, werden Sie sehen, dass der Rahmen verschachtelt wird sehen. Die Sie Rohrkomponente ist innerhalb des Rahmens verschachtelt, den ich getan hätte, wird als Clipping-Maske verwendet . Also gehe ich zum Aufklappen. Sie werden sehen, dass die ursprünglichen YouTube-Komponenten tatsächliche Dimensionen gibt. Und wenn ich beide wieder mag, wirst du sehen, dass es zurück ist, wie es ursprünglich Waas. Gehen Sie voran und spielen Sie eine Runde Wetten herum. Sie sind Rollen dort drin, sogar Clipping dieses oder einfach doppelt tippen? Und wenn du die Styling-Beweise aufrechterhalten willst, werde ich auch Lincoln sein. Beispiel Fellows in der Projektfloater. Sie können in der Praxis damit in Ihrer eigenen Zeit voran kommen. Jetzt, da Sie wissen, wie Sie YouTube-Videos in Ihr Projekt einbetten, das im Wesentlichen unseren Prototyping-Prozess für dieses Design abschließt, werden die nächsten Videos anstoßen. Alles, was wir getan haben, ist das, wonach er sucht. Das neueste Update in den neuen Features, die hinzugefügt wurden 10. Alles zusammenführen: Also willkommen zurück zu dem, was das letzte Video sein würde. Offensichtlich, heute Morgen für mehr als seine Launch-Version fünf für ihre A-Basis in Italien waren, wie eine neue interaktive Seite der Dinge als auch. Aber ich sage, es war ein Extra, wissen Sie, schnell Überblick, dass im nächsten Video, aber im Wesentlichen, das war nur, du weißt schon, eine Art Rückblick auf das, was wir getan haben. Also habe ich dir das Interface gezeigt. Ich bin sicher, dass Sie einen Laden anlegen. Ja, die verschiedenen Futures und Hoffnungen, tatsächlich ein Design für das Prototyping zu erstellen. Das scheint also,wissen Sie, wissen Sie der Registerkarte Eigenschaften zu sein, und Sie wissen, wie Sie Responsive Design verwenden. Und es war wirklich, wirklich in es verglichen mit dem ursprünglichen Rahmen. Wenn du das jemals benutzt hast, hast du es nicht erstanden. - Warum? Das ist, weißt du, der ganze Hype. Äh, ja. Wir haben den grundlegendsten Prototyp zusammengestellt. Äh, natürlich, in der realen Welt, haben Sie komplexere Ströme in diesem Revolutionär wie uns zusammengestellt. Es hat nicht viel von der Animation Tod, die das Prinzip hat. Ich weiß es. Ich sagte, es ist viel einfacher zu bedienen, äh, im Prinzip, Prinzip gibt Ihnen viel mehr Art von Freiheit, um um die Timeline zu spielen und verschiedene Übergänge anzupassen , die Sie gesehen haben, vorher gesagt zu der Zeit. Die vier Hauptelemente gibt es jetzt ein weiteres Element namens Seite, aber dies war nur die Verknüpfung von Bildschirmen, Organisieren dieser Komponenten für Frame, Soll ich sagen, in eine Stack-Komponente und auch, Sie wissen, Erstellen von Scrolls und diese Ebene der dynamischen nous zu verschiedenen Seiten? Oh, und natürlich, von Hinzufügen vonYouTube-Videos, ich meine, das ist wie der einfachste Prozess, aber es ist wirklich cool. Ja, ich meine, gehen wir weiter und schauen uns den letzten Prototyp an. Ich gehe auf den Vollbildmodus. Kommend, explodiert, wurde übertroffen. Ich werde in die MERS der CAA einsteigen. Wie Sie sich erinnern, gehen wir durch die Kategorien Seite Ah, und Sie können nicht mit dort auch scrollen. Ich habe erkannt, dass ich die Scrollmaske ein wenig ausgewählt habe, um weiter nach unten zu gelangen. Du siehst, wo es dort abschneidet. Das ist, wo die Spitze davon eigentlich sein sollte. Und dann wäre wahrscheinlich auf halbem Weg dort, wo die Maske endet. Es wächst also, aber es ist alles, was die Demonstration zeigt, wie es schweben würde. Natürlich gehst du weiter. Du hast diese Dinger müde, während der Prozess weitergeht. Natürlich. Von hier aus können Sie das Menü auch anzeigen, wenn Sie auswählen. Da gehen wir hin. Also natürlich könnte man cool sein, wenn sie hatten, wie, Hover Zustände ist gut, denken Sie daran, im Prinzip, sie haben die Fähigkeit, zu ernten. Irgendwie gehen Sie über diese und ändern Sie die Farbe. Es gibt nur auf, du weißt schon, zusätzliche Tiefe. Aber du bist nah dran. Willst du das zu Videoaufnahmen durchgehen? Warum, nein, du arbeitest. Auf keinen Fall. Das wollte ich so gut. Oh, ich verstehe. Ich habe es auf ihre verschoben, aber dann eine weise als, dass wir durch Videoaufnahmen gehen. Und Sie haben einfach zu Videos hier. So können Sie auf jeden klicken, den Sie wollen. Äh, weißt du, du hast den vollen Klang dort, und es ist wirklich hochwertig, was ich wirklich beeindruckt war. Ich meine, als ich es zum ersten Mal auf der wir die Demo haben, die sie ausgaben, war ich wie, Das ist unglaublich. Dies ist keine andere Software getan. Dieser korsische und gehen Biss wird sehen, dass er in eine andere Richtung übergeht. - Ja. Ich meine, wie ich schon sagte, das war nur, um den Leuten eine Einführung zu geben. Es ist eine relativ neue Software. Also, welche Tage passieren ständig? Und es ist irgendwie ärgerlich zu versuchen, Software so zu lehren, weil, wie ich sagte, Ich dachte, ich wurde gezeigt, obwohl Hauptmerkmale. Und dann kommt heute Morgen ein weiteres Update durch und es ist wie, Oh, nun, Adam Page und ich waren wie, Wirklich? Ich muss ein anderes Video erstellen, nur eine Art demonstrieren, was das ist, Denn sonst fühle ich mich wie ich kurz ändere. Sie gehen durch, lesen Sie die Docks auf der Website. Wahrscheinlich haben sie es aktualisiert. Jetzt, da es neue Sachen gibt, ja, es bewegt sich ehrlich, so schnell und jeder hat hinter sich. Und ich glaube, dass dies die Zukunft ist, in der diese Art von Software in den Kopf geraten. 11. Aktuelles Interaktion: In Ordnung. Also hier ist das ungeplante Video rund um die neue Funktion namens Seite basiert. Jetzt haben sie ein paar andere ein Becken als auch, und ich musste buchstäblich nur durchgehen. Sieh es dir an. So ist es Frame x vier jetzt, wie, sagte, wir liefen die freien macht drei. Ah, und ja, die größte, die sie hinzugefügt haben, ist die neue interaktive Seite. Bis jetzt hatten sie das angekündigt und erwähnt. Es gab einfach keine auf der Software. Und ehrlich gesagt habe ich es völlig vergessen. Ich liebe es. Du weißt schon, wenn man die E-Mail durchsucht, die sie auch geschickt haben, muss man aufklappen, was los war. Wissen Sie, Sie sehen sich die Beispiele dessen an, was Sie erstellen können. Ich meine, sieh dir das an. Wirklich beeindruckend. Und ja, einfach schnell einen Beispielhund zusammenstellen. Ja, das können wir durchschauen. Also hier haben Sie drei Frames und Sie haben eine Seite in Leinwand auf dem iPhone X. Was Sie tun, wird sie auf Seite gehen, so dass wir die volle Breite tun. Also 375 Dies ist im Wesentlichen, wissen Sie, die Seitenkomponente jetzt in den Räumen, in denen diese Elemente in der Lage sein, durch Ihren Kerl zu wischen . Du bist benutzt, um dich zu verbinden, damit du 23 verwenden kannst , ,glaube ich, es ist da. Gut. Äh, Moses Lass den letzten es nicht sein. Was passiert ist, ist, dass es nicht verbunden ist. All das zusammen. Und wenn Sie diese Komponente auswählen, wird eine Reihe von verschiedenen Optionen als auch zu bringen. So können Sie im Wesentlichen wählen Sie die Lücke zwischen den Stationen sind nur, um es ein wenig klarer an der Bewegung zu machen . Ich werde uns 30 Pixel Polsterung C oder groß geben, und auf der Seite der Polsterung im sinnlosen Inneren dieser Maske können Sie sehen, dass es hier keine Lücke gibt. Also, was wir tun werden, ist, dass wir das auf 15 setzen. Es ist also genau die halbe Intensität. Hören Sie, das Verlangen sieht einfach nett aus. Ah, und doch werden wir wissen, dass Sie all diese Dinge anpassen können. Dieses Jahr ist derzeit auf den Standard gesetzt, was ist, dass Folie hat Dynamik aus, was bedeutet, dass Sie physisch drei Zyklus. Nun, du wirst sehen, dass ich es vorsehe, damit du sicherstellst, dass es erfrischt ist, und doch kannst du tatsächlich wie eine U-Bahn durchfahren . Momentum ist dieses A, wie im Wesentlichen ermöglicht es Ihnen, nur einmal zu wischen und haben eine gute weg. Drei. Wo ist, weil es aus ist? Du musst irgendwie manuell durchgehen, damit wir es tun werden. Es wird mit denen herumspielen, die Schwung einschalten werden. Sicher. Nun, Sie werden sehen, dass es über frisch ist, dass Sie direkt durch mit einem Swipe gehen können, was wahrscheinlich praktisch oder ein wenig zu schnell wieder. Sie können die Geschwindigkeit von diesen nicht kontrollieren. Und dann, was wir tun werden, ist, dass du weißt, dass du Würfel machst, weil du was weißt? Ihre Lieblings-eine Aktualisierung, die Sie sehen können, anstatt nach Effekten jetzt verwenden, um diese Art von Affekten zu erstellen, können Sie direkt in hier gehen und das tun. 12. Aufwickeln: und das ist ein Wrap sorry durch die unkonventionelle Empörung. Und ich würde gerne ein Sprechkopf-Video mit der Kamera gemacht haben. Leider änderten sich die Umstände. Ich war nicht in der Lage, einen zu kriegen. Also fange ich an zu bereuen, nicht zu filmen, dass an den gleichen Tagen, das Interesse an unseren wirklich Puts geben diese kleine kleine Kamera. Sie soll sagen, Danke fürs Anschauen. Es gibt ein kleines Bild von mir, wie zu Hause, aber es spielt keine Rolle. Ah, und ja, ehrlich gesagt, ich möchte Sie ermutigen, mich zu erreichen und tatsächlich mit dem Kurs zu beschäftigen,wissen Sie, wissen Sie, Fragen zu stellen und auch Feedback zu geben. Ich meine, das ist der erste Kurs, den ich je gemacht habe. Ich habe keine Erfahrung im Online-Unterricht. Diese Art griff mich an und sagte: „ Schau, Schau, willst du Videos machen? Ich dachte, Ja, ja, ich weiß etwas anderes und, ja, erreiche mich auch woanders. Wie ich schon sagte, dribble pre aktiv auf dort, immer Dinge zu veröffentlichen und meist versuchenzu, ich denke, immer mehr von einem Netzwerk auf LinkedIn bereits des Benutzers. Aber ja, 57 Verbindungen gewinnen so ehrlich, wenn Sie wollten, wie, wie, Netzwerk auf einem professionelleren Niveau. Schlag mich, wenn ich Nachricht höre. Ich ehrenvoll, ich könnte mich auf finden. Nun, ich habe die Links hier, also ja, nutze den Boden. Dort habe ich ein bisschen Code gemacht. Seien Sie Hände und ja, also hoffe ich, dass Sie diesen Kurs genossen haben. Ich habe versucht, so informativ wie möglich zu sein und alles bestmöglich zu zerlegen , also ja. Bieten Sie Feedback zu? Ja. Bleiben Sie dran. Hoffentlich werde ich in naher Zukunft noch ein paar Sachen einschließen. Wir sehen uns bald.