Create a mobile device interface

laborermaizeΛογισμικό & κατασκευή λογ/κού

4 Ιουλ 2012 (πριν από 5 χρόνια και 1 μήνα)

766 εμφανίσεις

CAP93.tut_mob 68
CAP93.tut_mob 68
8/12/06 17:01:21
8/12/06 17:01:21
B
uilding web content for mobile devices
has always been an immensely tricky task.
Bandwidth issues have created problems
that could only be resolved by reducing
interfaces to a bare minimum, a factor that wasn’t
helped by the minute resolution and poor colour
capabilities of many phones and PDAs.
A major factor in resolving these issues has been
the Flash Lite application, a free download of which is
available on the Adobe site. Bolt this on to Flash 8
Professional and you’ll be privy to a host of additional
features and test functions. Based on Flash 7’s
ActionScript 2.0, Flash Lite inevitably has much less
functionality, but this means you instantly know which
features are compatible with mobile and which aren’t.
Consequently, you’ll end up with an interface that will
work on any mobile equipped with the Flash Lite Player.
For PC users, the BREW plug-in can help you
develop even more advanced functionality. This add-
on allows you to export any animations or interfaces
created in Flash Lite as applets – these are standalone
fi les that will be treated by mobile devices housing
BREW functionality.
In the following tutorial, we’re assuming some prior
Flash knowledge, so if you’re new to Flash, we suggest
loading the mobile_start.fl a fi le from CD93.
Tutorial
[illustration] Elisa Sassi, www.elisasassi.com
Create a mobile
device interface
Harness the power of Flash to fashion an interactive menu
and photo browser for use on mobile screens…
69
Tutorial Create a mobile device interface
All the fi les you need to work along with this tutorial can be found on CD93 in the
DiscContent\Tutorials\Tutorial Files\Mobile interface folder
Expertise provided by Thomas Watson. Watson has been writing about digital design
and creating websites for seven years. A former editor of creative and web design
magazines, he's now a freelance technology journalist.
CAP93.tut_mob 69
CAP93.tut_mob 69
8/12/06 17:01:28
8/12/06 17:01:28
3
Once you’ve
installed the
plug-ins, you’ll
notice on booting
up Flash that
pretty much
nothing has
changed. On the
surface, that’s the
case, but there are
now plenty more
options you can
choose from. To
start working with
Flash Lite, go to
File>Publish
Settings then,
under the Flash
tab, choose Flash
Lite 2.0 from the
Version dropdown.
4
The Flash Lite plug-in not only enables you to design and build for mobile
devices, but it also lets you emulate them in the Flash preview window. Click on
File>Device Settings to access this feature, and you’ll see the screen above. Navigate
through the manufacturers to fi nd the device you’d like to use, then click Add.
5
As well as
painting pretty
pictures for you
when you preview,
this serves an
important function.
As you click on each
device, you see its
screen dimensions –
take a note of these
so you can work in
the same aspect
ratio. Press Ctrl/
Cmnd+J to bring
up Document
Properties, then
change your
document size to
those of the phone.
The launch of Flash
Lite 2.0 saw
a signifi cant
improvement of the
plug-in’s feature set
over version 1.1. For
a start, it moved
from ActionScript
1.0 to 2.0 – without
this, our XML
parsing would be a
whole lot more
complicated, and
we would have had
to use a lot of
‘tellTarget’ actions
to power the
interface. There’s
also Flash video
support and more at
www.adobe.com/
products/fl ashlite.
New features
70
Tutorial Create a mobile device interface
Part 1:
Setting up
Prepare for a creative mobile onslaught, using Flash Lite and the BREW plug-in…
1
First of all,
you need to
turn Flash into a
program that’s
capable of
exporting to
mobile devices.
Head over to
www.adobe.com
to download the
latest version of
Flash Lite and,
once you’ve done
that, enter the
Device Profi le
Updates section to
get your hands on
emulators for the
latest mobile
phone devices.
2
If you’re using a Windows machine, you should now take advantage of the
BREW plug-in, a widget that enables you to turn Flash interfaces into mobile
device applications at the click of a mouse button. Register as a developer at
www.brew.qualcomm.brew/en to download the plug-in, then get to work installing
all of the add-ons you’ve just picked up.
6
So now,
whenever
you choose to test
your movie (Ctrl/
Cmnd+Enter),
you’ll see it shown
within the confi nes
of the mobile
device you
selected. Flash will
even emulate the
control method
of the phone,
enabling you to
mimic the
movement of the
joystick via the
cursor keys and
the Enter button.
CAP93.tut_mob 70
CAP93.tut_mob 70
8/12/06 17:01:34
8/12/06 17:01:34
We’ve created our
header image as a
bitmap to show you
that, even though
Photoshop allows
you more control
over your image
creation process, in
the end, you’re
better off using
Flash so that your
logo will look sharp
on any size of
mobile phone.
Flash vectors
You’ll notice that we
ask you to create
frame labels again
and again in this
tutorial – that's
because we’ve set
up our interface so
that any event, be it
selecting a button or
a movie clip ending,
moves Flash on to
another frame in the
timeline. In our
interface, frame 1
is the start button,
frame 2 is the menu
items scrolling in,
frame 3 is the menu
itself, frame 4 is the
menu fading out
and frame 5 is the
photo browser.
In the frame
1
If you’re using our library of graphics from CD93, you’ll already have a collection
of working buttons on the stage. Double-clicking on one will show that we
created keyframes in each of the over and down states, then altered the blend colours
for each. Each button also calls in a simple animation movie clip on the over state.
2
Now let’s start building the interface proper. Create a new layer, calling it
‘buttons’, then add a keyframe on frame 3. Drop the interface elements onto
the stage. In the layer below, drag an instance of the ‘background’ graphic symbol –
this will show when the menu items are animating in and out.
71
Tutorial Create a mobile device interface
Part 2:
Interface graphics
Start your design by creating the all-important graphic elements…
4
Dropping
these graphics
into the main
stage, alongside
the ‘main menu’
button at the
bottom of the
screen, you can
instantly see how
the interface has
come together.
Now you need
to start building
the interaction
for the user.
1
Flash is now
ready and
waiting for our
mobile interface,
so let’s get to work.
Before turning to
Photoshop and
Flash for imaging
inspiration, sketch
out a plan of the
interface –
remember that
you’re only dealing
with less than
200x200 pixels
here, so don’t try
to squeeze
too much detail in.
2
Every web interface needs a good header graphic, and we’ve created ours in
Photoshop. Again, keep in mind that the header is only going to be around
50x200 pixels, so the key here is to be bold.
3
Stick to Flash
as much as
possible. The
button you can see
at the bottom of
the screenshot on
the right was
created in Flash
using simple blend
and drawing tools.
You can fi nd copies
of buttons 1-4 in
the library of the
mobile_start.fl a fi le
on CD93.
Part 3:
Building the menu
Turn your pretty vector graphics into a fully working interface…
CAP93.tut_mob 71
CAP93.tut_mob 71
8/12/06 17:01:36
8/12/06 17:01:36
When using frame
labels to link
between one event
and another, the
importance of the
‘stop ();’ action
cannot be
emphasised
enough. In some
instances, you can
assign this in the
‘goto’ code itself, but
often, especially
with animations,
this isn't possible.
Where this is the
case, a simple stop
action in the
‘actions’ layer in the
main timeline will
allow the clip to
play once, but
ensures it stops
at the end.
Stop actions
Building the menu continued...
8
Drag the ‘start button’ onto a new
layer on frame 1 and, using the
methods we showed you before, link it
to frame 2. Next, create a new keyframe
in the ‘actions’ layer, and insert the
ActionScript on the right. Line 3 tells
Flash to automatically select the ‘start’
button, and line 4 removes that ghastly
yellow box that appears by default
around all buttons when you export
in Flash Lite mode.
5
Now, click on the ‘gallery’ button to select it within the main stage. Entering the
ActionScript above tells Flash to move on to frame 4 of the timeline when the
gallery button is selected. The label “frame4”, like “frame3”, is entirely arbitrary, of
course, but simple naming is often the most effective.
6
You can now
create frame
4, where the menu
buttons fade out.
Create a new
movie clip called
‘fade_out’, then
drag the interface
elements into it.
Simple alpha
tweens, staggered
from one button to
the next, will have
the desired effect.
In the fi nal frame
of the fade_out
movie, enter the
ActionScript on the
right. This tells
Flash to load frame
5 when this movie
has played out.
7
Create the fade_in movie clip on a new layer on frame 2 of the main scene. In
our case, we’ve tweened the graphics from left to right, but the effect is simple –
as the timeline enters frame 2, only the header graphic is visible. By the time frame 2
has played out, the whole menu is shown, ready to be replaced by frame 3.
72
Tutorial Create a mobile device interface
4
You should now have a fully interactive menu system, albeit with nowhere to
go. For a simple and effi cient method of moving between screens, we’re using
frame labels, with each change in the interface housed in a different frame. Label the
third frame by clicking on it in the timeline and entering ‘frame3’ in the Properties
Inspector. Remember to do this with all subsequent frames.
3
If you test your movie, you should notice that you can move up and down the
buttons with the cursor keys, except for button 4. If you open this, you’ll see that
it’s actually a movie clip, so you need some ActionScript to trigger the over and down
states. Create another layer called ‘actions’ then, on frame 3, enter the code above.
CAP93.tut_mob 72
CAP93.tut_mob 72
8/12/06 17:01:39
8/12/06 17:01:39
5
This gives us an image browser that shows one image, so let’s fi x that. The
above code tells Flash to listen for the left cursor key being pressed and, as
long as the current image isn’t the fi rst one, to move the selection along one place.
We then use the same code as in the previous step to call the new image into the
empty movie clip.
6
Using the same methods, you can now encode an event
to listen for the right cursor. Lines 34 and 35 state that
the current selection cannot have progressed further than the
penultimate image in order to move on a place. If you’re going
to include tweens as images load, you would place them under
the second ‘if’ statement.
Our photo browser
uses a simple
collection of eight
images to show how
easy it is to call
XML into an SWF
fi le. If you’re looking
for a more advanced
gallery, however,
then we’d suggest
you check out www.
ptm.fi , where you
can download the
FLA fi les for Pasi
Manninen’s great
application – which
allows you to move
between different
folders of images,
and contains an
excellent preloader
for each image.
Bigger gallery
4
The next ActionScript states that the currently active image is number 0 (XML
starts counting from zero). On line 14 here, 'imagemovie' is the instance we
created of the empty clip in Step 2 (above), ‘folder’ is our collection of images, and
‘active’ is the currently selected image (which is now zero, of course). Below this, we
simply tell Flash to load the XML.
1
Now that the basic interface is set up, let’s have some fun with the new
capabilities of Flash Lite 2.0 by incorporating an XML list of images. First up,
create your XML fi le defi ning the names of your pictures. Save it as imagebrowser.
xml, then drag the images you intend to use into the same folder.
2
Back in Flash, you now need to create a blank movie clip (‘emptyMovie’ in the
Library), then insert it on a new layer on frame 5, with the interface
background, header and main menu button on separate layers. Click on the empty
movie clip, and give it an instance name of ‘imagemovie’ in the Properties Inspector.
3
You can now tell Flash to call in our XML by creating a keyframe in the ‘actions’
layer and entering the ActionScript above. This code tells Flash to start parsing
XML and, once the XML has loaded, to create an ‘images’ variable that tells the
software how many elements, or images in our case, to expect. The ‘folder’ variable
houses the links to these elements.
73
Tutorial Create a mobile device interface
Part 4:
Image gallery
It’s time to call in XML to create our photo browser…
CAP93.tut_mob 73
CAP93.tut_mob 73
8/12/06 17:01:40
8/12/06 17:01:40
4
Finally, all
you need to
do is click on the
Publish option to
save the applet to
the directory you
just specifi ed.
Open the BREW
Simulator, and go
to File>Change
Applet Dir. You
can now browse
your hard drive to
fi nd your applet,
and the Flash
interface should
load, exactly as it
would on a mobile
device.
ca p

