<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Audio</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/Audio/Introduction=Introduction)</h3>
    <p class="loc">($$$/Lessons/Audio/Description=This lesson shows you the basics of using audio in Edge Animate. You will learn about adding audio to your projects, using audio both on the timeline and with actions, and how to create audio effects with volume transitions.)</p>
    <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/audio_start">($$$/Lessons/Audio/ClickToOpenSample=Click to open the sample)</a></p>
    
</div>    
<div class="lessonChapter">
    
    <h3 class="loc">($$$/Lessons/Audio/Groups/Title=Audio Groups)</h3>
    <p class="loc">($$$/Lessons/Audio/Groups/Description=In the library, you have two audio groups. You will use <i>track_aud</i> as the background music and <i>drum_aud</i> as the sound the drum makes when you click on it.)</p>    
    <p class="loc">($$$/Lessons/Audio/Groups/Text1=An audio group is a collection of the fallback audio files required for cross-browser compatibility. Including both an MP3 and OGG version of your sound will get you cross-browser support.)</p> 
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/Audio/Groups/Text2=Drag track_aud from the Library panel onto the stage. You will now have an audio element called &quot;track_aud&quot; in the Elements panel.<br><br><img class='inline2' src='images/dragtrack.png' />)</li>
            <li class="loc">($$$/Lessons/Audio/Groups/Text3=Select &quot;Autoplay&quot; and &quot;Loop&quot; in the Properties panel. This will make the audio track play as soon as the browser loads.<br><br><img class='inline2' src='images/autoloop.png' /><br><br><i>Note: There are some limitations when autoplay is used on mobile devices. For more information, visit <a href='#' class='goURL' data-go-url='http://www.adobe.com/go/animateaudio'>Using Audio with Edge Animate</a> online.</i>)</li>
        </ol>
    </div>        
</div>   
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Audio/Player/Title=Audio Player)</h3>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/Audio/Groups/Text4=To display the audio player skin in the output, set the audio element Display property to &quot;On&quot;. This is the default audio player, so it will look a little different depending on the browser it is viewed in.<br><br><img class='inline2' src='images/displayon.png' /><br><br>You will now see an audio player appear on the stage.<br><br><img class='inline2' src='images/player.png' />)</li> 
            <li class="loc">($$$/Lessons/Audio/Groups/Text5=Now we&#39;re going to position the audio player. Select the audio player (track_aud) on the stage.)</li>
            <li class="loc">($$$/Lessons/Audio/Groups/Text6=Change the position of track_aud to X: 0 Y: 355)</li>
            <li class="loc">($$$/Lessons/Audio/Groups/Text7=Change the Width property of the track_aud element to 550px. Your coordinates should now look like this:<br><br><img class='inline2' src='images/xy.png' /><br><br>The audio player will now span across the width of the stage.<br><br><img class='inline2' src='images/playerspan.png' />)</li>
            <li class="loc macOnly">($$$/Lessons/Audio/Groups/Text8Mac=Cmd+Enter to preview your new audio player in the browser. The music will automatically start playing and loop when it&#39;s complete.)</li>
            <li class="loc winOnly">($$$/Lessons/Audio/Groups/Text8Win=Ctrl+Enter to preview your new audio player in the browser. The music will automatically start playing and loop when it&#39;s complete.)</li>            
        </ol>
    </div>        
</div>   
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Audio/Action/Title=Audio Actions)</h3>
    <p class="loc">($$$/Lessons/Audio/Actions/Description=Now you will be adding sound to elements with a click action. )</p>
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/Audio/Actions/Text9=Select &quot;drum_img&quot; in the Elements panel. Click on the Open Actions icon to bring up the Actions popup.<br><br><img class='inline2' src='images/openactions.png' />)</li>
            <li class="loc">($$$/Lessons/Audio/Actions/Text10=Select the &quot;Audio->Play Audio&quot; from the &quot;Pick an action&quot; section.)</li>
            <li class="loc">($$$/Lessons/Audio/Actions/Text11=In the &quot;Pick a target&quot; section select &quot;Stage&quot; and double-click on &quot;drum_aud&quot;.)</li>
            <li class="loc">($$$/Lessons/Audio/Actions/Text12=The code should look like this:<br><br><code>sym.$(&quot;drum_aud&quot;)[0].play();</code><br><br>)</li>            
            <li class="loc macOnly">($$$/Lessons/Audio/Actions/Text13Mac=Cmd+Enter to preview in browser and click on the drum. The drum sound will play when you click!)</li>
            <li class="loc winOnly">($$$/Lessons/Audio/Actions/Text13Win=Ctrl+Enter to preview in browser and click on the drum. The drum sound will play when you click!)</li>            
        </ol>
    </div>          
</div>
<div class="lessonChapter">
    <h3 class="loc">($$$/Lessons/Audio/VolumeTransitions/Title=Volume Transitions)</h3> 
    <p class="loc">($$$/Lessons/Audio/VolumeTransitions/Description=Now you&#39;ll learn how to fine-tune your audio tracks using volume transitions.<br><br><i>Note: There are limitations controlling the volume property on mobile devices. Again, visit Using <a href='#' class='goURL' data-go-url='http://www.adobe.com/go/animateaudio'>Using Audio with Edge Animate</a> online for more information.</i>)</p>        
    <div class="useraction">
        <ol>
            <li class="loc">($$$/Lessons/Audio/VolumeTransitions/Text14=Click on track_aud (the audio player) on the stage.)</li>
            <li class="loc">($$$/Lessons/Audio/VolumeTransitions/Text15=Make sure the Playhead is at 0 seconds on the timeline. In the Properties panel, change the audio Volume property to 0% with the slider.<br><br><img class='inline2' src='images/volume.png' />)</li>
            <li class="loc">($$$/Lessons/Audio/VolumeTransitions/Text16=Double-click the Playhead on the timeline. The blue Pin will now be activated.)</li>
            <li class="loc">($$$/Lessons/Audio/VolumeTransitions/Text17=Drag the Playhead to 0:02 (2 seconds).<br><img class='inline2' src='images/pin.png' /><br><br>)</li>
            <li class="loc">($$$/Lessons/Audio/VolumeTransitions/Text18=Change the Volume property to 100%.<br><br><img class='inline2' src='images/volumetransition.png' /><br><br>You&#39;ve just created a fade-in effect for your track!)</li>
            <li class="loc macOnly">($$$/Lessons/Audio/VolumeTransitions/Text19Mac=Cmd+Enter to preview in browser. The audio will now fade in when the composition starts playing.)</li>
            <li class="loc winOnly">($$$/Lessons/Audio/VolumeTransitions/Text19Win=Ctrl+Enter to preview in browser. The audio will now fade in when the composition starts playing.)</li>            
        </ol>    
    </div>
    <p class="loc">($$$/Lessons/Audio/VolumeTransitions/Text20=You can also open and inspect a finished version of this project if you encountered any issues.)</p>
    <p class="useractionClick">
        <a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/audio_finished">($$$/Lessons/Audio/VolumeTransitions/ClickToOpenFinished=Click to open the completed sample)</a>
    </p>
    <p class="loc">($$$/Lessons/Audio/VolumeTransitions/Text21=There&#39;s a lot more to learn about using audio with Edge Animate. To learn more, visit <a href='#' class='goURL' data-go-url='http://www.adobe.com/go/animateaudio'>Using Audio with Edge Animate</a> online.)</p>
    <br/>
</div>
</div>
<div id="chapterFooter">
    <div id="footerPrevious">&nbsp;</div>
    <div class="loc" id="footerStepStatus">($$$/Lessons/Audio/VolumeTransitions/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>
