Join Joseph Labrecque for an in-depth discussion in this video Assembling the scene, part of HTML5 Canvas and WebGL in Flash Professional CC.
- The project we are about to create involves the design of a video for use in an HTML5 video tag. The flash library in this project also includes all assets for every single project in this course, demonstrating the flexibility flash professional affords us in terms of asset reuse across project types. So the first thing we'll do is choose to create an action script three document. You might think it's strange that we're using an action script three document type to create something that's targeting HTML5, but since this is going to be rendered video, we're not relying upon flash player or anything like that.
It's going to play back as HTML5 video in the browser just fine. So what we're going to do is change the stage to 852 by 480, and I like to darken my stage. So let's choose black, and I'll center the stage as well. Depending upon your screen size, you may need to make some adjustments here, as I'm doing now. Let's open up that assets library again. So if we go to file, we can actually choose to import and open an external library instead of simply opening the FLA.
It's a little bit cleaner, so let's do that for this project. Here we'll go to our exercise files, and open our completed assets FLA. You'll notice, it indeed opens it up as an external library. Using this library, we can now pull a number of different items on to our stage. So I'll bring out the sky, I'll bring out mountains. This fog right here, this black mist. Our buildings, down in incidentals. I'm going to bring in this light beam, the star.
And then in the very front this thick fog group movie clip symbol. We can also bring in the titles. And lastly, our character. All right, we have everything we need for this movie, so let's close out that library. And now, here's a trick. If we actually go through and look, we can see that everything is on the same layer right now. If you know how to animate in flash, you'll know that you have to have, or at least it's best practice in most cases, to have every object on its own individual layer.
Especially if you're using something like shape tweens or motion tweens, because things can be effected very negatively if you have things animating on the same layer. So, what we can do is, simply select everything, and right click on that, and choose distribute to layers. You'll notice what happens is that in our timeline, we have each individual item in the exact order that it was dragged out on to the stage, represented in the timeline in its own individual layer, and it's also inherited all of the names from the individual movie clip symbols.
So this is a good way to keep things organized. The original layer I have, layer one, we could use this as an actions layer if we want to. We don't happen to have any actions on this particular project along the main timeline. So we can just delete that. The last thing we need to do is simply extend these layers out to about 360 frames at 24 frames per second, which is what we currently have this set at. That's going to allot us about 15 seconds of content. So I'll just click and drag to select all of those layers, and then choose insert, timeline, frame.
And that will automatically extend everything out to 360 frames equaling about 15 seconds. The last thing we'll need to do is just save this project. So we'll go to file, save, and within our projects folder, we'll save this as StarlightScamper, or whatever you like to name your particular animation. An interesting item of note here is we've created all our assets and this initial video project using the action script three document type.
Why would we do that? Well, because that format allows us the most creative options when laying out a video project, even when the target is HTML5.
This course focuses on using Flash Professional CC to create a shared pool of content for a set of related projects: an HTML5 video, an interactive ad, and a simple web-based game. Author Joseph Labrecque shows how to use Flash's familiar toolset to build and manage assets that fit into a modern web publishing workflow.
- Using code snippets and actions
- Assembling and animating a scene for video
- Rendering the video
- Programming a game in HTML5 Canvas