FLASH CLASSROOM TUTORIAL - MAKING AN ANIMATED WALLPAPER FOR YOUR MOBILE MAKING AN ANIMATED WALLPAPER FOR YOUR MOBILE PHONE WITH FLASH CS3

FLASH CLASSROOM TUTORIAL - MAKING AN ANIMATED WALLPAPER FOR YOUR MOBILE
MAKING AN ANIMATED WALLPAPER FOR
YOUR MOBILE PHONE WITH FLASH CS3

Ever thought about creating your own animated wallpaper or
screensaver for your mobile? With Adobe Flash CS3 and Adobe
Device Central, it’s simple to do. Infact, if you have a mobile with
the Flash Lite Player installed, by following this tutorial you should
be able have your own unique animated wallpaper or screensaver
with a character running on your phone in about an hour.
Part A - Checking that the Flash Lite Player is installed on
your mobile device.
Most mobile phones now ship with the Flash Lite Player installed,
which means that your mobile phone probably has everything it
needs to display Flash content. If you’re not sure, there are two
easy ways to check.
1. Open up Adobe Device Central CS3. This application is part of the Adobe
Creative Suite and can be found in the same section of your programs menu
that you launch Flash from.
2. Adobe has included Device Central CS3 in the Creative Suite collection to
make it easy for developers to build and preview content for mobile devices.
The application has emulators for all mobile devices that can run the Flash
Lite Player. Adobe releases quarterly updates for the software to ensure the
latest devices are included in Device Central.
Emulators enable us to preview what content will look like
on a specific device. When you select and use an emulator,
simply think of it as a virtual version of your mobile.
Emulators are fantastic because they even allow you to
change some of the parameters relating to the device. For
example, you can reduce the amount of battery power left
on the phone or even preview what the phone will look like
with different reflections.
The pictures to the right show the Nokia 6300
emulator in Device Central showing a preview of
how my animated wallpaper looks when
the phone has an outdoors reflection.
Create a new Flash File in Adobe
Device Central by selecting File >
New Document In > Flash.
The Flash Classroom — www.flashclassroom.com
Tutorial by Kristine Kopelke—Page 2 of 5
3. Now that you have Adobe Device Central open, look
through the Available Devices panel on the left and
try to locate your mobile.
If you find your mobile, double click on it to
select it. If not, it could mean that your mobile
phone isn’t compatible with the Flash Lite Player.
The Adobe site contains a full list of compatible
devices at:
http://www.adobe.com/mobile/supported_devices/
Check through the list of devices to see if your
phone will run the Flash Lite Player.
4. Once you’ve found a compatible mobile phone in
the list and have selected it, it’s time to begin
creating the animation that you will use for your
wallpaper or screensaver.
There are two tabs at
the top of the middle
panel of Device Central.
The first is named
Device Profiles. This
section contains heaps
of information about
your phone and the
file formats it can
accept.
The second tab is the
New Document tab.
Click on this tab and
then double click on
the white page image
that has the faint Flash
logo. This launches Flash
CS3 and opens a file that is
the correct size for a
wallpaper or screensaver
for your mobile.
5. Select Control > Test
Movie and you’ll see that
Flash displays your file in
the emulator of your
mobile in Device Central.
Return to Flash CS3 to
begin your animation.

FLASH CLASSROOM TUTORIAL - MAKING AN ANIMATED WALLPAPER FOR YOUR MOBILE

