<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="utf-8" />

    <title>Adding Interaction</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>

    <script type="text/javascript">

        function loadAsset(){

            var sUrl = "WelcomeScreen.openUrl:http://animate.adobe.com/samples/spritesheetlesson/4.0/assets.zip";

            helium.callbackTunnelAsync(sUrl);

        }



    </script>



</head>



<body>

    <div class="lessonChapters">

        <div class="lessonChapter">

            <h3 class="loc">($$$/Lessons/SpriteSheet/Introduction=Introduction)</h3>

            <p class="loc">($$$/Lessons/SpriteSheet/Description=This lesson shows you the basics of using a sprite sheet in Edge Animate. You will learn about importing and setting up a sprite sheet in your project.)</p>



            <p class="useractionClick" id ="assetDownload" >

            <a href="" class="loc" onclick="loadAsset()">($$$/Lessons/SpriteSheet/ClickToOpenSample=Click to download the required assets)</a></p>

        </div>



        <div class="lessonChapter">



            <h3 class="loc">($$$/Lessons/SpriteSheet/Sprite/Title=Sprite Sheets)</h3>

            <p class="loc">($$$/Lessons/SpriteSheet/Sprite/Description=Edge Animate supports: )</p>



                <ol>

                    <li class="loc">($$$/Lessons/SpriteSheet/Sprite/Text3=Image&#45;only sprite sheets where each sprite is an image of same size.)</li>

                    <li class="loc">($$$/Lessons/SpriteSheet/Sprite/Text4=Sprite sheets generated from Adobe Flash Professional CC in the &quot;Edge Animate&quot; format.)</li>

                </ol>



             <div class="useraction">

            <p class="loc">($$$/Lessons/SpriteSheet/Sprite/Text5=Unzip the assets.zip file you downloaded.)</p>

            </div>



            <div class="screenshot">

                <img class="locImage" data-imgbase="images/filelist" src="images/filelist.png" />

            </div>



            <p class="loc">($$$/Lessons/SpriteSheet/Sprite/Text6=In the unzipped folder, you will see the Flash Professional source file (desert.fla) from which the desert.png sprite sheet and the corresponding desert.eas file are exported.)</p>

            <p class="loc">($$$/Lessons/SpriteSheet/Sprite/Text7=This sprite sheet contains a flying animation of a bird along with a single frame of sun and moon.)</p>
			<p class="loc">($$$/Lessons/SpriteSheet/Sprite/Text8=Note: You can open the FLA in Flash Professional CC 2014 and generate a sprite sheet to include all the symbols in the Library or use the sprite sheet that you downloaded.)</p>

        </div>



        <div class="lessonChapter">

            <h3 class="loc">($$$/Lessons/SpriteSheet/Import/Title=Import sprite sheets)</h3>

            <p class="loc">($$$/Lessons/SpriteSheet/Import/Description=Steps to import sprite sheet generated from Flash Professional CC.)</p>

            <div class="useraction">

			<ol>
			<li class="loc">($$$/Lessons/SpriteSheet/Import/Text9=From the &quot;File&quot; menu, click &quot;Import Sprite Sheet...&quot;.)</li>
			<li class="loc">($$$/Lessons/SpriteSheet/Import/Text10=Browse to the location where you downloaded the sprite sheet and choose desert.png.)</li>
			</ol>
			</div>

            <div class="useraction">



            </div>

             <p class="loc">($$$/Lessons/SpriteSheet/Import/Text11=The &quot;Define Sprite Tiles&quot; dialog box appears.)</p>

            <div class="screenshot">

                <img class="locImage" data-imgbase="images/definetiles" src="images/definetiles.png" />

            </div>

            <p class="loc">($$$/Lessons/SpriteSheet/Import/Text12=All sprite dimension metadata of a Flash-generated sprite sheet are stored in .eas files.)</p>

            <div class="useraction">
			<ol start='3'>
			<li class="loc">($$$/Lessons/SpriteSheet/Import/Text13=Select the &quot;Load an EAS file&quot; check box.)</li>
			</ol>



            </div>

            <p class="loc">($$$/Lessons/SpriteSheet/Import/Text14=Note: Edge Animate will look for the &quot;.eas&quot; file in the same location where the sprite sheet is present.)</p>

            <p class="loc">($$$/Lessons/SpriteSheet/Import/Text16=You can see that Edge Animate detects three animation clips in the sprite sheet along with the duration of the animation.)</p>

            <div class="useraction">
				<ol start='4'>
                <li class="loc">($$$/Lessons/SpriteSheet/Import/Text17=Click &quot;Import&quot;.)</li>
				</ol>
            </div>
			<p class="loc">($$$/Lessons/SpriteSheet/Import/Text18= After the import, you will see three symbols created in Library.)</p>
			<p class="loc">($$$/Lessons/SpriteSheet/Import/Text19= These three symbols are just like any other symbols in Edge Animate. You can drag and place them on Stage and manipulate them using code.)</p>
			<p class="loc">($$$/Lessons/SpriteSheet/Import/Text20= In the next step, you will learn how to add the imported sprites/images to your Edge Animate composition.)</p>

        </div>
        <div class="lessonChapter">

            <h3 class="loc">($$$/Lessons/SpriteSheet/usingSprite/Title=Use sprite sheets)</h3>



            <p class="loc">($$$/Lessons/SpriteSheet/usingSprite/Text21=After importing the sprite sheet in the previous step, you will see the constituent sprites imported as separate symbols in the Symbols panel.)</p>
			<p class="loc">($$$/Lessons/SpriteSheet/usingSprite/Text22=Let&#39;s use one of these symbols in our composition.)</p>

            <div class="screenshot">

                <img class="locImage" data-imgbase="images/library" src="images/library.png" />

            </div>


            <div class="useraction">

                <ol>

                    <li class="loc">($$$/Lessons/SpriteSheet/usingSprite/Text23=Drag the symbol &quot;desert_symbol_1&quot; to Stage.)</li>

                     <li class="loc">($$$/Lessons/SpriteSheet/usingSprite/Text24=Preview thecomposition in a browser (Cmd+Enter (Mac) and Ctrl+Enter (Win)).)</li>

                </ol>

            </div>

            <p class="loc">($$$/Lessons/SpriteSheet/usingSprite/Text25=In the next step, you will learn how to assign actions to this animation.)</p>

		</div>
        <div class="lessonChapter">
			<h3 class="loc">($$$/Lessons/SpriteSheet/addingActions/Title=Adding Actions)</h3>
            <p class="loc">($$$/Lessons/SpriteSheet/addingActions/Text26=Now, let&#39;s  loop the animation from beginning.)</p>

             <div class="useraction">

                <ol>

                    <li class="loc">($$$/Lessons/SpriteSheet/addingActions/Text27=Double-click the symbol &quot;desert_symbol_1&quot; on Stage to enter the edit mode of the symbol.)</li>

                     <li class="loc">($$$/Lessons/SpriteSheet/addingActions/Text28=Move the play head to 0.750 seconds.)</li>

                     <li class="loc">($$$/Lessons/SpriteSheet/addingActions/Text29=In the &quot;Timeline&quot; menu click on &quot;Insert Trigger&quot;.)</li>

                     <li class="loc">($$$/Lessons/SpriteSheet/addingActions/Text30=In the Actions editor, select &quot;Playback->Play From&quot; in the &quot;Pick An Action&quot; section. Then, double-click &quot;desert_symbol_1&quot; in the &quot;Pick A Target&quot; section.)</li>

                     <li class="loc">($$$/Lessons/SpriteSheet/addingActions/Text31=Now, in the code snippet, change the number 1000 to 0 in &quot;sym.play(1000)&quot;. This makes the animation loop from beginning.)</li>

                     </ol>

                        <div class="screenshot">

                <img class="locImage" data-imgbase="images/actionspop" src="images/actionspop.png" />

            </div>

                     <ol start="6">

                     <li class="loc">($$$/Lessons/SpriteSheet/addingActions/Text32=Preview the file in a browser. You will see that the bird continues to fly infinitely.)</li>

                </ol>



            </div>

            <p class="useractionClick">

                <a href="#" class="loc lessonAPIOpen" data-fileToOpen="samples/spritesheet_finished">($$$/Lessons/SpriteSheet/addingActions/ClickToOpenFinished=Click to open the completed sample)</a>

            </p>
			<p class="loc">($$$/Lessons/SpriteSheet/addingActions/Text34=There is lots more to learn about using sprite sheets with Edge Animate. To learn more, visit <a href='#' class='goURL' data-go-url='http://www.adobe.com/go/animatespritesheet'>Using Sprite Sheets with Edge Animate</a> )</p>
        </div>



    </div>





    <div id="chapterFooter">

        <div id="footerPrevious">&nbsp;</div>

       <div class="loc" id="footerStepStatus">($$$/Lessons/Symbols/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>