<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<title>Adding Resizability</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/Resize/Introduction=Introduction)</h3>
        <p class="loc">($$$/Lessons/Resize/Description=This lesson will show you how to make your Animate compositions responsive using various techniques.)</p>
        
        <p class="useractionClick"><a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/resize_start">($$$/Lessons/Resize/ClickToOpenSample=Click to open the sample)</a></p>
        
        <p class="loc">($$$/Lessons/Resize/Text1=This project currently doesn&#39;t respond to changes is size. Try it out by previewing in the browser and resizing the browser window.)</p>
        
        <div class="useraction">
            <ol start="1">
                <li class="loc macOnly">($$$/Lessons/Resize/Text2Mac=Preview in Browser via Cmd + Return.)</li>
                <li class="loc winOnly">($$$/Lessons/Resize/Text2Win=Preview in Browser via Ctrl + Enter.)</li>
                <li class="loc">($$$/Lessons/Resize/Text3=Resize the width of the browser window.)</li>
            </ol>
        </div>
		<p class="loc">($$$/Lessons/Resize/Text4=Nothing happened &#40;this is expected&#41;. Now let&#39;s make this project responsive!)</p>
		<p class="loc">($$$/Lessons/Resize/Text5=There are two methods you can use to create responsive content inside of Animate: Responsive Scaling and Percentage Layouts. We&#39;ll start with Responsive Scaling first.)</p>        
        	
    </div>    
    <div class="lessonChapter">
        
        <h3 class="loc">($$$/Lessons/Resize/ResponsiveScaling/Title=Responsive Scaling)</h3>

        <p class="loc">($$$/Lessons/Resize/ResponsiveScaling/Description=In this method we&#39;ll use the Responsive Scaling feature to scale the Animate stage. When this is enabled, your project will scale up and down to fit different viewports or containers while keeping the project aspect ratio.)</p>
        <p class="loc">($$$/Lessons/Resize/ResponsiveScaling/Description2=In this example, selecting &#34;width&#34; will have the composition rescale based on the width of the window.)</p>        
        <div class="useraction">
              <ol>
              	<li class="loc">($$$/Lessons/Resize/ResponsiveScaling/Text6=Click the &#34;Responsive Scaling&#34; checkbox in the properties panel for the stage.<br><br><img class='inline' src='images/responsivescaling.png'>)</li>
                <li class="loc macOnly">($$$/Lessons/Resize/ResponsiveScaling/Text7Mac=Preview in Browser via Cmd + Return.)</li>
                <li class="loc winOnly">($$$/Lessons/Resize/ResponsiveScaling/Text7Win=Preview in Browser via Ctrl + Enter.)</li>
                <li class="loc">($$$/Lessons/Resize/ResponsiveScaling/Text8=Resize the browser window.)</li>   	
              </ol>              
        </div>
        <p class="loc">($$$/Lessons/Resize/ResponsiveScaling/Text9=That&#39;s it! Play with the different options in the dropdown &#40;Width, Height, or Both&#41; to see how your composition responds to the changing viewport.)</p>
        <p class="loc">($$$/Lessons/Resize/ResponsiveScaling/Text10=If you ran into any issues with this step, click <a href='#' class='loc lessonAPIOpen' data-fileToOpen='samples/resize_scaling_finished'>here</a> to open a completed project with Responsive Scaling.)</p>        
    </div>
    <div class="lessonChapter">
        
        <h3 class="loc">($$$/Lessons/Resize/PercentageLayouts/Title=Percentage Layouts)</h3>
        <p class="loc">($$$/Lessons/Resize/PercentageLayouts/Description=In this method we&#39;ll use percentage layouts to create a fluid composition.)</p>
        <div class="useraction">
              <ol>
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text11=Uncheck &#34;Responsive Scaling&#34; in the Properties Panel &#40;the two can&#39;t be used together&#41;.)</li>
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text12=Set the Stage to percentages by clicking the unit toggle. Change the unit from 550px to 100%. This will make the Stage fill 100% of the width of the browser.<br><br><img class='inline' src='images/stagepercentage.png'>)</li>
              </ol>
        </div>
        <p class="loc">($$$/Lessons/Resize/PercentageLayouts/Text13=Tip: Always make sure to set the stage in percentages before creating a percentage-based composition, otherwise nothing will reflow!)</p>
        <div class="useraction">
              <ol start="3">
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text14=Click on the &#34;Max Width&#34; option for the stage and deselect &#34;none&#34; &#40;it&#39;s checked on by default&#41;.<br><br><img class='inline' src='images/maxwidth.png'><br><br>)</li>
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text15=Change the value to &#34;1024&#34;. This will make it so the width of the stage does not exceed 1024 pixels.)</li>	              
              </ol>
        </div>
</div>          
<div class="lessonChapter">
        <h3 class="loc">($$$/Lessons/Resize/PercentageLayouts2/Title=Pinning Elements)</h3>
        <div class="useraction">
              <ol start="5">
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text16=Click on &#34;Text&#34; in the Elements panel.<br><br><img class='inline' src='images/textelement.png'><br><br>)</li>
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text17=In the Properties Panel, click on the unit toggle for &#34;Width&#34; and set to 100%.<br><br><img class='inline2' src='images/width.png'><br><br>This will make the text remain centered when the stage width changes.)</li>
	              <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text18=Click on the &#34;Right_Brace&#34; element. In the Properties Panel, change the relative position to &#34;Top/Right&#34; using the coordinate picker <img class='inline' src='images/positionmatrix.png'>. This will pin the element to the right when the stage is resized.<br><br><img class='inline' src='images/positionmatrix2.png'><br><br>)</li>
                  <li class="loc macOnly">($$$/Lessons/Resize/PercentageLayouts/Text19Mac=Preview in Browser via Cmd + Return.)</li>
                  <li class="loc winOnly">($$$/Lessons/Resize/PercentageLayouts/Text19Win=Preview in Browser via Ctrl + Enter.)</li>
                  <li class="loc">($$$/Lessons/Resize/PercentageLayouts/Text20=Resize the width of the browser window. You&#39;re done!)</li>
              </ol>
        </div>
        <p class="loc">($$$/Lessons/Resize/PercentageLayouts/Text21=If you ran into any issues with this step, click <a href='#' class='loc lessonAPIOpen' data-fileToOpen='samples/resize_finished'>here</a> to open a completed project using Percentage Layouts.)</p>            
        <p class="loc">($$$/Lessons/Resize/PercentageLayouts/Text22=You can use these two responsive techniques when creating Animate content on it&#39;s own, for embedding in a responsive HTML layout or embedding via an Animate Deployment Package (OAM) in other Adobe applications. Play around with the different options so see what works best for your project!)</p>                    
    </div>
</div>    
<div id="chapterFooter">
  <div id="footerPrevious">&nbsp;</div>
    <div class="loc" id="footerStepStatus">($$$/Lessons/Resize/ResizeConstraints/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>
