{
  "name" : "Raketlancering - Interactief",
  "title" : "Raketlancering - Interactief",
  "description" : "",
  "card1title" : "Inleiding",
  "card1Description" : "In deze zelfstudie leert u hoe u interactiviteit toevoegt aan uw HTML5 Canvas-animatie.\n\nWe starten met een document dat al een animatie bevat: een raket die om de wereld vliegt.\n\nWe willen deze animatie wijzigen, zodat de raket pas gaat vliegen nadat er op de knop Lanceren wordt geklikt.",
  "card1StepInfo" : "1 van 17",
  "card1PosAction" : "Volgende",
  "card1NegAction" : "Vorige",
  "card2title" : "Animatie testen",
  "card2Description" : "Laten we de huidige animatie eens bekijken. \n\n1. Klik op de knop Afspelen om een voorvertoning weer te geven in de browser.\n\nU ziet dat de raket start zodra de pagina wordt geladen. We gaan dit veranderen, zodat de raket pas start nadat de gebruiker op de knop Lanceren heeft geklikt.",
  "card2StepInfo" : "2 van 17",
  "card2PosAction" : "Volgende",
  "card2NegAction" : "Vorige",
  "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" : "Knoplaag maken",
  "card3Description" : "1. Schakel naar de tijdlijnweergave. \n2. Maak een nieuwe laag door op de plusknop te klikken.\n3. Dubbelklik op de laagnaam en noem deze 'Buttons' (Knoppen).",
  "card3StepInfo" : "3 van 17",
  "card3PosAction" : "Volgende",
  "card3NegAction" : "Vorige",
  "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" : "Achtergrondkleur van knop selecteren",
  "card4Description" : "1. Klik op de knop 'Vulkleur' onder aan de werkbalk. \n2. Selecteer blauw als knopkleur.\n",
  "card4StepInfo" : "4 van 17",
  "card4PosAction" : "Volgende",
  "card4NegAction" : "Vorige",
  "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" : "Rechthoek tekenen voor de knop",
  "card5Description" : "1. Klik op het eerste frame van de laag 'Buttons' (Knoppen). \n2. Klik op de tool Rechthoek \n3. Trek een rechthoek midden, onder in het werkgebied.",
  "card5StepInfo" : "5 van 17",
  "card5PosAction" : "Volgende",
  "card5NegAction" : "Vorige",
  "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" : "Tekstkleur selecteren",
  "card6Description" : "1. Klik op de knop Vulkleur. \n2. Selecteer wit als kleur.",
  "card6StepInfo" : "6 van 17",
  "card6PosAction" : "Volgende",
  "card6NegAction" : "Vorige",
  "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" : "Bijschrift voor knop instellen",
  "card7Description" : "1. Klik op de teksttool en klik vervolgens in de blauwe rechthoek op het werkgebied. \n2. Typ 'Lanceren'.",
  "card7StepInfo" : "7 van 17",
  "card7PosAction" : "Volgende",
  "card7NegAction" : "Vorige",
  "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" : "Tekstbewerkingsmodus sluiten",
  "card8Description" : "1. Sluit de tekstbewerkingsmodus door op de selectietool op de werkbalk te klikken",
  "card8StepInfo" : "8 van 17",
  "card8PosAction" : "Volgende",
  "card8NegAction" : "Vorige",
  "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" : "Teksteigenschappen instellen",
  "card9Description" : "1. Klik op het tabblad Eigenschappen. \n2. Klik op het tabblad Object. \n3. Verander de tekstgrootte zodat de tekst in de rechthoek past. \n4. Centreer de tekst in de rechthoek.",
  "card9StepInfo" : "9 van 17",
  "card9PosAction" : "Volgende",
  "card9NegAction" : "Vorige",
  "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" : "Symbool maken voor knop",
  "card10Description" : "1. Klik met de rechtermuisknop op de laag 'Buttons' (Knoppen). \n2. Kies de optie 'Lagen converteren naar symbool'.\n3. Stel de naam in op 'Lanceren', stel het type in op 'Knop' en klik op OK.",
  "card10StepInfo" : "10 van 17",
  "card10PosAction" : "Volgende",
  "card10NegAction" : "Vorige",
  "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" : "Symboolinstantienamen instellen",
  "card11Description" : "We gaan scripts schrijven voor interactiviteit. Daarvoor moeten we de knop- en raketsymboolinstanties een naam geven. \n\n1. Klik op het symbool (knop) op het werkgebied. \n2. Ga naar het tabblad 'Object' van Eigenschappen, stel de instantienaam in op launch_btn en druk op de knop Tab. \n3. Herhaal dit voor de raket. Klik op de raket op het werkgebied en stel de instantienaam op het tabblad 'Object' in op 'raket'",
  "card11StepInfo" : "11 van 17",
  "card11PosAction" : "Volgende",
  "card11NegAction" : "Vorige",
  "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" : "Raketanimatie stoppen bij eerste frame",
  "card12Description" : "We willen de animatie van de raket pas starten als er op de knop 'Lanceren' wordt gedrukt. Daarom moet de animatie bij het eerste frame worden gestopt. Dit kan met JavaScript-code.\n\n1. Klik met de rechtermuisknop op het eerste frame van de laag 'Rocket Container'.\n2. Selecteer 'Handelingen' om de code-editor te openen.\n3. Typ 'this.rocket.stop();' in de editor.\n4. Sluit het venster 'Handelingen'.\n\nMerk op: 'Raket'is de instantienaam van 'Rocket Container'.",
  "card12StepInfo" : "12 van 17",
  "card12PosAction" : "Volgende",
  "card12NegAction" : "Vorige",
  "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" : "Raketanimatie stoppen bij eerste frame",
  "card13Description" : "We willen er ook voor zorgen dat de raket niet meer beweegt nadat het einde van zijn pad is bereikt (het laatste frame in het raketsymbool). Hiervoor moeten we het raketsymbool bewerken.\n1. Dubbelklik op het raketsymbool.\n2. Klik met de rechtermuisknop op het laatste frame. \n3. Selecteer 'Handelingen'. \n4. Typ 'this.stop();\" in de code-editor.\n5. Sluit 'Handelingen'.",
  "card13StepInfo" : "13 van 17",
  "card13PosAction" : "Volgende",
  "card13NegAction" : "Vorige",
  "card14title" : "Schakelen naar de hoofdscène",
  "card14Description" : "Schakel terug naar de hoofdscène door linksboven op 'Scène 1' te klikken.",
  "card14StepInfo" : "14 van 17",
  "card14PosAction" : "Volgende",
  "card14NegAction" : "Vorige",
  "card15title" : "Knop voor gebeurtenishandler toevoegen",
  "card15Description" : "We willen dat de raketanimatie start wanneer de gebruiker op de knop Lanceren klikt. Hiervoor moeten we een 'klik'-gebeurtenishandler voor de knop schrijven.\n1. Klik met de rechtermuisknop op het eerste frame van de laag 'Launch Button'. \n2. Selecteer 'Handelingen'. \n3. Typ het volgende script: -\n\nvar _this = this;\nthis.launch_btn.on('click', function(evt) {\n   _this.rocket.gotoAndPlay(0);\n});\n\n4. Sluit het deelvenster 'Handelingen'.",
  "card15StepInfo" : "15 van 17",
  "card15PosAction" : "Volgende",
  "card15NegAction" : "Vorige",
  "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" : "Animatie testen",
  "card16Description" : "1. Klik de knop Afspelen om de animatie in de browser af te spelen.\n\n2. Klik op de knop Lanceren en de raket wordt gelanceerd!",
  "card16StepInfo" : "16 van 17",
  "card16PosAction" : "Volgende",
  "card16NegAction" : "Vorige",
  "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" : "Gefeliciteerd",
  "card17Description" : "U hebt deze zelfstudie voltooid!",
  "card17StepInfo" : "17 van 17",
  "card17PosAction" : "Einde",
  "card17NegAction" : "Vorige"
}