Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Optimizing graphics for mobile devices

From: Building Mobile Apps for Multiple Devices with Flash Professional

Video: Optimizing graphics for mobile devices

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.

Optimizing graphics for mobile devices

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.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Building Mobile Apps for Multiple Devices with Flash Professional.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.