1
Now test
your movie.
Everything should
work perfectly and
the SWF fi le is
ready to run on
any device you
choose. If you’re
using BREW,
however, now’s the
time to use this
plug-in to create
a standalone
application. Head
into the Publish
Settings again, and
choose ‘Flash Lite
for BREW’ in the
Post-processor
dropdown box.
2
You’ll now
need to move
through the BREW
wizard to generate
the applet. On the
fi rst screen, unless
you’ve signed up
for a $400 BREW
developer’s licence,
the Class ID
you’re given is a
temporary one,
and will only work
locally. Once
you’ve got the
developer’s licence,
you can export to
mobile devices,
and see your
applet in action.
3
You’ll need to
enter a URL
for your site – at
this stage in the
process, any one
will do. In Output
Settings, you can
fi x a BREW glitch –
by default, your
applet is saved
alongside your
Flash fi les but, in
order to see it
working, you need
to click on the fi rst
browse square icon
next to ‘MIF
folder’. Navigate
to the BREW
program fi les,
then select the
‘examples’ folder.
8
A quick word
on the images
you use for your
browser. We’re
using the Nokia
N70 device, which
boasts a resolution
of 176x208 pixels.
Consequently, each
of our images has
to be 176x140. In
Photoshop, click
on the Crop tool,
then enter those
dimensions in the
boxes – this should
make the process
a lot easier.
7
Test your fi le,
and you
should be able to
manoeuvre through
the interface. You’ll
notice that the
‘main menu’ button
is automatically
selected in the
photos section, as
this is the only
button on the stage
at that time. Add
ActionScript to link
this button to
frame 2 (where the
menu items
animate in).
74
Tutorial Create a mobile device interface
Part 5:
Save and export
The fi nal process is to turn your Flash interface into a BREW applet…
Image gallery continued…
CAP93.tut_mob 74
CAP93.tut_mob 74
8/12/06 17:01:41
8/12/06 17:01:41