{
  "name" : "Raketenstart – Interaktiv",
  "title" : "Raketenstart – Interaktiv",
  "description" : "",
  "card1title" : "Einführung",
  "card1Description" : "In diesem Tutorial lernen Sie, wie Sie einer HTML5 Canvas-Animation Interaktivität hinzufügen.\n\nWir beginnen mit einem Dokument, das bereits eine Animation enthält: eine Rakete, die sich über die Weltkugel bewegt.\n\nWir passen diese an, sodass die Rakete nur gestartet wird, wenn der Benutzer auf die entsprechende Schaltfläche klickt.",
  "card1StepInfo" : "1 von 17",
  "card1PosAction" : "Weiter",
  "card1NegAction" : "Zurück",
  "card2title" : "Animation testen",
  "card2Description" : "Sehen wir uns zunächst sie vorhandene Animation an. \n\n1. Klicken Sie auf „Wiedergabe“ und zeigen Sie eine Vorschau der Animation im Browser an.\n\nSie werden sehen, dass sich die Rakete bewegt, sobald die Seite geladen wurde. Wir passen dies an, sodass die Rakete erst gestartet wird, nachdem der Benutzer auf die entsprechende Schaltfläche geklickt hat.",
  "card2StepInfo" : "2 von 17",
  "card2PosAction" : "Weiter",
  "card2NegAction" : "Zurück",
  "card2Node" : "PanelID_508$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/appHeaderCommandsPanel,0/1/UI_AppHeader_Play",
  "card3title" : "Schaltflächenebene erstellen",
  "card3Description" : "1. Wechseln Sie zur Ansicht „Zeitleiste“.\n2. Erstellen Sie eine neue Ebene, indem Sie auf die Plus-Schaltfläche klicken.\n3. Doppelklicken Sie auf den Ebenennamen und ändern Sie ihn in „Schaltflächen“.",
  "card3StepInfo" : "3 von 17",
  "card3PosAction" : "Weiter",
  "card3NegAction" : "Zurück",
  "card3Node" : "PanelID_266$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/TimelinePanelRoot,0/1/TrackControl,0/1/LayerHeader,0/1/LayerHeaderLeftControls,0/1/TimelineNewLayer",
  "card4title" : "Farbe für Schaltflächen-Hintergrund auswählen",
  "card4Description" : "1. Klicken Sie unten in der Symbolleiste auf „Füllfarbe“.\n2. Wählen Sie die Farbe Blau. Dies ist die Farbe unserer Schaltfläche.\n",
  "card4StepInfo" : "4 von 17",
  "card4PosAction" : "Weiter",
  "card4NegAction" : "Zurück",
  "card4Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolOptionsContainer,0/1/UI_ControlView,1/1/UI_InteractiveControlView",
  "card5title" : "Rechteck für Schaltfläche zeichnen",
  "card5Description" : "1. Klicken Sie auf das erste Bild in der Ebene „Schaltflächen“. \n2. Klicken Sie auf das Rechteckwerkzeug. \n3. Zeichnen Sie unten in der Mitte der Bühne ein Rechteck.",
  "card5StepInfo" : "5 von 17",
  "card5PosAction" : "Weiter",
  "card5NegAction" : "Zurück",
  "card5Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolsContainer,0/1/33325",
  "card6title" : "Textfarbe auswählen",
  "card6Description" : "1. Klicken Sie auf „Füllfarbe“.\n2. Wählen Sie die Farbe Weiß.",
  "card6StepInfo" : "6 von 17",
  "card6PosAction" : "Weiter",
  "card6NegAction" : "Zurück",
  "card6Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolOptionsContainer,0/1/UI_ControlView,1/1/UI_InteractiveControlView",
  "card7title" : "Schaltflächentext festlegen",
  "card7Description" : "1. Klicken Sie auf das Textwerkzeug und dann in das blaue Rechteck auf der Bühne. \n2. Geben Sie „Starten“ ein.",
  "card7StepInfo" : "7 von 17",
  "card7PosAction" : "Weiter",
  "card7NegAction" : "Zurück",
  "card7Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolsContainer,0/1/33513",
  "card8title" : "Textbearbeitungsmodus beenden",
  "card8Description" : "1. Beenden Sie den Textbearbeitungsmodus, indem Sie in der Symbolleiste auf das Auswahlwerkzeug klicken.",
  "card8StepInfo" : "8 von 17",
  "card8PosAction" : "Weiter",
  "card8NegAction" : "Zurück",
  "card8Node" : "PanelID_273$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/ToolPanelRoot,0/1/ToolsContainer,0/1/33508",
  "card9title" : "Texteigenschaften festlegen",
  "card9Description" : "1. Klicken Sie auf die Registerkarte „Eigenschaften“. \n2. Klicken Sie auf die Registerkarte „Objekt“. \n3. Ändern Sie die Größe des Textes, sodass er in das Rechteck passt. \n4. Zentrieren Sie den Text im Rechteck.",
  "card9StepInfo" : "9 von 17",
  "card9PosAction" : "Weiter",
  "card9NegAction" : "Zurück",
  "card9Node" : "PanelID_268$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_TabViewContainer,1/1/UI_TabView,1/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/an::PlacardView,0/1/piTextHdr,1/1/UI_SubView,0/1/UI_PITEXTHDR",
  "card10title" : "Symbol für Schaltfläche erstellen",
  "card10Description" : "1. Klicken Sie mit der rechten Maustaste auf die Ebene „Schaltflächen“.\n2. Wählen Sie die Option „Ebenen in Symbol konvertieren“.\n3. Geben Sie als Name „Start-Schaltfläche“ ein, legen Sie den Typ als „Schaltfläche“ fest und klicken Sie auf „OK“.",
  "card10StepInfo" : "10 von 17",
  "card10PosAction" : "Weiter",
  "card10NegAction" : "Zurück",
  "card10Node" : "PanelID_266$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/TimelinePanelRoot,0/1/TrackControl,0/1/LayerHeader",
  "card11title" : "Symbolinstanznamen festlegen",
  "card11Description" : "Wir schreiben jetzt Skripts für Interaktivität. Dafür müssen wir die Instanzen der Schaltfläche und des Raketensymbols benennen. \n\n1. Klicken Sie auf der Bühne auf das Symbol (Schaltfläche). \n2. Legen Sie im Bedienfeld „Eigenschaften“ auf der Registerkarte „Objekt“ den Instanznamen auf „start_schaltfl“ fest und drücken Sie die Tabulatortaste.\n3. Wiederholen Sie diesen Vorgang für die Rakete. Klicken Sie auf der Bühne auf die Rakete und legen Sie auf der Registerkarte „Objekt“ den Instanznamen auf „rakete“ fest.",
  "card11StepInfo" : "11 von 17",
  "card11PosAction" : "Weiter",
  "card11NegAction" : "Zurück",
  "card11Node" : "PanelID_268$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_SubView,0/1/UI_TabViewContainer,1/1/UI_TabView,1/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/an::PlacardView,0/1/piSymbolHdr,1/1/UI_SubView,0/1/UI_PISYMBOLHDR",
  "card12title" : "Raketenanimation in letztem Bild stoppen",
  "card12Description" : "Wir wollen die Rakete nur dann animieren, wenn auf die Schaltfläche „Starten“ geklickt wird. Also müssen wir die Animation der Rakete im ersten Bild stoppen. Dafür schreiben wir JavaScript-Code.\n\n1. Klicken Sie mit der rechten Maustaste auf das erste Bild der Ebene „Raketen-Container“.\n2. Wählen Sie „Aktionen“. Der Editor für Aktionen wird geöffnet.\n3. Geben Sie „this.rocket.stop();“ in den Code-Editor ein.\n4. Schließen Sie das Bedienfeld „Aktionen“.\n\nBeachten Sie, dass „rocket“ der Instanzname des Symbols „Raketen-Container“ ist.",
  "card12StepInfo" : "12 von 17",
  "card12PosAction" : "Weiter",
  "card12NegAction" : "Zurück",
  "card12Node" : "PanelID_266$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/TimelinePanelRoot,0/1/TrackControl,0/1/LayerHeader,0/1/LayerHeaderLeftControls",
  "card13title" : "Raketenanimation in letztem Bild stoppen",
  "card13Description" : "Außerdem soll die Rakete sich nicht mehr bewegen, wenn sie das Ende ihres Pfads erreicht, also das letzte Bild im Raketen-Symbol. Dafür müssen wir das Raketen-Symbol bearbeiten. \n1. Doppelklicken Sie auf das Raketen-Symbol.\n2. Klicken Sie mit der rechten Maustaste auf das letzte Bild.\n3. Wählen Sie „Aktionen“.\n4. Geben Sie im Code-Editor „this.stop();“ ein..\n5. Schließen Sie das Bedienfeld „Aktionen“.",
  "card13StepInfo" : "13 von 17",
  "card13PosAction" : "Weiter",
  "card13NegAction" : "Zurück",
  "card14title" : "Zur Hauptszene wechseln",
  "card14Description" : "Wechseln Sie zurück zur Hauptszene, indem Sie links oben auf „Szene 1“ klicken.",
  "card14StepInfo" : "14 von 17",
  "card14PosAction" : "Weiter",
  "card14NegAction" : "Zurück",
  "card15title" : "Ereignis-Handler für Schaltfläche hinzufügen",
  "card15Description" : "Wenn der Benutzer auf die Schaltfläche „Starten“ klickt, soll die Raketenanimation gestartet werden. Wir müssen für die Schaltfläche einen Ereignis-Handler des Typs „click“ schreiben.\n1. Klicken Sie mit der rechten Maustaste auf das erste Bild der Ebene „Start-Schaltfläche“.\n2. Wählen Sie „Aktionen“. \n3. Geben Sie das folgende Skript ein: \n\nvar _this = this;\nthis.launch_btn.on('click', function(evt) {\n   _this.rocket.gotoAndPlay(0);\n});\n\n4. Schließen Sie das Bedienfeld „Aktionen“.",
  "card15StepInfo" : "15 von 17",
  "card15PosAction" : "Weiter",
  "card15NegAction" : "Zurück",
  "card15Node" : "%DocName$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,4/1/UI_SubView,0/1/UI_ControlsContainer,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/parentSubview,0/1/StatusSymbolPopup",
  "card16title" : "Animation testen",
  "card16Description" : "1. Klicken Sie auf „Wiedergabe“, um die Animation im Browser auszuführen.\n\n2. Klicken Sie auf „Starten“. Sie sollten jetzt sehen, wie die Rakete startet.",
  "card16StepInfo" : "16 von 17",
  "card16PosAction" : "Weiter",
  "card16NegAction" : "Zurück",
  "card16Node" : "PanelID_508$$-1/0/OS_ViewContainer,0/1/UI_ScrollView,0/1/UI_ScrollTransformView,0/1/UI_SubView,0/1/appHeaderCommandsPanel,0/1/UI_AppHeader_Play",
  "card17title" : "Glückwunsch",
  "card17Description" : "Glückwunsch! Sie haben dieses Tutorial abgeschlossen.",
  "card17StepInfo" : "17 von 17",
  "card17PosAction" : "Ende",
  "card17NegAction" : "Zurück"
}