The Flash Classroom — www.flashclassroom.com
Tutorial by Kristine Kopelke—Page 3 of 5
Part B - Creating the Animation
In this section of this tutorial, we will cover how to create a simple animation
using the traditional method of manually inserting keyframes and changing the
contents of each keyframe. Whilst you can use motion tweens and more
advanced animation techniques to create animations for mobiles, these
techniques are more memory intensive and experts recommend that you should
stick to using simple keyframing wherever possible.
1. Select the black arrow Selection Tool from the tools
menu and then select a background colour for your
animation from the Properties menu.
2. Double click on the text Layer 1 in the timeline and
rename this layer Background. On this layer draw any
additional items you want for your background. In my
Poodle Star example, I have added some simple grey
curved stripes to add some interest to the background.
3. Add a second layer by clicking on the Insert Layer
button at the bottom of the timeline. Rename this layer
character.
4. On this new layer, use the draw tools to create the
character that you will animate. As we are only going
to use traditional keyframing techniques for this animation,
you can place text and any other elements on this layer
too.
5. We are now going to add a new keyframe on each of
the two layers in the second frame. Click on the second
frame on each layer and press F6 to create new
keyframes. Your timeline should now look like this.
6. Ensure the second keyframe on the character layer is selected and in this
frame make some changes to your character. You could change the colour
of part of your character or move certain parts of the character e.g. change
the position of the eyes or the shape of the mouth.
7. Repeat steps 5 and 6 until you have built up a short animation sequence.
Note that keyframes do not have to be placed right next to the previous
keyframes. You can make the contents of a keyframe appear for a longer
amount of time by making the next keyframe further down the timeline.
The screenshot to the right
shows the timeline for my
animation.

FLASH CLASSROOM TUTORIAL - MAKING AN ANIMATED WALLPAPER FOR YOUR MOBILE

The Flash Classroom — www.flashclassroom.com
Tutorial by Kristine Kopelke—Page 4 of 5
8. Once you are happy with the animation you have created, select Control >
Test Movie to preview your animation in Device Central.
As this is only a simple animation,
there is no need to adjust any
settings. However, take a
moment to look through the
options in the right hand panel.
Note that this panel also shows
the file size and the version of
the Flash Lite Player that is
compatible. Note that Flash Lite
1.x files can be played on all of
the Flash Lite Players available.
The most recent mobile phones
are coming with Flash Lite 3
Players installed.
Part C - Publish your animation to Flash Lite 1.1
1. Return to Flash CS3 and save your file. Then
select File > Publish Settings.
2. From the Formats tab (shown on the right) ensure that
the Flash (.swf) box is ticked.
3. Select the Flash tab and
look at what version of the Flash Player
your animation will run on. Don’t make
any changes. We have simply opened
this up to show you how you can
make changes to control the Flash Player
your file can run with. Note that anything
you publish to Flash Lite 1.0 or Flash Lite 1
1.1 will run on the Flash Lite 2.0 and
Flash Lite 3.0 players.
4. Click on the Publish button at the bottom
of the Publish settings box and press OK.
Your published .swf file will now be
ready to put on your mobile.
Part D - Transferring your animation to your mobile and setting it as a
Wallpaper or Screensaver.
1. This is the part that sounds tricky if you haven’t copied a file to your mobile
before. However, it is fairly straightforward. Most mobiles these days come
with a USB cable you can connect to your phone. This will allow you to
simply copy your file into a folder on your mobile just like you would if you
were putting the folder on a CD.

FLASH CLASSROOM TUTORIAL - MAKING AN ANIMATED WALLPAPER FOR YOUR MOBILE

The Flash Classroom — www.flashclassroom.com
Tutorial by Kristine Kopelke—Page 5 of 5
Alternatively, if you don’t have a USB cable, you may be able to use
Bluetooth to move the file from your PC to your mobile. If you are unsure,
read through the manual for your mobile to find out the best way to move
your file.
2. Once your file is on your mobile, locate it (look for the Flash logo). Once the
file is selected, you will be provided with some options. These options will
include the option to use your file as a wallpaper or screensaver.
Select the option you want and press OK.
You should now have your own unique wallpaper or screensaver on your
mobile.
Learn More
If you’d like to learn more about developing content for mobile
phones and devices, the Adobe Mobile and Devices Developer
Centre has heaps of information and resources. The url is
http://www.adobe.com/devnet/devices/.
The Flash Classroom site is also being updated regularly with new
content including tutorials and demonstrations on building
content for mobiles.

masuk ke-perpustakaan umum
facebook me