Now that we know where our images exist and what their file names are, we’ll be able to use them within our project. We’ll use the CreateJS Bitmap class to accomplish this task.
- [Narrator] Since we're now getting all of the image names per object, we know where they exist within the image folder, and we will be able to use them within a project. We're going to use the create JS bitmap class in order to accomplish this task. Let's go down a few lines underneath our ajax function, and I'm going to paste in another snippet from our files. This is the function to render images. We want to invoke this right after all of our images are successfully brought in, so let's copy render images, and place the render images function call within our success function, right after carousel items is assigned to our json.
That will invoke this function, render images. Here you can see we have a for loop, and it starts at an index of zero, and it runs so long as that index is less than the length of carousel items. For each iteration, we're going to increase the index by one. What we do here is create a new variable called bitmap, and set equal to a new create JS bitmap instance.
Bitmap is a special class and create JS that allows us to bring in external images, and manipulate their bitmap data. Here we're going to look within the images folder, and we're going to append to that, carousel items at index I of our array, the actual image property. This will concatenate the images directory with the actual image file name.
We will then go ahead and set a new property on the object, at index I, within carousel items equal to that bitmap image. At this point, we are able to assign a number of different things dynamically from the data. We're going to use root for all of these, because each one of these objects, like title container and carousel container, exist on our main timeline. Root again is something that we declared way up top here.
It's the same thing as if, up here, we said this dot container, or this dot title. We say title container, title, and we adjust the text property of that title instance. We set it equal to the title property within a specific index, in this case index zero, of our carousel items. We then go into carousel container three times, once for the left image, once for the center, and once for the right image.
In each of these, we're going to add child. Add child in create JS is going to actually add a child instance to our display list. The instance, and all three of these cases, are those bitmap objects that we created within our for loop, and we're pulling them from different objects. For instance, for the center, we want that to match what we brought out with the title, so that's index zero. For the right, we go to the next spot, which is one.
For the left however, we need to do something interesting. We need to figure out the length of our array, carousel items, and take one away from that. That gives us the last index of our array, and tells us what we should have in the left image. All right, let's go ahead and publish. Then we'll check it in the web browser. All right, we can see a couple things have happened here.
For one thing, everything is just playing back within our container, because we don't have any stop actions in there. But, another thing that we need to address is that everything is being added at the center. Let's see if we can address that now. All right, so here I am, back in our project. I'm going to unlock our container element here, and then go within it. Now we have our three instances, however, what I need to do is actually go into any of these instances in order to edit the symbol itself.
Let's go in there, and what I'll do is actually go ahead and align everything within image container to the left edge, and the top. Going back out to carousel container, I now must change everything in order to make these things align to the top here. Let's go ahead and do a control all, or command all, and shift everything up with our arrow keys, or through the align panel, so that it matches the top.
We'll just do that for each one of these transitions, and there we go. Let's save, and I will also go ahead and add a stop action to our actions layer here, by simply saying this dot stop. This is referring to the current timeline. This is the timeline for carousel container.
With that done, we will save, and hit file, publish. Back in our web browser, let's refresh, and you can see that things still aren't centered. What do we do? We need to go back and make more adjustments. Let's zoom out here and show all, and turn on outlines for everything, so that we can see that, sure enough, things aren't exactly how they should be. The center image is not centered.
So again, we select everything, and make these adjustments as necessary. And there we are. Once again save, publish, refresh, and now it's perfect.
The action script has stopped it on that frame, and we've made adjustments for the incorrect positioning of our images, once they were added to the stage. At this point, our photographic bitmap data is now complete, and we are ready to move on.
- Using XML and JSON
- Setting up your Animate project
- Building a carousel container
- Applying animation
- Creating titles with dynamic text
- Ingesting external data
- Rendering images
- Automating transitions
- Designing an RSS display
- Programming the RSS display