Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Flash Professional really allows you to add a rich graphics to whatever content you're making and that rich look I really like, but you need to be concerned with how these graphics are being displayed and how they perform on mobile devices. And one thing you want to look out for our vector graphics, sure, they are small, but it means the computer actually has to draw all of those lines. And it might be a little more intensive on the processor. So anywhere where you have complex vector graphics, consider making them bitmaps.
Now that doesn't mean you have to use Photoshop or some other graphics program and import all these bitmaps, what you can do is jump into that specific graphic, say for instance this Medium button, notice how it actually has this button shape that's what it looks like. Unlock the card layer, all these cards on top of it, there are four different items and that button shape that I want to go ahead and may be combine into one and make it a bitmap. Well, what I can do is I can select all of those assets, just like that and I'll open up my Library panel and I'll just drag all this content into my Buttons folder.
Now that enables me to convert it to a symbol. In this case what I want to do is I am just going to call it med button shape, just like that. Okay, now that I've done that and it's all part of one unit, I can now go to my Properties panel and this is the great part. I can go into Display and instead of a rendering out all those vector graphics, I can change the Render Mode to Export as Bitmap. So when I create this file, it's going to be a bitmap, when it creates it. So let me select it and you might see a little bit of a change in there, but nonetheless it actually will make that a bitmap.
So that's what I want to do with complex vector graphics. Let's jump into these other buttons as well. So unlock that cards layer and take those graphics, keep in mind even these graphics are set to Overlay Mode. Again, that would be hard on the processor, I want make sure I take all those assets, drag them to the Buttons folder, easy button shape, just like that. Properties panel, make sure it's exported as a bitmap. I still have that editability in Flash, but it will export it out as a bitmap.
So moving on along to my Hard button, you can see all those cards, in fact, if I hold down the Shift key I can select both those layers and all that content and drag all those assets into my Buttons folder, call hard button shape. Keep in mind, it does have to be a movie clip in order to get this Render option, Export as Bitmap. So that's what you want to do with all of your rich vector content. Lastly, you can even see those cards back there, if I select them, rather than rendering out all of that content.
Again, that's all vector content. I can still take that and I can drag that into my Screens folder and we'll just call this card Stack, just like that and do the same thing. So it's going to Export as a Bitmap. Alright, so I just optimized the Home screen. If I take a look at some of my cards, this is where I'd probably want to refine some of these other animations, if I want to. Notice how there is that card flip and it's actually adjusting that z-axis.
And any time there is a z-axis adjustment, it actually makes it a bitmap. So those are fine, right there, there is my animation for that particular guy as he flies away. Notice that, just a Classic tween is being used. You can use either a Motion tween or a Classic tween, but I'm not using anything like the Bone tool, because the Bone tool, again, it's going to be just a little bit too heavy for mobile devices. So keep your animations simple, keep your graphics as either simple vector graphics or bitmaps, and you'll be well on your way to optimizing your content.
Now I am going to go ahead and test this out and I am just going to test it on my desktop, just to see what it looks like, we'll just watch some of this animation. He flaps around, we can see those buttons right there, everything kind of fades in, but I want to click any one of these buttons, we have this transition that happens. So we have this intro screen graphic, these intro monsters in that background, and when I click Easy, everything moves at once. If I tested this out on my device, you'd see that it might get a little sluggish when you're pushing around that many graphics.
So I might want to prioritize how those graphics move. So when I click any one of these buttons, maybe I want the title to animate our first and these characters as well, and then move that large background. So prioritizing animations is key. In fact, how these graphics are being animated are with ActionScript. So if I go into my Main document class, I'll just hit F4 to maximize and what I'm actually using in here is something called the TweenLite.
It's from greensock.com TweenLite. It's a really lightweight tweening engine and that's what I'm using. So let's go ahead and check out the greensock website. Here I am at greensock.com/tweenlite. Again, it really is a lightweight fast tweening engine. So if you're not familiar with it, I encourage you to get familiar with it, just the basics of tweening, you can learn right here. It's a matter of using this tweenlite.to, moving that movie clip, its X and Y position.
If you click TWEEN, you can see it smoothly moves. And that's how I am animating most of those transitions is using tweenlite. As I scroll down, I can see all these other properties that I can deal with as well. I have this onComplete Function that I can add. So basically when the animation has completed, I can fire off another function. So that's what I want to use in some cases, say for instance, when I transition from the intro to the game screen. So let me go back into Flash, I'll scroll down and remember it's actually when we create that board.
So right down here, regardless of which button you click, it's going to go ahead and create that board. Right down here, here is that createBoard function and you can see all of these TweenLites firing off at the same time. Again, might be a little sluggish, so I want to start prioritizing some of this. In fact, right in here, after the intro monsters animate off, I then want to fire off this TweenLite.to animation. So right in here, I'll just add a comma and then onComplete, just like I noted on the website, I can go ahead and introMonstersCompleteAnimation, okay.
So kind of a long name for a function, but that's actually what I want to create. So right in here, function and I will copy this word and right in here; I can go ahead and fire off this TweenLite.to. So I'll cut this and paste it right in this function. Notice after this background animates off, it actually fires off this onComplete function called background complete. So what we'll see is we'll see the screen and the monsters animate off, the background will transition and then we'll see the cards come in.
Again, prioritizing all of my animations, so not so much is going on at the same time. I'll save this and I will go ahead and run this on my desktop. Here it is I'll click any one of these buttons and that's how it animates. So it might depend on the device you're testing on, but nonetheless prioritizing your animations could really help the smoothness of your app. Also when it comes to mobile, don't forget that you always want to take any rich vector graphics and convert them to bitmaps.
And really all you need to do is change the rendering to Export as Bitmap. You'll notice definitely with performance this is going to help out a lot.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98575 Viewers
61 Video lessons · 85870 Viewers
71 Video lessons · 69760 Viewers
56 Video lessons · 102063 Viewers
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.
Your file was successfully uploaded.