Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll publish our application to an HTML file. Now, I have mentioned before that SWFObject is the best way to get Flash into an HTML page. But since our application doesn't have any text, I am not worried about its searchability. Of course, you could make an alternate content with SWFObject and show images with HTML. But for this application, I feel fine about it just being Flash. So before we publish the application, I want to mask out everything. Since that it's going to be centered in HTML page, I want to make sure that nothing goes outside the Stage area.
So I'll need to set that up in here. Above the buttons layer, I am going to create a layer called mask. Now, I'll lock every other layer. I am doing that by Option+Clicking the dot under the lLock icon on the mask layer. In the mask layer, I'll select the Rectangle tool, choose no stroke in the Properties panel and then choose a bright green fill. Now, I'll just click-and-drag. Draw rectangle on the Stage of any size. Then I'll select the rectangle and using the Align panel, I'll have Align to Stage checked and then click Match width and height.
Then I'll center the rectangle to the Stage. So, the rectangle is exactly the same size as the Stage. Now, I'll set this as a mask and mask every layer below it. So to do that, I'm going to right- click the mask layer and choose Mask. I can mask the layers below that by clicking-and-dragging them up just a little bit right below the buttons layer so that the placement line indents under the mask. Notice that when I release my mouse button, you can see the layer's icon update. So, I am going to do that for all the layers.
See I am just dragging them up just a little bit. You can see the layer marker intend as I move right below the mask layer. So, I'll scroll down in the Timeline, and it looks like I have all the images. So they are all masked now. I am just going to test this in the Flash Player to make sure it looks right before I publish the file. Everything looks okay. So now we'll publish the file. To open up Publish Settings, I am going to click the Edit button right next to Profile in the Properties panel. Make sure that you have nothing selected in order to see this menu.
That opens up the Public Settings window. In the Public Settings window, I'll go to Hardware Acceleration and change that to GPU. That way these animations will be processed with the video card rather than the CPU. This almost always leads to better performance for your applications. So go to the HTML tab and then we'll change the Dimensions to Percent. I have 100% Width and 100% Height. This means the application will take up 100% of the space in the browser window.
Then I'll set Scale to No scale and Flash alignment to Horizontal Center and Vertical Center. That's it. I'll OK, and then I will get a publish preview by going to File > Publish Preview > Default. (Music playing) So, you can see the slide show is masked properly, and it's in the horizontal and vertical center of the screen. The images look great, the sound sounds great, the file size is nice and low.
(Music playing) So I'll close Firefox and that's our finished application. So, at this point you can pat yourself on the back and enjoy the fact that you've created a full application in Flash.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.