From the course: Adobe Animate Essential Training

Converting your document - Adobe Animate Tutorial

From the course: Adobe Animate Essential Training

Start my 1-month free trial

Converting your document

“

- [Instructor] One of the great things about working with an ActionScript based document is that we can test our project directly within Animate. However, we've gotten to the point where now we must build in some interaction and we want to be sure and target the native web which makes it necessary to convert our documents to another target platform. When you convert document types inside of Animate, usually any of the assets and animation will convert just fine. However, if you already have preexisting code in your document, you'll probably have to rewrite it. Different platforms take different types of code. Since in this file, all we have are assets and animation it should be a very simple conversion. So to perform the conversion, just go to file, convert to, and then you can choose another platform to convert to. I'm going to change this to HTML5 Canvas. HTML5 Canvas is perfect for interactive content that runs natively in the web browser. When you choose this, it's going to ask you to save the file with a different name. So I'm going to go ahead and rename this to interactive. And again, this is an FLA document. No matter what target platform you're using, you'll always be dealing with FLA documents as you're authoring files inside of Animate. I'm going to go ahead and hit save here and the conversion process will take place. All right. We get a message in the output window that the new document has been generated successfully. If we look at our timeline, we can see that everything looks intact. We can also go and fit in window and turn on the clip content outside the stage option in order to see how the camera works. And look at that. It works exactly like it did when it was an ActionScript 3.0 document. Note up top here. It actually tells us inside of the tab that we're working in HTML5 Canvas. And our previous document the original animation is still open. We can close this out if we want to. We don't need that to be open any longer. Over in the document properties we can also see that this is listed as an HTML5 Canvas document. Document settings all remain the same. The biggest change is that we can no longer test it inside of Animate. We can still play back the timeline using the playback controls. That all still works the same. However because we're not targeting an ActionScript 3.0 platform the player will not run directly inside of Animate. Instead, it's going to target the native web browser and play inside of there. Let's go ahead and test movie to see how this works. All right, there is our video running inside of the native web and it looks perfect. Note that when you're using HTML5 Canvas you will get a number of warnings. These are mostly informational warnings. So normally you can just ignore these but every time you do a test movie the output window will pop up. Just click on timeline to go back to your timeline.

Contents