<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Video</title>
	<link href="../getting_started.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../getting_started.js"></script>
</head>

<body>

<div class="lessonChapters">

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Video/Introduction=Introduction)</h3>
    <p class="loc">($$$/Lessons/Video/Description=This lesson will show you the basics of using video in Edge Animate. You will learn to add video to your composition, enable video controls, and assign trigger-based actions to your video.)</p>
    <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/video_start">($$$/Lessons/Video/ClickToOpenSample=Click to open the sample)</a></p>
</div>

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Video/videogroup/Title=Video Groups)</h3>
        <p class="loc">($$$/Lessons/Video/videogroup/Description=A video group is a collection of fallback video files to be played in various web browsers. Including mp4 and ogv versions of your video will provide full cross-browser compatibility.)</p>
        <p class="loc">($$$/Lessons/Video/videogroup/Text1=In this lesson, we&#39;ll create a video element on the Stage and play the video whenever user clicks the &quot;Play/Hide Video&quot; button.)</p>
        <p class="loc">($$$/Lessons/Video/videogroup/Text2=In the sample file&#39;s Library, you&#39;ll find a video group named &quot;trail&quot;. We&#39;ll use this now:)</p>
         <div class="screenshot"><img class="locImage" data-imgbase="images/videogroup" src="images/videogroup.png" /></div>
        <div class="useraction">
            <ol>
                <li class="loc">($$$/Lessons/Video/videogroup/Text3=Click and drag <i>trail</i> from the Library panel onto the Stage. Notice there&#39;s a newly created video element named &quot;trail&quot; in the Elements panel.)</li>
                <li class="loc">($$$/Lessons/Video/videogroup/Text4=In the Properties panel, set the position of the video element to <br>X: 218 px, Y: 129 px.)</li>
				<li class="loc macOnly">($$$/Lessons/Video/videoplayer/Text5Mac=Cmd+Enter to preview your composition in the browser.)</li>
               <li class="loc winOnly">($$$/Lessons/Video/videoplayer/Text5Win=Ctrl+Enter to preview your composition in the browser.)</li>
            </ol>
        </div>
		<p class="loc">($$$/Lessons/Video/videogroup/Text6=The browser should show the video frame along with the rest of the composition. In the next step, we&#39;ll learn how to enable controls and other video element attributes.)</p>
</div>

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Video/videoplayer/Title=Video Controls)</h3>
	<p class="loc">($$$/Lessons/Video/videoplayer/Description=Let&#39;s try out some of the video controls that are available in the Properties panel.)</p>
        <div class="useraction">
           <ol>
              <li class="loc">($$$/Lessons/Video/videoplayer/Text7=Check &quot;Autoplay&quot; to begin playing the video as soon as the browser loads.)</li>
              <li class="loc">($$$/Lessons/Video/videoplayer/Text8=Check &quot;Loop&quot; to play the video again from the beginning once it&#39;s reached the end.)</li>
              <li class="loc">($$$/Lessons/Video/videoplayer/Text9=Check &quot;Preload Video&quot; to download the video before it starts playing in the browser.)</li>
              <li class="loc">($$$/Lessons/Video/videoplayer/Text10=Select a Poster image for the video. A poster image is displayed <i>before</i> the video gets played. Move the playhead to 0:01, and then click the <img src='images/camera.png' /> button in the Properties panel.)</li>
			  </ol>
			   <div class="screenshot"><img class="locImage" data-imgbase="images/videoproperties" src="images/videoproperties.png" /></div>
			  
			  <ol start="5">
              <li class="loc">($$$/Lessons/Video/videoplayer/Text11=Check &quot;Controls&quot; to display the default controls for the video. The video controls may look slightly different depending upon the browser used.)</li>
              </ol>
              </div>
			 <div class="useraction">
           <ol start="6">
              <li class="loc macOnly">($$$/Lessons/Video/videoplayer/Text12Mac=Cmd+Enter to preview your composition in the browser. The video will play automatically, and loop when it reaches the end.)</li>
               <li class="loc winOnly">($$$/Lessons/Video/videoplayer/Text12Win=Ctrl+Enter to preview your composition in the browser. The video will play automatically, and loop when reaches the end.)</li>
           </ol>
        </div>
		<p class="loc">($$$/Lessons/Video/videoplayer/Text13=<i>To see the poster frame, uncheck &quot;Autoplay&quot; in the Properties panel, and then preview in browser again.</i>)</p>       
		<p class="loc">($$$/Lessons/Video/videoplayer/Text14=In the next step, we&#39;ll learn how to control the video using actions.)</p>
</div>

<div class="lessonChapter">
  <h3 class="loc">($$$/Lessons/Video/videoactions1/Title=Video Actions 1)</h3>
    <p class="loc">($$$/Lessons/Video/videoactions1/Description=Now let&#39;s learn how you can control the video by assigning video actions to a button.)</p>
    <div class="useraction">
      <ol>
          <li class="loc">($$$/Lessons/Video/videoactions1/Text15=Select <i>trail</i> in the Elements panel, and then uncheck &quot;Autoplay&quot; in the Properties panel.)</li>
          <li class="loc">($$$/Lessons/Video/videoactions1/Text16=Set the Display property of the video element to &quot;Off&quot;.)</li>
          </ol>
          <div class="screenshot"><img class="locImage" data-imgbase="images/videooff" src="images/videooff.png" /></div>
          </div>
          <p class="loc">($$$/Lessons/Video/videoactions1/Text17=Just like other elements, a video element&#39;s display property can be set on/off using actions.)</p>
			 <div class="useraction">
      <ol start="3">
          <li class="loc">($$$/Lessons/Video/videoactions1/Text18=Select &quot;PlayButton&quot; in &quot;Elements&quot; panel, and then click the &quot;Open Actions&quot; button <img src='images/actions_button.png' /> next to it.)</li>
          <li class="loc">($$$/Lessons/Video/videoactions1/Text19=In the <i>Pick an action</i> section, select the &quot;Hide/Show&quot; category, and then click &quot;Toggle Hide/Show&quot;.)</li>
      </ol>    
       <div class="screenshot"><img class="locImage" data-imgbase="images/videoaction1a" src="images/videoaction1a.png" /></div>
       <ol start="5">
          <li class="loc">($$$/Lessons/Video/videoactions1/Text20=In the <i>Pick a target</i> section, select &quot;Stage&quot;, and then double-click &quot;trail&quot;.)</li>
      </ol>
    </div>
    <div class="screenshot"><img class="locImage" data-imgbase="images/videoaction1b" src="images/videoaction1b.png" /></div>
    <p class="loc">($$$/Lessons/Video/videoactions1/Text21=Leave the Actions popup open. In the next step, we&#39;ll play/pause the video using actions.)</p>
</div>

<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Video/videoactions2/Title=Video Actions 2)</h3>
    <p class="loc">($$$/Lessons/Video/videoactions2/Description=Finally, let&#39;s toggle video play/pause when the button gets clicked.)</p>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/Video/videoactions2/Text22=Place the cursor at the last line in the Actions popup, select the <i>Video</i> category, and then click &quot;Toggle Video Play/Pause&quot; in the <i>Pick an action</i> section)</li>
            <li class="loc">($$$/Lessons/Video/videoactions2/Text23=In the <i>Pick a target</i> section, select &quot;Stage&quot;, and then double-click &quot;trail&quot;.)</li>
            <li class="loc macOnly">($$$/Lessons/Video/videoactions2/Text24Mac=Cmd+Enter to preview your composition in the browser.)</li>
             <li class="loc winOnly">($$$/Lessons/Video/videoactions2/Text24Win=Ctrl+Enter to preview your composition in the browser.)</li>
        </ol>
    </div>
    <p class="loc">($$$/Lessons/Video/videoactions2/Text25=Now as you click the &quot;Play/Hide Video&quot; button, it repeatedly toggles the video element display on/off while also toggling play/pause for the video.)</p>
	<p class="useractionClick">
            <a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/video_completed">($$$/Lessons/Video/LoopCounter/ClickToOpenFinished=Click to open the completed sample)</a>
    </p>
    <p class="loc">($$$/Lessons/Video/videoactions2/Text26=There&#39;s a lot more you can do with video in Edge Animate. To learn more, visit <a href='#' class='goURL' data-go-url='http://www.adobe.com/go/animatevideo'>Using Video with Edge Animate</a> online.)</p>
</div>
</div>
<div id="chapterFooter">
    <div id="footerPrevious">&nbsp;</div>
    <div class="loc" id="footerStepStatus">($$$/Lessons/Video/StepStatus=Step <span id='footerCurrentStep'>1</span> of <span id='footerStepTotal'>1</span>)</div>
    <div id="footerNext">&nbsp;</div>
</div>
<div id="chapterBrowser">
    <div id="chapterDropdown"><span id="chapterCurrent"></span><div id="chapterDropdownList"></div></div>
    <div id="chapterNext">&nbsp;</div>
    <div id="chapterPrevious">&nbsp;</div>
</div>
</body>
</html>