1. Introduction| Welcome | Prerequisites| 00:00 | I've put together this video to give
you an idea of what we are covering
| | 00:03 | and set up some expectations before
we dive in to the rest of the course.
| | 00:06 | There are some new features in the CS4 release
of Device Central that do take it to a new
| | 00:11 | level when it comes to Scripting
and Testing. In these areas a solid
| | 00:15 | understanding of programming and
ActionScript or XML would be beneficial. While
| | 00:20 | we test Flash Lite content during the
course we are not really looking at the
| | 00:23 | development of the content itself so
it's not necessary to have a great amount
| | 00:27 | of experience with Flash.
| | 00:28 | I do however spend some time at the
end going through the source files for
| | 00:32 | these Flash mobile assets so you can
see how we created them. An understanding
| | 00:37 | of mobile devices and how they run
interactive content is also not necessary
| | 00:41 | but some understanding would mean that
you get up the speed a little quicker.
| | 00:44 | But don't worry. We will be covering
all the basics of the mobile content
| | 00:48 | industry as well, so that you can get
a clear picture to have this all fits together.
| | 00:52 | If you find there are some things that
you are not quite grasping or would like
| | 00:55 | to learn more on certain topics, you
could also check out these additional
| | 00:59 | titles in the lynda.com Online Training Library.
| | Collapse this transcript |
| Using the example files| 00:00 | If you are a premium member of the
lynda.com Online Training Library or if you
| | 00:04 | are watching this tutorial from a DVD,
then you have an access to the exercise
| | 00:07 | files used through out the course. With
in the exercise files we have a number
| | 00:12 | of chapter folders relating to chapters
within the course, as well as our Assets folder.
| | 00:18 | Inside the Assets folder we have all of
the individual assets used throughout
| | 00:22 | the course. We have Flash files,
graphic files, even document files. We even
| | 00:28 | have the source code for the Flash
documents that we will be looking at.
| | 00:31 | In Chapter 12, I will go through the
creation of some of this content using the
| | 00:35 | source files. If you are watching a
movie and we use some project files then
| | 00:39 | you will find it in the
appropriate chapter folder.
| | 00:41 | For example if you are in Chapter 7
and watching lesson one, you can open up
| | 00:45 | the 07_01 project file. This will open
up Device Central and start you with the
| | 00:51 | Project panel. We have kicked you off
with the asset file as well as with the
| | 00:55 | Device Profile ready to go. If the
asset file is broken it's a simple matter of
| | 00:59 | reconnecting it to the resource from
your Assets folder. Click on the Resource
| | 01:03 | Name, right mouse click and choose Fix
Broken Reference. Locate the file inside
| | 01:08 | your Assets folder and choose Open.
This file is ready to use in your lesson.
| | 01:15 | If you are monthly or annual
subscriber to the lynda.com Online Training
| | 01:19 | Library, then you don't have access to
these files. But you know what? That's
| | 01:22 | totally okay. You can follow along
with me as we go through these lessons or
| | 01:26 | even substitute them with
your own files if you would like.
| | Collapse this transcript |
|
|
2. Device Central and the Mobile LandscapeDevice Central's role in mobile development| 00:00 | Device Central CS4 is not just a
gimmick added into Adobe's Creative Suite
| | 00:04 | for fun. It's a serious mobile
testing application, part of the mobile
| | 00:09 | developer's toolkit. It's main role is
to thoroughly test content across various
| | 00:13 | devices and environment scenarios. I
would like to put Device Central CS4 into
| | 00:18 | context with the other main
products that it's paired with.
| | 00:22 | Device Central is installed with any of
CS4 suites or a number of the key Adobe
| | 00:26 | CS4 point products such as Flash. It's
there because its the hub of the wheel
| | 00:31 | that includes some of the main
creative development products that Adobe has,
| | 00:35 | including Flash and Photoshop, but
also Illustrator, After Effects and
| | 00:39 | Dreamweaver. All of these products
leverage Device Central as part of mobile
| | 00:43 | developer or designer's workflow. It is,
however, a stand-alone product and can
| | 00:48 | be launched independently of any of
these products and used on its own.
| | 00:53 | So what exposure do I get to Device
Central if I am using some of these
| | 00:56 | products? If you are creating designs
for a mobile interface in Photoshop or
| | 01:00 | Illustrator, or even designing static
mobile content, you can view your designs
| | 01:05 | in Device Central and see how it looks
in terms of layout. But also interact
| | 01:09 | with some of the visual changes
with in the mobile environment.
| | 01:12 | If you are creating mobile video with
After Effects you can browse your content
| | 01:15 | in Device Central and see how it fits
some of the multiple screen sizes. If you
| | 01:20 | are building a mobile internet site
with Dreamweaver you can preview you page
| | 01:23 | in Device Central just as you preview
in the regular web browser. Of course
| | 01:28 | Device Central is most tightly linked
with the Flash CS4 authoring environment.
| | 01:32 | By simply using the Flash Lite
Player as your target player in Publish
| | 01:36 | Settings, Flash will automatically
open Device Central when you test your movie.
| | 01:40 | Adobe has put Device Central as the
hub of this mobile development wheel so
| | 01:45 | that no matter what stage of the
life cycle of the mobile content you are
| | 01:48 | involved in, Device Central can be
leveraged to ensure that what you are
| | 01:52 | creating is going to work. And not
just see how it looks on one device, but
| | 01:57 | across all known Flash Lite enabled
devices. This is the great new feature of
| | 02:01 | the CS4 release. Device profiles are
able to be added to your environment
| | 02:05 | dynamically through the online library.
| | 02:08 | One last important note to make.
Device Central CS4 does not replace the need
| | 02:13 | to test on actual devices. They are
always being minor discrepancies in the
| | 02:17 | performance of content between
Device Central and on a real phone. Always
| | 02:21 | complete your testing process for your
content on real devices before deploying
| | 02:25 | them. Hopefully now you can see why
Device Central is such an important part of
| | 02:29 | the workflow for mobile designers and
developers using the Adobe's CS4 suite of tools.
| | Collapse this transcript |
| Device support in various regions| 00:00 | Not every phone is the same and even
though Flash Lite is arguably one of the
| | 00:04 | most ubiquitous mobile platforms for
development, it too has variations across
| | 00:09 | devices and regions. There are four
common implementations of Flash Lite; as a
| | 00:14 | stand-alone player, Screen Saver
support, Wallpaper support and through the
| | 00:20 | Browser. Another implementation is
where it appeared as the user interface or
| | 00:24 | presentation layer of a device. This
does not mean though that that phone is
| | 00:29 | Flash Lite enabled and can consume or
play Flash Lite content. Each Flash Lite
| | 00:34 | enabled device has one or more of
these basic implementations; based on the
| | 00:38 | manufacturer and in some cases the
operators who also sell the devices.
| | 00:42 | Let us first take a look at the main
manufacturers. Nokia was one of the first
| | 00:47 | OEMs to support the Flash Lite on a
mass scale, that have around 40% of global
| | 00:51 | market share and a strongest mostly in
Europe, Asia Pacific and Oceania. They
| | 00:56 | have a growing footprint in US but
they are still small there compared to
| | 01:00 | competitors. Nokia supports Flash Lite
differently across different device and
| | 01:05 | operating systems. The Series 60
devices support Flash Lite as a standalone
| | 01:10 | player, screen saver and through the
browser. There are third party platforms
| | 01:15 | such as Canary Lite that can extend the
functionality of Series 60 to use Flash
| | 01:20 | Lite as other
implementations like animated ring tones.
| | 01:23 | Nokia Series 40 devices have Flash Lite
as the standalone player, screen saver,
| | 01:28 | wallpaper and also in the browser.
Sony Ericsson support Flash Lite in the
| | 01:33 | browser, wallpaper and screen saver
implementations on many of their devices.
| | 01:38 | Again they have large penetration in
similar areas to Nokia. Project Capuchin
| | 01:43 | is a recent announcement from Sony
Ericsson, which is mixing Flash Lite with
| | 01:47 | Java on certain devices.
| | 01:50 | The support for Flash Lite across
this Nokia and Sony Ericsson devices are
| | 01:54 | regardless of what region the devices
are sold into. Flash Lite is only as the
| | 01:58 | default device capability. Other
regions of the world are little more
| | 02:02 | operator-driven. Verizon Wireless in
North America support Flash Lite on a
| | 02:07 | growing number of their BREW devices.
The Flash Lite Player is installed on
| | 02:11 | these devices over the air, and the
manufacturers who create this phone include
| | 02:16 | LG, Samsung and Motorola.
| | 02:17 | DOCOMO in Japan has supported Flash
Lite from right back Version 1.0.They have
| | 02:24 | pretty different implementation from
animated ring tones to wallpapers and
| | 02:28 | screen savers, but they mostly get
their Flash Lite content through the
| | 02:32 | browser. About 40% of Mobile website on
DOCOMO is offered in Flash. Other Asian
| | 02:39 | countries such as Korea experience
Flash Lite on things like portable media
| | 02:43 | players like the iRiver as well as on
phones where it's mostly embedded as the
| | 02:47 | user interface.
| | 02:48 | Hopefully now you have the better
understanding of the various ways of Flash
| | 02:52 | Lite implemented across devices and
across different regions. No matter where
| | 02:56 | you are in the world right now, chances
are these devices in your local market
| | 03:00 | that support Flash Lite in one of
these ways. Whether it's through the
| | 03:04 | capabilities of the phone themselves
or through operator, these devices offer
| | 03:08 | the user a rich mobile
experience using Flash Lite.
| | Collapse this transcript |
| How content is distributed| 00:00 | Many developers are coming to Flash
Lite from a Flash background rather than a
| | 00:04 | mobile background. And as such may not
fully understand the marketplace where
| | 00:08 | their content may end up. I'll take
some time now to outline the various
| | 00:11 | business models in place within the
mobile market and how this might affect the
| | 00:15 | decisions you make in terms of where
you want to participate. Distributing your
| | 00:19 | concept on mobile devices is a lot
more difficult to just uploading it to a
| | 00:23 | website. There are many more players
and factors involved and considerations
| | 00:28 | that need to be made.
| | 00:29 | Firstly, you could distribute your
content through the traditional business
| | 00:33 | model of developer, aggregator and
operator. The operator owns the customer
| | 00:37 | relationship and in this business
model, everything ultimately goes through
| | 00:41 | them. They will take the biggest kind
of the revenue created from a sale but
| | 00:44 | they will also market the content to
their customers and control the billing as
| | 00:49 | well, since they already have that
billing relationship in place. They will
| | 00:53 | work with many aggregators or
publishers who mainly bring to them the content
| | 00:57 | that they will sell through their
portals and channels, but in many cases we
| | 01:01 | will also run infrastructure for
the operator as a hosted service.
| | 01:04 | The operator passes on the remaining
revenue from a sale to an aggregator for
| | 01:08 | further distribution. It's the
aggregator who you are going to have a licensing
| | 01:12 | contract with, not the operator. Your
aggregator will report back to you what's
| | 01:17 | been sold during a period of time, and
what revenues owed to. As you can see
| | 01:22 | this is quite a drawn out process so don't
expect the millions to be rolling in too quickly.
| | 01:27 | Aggregators who could take your
content to operator portals can sometime also
| | 01:31 | have other channels that they tape
the content to under the same agreement.
| | 01:34 | They will also normally work with more
than one operator. Sometimes hundreds in
| | 01:39 | fact and that can mean that your
content reaches a very wide audience through a
| | 01:44 | single channel or arrangement.
| | 01:46 | You can bypass the operators and
aggregators by selling your content on
| | 01:49 | off-deck portals. These are generally
web-based sites that allow to browse
| | 01:53 | and purchase mobile content, with
payment systems such as Premium SMS or
| | 01:58 | PayPal. You will end up with the
larger slice of the pie but the exposure of
| | 02:02 | your content can be smaller than
through an operator. However this model
| | 02:06 | started to pick up momentum with
solutions such as Nokia Download and the Apple
| | 02:10 | App Store.
| | 02:11 | It's important to note that you will
be working on licensing agreements where
| | 02:15 | you hold on to the ownership of your
content but then granting a license to an
| | 02:19 | aggregator portal for the rights to
distribute your content. Before it sounds
| | 02:23 | like too much hard work you can always
get your content on the devices through
| | 02:27 | something like an SMS Message that
is then used to download the content
| | 02:31 | directly to device or download it from
a website and then side load it onto the
| | 02:35 | device via the PC.
| | 02:38 | This tends to be the way that
advertising campaigns might engage customers with
| | 02:41 | mobile content. So there is a basic
look at some of the main business models
| | 02:45 | for content distribution and have by
operate. Being a mobile developer can be a
| | 02:50 | little bit tricky when it comes to
seeing your content distributed and more
| | 02:54 | importantly how you can monetize your
content and see some reward for your effort.
| | 02:58 | To help you further there are some
links in the resource section of this course
| | 03:01 | that can point you in the right direction.
| | Collapse this transcript |
|
|
3. Exploring the InterfaceOrganizing devices| 00:00 | The ability in Device Central to test
your content across all suitable Flash
| | 00:04 | Lite enabled devices is one of the many
benefits of using a tool such as this.
| | 00:09 | In this lesson I will show you how
the devices are managed into Local and
| | 00:12 | Online Device Libraries and how
specific devices can be grouped and shared into
| | 00:17 | Device Sets. When we first open up
Device Central the first thing we see is the
| | 00:21 | Start screen and from here we can do a
number of tasks, from opening new content
| | 00:26 | to test, browsing device profiles
or opening up a new mobile specific
| | 00:31 | document in any of these Adobe CS4 Products.
| | 00:35 | For this lesson we are looking at
devices so I am going to click on the Browse
| | 00:38 | Devices button. Within the Device
Central interface the left-hand side of the
| | 00:43 | screen is taken up with information
related to devices. This represents the
| | 00:48 | latest information and specifications
for devices that support Flash Lite in
| | 00:52 | its various versions. These listed
devices that we can use to test our
| | 00:57 | content against are stored in two
different libraries, the Local and the Online
| | 01:00 | Libraries. The fundamental difference
between these two libraries is as their
| | 01:05 | names suggest. One is stored locally on
the desktop and the other is loaded in
| | 01:09 | from an online Adobe managed
database of device information.
| | 01:13 | The reason behind having two libraries
is that in the past Device Central users
| | 01:17 | have relied on Adobe to publish
updates for the device list that had to
| | 01:21 | be then installed manually. Having
the Online Library allows for updates to
| | 01:25 | existing devices plus new devices to be
added as soon as the profiles are ready,
| | 01:31 | rather than having to wait to get
that information out through the manually
| | 01:34 | installed updates. That just means
getting the new information out to you, the
| | 01:38 | developer, much faster.
| | 01:38 | When we want to test their content in
one of our devices, the first we need to
| | 01:43 | do is transfer the device profile from
the online library to our local one. Doing
| | 01:48 | this is a simple as double-clicking on
the desired phone and it copies down
| | 01:52 | into the local library automatically.
Both of these libraries can be categories
| | 01:56 | in the number of ways by clicking on
the grouping icon. This allows us to group
| | 02:01 | by Carrier, Content Type, Display Size
and other features that are applicable
| | 02:05 | to a Flash Lite phones.
| | 02:07 | Let's say I want to find all the
phones that support Flash Lite 2.1. Click on
| | 02:12 | Flash Version and now they are
organized by the version of the player. I can
| | 02:17 | click on the Flash Lite 2.1 and get a
listing of all the phones that support
| | 02:21 | that version of the player.
| | 02:23 | We can also search these libraries
using a number of parameters that are
| | 02:27 | similar to the grouping options. We do
this by clicking on the Search icon. We
| | 02:31 | can search for keywords that can also
add other criteria by clicking the Add
| | 02:35 | button. Let's say I want to find
devices that have the display size of exactly
| | 02:39 | 240x320 and also support Flash Lite 3,
notice that as I am adding search
| | 02:49 | parameters the list on the left hand
side are changing dynamically I will get
| | 02:53 | rid of the search box by clicking
Close and clear the search results by
| | 02:58 | clicking the Close button in that library.
| | 02:59 | I just want to focus briefly on the
device icons because there are some cool
| | 03:04 | features that are attached to them. The
first one that you will notice is that
| | 03:08 | some icons have a small number 2
inside of them; this simply means that the
| | 03:12 | device has two screens, one on the
inside and normally one of the outside.
| | 03:16 | Sometimes both of them are
addressable by Flash Lite. So that's why this
| | 03:20 | information is important.
| | 03:23 | Another feature of the icons is when
the icon terns to gold, this means that
| | 03:27 | there is an updated version of this
profile available on the online library to
| | 03:31 | download. To update it I simply right
mouse click on that particular phone and
| | 03:36 | select Download From Online Library.
That local profile for that device is
| | 03:41 | up-to-date. The icon that you might
see is the yellow and black circle. If I
| | 03:46 | double-click onto a device this
sets it as the default device used for
| | 03:50 | testing. If I am authoring in Flash
and test my content, then Device Central
| | 03:54 | will use this phone profile automatically
to display my content. Or if I open up
| | 03:59 | the file from within Device
Central again this is the default device.
| | 04:03 | Now just moving on from libraries we
have also got a panel in the top left of
| | 04:07 | the Device Central user interface
for something called Device Sets. We go
| | 04:12 | into Device Sets in more detail during
this course. But Device Sets are way for
| | 04:15 | you not just a group of filter devices
like the libraries can but to group them
| | 04:20 | into project specific folders that can
be then used by single developer as a
| | 04:24 | quick reference or shared between
developers working on the same project.
| | 04:30 | Now we have seen all about devices in
Device Central, how to group them based
| | 04:33 | on different criteria and how to
filter those based on certain features. The
| | 04:38 | Online Library is the main
repository devices that results within Device
| | 04:42 | Central and allows us to download to a
local system, up-to-date profiles. This
| | 04:47 | creates a more efficient workflow for
getting this information to you quickly,
| | 04:51 | so that you can be testing on the
latest devices and when you start working
| | 04:54 | with the number of devices, Device
Sets are the customizable and sharable
| | 04:58 | grouping of devices for you to use.
| | Collapse this transcript |
| Overview of device profiles| 00:00 | Device Central not only gives you
listed devices that support Flash Lite but
| | 00:04 | also detailed profiles of each device
that can be used for determining which
| | 00:08 | one you want to target with your development.
| | 00:10 | In this lesson I will show you what
information device profiles give you and
| | 00:14 | why we use them. We have already seen
device libraries and how we can access
| | 00:18 | list of devices but by clicking on the
device from the list we can also get to
| | 00:22 | see in the center of the screen, a
device profile. Let me just click off that
| | 00:26 | first. There is the device profile.
| | 00:28 | A device profile is a detailed
breakdown of specifications related to our
| | 00:33 | selected device. This information is
broken down under a number of tabs that we
| | 00:37 | see across the top of that profile
window. The General tab, as the name suggests,
| | 00:42 | gives us general information about
the device, detail such as the Operating
| | 00:45 | System Version, Regions where it's
available, Display Size, Screen Resolution
| | 00:51 | and Color Depth. All this information
can be found under this tab. Its good
| | 00:56 | information to know particularly if
you want to check what markets might have
| | 00:59 | this device. If you are developing a
data connect application knowing what
| | 01:03 | networks it will run over.
| | 01:05 | And other information such as
Languages, which may be applicable to your
| | 01:08 | application. The Flash tab is probably
the one that you will use the most. This
| | 01:13 | tab tells us all about the
implementation of Flash Lite for that device.
| | 01:17 | ActionScript commands that may or may
not be available for us to use in that
| | 01:21 | implementation, memory allocations
and what features of the device we can
| | 01:25 | integrate into our application. This
tab is further subdivided into different
| | 01:30 | implementations of the Flash Lite
Player that exists on the device. Each
| | 01:35 | implementation of Flash Lite on the
device will have differences that a Flash
| | 01:38 | developer will need to know about.
| | 01:41 | The Bitmap tab tells us about what
image formats are supported by the device
| | 01:45 | and how they displayed on that
particular screen. The Video tab is pretty much
| | 01:51 | the same but it tells about supported
video formats and the Web tab tells us
| | 01:56 | about the browser that pre-installed
on the device, you may have notice the
| | 02:00 | common attribute across all of these
tabs is called addressable size. This
| | 02:05 | tells us how much screen spaces
allocated to each of the content types
| | 02:09 | described in the tab.
| | 02:11 | Again this is important information to
know particularly if you are developing
| | 02:14 | different content ops for a device.
This whole view of the device profile is
| | 02:18 | what we see when we only have a single
device selected. If we were to select
| | 02:23 | more than one device from the list,
you will notice that the view changes to
| | 02:26 | the top of the comparison table that
allows us to check all of the specific
| | 02:30 | profile attribute against each other,
when are able to see all this information
| | 02:35 | up against each other we can quickly
pick the differences and see if these
| | 02:39 | devices are exactly the ones
that we actually want to use.
| | 02:42 | Device profile is a holistic view of
all the information we have about the
| | 02:46 | device. Each profile is subdivided
into tabs giving general device specs as
| | 02:51 | well as specific information such as
Flash Lite Implementations, Web, Video and
| | 02:55 | Bitmap support and by selecting more
than one device at a time from other the
| | 02:59 | Online or Local Libraries, we can see
the same information displayed in an
| | 03:04 | interactive comparison chart. They are
helping us to determine similarities and
| | 03:08 | differences between our devices.
| | Collapse this transcript |
| Overview of panels| 00:00 | Once we start interacting with content
though Device Central we are given a
| | 00:04 | whole new range of tools to use. In
this lesson we will take a quick look at
| | 00:07 | the tools that are contained
within what we call panels.
| | 00:11 | To see our panels we first need to be
emulating some content. So I am working
| | 00:14 | from the exercise file, 03_03.adcp.
I'll go into functionality of Project
| | 00:20 | files in more detail later on in
the course. But for now let's just
| | 00:24 | double-click on our device to make
sure that we have copied it successfully
| | 00:27 | down to our Local Library. Select our SWF
file and then click on the Emulate File
| | 00:32 | icon. We don't need that project file
open anymore. So I am just going to close
| | 00:36 | that for now. And over on the right hand
side now that we have content open,
| | 00:40 | you can see that we have got our panels.
| | 00:43 | Panels are how we engage with our
content, how we simulate external
| | 00:46 | environments like the strength of
the network signal, how we can change
| | 00:50 | hardware variables like battery or clock,
watch memory usage of our application
| | 00:54 | and even simulate if our content
being viewed indoors or outdoors.
| | 00:57 | Now our panels are collapsible. So we
don't have to have an open all that once.
| | 01:01 | But to open and close them we simply
click on the arrow icon next to the panel
| | 01:06 | name. However they are not re-
arrangeable like dockable panels in other Adobe
| | 01:11 | products. When we are testing our
content nearly all interaction will come
| | 01:15 | though one or more panels. So you
will start to get very familiar with the
| | 01:18 | functionality that they provide.
| | 01:20 | We are going to explore all of these
panels in greater detail in their own
| | 01:23 | dedicated movies later on in this
series. So hopefully that just wet your
| | 01:27 | appetite a little bit for the
functionality that we have in Panels. They
| | 01:31 | represent the core reason for what we
do in Device Central. They provide us
| | 01:35 | with nearly all the functionality that
we require to fully simulate our content
| | 01:39 | or real devices under real user conditions.
| | Collapse this transcript |
| Overview of the emulator and controls| 00:00 | When we open a piece of Flash content
in Device Central or use Test Movie from
| | 00:04 | within Flash, we see the content
displayed in what we call the Emulator window.
| | 00:09 | In this lesson I will show you the
Emulator window and outline some of the
| | 00:12 | functions that we have available to
us thorough this window. Let's begin by
| | 00:16 | opening up some of our sample content.
Double-click on the device that we have
| | 00:19 | available in that 03_04 exercise file,
just to make sure that that's been
| | 00:24 | downloaded into our Local Library. Then
select that Flash movie and click on the
| | 00:28 | Emulate file icon and so now we can see
our content being played in the context
| | 00:34 | of the device that we have selected.
| | 00:36 | Apart from this obviously being the
view that we use to see our content running
| | 00:39 | within the device, it also gives us
some features to play with and you will
| | 00:43 | find these controls along the bottom
of the Emulator window. The most obvious
| | 00:47 | controls we have here at first are
Play, Pause and Restart buttons. These
| | 00:52 | buttons do exactly as they say.
Clicking on Pause will pause our content and
| | 00:57 | Restart button will reload our SWF
file and take this back to the beginning of
| | 01:01 | the movie and clicking Play
will start us all over again.
| | 01:06 | The second set of tools are new to the
CS4 release of Device Central. These are
| | 01:10 | the Video Capture and the Snapshot
features. Clicking on the Video button will
| | 01:14 | record a video of what's happening on
our screen as it happens in real time and
| | 01:19 | as you interact with it. This is
great for recoding video samples of your
| | 01:22 | work and we are going to look at this
in more detail in another lesson on the course.
| | 01:26 | This Snapshot feature works just
like a camera, it takes an image of what
| | 01:30 | appears in your screen at that time.
We can manage these snapshots by opening
| | 01:35 | up our log window by clicking on the
Show Snapshots icon. Again, we will look at
| | 01:40 | snapshots in much detail later on.
Sometimes our content is emulated in the
| | 01:45 | phone where the keypad is off the
bottom of the screen. If you want to interact
| | 01:50 | with that keypad we can use the
detached toggle keypad button this gives us
| | 01:54 | another keypad to the side of your
content allowing us to keep it on screen
| | 01:59 | while still being able to
interact with the devices keypad.
| | 02:03 | The last set of tools simply allows to
rotate the device, allowing us to see
| | 02:08 | how potentially our content will
look when our phone is viewed either in
| | 02:11 | portrait or landscape. We can also
zoom in and zoom out on that content. The
| | 02:17 | Emulator window is where
all the action takes places.
| | 02:21 | It's how we view that content as well
as perform simple actions like Pause,
| | 02:24 | Play and Restart, Rotate and Zoom
but also in more complex actions like
| | 02:29 | Creating Video and Screenshots, these
controls within the Emulator window a
| | 02:34 | once that you will use a lot more
often than what you first might think.
| | Collapse this transcript |
| Overview of the feature windows| 00:00 | As well as the panels and device
lists that we have seen in the Device
| | 00:03 | Central's user interface, there are few extra
windows that I would like to tell you about.
| | 00:07 | In this movie we will take a look at
the Flash Output, the Log and the Script
| | 00:11 | Editor windows. We have actually seen
the Log window once before. It's the
| | 00:15 | window that launched from the
Emulator controls when we want to view our
| | 00:18 | snapshots. We can also use this same
window through the Window > Log Menu
| | 00:23 | option, Ctrl+L on the PC
or Command+L on the Mac.
| | 00:27 | The Flash Output window is similar to
the Output window we have in Flash CS4
| | 00:31 | when we are creating non-mobile Flash
content. It's where we see trace statements
| | 00:35 | outputted to as well as messages
coming back from the Flash Lite player.
| | 00:39 | To view the Flash Output window with some
content inside, let's emulate our Flash
| | 00:43 | file from the 03_05 exercise file.
Double-click the phone to make sure we have
| | 00:49 | downloaded it, select our SWF
file and click the Test File button.
| | 00:56 | Now it's a matter of Ctrl+T for the PC,
Command+T on the Mac or use the Window
| | 01:02 | > Flash Output menu option. The
application that we have running has got some
| | 01:06 | data being loaded in externally and
the ActionScript that we have written is
| | 01:10 | giving us some feedback via the Output
window. This is a real handy window to
| | 01:13 | have to see what's going on in
our applications behind the scenes.
| | 01:16 | Lastly there is this Script Editor
window. In Device Central CS4 we can write
| | 01:21 | test scripts to run against their
content and we manage these scripts through
| | 01:25 | the Script Editor window. Opening
this window can be done in the number of
| | 01:28 | ways, keyboard shortcuts like Ctrl+A
for the PC, Command+A on the Mac while
| | 01:33 | going though the Window > Script Editor
Menu option or by double-clicking on an
| | 01:38 | Automated Test Script from
the Automated Testing panel.
| | 01:41 | Don't worry at the moment we are
still in the Overview mode. We will take a
| | 01:46 | much more in-depth look at automated
test groups in its own movie later on. As
| | 01:49 | well as device libraries and profiles,
the Emulator window and interacted
| | 01:54 | panels, we also have a number of
windows that we can access in Device Central.
| | 01:59 | Simple windows like the Flash Output
window, perfect for getting the content to
| | 02:03 | tell us what's happening in the
background. The Log window for managing
| | 02:07 | snapshots and the Script Editor
window for managing out automated scripts.
| | 02:14 | All of these facets within the Device
Central IDE combined together to create a
| | 02:18 | comprehensive testing
environment for Flash Lite mobile content.
| | Collapse this transcript |
|
|
4. Creating Documents in Device CentralSetting essential preferences| 00:00 | Within Device Central there are number
of preferences that we can set to help
| | 00:03 | us create and customize in mobile
testing environment. I am going to take you
| | 00:07 | through all of these preferences before
we really get started with Device Central.
| | 00:11 | Let's begin by opening up our
Preferences dialog box, which is Ctrl+K on the
| | 00:16 | PC, Command+K on the Mac or through
the menu, Edit > Preferences. The General
| | 00:21 | tab is where we have our General
Settings. First off we can automatically
| | 00:26 | connect to the Online Library when
Device Central starts. This just means when
| | 00:31 | we launch Device Central it automatically
pulls down any updated profiles from
| | 00:35 | the online library.
| | 00:37 | The default phone ID is setting the
serial number of the device that we are
| | 00:40 | using in our testing. This is good to
having that because we might want to be
| | 00:43 | trying to access this information
through our Flash Lite application. We can
| | 00:48 | also set the number of undo's that we
have within Device Central, as well as
| | 00:52 | being able to change the language
that the Device Central user interface is using.
| | 00:57 | Font Mapping allows us to interact
with the fonts within our application.
| | 01:02 | Setting the default language that the
device is using could be important if you
| | 01:06 | are doing applications that are going
cross-region. We can also choose the
| | 01:10 | fonts that are substituted for device
fonts within our Flash Lite application.
| | 01:15 | We can choose what font is used for
this sans device font, the serif device
| | 01:20 | font and typewrite.
| | 01:23 | In our Login Output panel we can
kept him and the space that used by our
| | 01:27 | snapshot tool, we can also check to
automatically clean this snapshot tool
| | 01:31 | whenever we quit Device Central. We
can keep the number of snapshots that are
| | 01:35 | used in the single automatic testing
sessions and we could also automatically
| | 01:39 | clear our Flash Output window
whenever we reload a new SWF file.
| | 01:43 | This can be really handy because
output window content from previous testing
| | 01:48 | can make the window quite cluttered and
our Script Editor panel is very similar to
| | 01:52 | Flash CS4 when we are setting the
options for our Actions panel. We can change
| | 01:56 | the type of font that's used for our
code, some of its properties such as color,
| | 02:02 | and we can also change some presets
styles for different types of text that
| | 02:05 | appear in our editor.
| | 02:07 | For example keywords appear as blue
whereas error text appears as orange, a good
| | 02:14 | way for separating out different types
of code. The code behavior options relate
| | 02:19 | to automatic code completion and the
way that our text responds when we are
| | 02:23 | typing it and dragging it
within the Script Editor window.
| | 02:26 | Every good software application has
preferences and Device Central is no
| | 02:30 | exception, you have the ability to
change the most basic of preferences like
| | 02:34 | what color the font is the Output
window, through the settings that can
| | 02:37 | impact the application that you are
testing such as the device serial number
| | 02:41 | and the default language.
| | Collapse this transcript |
| Starting a new Flash document| 00:00 | Sometime with Flash Lite development,
you want to start new project from the
| | 00:03 | point of view of the devices that you
will be targeting. In this lesson I will
| | 00:07 | show you how Device Central can
initiate the creation of a new Flash document
| | 00:11 | based on these devices. When we want to
create a new document from within Device
| | 00:15 | Central we go through the File
> New Document In menu option and then
| | 00:20 | chose the appropriate application.
| | 00:22 | In this example it will be Flash. At
the top of the screen we have a number of
| | 00:26 | options that are specific to creating
a new Flash document. We can chose what
| | 00:30 | player version of Flash Lite we will
use and in this case we will chose Flash
| | 00:34 | Lite 3, what version of ActionScript we
will use, ActionScript 2, and what type
| | 00:40 | of content we will use. And I'll leave this
as Standalone Player. You will notice when we
| | 00:43 | mode those changes the Local and
Online Libraries were dynamically changing,
| | 00:48 | giving us the available
device for those options.
| | 00:51 | If I go back and choose Flash Lite 2, we
can see the device list change. But I am
| | 00:56 | targeting Flash Lite 3. Now that we
have those basic option set, I want to choose
| | 01:02 | the target devices we'll use. I have
a device set here called Standalone
| | 01:06 | Flash Lite 3, which contains the
profiles of the devices I want to use. I can
| | 01:11 | simply choose that device set and get
information about all those 3 phones.
| | 01:16 | At the moment it's telling me, I only
have 2 out of 3 matching devices based on
| | 01:20 | the options that I have already set.
This is because with Standalone Player
| | 01:23 | these first two devices have one Stage
size but this third one has a different one.
| | 01:27 | If I want to check Set to Fullscreen
then all 3 devices match. This is
| | 01:33 | because in full screen mode
they all have the same screen size.
| | 01:36 | I could also check the Custom Size
for All Selected Devices box. This
| | 01:41 | overwrites any device setting that I
have and forces the document to open with
| | 01:45 | the certain width and height, but for
now I am going to leave it by based on my
| | 01:49 | devices and the last thing I'm going
to do is simply to hit Create.
| | 01:54 | This automatically opens up Flash CS4
and starts with a new document with the
| | 02:00 | properties already set for me. You can
see it through the Properties panel that
| | 02:04 | I am using the Flash Lite 3 Player,
ActionScript 2 and that my Stage size is
| | 02:09 | set the 240x320, matching the devices
that I had back in Device Central, and
| | 02:14 | because I have set it to Fullscreen
its automatically added the ActionScript
| | 02:17 | for me that does this
when I run my application.
| | 02:20 | I could just as easily as gone through
that same process starting from here in
| | 02:26 | Flash CS4. If I choose File and New, I
can select Flash File Mobile from the
| | 02:34 | New Document dialog box. Making that
option throws me back directly into the
| | 02:39 | Device Central to go though the same
process of choosing devices and choosing
| | 02:43 | our default settings.
| | 02:44 | Devices Central CS4 is part of a wider
workflow with other applications in the
| | 02:49 | CS4 suites but none are more tightly
integrated than Flash CS4. We are not
| | 02:54 | only able to crate a blank Flash file
that has this Stage size attributes that
| | 02:58 | match your devices but also preset
publish setting for the Flash file, such
| | 03:02 | Target Flash Lite Player
and version of ActionScript to use.
| | Collapse this transcript |
| Starting a new Photoshop document| 00:00 | Photoshop users who are involved in
designing for mobile now have hooks into
| | 00:03 | Device Central. In this lesson I
will show you how these two applications
| | 00:08 | work together. Starting from within
Device Central, we can go to the File >
| | 00:12 | New Document In menu option
and choose Photoshop from a list of
| | 00:15 | applications. This open up our New
Document panel. Though we have a lot fewer
| | 00:20 | options than what we had when we
a created for the Flash document.
| | 00:23 | The main thing that we can change when
starting a New Photoshop document is the
| | 00:27 | content type. We can change Full Screen,
Screen Saver, Wallpaper or a number of
| | 00:33 | options that are more relevant for
Japanese phones. So now I am going to change
| | 00:37 | Wallpaper and for my target devices I
am going to choose this Wallpaper Phones
| | 00:41 | device set. It contains three Phones
and my New Document panel is telling that
| | 00:46 | all three phones have a matching Stage
size when I am choosing the wallpaper
| | 00:50 | content type. Other options such as
Color Mode, Resolution, and Color Profile
| | 00:57 | are preset for me and I can't change those.
| | 00:59 | I could change out document size by
checking this Custom Size for All Selected
| | 01:04 | Devices option. This will overwrite
the devices Stage size and setup my
| | 01:09 | Photoshop document with a set Width and
Height. But I want to use my phones and
| | 01:14 | so I hit Create and it takes
me straight into Photoshop.
| | 01:20 | My new Photoshop file has been set up
with the Stage type as was set from our
| | 01:25 | devices in Device Central. Now as a
Photoshop designer I can go ahead and start
| | 01:29 | creating more static mobile phone
content and testing it back within the Device
| | 01:33 | Central. For the fact of this exercise
I am simply just going to put some text
| | 01:36 | on the Stage.
| | 01:37 | Not exactly the nice mind blowing piece
of mobile content but it's good enough
| | 01:47 | for this demo. From here when I want
to see my content back in the Device
| | 01:51 | Central I can choose file and save for
web and devices. This now opens up this
| | 01:57 | Preview dialog box where I can change
some if the export settings for my file.
| | 02:02 | It also gives me this Test in
Device Central button in the bottom left.
| | 02:07 | Clicking on that takes me back
straight into Device Central and shows more
| | 02:11 | content in the context to the device
that we have set up to the default device
| | 02:15 | in the Device Central. You'll
notice if we can keep the Content Type as
| | 02:19 | Wallpaper just as we set back in a New
Document dialog box. Photoshop users can
| | 02:24 | go back and forward between Device
Central and Photoshop until their artwork is
| | 02:29 | looking great within the device. To
flip between the two applications you can
| | 02:33 | quickly use Ctrl+Shift+O on the PC,
Command+Shift+O on the Mac or go File >
| | 02:39 | Return to Photoshop. Photoshop users
have this roundtrip design workflow with
| | 02:45 | Device Central to help them when they
are working on mobile content. It's great
| | 02:49 | for designers working on static
contents or on design mockups that can be
| | 02:53 | passed on to a Flash developer at a later stage.
| | Collapse this transcript |
| Starting a new Illustrator document| 00:00 | Illustrator users who are involved in
designing for mobile products also have a
| | 00:04 | way of working directly with Device
Central. In this lesson I will show you how
| | 00:08 | these two applications work together.
| | 00:10 | From within Device Central to start a
new Illustrator document, it's a simple
| | 00:14 | matter of File > New Document In and
choosing Illustrator from our list of
| | 00:18 | applications. This opens up our New
Document panel. The main option that we
| | 00:24 | have to play with is Content Type. I
can target devices that have a content
| | 00:28 | type of Fullscreen, Screen Saver or
Wallpaper as well as these other more
| | 00:33 | Japanese phone related options, but I
am going to leave mine set to Wallpaper.
| | 00:38 | Now to choose all the devices that I
want to target for this document, I will
| | 00:41 | go to my Wallpaper Phones device set.
This contains three different phones, but
| | 00:46 | when I have a Wallpaper Content Type
they all have a matching Stage size.
| | 00:51 | Other options to these devices such as
Color Mode and Resolution a pre set for
| | 00:55 | me when I am starting an Illustrator
file. If you are starting to think that
| | 00:59 | all of these options are looking
very similar to Photoshop, then you are
| | 01:02 | absolutely right. Starting in
Illustrator or Photoshop document from within
| | 01:06 | Device Central pretty much gives us
exactly the same options. I can overwrite
| | 01:11 | the screen sizes of my target devices
by clicking on the Custom Size for All
| | 01:15 | Selected Devices box. This will force
my Illustrator document to open with
| | 01:20 | these dimensions. I am going to leave
mine not set to target these devices and
| | 01:25 | simply come down here and
click the Create button.
| | 01:27 | This will start Illustrator CS4 and
start me off with a new document that
| | 01:34 | matches the Stage sizes for my target
devices. From here you can go and start
| | 01:38 | designing your mobile content and
preview it back in Device Central. To see how
| | 01:43 | that works, I am just going to add
some simple content to this document.
| | 01:52 | Pretty exciting stuff for a mobile
wallpaper I'm sure you will agree, but
| | 01:56 | it's good enough for this demo. From
here to preview it back in Device Central,
| | 02:00 | it's a very similar workflow to
Photoshop. I will go to File > Save for Web &
| | 02:06 | Devices. The dialog box that I have
got here now allows me to set some export
| | 02:10 | settings for the file, but what I would
really want to do is click on this Test
| | 02:14 | in Device Central button in the bottom
right. This takes me directly back into
| | 02:19 | Device Central and using the default
device within Device Central, it shows me
| | 02:23 | my Illustrator content in context of
the phone. It's even get my Content Type
| | 02:28 | set as Wallpaper, just as I had
set back in my New Document panel.
| | 02:32 | From here you would want to go
backwards and forwards between Device Central
| | 02:36 | and Illustrator until you design it
right. To do that you can go Ctrl+Shift+O
| | 02:41 | for PC, Command+Shift+O for Mac or use
the File > Return to Illustrator option.
| | 02:46 | Illustrator users, in the same way as
Photoshop users, have this roundtrip
| | 02:50 | design workflow within Device Central,
so that you can preview your mobile
| | 02:54 | content as you are designing it.
| | Collapse this transcript |
| Starting a new After Effects document| 00:00 | After Effects users who are creating
video content for playback on mobile
| | 00:03 | phones can start a new project from
within the Device Central. In this lesson I
| | 00:09 | will show you how these two
applications work together.
| | 00:11 | To start a new After Effects project in
Device Central it's a simple matter of
| | 00:15 | File > New Document In and
choosing After Effects from our list of
| | 00:20 | applications. The main thing we are
setting here in the New Composition panel
| | 00:24 | are the target devices. I have got
three phones already selected in my Video
| | 00:28 | Fines Device Set, and if I choose my
Video Phones Device Set I get all three of
| | 00:34 | these phones listed out on my New
Composition panel. I can see from here that
| | 00:38 | they all have different sizes when it
comes to the playback of video. This is
| | 00:42 | okay because we will handle this
later on in After Effects. I also want to
| | 00:46 | check the Create Master Composition box.
And then go down and click Create to
| | 00:51 | open up my new After Effects project.
| | 00:53 | So now here we are in After Effects
with our new project open and within the
| | 00:59 | Project panel we have compositions
already set up for Device Master as well as
| | 01:04 | the phones that we have selected in the
device set. Adding these to my projects
| | 01:09 | I can now create video content that
will playback specifically for the screen
| | 01:14 | sizes of these devices.
| | 01:15 | For After Effects users getting into
mobile video content this is a great
| | 01:19 | starting point for your project, and a
way to make sure that your video will
| | 01:23 | suit all of your target devices.
| | Collapse this transcript |
|
|
5. Managing DevicesCreating and sharing device sets| 00:00 | Even though devices can be organized
into libraries, having a long list of
| | 00:04 | devices to work through isn't the
easiest way to group together devices that
| | 00:08 | you want to target first for specific
project or a piece of content that you
| | 00:11 | are developing. Here we will go into
more detail on Device Sets and show you
| | 00:15 | how this feature goes beyond just
grouping devices but also into sharing them
| | 00:19 | between developers.
| | 00:20 | Imagine this scenario. You are working
on a mobile game and you want to get
| | 00:24 | another developer involved in some
testing. Instead of having to tell them
| | 00:27 | explicitly which devices you are
testing for, you can create a device set,
| | 00:31 | which contains the profiles of your
targeted devices, and send that along to
| | 00:34 | them. Sound good? Well, let's see
how it's done. At the top left of the
| | 00:39 | Device Central interface you see the
Device Sets panel. There's already a
| | 00:42 | sample set in there by
default but you can have a look at.
| | 00:45 | There's a few different way for us to
create a new device set. One is through
| | 00:50 | the Devices > New Device Set menu option.
Let's go to that new set Project ABC.
| | 00:59 | We could also have clicked on the New
Device Set icon, or right mouse click on
| | 01:04 | the Device Set panel. Now that Device
Set is named we can drag devices from
| | 01:09 | either the online or local libraries
and drop them in the Device Set folder.
| | 01:15 | This doesn't removes from the local
library at all, just copies them into our
| | 01:18 | Device Set. Another great way to
create a device set is to select or multi
| | 01:23 | select devices from the local library
right click and choose New Device Set
| | 01:27 | from selection. You can even choose an
entire category from your library. So in
| | 01:32 | this case I will create a New Device
Set containing the profiles that are
| | 01:35 | already in the Flash Lite
folder here in my local library.
| | 01:38 | Now you can see a New Device Set
that's been created and all of those devices
| | 01:43 | are already in place. Once you have
created a device set it's there into Device
| | 01:48 | Central to be quickly referenced,
feeder and testing. But what about sharing
| | 01:52 | that set with other developers? Let's
choose our Project ABC device set an
| | 01:59 | Export that through the File > Export
Device Set menu option. Let's go to that
| | 02:07 | device set file Project ABC. That will
be saved as a Device Set file or advs
| | 02:16 | file. Now you can type that file and
you can send it to another developer for
| | 02:21 | them to install their own Device
Central. That Importing process is as simple
| | 02:25 | as going to the File > Import and Device Set.
| | 02:30 | Let's import into Device Central
Project XYZ. You can see that now it's
| | 02:35 | appearing in a Device Set panel but
there is a difference. We have got a
| | 02:39 | question mark on the folder icon.
This just means that the profile that is
| | 02:43 | contained within this device set
hadn't been downloaded yet to the local library.
| | 02:46 | After going through them one at a
time or simply right mouse click on the
| | 02:51 | Device Set name and choose Download
to Local Library. They have all been
| | 02:56 | installed from your online library
and are ready to use now in our testing.
| | 03:01 | Grouping devices in custom working
Device Sets along with other features in
| | 03:05 | Device Central are aimed at making
the testing workflow more efficient for
| | 03:09 | single developers as well as development teams.
| | Collapse this transcript |
| Creating and sharing device profile packages| 00:00 | As well as giving us the ability to
share device sets, which are groupings of
| | 00:03 | devices, Device Central can also
package the actual device profiles themselves.
| | 00:07 | Here I will show you what to with creating
and sharing the device profile packages.
| | 00:13 | For anyone who has been using Device
Central CS3, you would have already
| | 00:16 | interacted with the device profiles
packages before. Adobe has been updating
| | 00:20 | the profiles and listed devices, using
these packages since it was released.
| | 00:25 | Profiles are made up of XML files
that hold all of the device specifications
| | 00:29 | plus the graphics of design and the
positioning of the active buttons. Device
| | 00:34 | profile packages are a way to
distribute these files and also update existing
| | 00:38 | ones with new specifications.
| | 00:40 | To create a device profile package, we
need a device profile to exist in our
| | 00:44 | local library. We can select a
single device, multiple devices, or even a
| | 00:49 | device set, and select File > Export
> Device Profile Package. Each package
| | 00:54 | that we export has a title and a
comment. This is what seen by somebody when
| | 00:59 | they import this package later on,
and it's just guided to what the package
| | 01:02 | contains. So we'll give this profile
package title of Motorola RAZR, and in the
| | 01:09 | comment box, we'll say it contains, 2
Motorola RAZR profiles, and click Export.
| | 01:17 | Now we are prompted to save the
package. So we will just call this device
| | 01:21 | package Motorola, and click Save. Now
that file is ready to send off to another
| | 01:27 | developer, what they'll do when they
receive the package is to import it into
| | 01:31 | Device Central. Simply follow the File
> Import and Device Profile Package menu
| | 01:37 | option and we can load in a device
profile package from there. Let's bring into
| | 01:42 | Device Central now our
nokiaNSeries device profile package.
| | 01:47 | The dialog box that we see now has the
title and description that someone has
| | 01:51 | put in this package for us, as well as
a list of devices that's contained. The
| | 01:54 | profiles of the devices in this profile
package are matched up against the ones
| | 01:59 | that we have in our local library
already, and we can see that these profiles
| | 02:03 | are the same version of what we
already have. Alternatively, it could be
| | 02:07 | telling us that they are
updated or brand-new profiles.
| | 02:10 | When I am importing this profile package,
I can choose individual devices or I
| | 02:15 | can just click to install all. Now
when I click Install & Relaunch, Device
| | 02:21 | Central is going to bring those
profiles in and start again. I'll close then my
| | 02:25 | start screen, and view my profiles.
Device Central's device list is made up
| | 02:30 | with profiles of all Flash Lite
enabled devices. When we create a device
| | 02:34 | profile package, we are packaging up
all of the XML and image file that make up
| | 02:39 | a device profile, and convert them
into something that could be shared and
| | 02:42 | installed by others. It's just another
example we have had, the Device Central
| | 02:46 | aids the development team's workflow.
| | Collapse this transcript |
|
|
6. Projects in Device CentralUnderstanding projects| 00:00 | The more time you spend in mobile
development, the more time you'll end up
| | 00:03 | spending in Device Central.
Understanding this, Adobe has introduced projects
| | 00:08 | to the Device Central CS4. In this lesson
I will tell you what they are all about.
| | 00:11 | The new Project panel functionality in
Device Central CS4 is designed to give
| | 00:17 | mobile developers a quick reference to
all of the assets that make up a mobile
| | 00:21 | project, the profiles of the devices
that are being targeted, as well as giving
| | 00:25 | them some access to time saving tools.
Just by way of helping this out with
| | 00:29 | this high level overview of projects, I
am working from the 06_01 Project file.
| | 00:35 | When creating mobile content, you won't
normally just have one single FLA file;
| | 00:40 | you might have some artwork design
files such as Photoshop or Illustrator
| | 00:43 | files. By having these at your
fingertips and possibly organize that into
| | 00:47 | folders if that helps, you can
easily launch those into their respective
| | 00:51 | editing environments to
make changes as you need.
| | 00:54 | Projects also allow you to keep handy
device sets or listed device profiles
| | 00:59 | that you are focusing on for particular
project. Again, having this information
| | 01:03 | coupled with all the other files that
relate to a project can keep things in a
| | 01:07 | more accessible format.
| | 01:08 | Lastly, there are some commonly
performed tasks that can be auctioned through
| | 01:12 | the Project panel. There are some that
come pre-installed with Device Central,
| | 01:16 | but you can actually write your own
that might be more particular to you and
| | 01:20 | workflow and have those ready to use on
the files that exist in your projects.
| | 01:23 | We will look at tasks specifically in
their own movie later in the course.
| | 01:28 | So just to recap, projects are a new
feature of Device Central CS4. They're
| | 01:33 | designed to keep together links of
relevant files that are associated to a
| | 01:37 | particular application or product that
you might be creating and give you easy
| | 01:41 | access to not only those files but also
to target devices and a number of tasks
| | 01:45 | both supplied and custom-made
that you can apply to these files.
| | Collapse this transcript |
| Creating projects and manipulating assets| 00:00 | The functionality of projects in
Device Central CS4 is designed to make our
| | 00:04 | lives a little bit more easier when it
comes to developing mobile applications.
| | 00:08 | Let's take a look now at how we use the Projects
panel and the features that are reliable tools.
| | 00:12 | To begin with, we need to create a new
project. We do this through the File >
| | 00:18 | New Project menu option or Ctrl+N on
the PC or Command+N on the Mac. From the
| | 00:24 | way that Device Central has set up
those menu options and shortcuts, basically
| | 00:28 | saying that something new in Device
Central that you create is by default a
| | 00:32 | project, you can get a sense that this is an
important feature that Device Central now offers.
| | 00:36 | First we need to save that project
and I am going to call this one 06_02
| | 00:44 | and save that into our Chapter 6 exercise
files folder. Let's take a look now at
| | 00:49 | each of the three sections of a
project in more detail. The first section is
| | 00:53 | all about the files that are part of
this project, with the Add Resource Files
| | 00:57 | icon, we can add any kind of file that
is relevant to this project and then be
| | 01:02 | able to launch those later
on from the Project panel.
| | 01:05 | Now from my Assets folder I will
choose gswell_animation.swf and its
| | 01:09 | accompanying FLA file, as well as gswell
_animation_design.doc. Multi-select all of those
| | 01:17 | and then click Open. I would like
to organize these assets a little
| | 01:21 | better inside my project file, so I
am going to create a new folder called
| | 01:25 | Documents and then click and drag
my Word document into that folder.
| | 01:31 | My source FLA file should also go into
its own folder, which I will just call
| | 01:36 | Source. Click and drag my FLA into our
new Source folder that makes it a bit
| | 01:45 | easier to read. Organizing in folders
really becomes a lot more important the
| | 01:49 | more files you have.
| | 01:51 | The next section is all about the
devices that are relevant to this project. We
| | 01:55 | can add devices from either the Local
or the Online Libraries. But just a note
| | 01:59 | to point out, if we add one from an
Online Library that hasn't been installed
| | 02:02 | to the Local Library yet, that will
happen automatically when we add it through
| | 02:06 | our project file.
| | 02:08 | We can also drag entire Device Sets
through our project file or create Device
| | 02:13 | Sets within our project, either from
the new device set icon or by right mass
| | 02:18 | clicking in the Device Set
section of the project panel.
| | 02:20 | Now that we have got our files and our
devices sort about, let's take a look at
| | 02:26 | Tasks. This is where we can apply
commonly used tasks to files within the
| | 02:31 | project. Device Central ships with a
number of tasks already. These include
| | 02:36 | Send to a Bluetooth Device, Copy File
to a location or Send to an FTP Server.
| | 02:41 | Later on we will look at how we can
create our own tasks, but for now let's
| | 02:45 | just use one that's
already been installed for us.
| | 02:48 | Let's say at various times throughout
the development we want to back up or
| | 02:51 | move a copy of the compiled Flash
Lite file through another location on our
| | 02:55 | Desktop or the network. I will create
an instance of the Copy File To task and
| | 03:00 | get our new task dialog box. It asks me
where I want to copy this file to. So I
| | 03:05 | can choose just to put that into our
Exercise Files and into Chapter 6. I can
| | 03:12 | then add a file from my Project panel
to use during this copying process and I
| | 03:17 | will choose the SWF file that we
compile each time. Now just click Save.
| | 03:24 | We can have multiple instances of the
same task in a project, just differing by
| | 03:28 | their name. So I am going to call this
task Copy SWF. Throughout the testing
| | 03:35 | process, when I want to run that task,
I simply click the Run task button. It
| | 03:39 | will give me the dialog box again just
to confirm what it's about to do. But I
| | 03:43 | could also disable this by un-
checking this box. If now I click Save & Run,
| | 03:49 | it's giving me a confirmation window
to say that that has been successfully
| | 03:53 | copied down, and click Done.
| | 03:56 | Imagine how you could use this with
uploading compiled Flash Lite content to a
| | 04:00 | Web Server that was also being
accessed by customers to buy that content. A
| | 04:05 | real simple way of testing and
uploading new versions of the content, or we
| | 04:09 | might want to send a file to a
handset via Bluetooth to try that on a real
| | 04:12 | device; again, a real time saver.
| | 04:14 | So now that we've taken a closer look
at projects, I hope you can see how they
| | 04:18 | can help us to perform common task
during our development and testing workflow.
| | 04:23 | We have seen that we can add and
organize any type of file that's relevant to
| | 04:26 | our projects. We can add Profiles and
Device Sets to our project and we can
| | 04:31 | also set up commonly run tasks that
we can perform on the files within our project.
| | 04:36 | Projects aren't just a new feature
of Device Central CS4, they are a new
| | 04:39 | paradigm for using the tool and
improving the Flash Lite developers workflow.
| | Collapse this transcript |
|
|
7. Basic Interactions Through PanelsBasic panels| 00:00 | Device Central gives us the ability to
interact with our mobile content through a
| | 00:04 | number of panels. In this lesson we
will start by looking at the basic panels,
| | 00:08 | those being Content Type, File Info,
Keypad and Persistent Storage. Panels are
| | 00:14 | only available to us when we are
viewing content within the Emulator.
| | 00:17 | Now I am working from my 07_01
exercise file, now I will double-click on my
| | 00:23 | device to make sure it's the default
one we'll use and then emulate my file
| | 00:27 | using the Test File in Emulator button.
Now you can see our Emulator window and
| | 00:33 | the panels over here on the right hand
side. Let's start at the top with the
| | 00:37 | Content Type panel.
| | 00:38 | The Content Type panel tells the
Emulator what type of content we are intending
| | 00:42 | to emulate. This is linked to the
Flash Lite implementations for each device.
| | 00:48 | It could be Flash Lite in the Browser,
as a Screen Saver, Standalone Player or Wallpaper.
| | 00:54 | These are most common implementations
and down below are some options that are
| | 00:58 | little bit more relevant to specific
regions such as Japan. If we were to
| | 01:02 | choose a Content Type that's not
supported on this particular device such as
| | 01:06 | Wallpaper, you would see that we get
this error message here on the screen as
| | 01:09 | well as the message in that panel
which says, this particular type of content
| | 01:14 | is not supported on this device. You
might see this when you first open up a
| | 01:18 | file and have your Content Type set to
something else. So simply changing it to
| | 01:22 | the correct type of content
will fix that problem for you.
| | 01:25 | The next panel is File Info. This
just gives us some basic information back
| | 01:30 | about the file that we are emulating at
the time. It gives us the name of that
| | 01:34 | file, how big it is, the version of
Flash Lite that it's been published for and
| | 01:39 | also its dimensions. Next we
will look at the Keypad panel.
| | 01:43 | As you can see, sometimes in the
Emulator the device is quite tall and the
| | 01:47 | keypad goes off the bottom of the
screen. If that's the case and we want to
| | 01:51 | interact with those keys but keep out
contents still in view, we could use this
| | 01:55 | Keypad panel to interact with our
content through the same keys. Remember,
| | 02:04 | these panels as well are collapsible
just by clicking the arrow icon next to
| | 02:08 | the panel name.
| | 02:09 | The last panel we want to have a look
at is Persistent Storage. Flash Lite
| | 02:13 | applications can right darted to the
device. Each device allocates a certain
| | 02:17 | amount of memory for this. So the
Persistent Storage panel just shows us how
| | 02:22 | much memory we have already taken up
out of the total amount that the device is
| | 02:26 | allocated for us. If we are working
with applications that do this, this
| | 02:30 | progress bar is quite important.
| | 02:32 | So those are the basic types of panels
within Device Central. Just to recap the
| | 02:37 | Content Type sets the type of content
with that we're emulating within the
| | 02:40 | Device. File Info gives us some
information about the file itself. Keypad
| | 02:47 | allows us to interact with the
application through a different set of keys.
| | 02:50 | Persistence Storage shows us how much
of our available memory is taken up by
| | 02:56 | the application shared objects.
| | 02:57 | Now that you know about these basic
panels, you are ready to explore some of
| | 03:01 | the more powerful Device Central
panels that are available to us.
| | Collapse this transcript |
| The Display panel| 00:00 | Remembering that Device Central is
not just about seeing our content on a
| | 00:03 | virtual device but also simulating how
it works in the real world, let's now
| | 00:08 | take a look at the Display and Scaling
panels and see what they do to simulate
| | 00:12 | our content being used out in the world.
| | 00:14 | I am working from my 07_02 exercise
file and I am first going to choose the
| | 00:20 | Nokia 3110 and the gswell_static.jpg
file. Click the Test File in Emulator
| | 00:26 | button and I am just going to move my
project file out of the way. Here you can
| | 00:30 | see open our Display, Scaling and
Alignment panels. Scaling and Alignment are
| | 00:34 | only there because we are simulating a
JPEG file; they are not normally there
| | 00:38 | for Flash content. Conversely, there
are some panels that are missing as well
| | 00:42 | because we don't have
Flash content being emulated.
| | 00:45 | The Scaling panel gives us options to
scale our content depending on the size
| | 00:49 | of the device's screen. You can see
that this file is much larger than the
| | 00:54 | device's screen. So we can check to
see what it would look like if it was
| | 00:57 | stretched to fit the screen or to fit
it proportionally. We can also scale it
| | 01:02 | using this slider tool.
| | 01:07 | Different devices might align JPEGs
differently, such as to the left or to the
| | 01:11 | right. You can check what a phone
will do with JPEGs or Bitmap files in its
| | 01:16 | Device Profile. Now let's look at the
Display panel. These options are all
| | 01:21 | about simulating the visual
environment that our phone exists in. Just about
| | 01:25 | all phones have a Backlight these days,
so you can simulate this using the
| | 01:29 | Backlight slider or this Timeout option.
| | 01:38 | We can also simulate reflections
across the phone screen, such as Indoors,
| | 01:42 | Outdoors or bright Sunshine. These
reflections along with the Gamma and
| | 01:49 | Contrast sliders allow us to change
the way our content will look under
| | 01:53 | different visual lighting situations.
Let's just reset those back to zero and
| | 01:59 | take the reflections off.
| | 02:02 | Now let's look at some Flash content in
context to the Display panel. First we
| | 02:06 | will open up our Groundswell weather
application, but we will use the Nokia N95
| | 02:11 | instead clicking on Test file in
Emulator to get our file onto the phone and
| | 02:17 | again move my project file out of
the way. Now you can see in the Display
| | 02:21 | panel, we have two extra options,
Screen Mode and Set to Full Screen. This
| | 02:26 | check box just shows what it would
look like if our Flash file wasn't set to
| | 02:30 | Full Screen. Screen Mode changes the
orientation of the phone screen. This
| | 02:36 | isn't available on all devices but
they are more and more coming out now with
| | 02:40 | the ability to view your
content in portrait or landscape.
| | 02:46 | You can see that as I rotate this
phone into Landscape, my Flash file doesn't
| | 02:50 | rotate with the phone, not a really
good look. This is because there is no
| | 02:54 | ActionScript in the application to
handle this change in screen orientation.
| | 03:00 | Let's choose now instead our gswell_
screen_rotation file and emulate that.
| | 03:08 | When we change this application,
you can see now that the Flash file is
| | 03:13 | rotating with the device. That's
because we have got some ActionScript, which
| | 03:17 | is listening for a change in Stage
size and rotates the content accordingly.
| | 03:22 | Your mobile content in applications
would be used nearly all the time in
| | 03:26 | different environments inside, outside,
and of course, on different devices
| | 03:31 | with different viewing options. Making
sure that your content still works and
| | 03:34 | appears in an appropriate way across
all these variations is really important.
| | 03:40 | The Display, Scaling and Alignment
panels are what we use in Device Central to
| | 03:44 | simulate these various scenarios.
| | Collapse this transcript |
| The Memory panel| 00:00 | One of the biggest killers of mobile
applications can be the memory resources
| | 00:04 | that it consumes. In this lesson I
will show you the Memory panel and how it
| | 00:08 | gives us information we need to see
where there are potential problems in our
| | 00:11 | content which relation to Memory usage.
I am working from my 07_03 exercise
| | 00:17 | file and I have my Nokia N81 8GB set
as my default Device. Let's emulate the
| | 00:23 | Groundswell video application by
clicking on its filename and then the Test
| | 00:27 | File in Emulator button.
| | 00:28 | Here is our Memory panel. The Memory
panel shows us the amount of memory that's
| | 00:34 | being used by our application at any
given point in its life and scrolls along
| | 00:38 | over time, changing in real time as
these changes in the memory consumption. If
| | 00:42 | we pause the application like I have
done here, then the Graph is also paused.
| | 00:48 | The Graph shows us two things; one is
how much memory has been allocated by the
| | 00:53 | device manufacturer and then how
much of that memory is being used.
| | 00:57 | Static Heap memory is what is reserved
by the player from the device when it
| | 01:01 | first starts up and it's generally what
is used first by our application. Once
| | 01:06 | the Static memory is exhausted, the
player then requests additional memory
| | 01:10 | dynamically from the device using
Dynamic Heap memory. Once we use up both
| | 01:14 | allocations though its game over and
the player would crash. So watching this
| | 01:19 | graph for your application is running
is very important to monitoring how much
| | 01:23 | and what kind of memory is being used.
| | 01:25 | Let's restart the application and
watch this graph change over time as I
| | 01:29 | interact with the app. Notice here we
had a sparking memory usage when the
| | 01:44 | video started playing. Now this is a
very simple application. It's not using
| | 01:48 | much memory at all. But the more
complex applications can get up to around 50%,
| | 01:52 | 60% or 70% of memory usage. Anything
beyond that and you started to get into a
| | 01:58 | little bit of trouble.
| | 01:59 | While we are not going to look at
specific development techniques in this
| | 02:02 | particular series, there are some
great resources out there that go into much
| | 02:06 | greater detail on managing memory,
when you are developing your Flash Lite
| | 02:09 | applications. We will include some of
those links in the Resources movie at the
| | 02:13 | end of this series.
| | 02:15 | Being aware of how much memory your
application is using is critical to
| | 02:18 | building a robust and successful product.
The Memory panel in Device Central is
| | 02:23 | where you can see this information in
real time and based on that make some
| | 02:27 | decisions about how you are
developing your content in Flash.
| | Collapse this transcript |
| The Device Status panel| 00:00 | Something that Flash Lite has done is
create a whole new category of mobile
| | 00:03 | content. Something that many of us call
reactive content. Let's see what Device
| | 00:08 | Central can do for us when it comes
to testing out this type of content by
| | 00:12 | using the Device Status panel. I am
working from 07_04 from the Exercise Files.
| | 00:18 | I have got a Nokia 3110 phone set as
default and I am going to emulate the
| | 00:22 | gswell_clock file by selecting it
and clicking on Test File in Emulator.
| | 00:28 | Let's just pause that clock for the
time being and have a look at the Device
| | 00:31 | Status panel. This panel allows us
to change some of the device operating
| | 00:35 | system variables, things that are going
to change over time or could be changed by the user.
| | 00:41 | First off we can set the language
that's being used by the device and we can
| | 00:46 | also change the time zone that's set on
the device clock. This could be really
| | 00:51 | handy if you are creating an
application that goes across region or could be
| | 00:55 | more time based.
| | 00:56 | Next we can change the date on the phone,
clicking on any of the Day, Month or
| | 01:01 | Year and clicking on Up and Down to
change the values. Clicking the Reset
| | 01:07 | button brings it back to the time and
date set by your computer's clock, and
| | 01:12 | just by changing the date we can also
change the time on the device clock.
| | 01:15 | By clicking on Hours, Minutes and
Seconds and using the Up and Down buttons, we
| | 01:20 | can change what's happening within
the device clock. This in turn is being
| | 01:24 | displayed through our Flash Lite
application, which is looking at the clock to
| | 01:28 | get the time.
| | 01:29 | Changing the date and the time, I think,
are two of the most used features in
| | 01:33 | reactive content. So it's great to be
able to change them here in the Device
| | 01:36 | Status panel. Next we can also change
the volume output of the device using the
| | 01:40 | Volume slider.
| | 01:42 | Another common feature of reactive
content is responding to changes in the
| | 01:46 | battery. Through this Battery slider
we can change the simulated level of the
| | 01:50 | battery on the phone. As you can see in
my application the low the battery the
| | 01:55 | more faded the flower in the center
becomes. This is just a simple visual
| | 01:59 | representation of the strength
of the battery at any given time.
| | 02:02 | Our Flash Lite application can also
respond to the phone being plugged into the
| | 02:07 | charger. When my Flash Lite
application detects the charger is there, we get
| | 02:11 | another animation happening
from the center of the screen.
| | 02:15 | Device Central gives you the ability
to simulate changes in variables on the
| | 02:18 | device that you have no control over,
things like the battery, the signal on
| | 02:22 | the clock, all of this happens outside
of your application. The solutions you
| | 02:27 | choose to use in response to these
changes might be functional or could be very
| | 02:31 | creative and visual. This is the flexibility
of the Flash Lite mobile platform in action.
| | Collapse this transcript |
| The Device Performances panel| 00:00 | As you know Device Central attempt to
simulate the way your content appears and
| | 00:04 | performs on a device. In this lesson,
I will show you how this performance
| | 00:08 | simulation is managed in Device
Central using the Device Performance panel.
| | 00:12 | I'm working here from my 07_05
exercise file and I have this Sony Ericsson
| | 00:18 | device set by default.
| | 00:20 | Let's simulate the SWF file by
selecting the file name and clicking Test File in Emulator.
| | 00:27 | I am just going to pause the
animation to start off with and
| | 00:30 | over here on the right showing you the
Device Performance panel. When we play
| | 00:34 | back our content without using Device
Performance, we are playing it back based
| | 00:38 | on the speed of the computer that's
running Device Central, not the simulated phone.
| | 00:42 | In order to get an accurate
representation, we have to calibrate this device.
| | 00:47 | When I click the Calibrate button it
will run a series of tests based on two
| | 00:51 | things, one is the power of the
computer and the other is the power of the
| | 00:55 | simulated phone. What it's trying to
do is find a middle ground to adjust the
| | 00:59 | playback performance of our
content so that it's more realistic.
| | 01:04 | We can then check the Simulate
Performance checkbox in order to play it back
| | 01:08 | using this adjusted speed. This
animation has got a little bit more chunky and
| | 01:13 | slower when we simulated the
performance. The index number on the Device
| | 01:17 | Performance panel told us that
this would probably be the case.
| | 01:20 | Having an index of less than one
means the performance would be slower. The
| | 01:25 | higher the number, the better the
playback is. We can also adjust the playback
| | 01:29 | speed using the Speed Slider, as well
as changing the rendering quality of the
| | 01:33 | Flash Lite Player. The higher the
quality, the more processor that's required
| | 01:37 | to perform the animation.
| | 01:40 | One final point to make to make is
that calibration should be done every time
| | 01:43 | you run a series of tests. Processes
running in the background can alter the
| | 01:48 | way how a calibration test would come
out. So don't just run it once, run it
| | 01:52 | every time you are about to start a
batch of tests using a particular phone.
| | 01:56 | While the Device Performance panel
is designed to give us an accurate
| | 01:59 | indication of how our content will play
back on a device, it's still not a real
| | 02:03 | device, and so should be used with
a certain amount of leeway in mind.
| | 02:08 | It does, however, give us a much
closer perception of performance then if we
| | 02:12 | are just running the SWF file using
the power of the desktop. So from this
| | 02:15 | point of view, it's a very much needed
panel during the development process.
| | Collapse this transcript |
| The Network Status and Performance panels| 00:00 | If you are building a data-aware
Flash Lite application, at some
| | 00:03 | point you are going to need that
application to connect to a server over a
| | 00:06 | mobile Internet connection. This
lesson will look at the Network Performance
| | 00:10 | and Status panels and how they help us
to test this connected content. I have
| | 00:14 | opened the 07_06 exercise file and I
have my Nokia 6500 classic phone set to be
| | 00:22 | the default phone.
| | 00:23 | Let's click on the gswell_weather_
app SWF file and click on Test File in
| | 00:27 | Emulator. If you are not seeing any
content displayed on your phone, it's
| | 00:32 | probably because the content type
isn't set to Standalone Player. Now down
| | 00:35 | below we have our Network Status and
Performance Panels. Our Network Status
| | 00:40 | panel tells our application what type
of network it has, as well as some of the
| | 00:45 | variations in a network connection.
| | 00:47 | We can give our network connection a
name, something like Sprint. Set the
| | 00:52 | generation or the speed of the network.
Select whether we are at home or if we
| | 00:57 | are roaming. And also determine
whether or not that connection is connected,
| | 01:02 | trying to connect, or is not
connected at that particular point in time.
| | 01:06 | You can access these features of
Network Status through ActionScript, although
| | 01:10 | some phones may or may not support the
ActionScript for certain features. One
| | 01:15 | feature though that's generally
always supported is Signal Strength. We can
| | 01:19 | simulate a change in network single
Signal Strength using the slider. As you
| | 01:23 | can see, I have got my application
coded so that when the signal changes I have
| | 01:27 | got an animation that responds
accordingly. As the signal gets weaker the
| | 01:31 | flower rolls across to left and turns red.
| | 01:35 | The Network Performance panel gives us
further information about the status of
| | 01:39 | the network that we have set above. We
can turn the availability of the network
| | 01:43 | on or off and we can also set the
download and upload speeds that might be
| | 01:47 | available on that connection. The
application that we are emulating at the
| | 01:51 | moment pulls in its weather data from
an external web server. So it relies on
| | 01:56 | network connection to do that.
| | 01:58 | You should always assume that
sometimes a network connection might not be
| | 02:01 | available, so how does your application
respond? Well I can uncheck the network
| | 02:06 | available button, come over to my
application and click update, and there you
| | 02:10 | can see that it's handling the
fact that there is no longer a network
| | 02:13 | available. Check it back on, update,
and now we have our weather data back in
| | 02:20 | our application.
| | 02:23 | The Network Performance panel also
shows us the amount of traffic that's gone
| | 02:26 | up and down form our device. We can
also set the latency on that data transfer
| | 02:31 | as well. This traffic count information
is really important to know because in
| | 02:36 | some parts of the world people
pay a lot for data on mobile phones.
| | 02:40 | Data connectivity is becoming much
more of a standard in mobile applications
| | 02:45 | and so monitoring the impact of that
connection on our application is really
| | 02:49 | important to testing in Device
Central. The Network Status panel gives us
| | 02:53 | information about a particular
connection and as well as the signal strength.
| | 02:58 | The Network Performance panel allows
us to turn the network on and off and
| | 03:02 | adjust the speed of the network as well.
Two really important panels within Device Central.
| | Collapse this transcript |
|
|
8. Video Presentations and SnapshotsRecording a video presentation| 00:00 | How often have you thought to yourself,
wouldn't it be great if I could easily
| | 00:03 | create a little video of my mobile
content running? So I could use it as a
| | 00:07 | preview on my website or maybe share
it with others on YouTube. Well, we have
| | 00:11 | got the ability to do just
that within Device Central.
| | 00:14 | Let's take a look at making video
presentations. From my 08_01 exercise file
| | 00:20 | I'm going to use the Nokia 6121 phone,
double-click to make sure that it's
| | 00:24 | installed on my local library, and
then we are going to emulate our weather
| | 00:28 | application by clicking the file and
using the Test File in Emulator button.
| | 00:32 | Previously when we discussed the
Emulator window, we looked at the fact that
| | 00:36 | you could record video
presentations of your Emulator content by simply
| | 00:40 | clicking the video icon button at the
bottom of the Emulator window. Something
| | 00:44 | that I like to do is to take our
content right back to the beginning
| | 00:47 | and pause it before we start recording.
| | 00:49 | I will click the Restart button and
just let it pause there until we start
| | 00:54 | recording our video presentation. When
you are ready to start recording click
| | 00:58 | the video camera icon at the bottom
of the Emulator window and you will see
| | 01:02 | that icon change to include a small
red dot. That indicates that we are now
| | 01:06 | recording. You can now start to
interact with your content. Allow it to
| | 01:10 | animate, interact with it in whatever
way is necessary to get changes happening
| | 01:14 | on the screen.
| | 01:16 | The recording is only seeing what's
being displayed in the Emulator; it's not
| | 01:20 | capturing your mouse movements, just
whatever is being displayed within the
| | 01:23 | context of the phone in the Emulator
window. When you are done, click the video
| | 01:29 | icon a second time to stop the
recording. You will then be prompted to save
| | 01:33 | that QuickTime movie file. So I am
just going to save it into Chapter 8 and I
| | 01:36 | will call it, 08_01 movie and click Save.
| | 01:44 | Now if I browse to that folder, I
should find my QuickTime file and we can play
| | 01:48 | it from there. There we are, our
QuickTime movie. In launching that and playing
| | 01:53 | it I can see all of the interactions
that I saw within the Emulator in Device Central.
| | 01:57 | So there you go, recording video
presentations of your content from within
| | 02:03 | Device Central. Saving out the
QuickTime movie is simple but you might want to
| | 02:07 | take that into something like Flash
Media Encoder to convert it to an FLV and
| | 02:12 | use it in other Flash-based applications.
| | 02:14 | For me, personally, this tool has been
great for creating video previews of our
| | 02:18 | mobile games, so the publishers and
buyers can see them on our website.
| | Collapse this transcript |
| Creating and using snapshots| 00:00 | Along with creating video
presentations, one of the other great features of
| | 00:03 | Device Central CS4 is the ability to
take snapshots of content as it's emulated.
| | 00:09 | In this lesson, I will show you
various features of the Snapshot tool and how
| | 00:13 | they can be of use to you
through the testing process.
| | 00:15 | Let's pull our content up first. From
the 08_02 exercise file, I have got my
| | 00:21 | Nokia N82 set as the default device
and we are going to emulate the weather
| | 00:25 | application by clicking on the Test
File in Emulator button. When we create a
| | 00:31 | snapshot, it's like using a camera to
take a picture of our content at that
| | 00:35 | point in time.
| | 00:37 | To take a snapshot, we look to the
bottom of the Emulator window and find the
| | 00:41 | camera icon. When there is something
in the emulation of our content that we
| | 00:45 | want to take a snapshot of we
simply click the camera icon.
| | 00:48 | You'll notice that there is a highlight flash
that appears around the Emulator window.
| | 00:54 | Let's change what's appearing in our
content and take some more snapshots.
| | 00:59 | To view our snapshots we click on the
Show Snapshots icon next to the Camera.
| | 01:04 | This brings up our Log window; you can
also bring up the Log window by using
| | 01:08 | Ctrl+L on the PC, Command+L on the
Mac, or going via the Window Log Menu
| | 01:14 | Option. The Log window manages
snapshots in a number of ways.
| | 01:18 | First, you will notice that the snapshots are
organized into a row based on the device that was
| | 01:23 | used in the emulation. We can use
multiple devices to capture the same
| | 01:27 | information and have them
captured into different rows.
| | 01:29 | We have got multiple views to look at
our snapshots in the log window. Firstly,
| | 01:35 | we can look at just the snapshots and
see all of the images that were taken
| | 01:38 | during the session. Next, we can
split the view between snapshots and the
| | 01:43 | output window and lastly just view
output by itself. When we are not using a
| | 01:49 | script to take snapshots of our
content, the only information we get in the
| | 01:53 | window is what time the snapshot was taken.
| | 01:56 | You can see here on the left hand side
that the phone that we used to take the
| | 02:00 | snapshots was not using a script to
create the snapshots. We can also see here
| | 02:05 | underneath the phone what the
name of the file was as well as what
| | 02:08 | implementation of the Flash Lite
Player was used; in our case, standalone
| | 02:12 | player. Now this is great to see these
snapshots in the Log window but how do
| | 02:16 | we get them out of here.
| | 02:17 | Well we go up to the Export Snapshot
button and click Export as HTML. I am
| | 02:22 | going to save this HTML package as
weather app and out that into my Chapter 8
| | 02:28 | folder. I will click save and now let's
go and see where that HTML package has
| | 02:34 | been saved and what sort of files we have got.
| | 02:37 | You can see we have got a folder
called weather app, so that was the name of
| | 02:40 | our HTML package. You can see that
the HTML package has been created into a
| | 02:45 | folder called weather app. inside the
folder; we have style sheets that will
| | 02:50 | control the way our HTML page looks.
We have an images folder, which has the
| | 02:56 | three snapshots as well as the image
of the device that we used to take the
| | 03:00 | snapshots. And we have the HTML file.
And if I launch that file you can see the
| | 03:07 | way tat this all combines to
create our export HTML snapshot package.
| | 03:12 | Now from here we could publish this
HTML up to a website or we could use the
| | 03:17 | images individually, for say,
thumbnails or previews on another website.
| | 03:22 | Snapshots are a great way to take a
quick picture of what content looks like at
| | 03:26 | any point in time.
| | 03:27 | Along with video presentations, Device
Central CS4 allows you to capture and
| | 03:32 | record any moment in time during the
testing of your content and gives you the
| | 03:36 | results in a usable and sharable format.
| | Collapse this transcript |
|
|
9. Working with Automated Test ScriptsAnatomy of a test script| 00:00 | Another great new feature of Device
Central CS4 is the automated testing
| | 00:04 | scripts. In this lesson, I will go
through the anatomy of a testing script, so
| | 00:08 | you can see what the main components are.
Automated testing scripts are scripts
| | 00:13 | that are run or recorded by Device
Central CS4 as a way of creating a test for
| | 00:17 | a piece of content. This test is a
scripted series of events that can be run
| | 00:22 | against your content to perform various tasks.
| | 00:25 | With automated testing scripts, you
could write a script that interacts with
| | 00:29 | the content the way that you want,
sets up the device environment, and even
| | 00:34 | then takes snapshots at certain points
so you can see what it looked like, all
| | 00:38 | automatically and exactly the same
every time. And even better than that, you
| | 00:43 | could share it as a test script package
with other developers on your team and
| | 00:47 | get them to run the tests for you.
| | 00:48 | Automated testing scripts for Device
Central CS4 are written as JavaScript. So
| | 00:54 | they even look like ActionScript for
Flash developers, with a number of extra
| | 00:58 | objects that are designed to give you
access to the various elements within an
| | 01:02 | emulated piece or Flash Lite content.
| | 01:05 | These objects make up the Device
Central Document Object Model, kind of like
| | 01:09 | referencing parts and features of
the web browser through JavaScript.
| | 01:13 | Each script generates three basic
functions; the first is the Init funtion,
| | 01:18 | called once when the script is loaded.
Next is the Idle funtion, called as
| | 01:23 | often as possible while the script is
running. And lastly is the Execute Update
| | 01:28 | funtion, called as often as there is
an update to the device screen. The Init
| | 01:33 | funtion is required but only either
Execute Update or Idle has to be defined
| | 01:38 | in the script otherwise
the script won't be executed.
| | 01:41 | Now these aren't the only functions
that you could have in an automated test
| | 01:44 | script, you can run write your own
custom functions that are called from one of
| | 01:49 | these three core functions giving you
a lot of flexibility in terms of what
| | 01:53 | interactions you can create. Let's jump
over into Device Central and see these
| | 01:57 | functions in action.
| | 01:58 | Here is my Script Editor window and up
the top you can see we have got our Init
| | 02:03 | funtion, this gets called as soon as
the script is loaded and to start with we
| | 02:07 | are setting the backlight of the
emulated phone to 100. We are also setting up
| | 02:12 | a set integral to call a function
called take snapshot once every 1000
| | 02:17 | milliseconds.
| | 02:18 | This is a very similar script to
ActionScript within Flash. Next is our idle
| | 02:23 | function and as you can see we don't
even need to have any code within our
| | 02:27 | function, it just needs to be defined.
And lastly is the function that we have
| | 02:32 | written ourself, the Take Snapshot
funtion. This gets called by the set
| | 02:36 | interval once every 1,000 milliseconds
and in this case it will take a snapshot
| | 02:40 | of the emulated content within our
device. Just think though that anything that
| | 02:45 | you can interact with or adjust
through the regular panels or through the
| | 02:48 | emulator itself in Device Central, you
can replicate programmatically using an
| | 02:53 | automatic test script.
| | 02:55 | One interested point is that in
addition to the scripts you can access the
| | 02:59 | Device Central JavaScript DOM from
within your Flash content itself. For
| | 03:03 | example, if you wanted your content to
automatically take a snapshot when it's
| | 03:07 | executing a certain function, you
could use the ActionScript command,
| | 03:11 | fscommand, ExecuteJSCommand,
and then passing as the parameter,
| | 03:16 | emulator.snapshot.
| | 03:18 | This will tell Device Central to take a
snapshot of whatever is being emulated
| | 03:22 | at that particular time. Writing test
documents that are then carried out by
| | 03:27 | others is a common practice amongst
software developers, and one that's now
| | 03:31 | been brought to Flash Lite
developers through Device Central CS4.
| | 03:35 | In this case the automatic testing
scripts in Device Central are specific to
| | 03:39 | the nuances of writing and sharing
test scripts for Flash Lite mobile content
| | 03:43 | in applications.
| | 03:45 | And just finally to recap, remember
that automated testing scripts need to have
| | 03:49 | at least two out of three of their
core functions, Init, Idle, or Execute
| | 03:54 | Update; but beyond these functions we
can also write our own custom functions.
| | Collapse this transcript |
| Recording, playing, and writing test scripts| 00:00 | Device Central automated testing
scripts can be created in a number of ways
| | 00:04 | before they are used within a testing process.
| | 00:06 | In this lesson, we will explore
creating test scripts and in particular
| | 00:09 | recording one with Device Central.
I'm starting with my 09_02 exercise file
| | 00:15 | and I will begin with my Nokia 3110
device. Double-click on that to make sure
| | 00:20 | it's been downloaded to my local
library and then emulate the weather
| | 00:23 | application by clicking on the file
and then Test File in Emulator and I will
| | 00:28 | just move my Project panel out
of the way for the time being.
| | 00:31 | If you are not seeing anything emulated
in your phone it could be because your
| | 00:34 | content type is not set to Standalone
Player. Here is the Automated Testing
| | 00:39 | Script panel. The first thing we need
to do is to create a new blank script. We
| | 00:44 | can do that in a number of ways,
either by the New Script Icon or by right
| | 00:48 | mouse clicking on the
panel and selecting New Script.
| | 00:51 | I am going to give this new script a
name of demo script. And once I have named
| | 00:58 | it I can double-click on the script and
open up the Script Editor window. I can
| | 01:03 | also open the Script Editor window
either by going Ctrl+E on the PC, Command+E
| | 01:08 | on the Mac or going through the
Window Script Editor Menu option.
| | 01:12 | Here in our Script Editor window we
can see the blank script that's been
| | 01:15 | created for us. It has automatically
put in the default Init funtion as well
| | 01:20 | as the default Idle funtion. Here
within my Script Editor window I have got
| | 01:25 | access to the same folder structure of
scripts as I do on the Automated Testing
| | 01:29 | panel outside in Device Central.
| | 01:30 | Across the top, I have also got some
options such as Check Script and Navigate
| | 01:34 | through the Code as well as viewing
options such as Colorizing Code, Line
| | 01:39 | Numbers and Word Wrap.
| | 01:41 | As I mentioned before, we are going to
record a test script, so let's go back
| | 01:44 | out into Device Central. I will
close the Script Editor and now look at
| | 01:48 | recording from the Automated Testing
panel. To start recording interactions
| | 01:52 | with our content we simply click the
record button and after that anything we
| | 01:57 | do to interact with the content or
change what's visually seen on screen will
| | 02:00 | be recorded into our demo script.
| | 02:02 | So I will click record, start to
interact with my content. I will navigate
| | 02:08 | through the application and perhaps
even add a reflection on to the screen.
| | 02:13 | When I am done interacting with my
content, I want to click the Stop button on
| | 02:16 | the Automated Testing panel. Now if I
double-click on demo script, I will open
| | 02:22 | back up the Script Editor window and
see what's been out in there for me.
| | 02:26 | To begin with it's filled in all of
the default state of the device when we
| | 02:30 | first added recording and then it has
created the execute update function to
| | 02:34 | capture all of the interactions that
occurred with my application. Now that we
| | 02:38 | have these series of interactions
recorded, we can close the Script Editor
| | 02:42 | window and run this script
against a different device.
| | 02:45 | So from my Project panel, I am
going to choose the Nokia 6500 classic,
| | 02:50 | double-click to make it default and
just move my Project panel out of the way
| | 02:53 | again. To run the script on this phone,
I select the script form the list and
| | 02:59 | simply hit the play button. My script
is now being run against a different
| | 03:04 | device and when it's finished it opens
up the Log window. Quite a bit has been
| | 03:07 | traced out there into my Output
window so let's just scroll to the top.
| | 03:12 | As you can see, anything that was
traced to the Output window during the
| | 03:16 | running of the application has been
traced out to the Output window in my log
| | 03:19 | file. This is all specific to that
particular device, I could go and run that
| | 03:24 | script again, against a different
device and potentially find any problems with
| | 03:28 | my application running
across that second device.
| | 03:31 | So as you have seen in this lesson,
Automated testing scripts are a fantastic
| | 03:35 | new addition to the core Device
Central functionality with this new CS4
| | 03:39 | release. Recording and editing them or
writing them from scratch is easily done
| | 03:43 | through the script editor window.
Viewing the results of them in the Log window
| | 03:47 | is just as straightforward.
| | Collapse this transcript |
| Importing and exporting a test script package| 00:00 | As we have seen in other areas of
Device Central, there is a real focus now
| | 00:04 | on how to enable teams of
developers who are working on the same mobile
| | 00:07 | content. Another piece to this
puzzle is the ability to import and export
| | 00:12 | automated testing script packages,
which is what we will look at now.
| | 00:14 | We have previously created a script of
our own but you could do this example on
| | 00:19 | any of the sample scripts that have
been provided for you. To export a script
| | 00:23 | from Device Central, simply select the
script, right mouse click, and choose
| | 00:28 | Export Test Script Package.
| | 00:30 | We could also achieve the same result
by selecting the script, going through
| | 00:35 | File > Export and Test Script Package.
I will choose that and give my test
| | 00:41 | script package a name of Demo Script
and click Save. That script file is now in
| | 00:49 | a format that can be easily
shared amongst other developers.
| | 00:53 | Importing a test script package is
really just the opposite process. We can go
| | 00:57 | through file, import, Test Script
Package. In amongst your exercise files, you
| | 01:03 | should have another test script package
called test network. Let's choose that
| | 01:07 | one and click open.
| | 01:11 | You can now see the Test Network
automated testing script appear in an
| | 01:15 | Automated Testing panel. Double-click
on the script and you can see the content
| | 01:21 | of the script that we have got there
ready to use with our content. Automated
| | 01:23 | test scripts are a valuable piece of
code within the context of performing
| | 01:28 | efficient testing across our content.
| | 01:30 | As we have just seen through the simple
process of importing and exporting test
| | 01:34 | script packages, we have the
flexibility to share the testing workload across
| | 01:38 | multiple developers.
| | Collapse this transcript |
|
|
10. Working with TasksUnderstanding the various components of a task| 00:00 | As developers, we are always
looking for ways to make our time spent in
| | 00:03 | development and testing more efficient.
In this video, I will go into more
| | 00:07 | detail a better feature that we have
touched on briefly before called tasks.
| | 00:12 | We were first introduced to tasks when
we looked at the Project panel. Down here
| | 00:15 | in the bottom of the Project panel is
where we manage these commonly executed
| | 00:20 | tasks that we can apply to
files within our project.
| | 00:23 | There are a few that already ship with
Device Central but we are going to look
| | 00:27 | at creating out own, a task called
Hello World. The first thing to understand
| | 00:32 | though is what are the files that make
up a task. Here in your exercise files,
| | 00:37 | in Chapter 10, you should have a folder
code HelloWorld. Inside the HelloWorld
| | 00:42 | folder are all of the files that
are required to make up a task.
| | 00:46 | The most important file is our task
XML file. This contains the information
| | 00:51 | that Device Central uses to locate
and set up the task for user viewing. It
| | 00:56 | references amongst other things the
icon, the script, and the localization
| | 01:00 | files. Next, is the Task Icon, set up
as a 16x16 pixel PNG file. You can be as
| | 01:08 | creative as you like with this icon,
but keep in mind it will be viewed quite
| | 01:12 | small within the Project panel.
| | 01:13 | Next, is the task's JSX file, or
Extend Script File. Extend Script is an
| | 01:20 | extended implementation of JavaScript
that's used by many Adobe applications
| | 01:24 | that provide a scripting interface.
Later on, we will take a look at this and
| | 01:28 | other files within the Extend
Script Toolkit bundled in with CS4.
| | 01:33 | And lastly, we have got the folders
that include our localization strings or Z
| | 01:37 | strings. These are optional, but we are
going to include these in this example
| | 01:41 | because we want our tasks to be
localized to different languages.
| | 01:45 | Tasks are a clever way that Device
Central can be extended, giving the mobile
| | 01:49 | developer a more flexible approach to extending
the tool and assisting their own workflows.
| | Collapse this transcript |
| Configuring a task| 00:00 | Device Central tasks must have an XML
based descriptive file in order to work.
| | 00:05 | This basic XML file, as well as the
other component files must also be
| | 00:09 | installed into a custom location. On
the Vista operating system this custom
| | 00:14 | location is found via your Username\
AppData\Local\Adobe\Adobe Device Central CS4
| | 00:21 | and then a folder called Tasks, which
you will need to create when you create
| | 00:25 | your first custom task.
| | 00:26 | On Windows XP, you will this
location through C:\Documents and
| | 00:29 | Settings\Username\Local settings\
AppData\Adobe\Adobe Device Central CS4\ and
| | 00:37 | again the Tasks folder. If it's not
there then you need to create it the first
| | 00:41 | time. And finally on the Mac go
via your Username\Library\Application
| | 00:46 | Support\Adobe\Adobe
Device Central CS4 and Tasks.
| | 00:52 | Let's have a look now at dropping our
HelloWorld task files in to one of these
| | 00:55 | custom locations. From within your
exercise files we are looking inside Chapter
| | 01:01 | 10 and here you will find the
HelloWorld folder. Inside are all of the
| | 01:06 | component files that make up our
HelloWorld task. We want to copy this complete
| | 01:11 | HelloWorld folder and drop
it into our custom location.
| | 01:14 | Now I am working on Vista, so I go via
my Username\AppData\Local\Adobe\Adobe
| | 01:25 | Device Central CS4 and since this is
the first time I have created a custom
| | 01:29 | task, I also need to add in my new
tasks folder. So New > Folder, and simply
| | 01:32 | call it tasks. Inside my tasks folder
is where I paste my HelloWorld folder.
| | 01:46 | Let's have a little bit more look at
the description XML file for this task in
| | 01:51 | a bit more detail.
| | 01:51 | You can open this XML file in any text
editor that you like, but for me, I am
| | 01:58 | using Extend Script Toolkit CS4. You
will notice that the task's opening
| | 02:03 | element has a couple of attributes,
one is guid which is a random value that
| | 02:08 | acts as a unique identifier and the
other is the version number of the task.
| | 02:12 | The next element is the general node;
it has a number of children. Title is
| | 02:17 | what appears in the Project window
that shows what type of task this is.
| | 02:23 | menuItem is the text that appears on
the project, new task menu, within the
| | 02:26 | Project panel in Device Central. Yes
and you guessed it tooltip is the text
| | 02:31 | that appears in the task's tooltip.
Try saying that three times fast.
| | 02:36 | Script sets up the past to the JSX
extend script files. Icon sets up the path
| | 02:42 | to the PNG icon file and if we are
localizing the task then we need to set the
| | 02:47 | past to the Z string files that provide
our localization text. Toolbar needs to
| | 02:52 | be set to true in order for the task
to appear in the Device Central Project Toolbar.
| | 02:57 | The next chart is the dialog element
and serves to set up the user interface of
| | 03:01 | the task. The dialog attributes set up
the size of the box. Within dialog that
| | 03:08 | container element determines the layout
and distribution of the user interface
| | 03:12 | elements within the dialog box. If you
have done any work with Adobe Flex this
| | 03:16 | concept of laying out
containers will be familiar to you.
| | 03:21 | The text elements that are also
inside the dialog element and there for the
| | 03:24 | display of text through the static
text elements and also for an input text
| | 03:30 | field wherein this example someone will
be entering their name. You can see why
| | 03:34 | this XML descriptive file is so crucial
to the task. It sets out the file path
| | 03:39 | locations, localized text values for
menu options, and the layout and context
| | 03:44 | of the dialog box that
opens when the task is set up.
| | 03:47 | The XML file for your task along with
the other component files must also live
| | 03:52 | within the task specific folder found
in a specific location based on your operating system.
| | Collapse this transcript |
| Exploring the Extend Script file| 00:00 | ExtendScript is an extended
JavaScript language that's used by many Adobe
| | 00:04 | products when there is an opportunity
for you to customize and extend the
| | 00:08 | out-of-the-box functionality. Here, we
will take a closer look at ExtendScript
| | 00:12 | and how it applies to the HelloWorld task
that we have been creating for Device Central.
| | 00:17 | Whether it be from your exercise files
or where you have installed this task on
| | 00:21 | your local machine, let's open up
the HelloWorld.jsx file. If you have
| | 00:26 | installed CS4, then by default JSX
files will open up in ExtendScript Toolkit
| | 00:31 | CS4, but you can use any
text editor that you like.
| | 00:34 | So let's have a look at what's going
on in our script. First off, we have a
| | 00:39 | custom function called now, which is
just returning the current date as a
| | 00:42 | string. The Install function is
called every time the user creates a new
| | 00:47 | instance of a task by choosing it from
the New Task menu. In this case, we are
| | 00:52 | simply setting the value of one of the
static text fields in the user interface
| | 00:56 | to a string that adds the current date and time.
| | 00:59 | Install is also called each time you
open or create a project for each of the
| | 01:03 | tasks available in the toolbar. The
Configure Function does any work that's
| | 01:09 | necessary to configure the task; it's
called before the config preferences
| | 01:14 | dialog is displayed if you have got
that set to appear before running the task,
| | 01:17 | at the time when the task is run in
Device Central. Here, we are simply
| | 01:23 | changing the value of a message based
on whether or not we have created this
| | 01:26 | task using the toolbar.
| | 01:29 | And lastly, the Execute Function
actually does all of the work, it's in this
| | 01:33 | function that we have the HelloWorld
greeting coded. You can see that we are
| | 01:37 | checking the contents of the input
text field for a name. If we don't find a
| | 01:41 | name, we are substituting that with
world. We are also determining the
| | 01:45 | operating system we are running on and
then springing an alert box to display
| | 01:49 | the concatenated message.
| | 01:51 | Now let's see all of this running
within Device Central. To see our tasks,
| | 01:56 | let's create a new project. File >
New Projects, and as you can see the
| | 02:03 | HelloWorld icon has been added. We
can go down to the bottom section of our
| | 02:08 | Projects panel and add a new
instance of our HelloWorld task.
| | 02:12 | Click on the icon; say HelloWorld and
this is our configuration dialog box. You
| | 02:19 | can see the static text fields as well
as the input text field, which is asking
| | 02:23 | for my name. Now I will just uncheck
this option so that when we run this task
| | 02:28 | it will use the information I have
already given it and just complete the task
| | 02:32 | for us, and click save.
| | 02:35 | Now we give this instance of the task a
name, so this will just be Hello Dale.
| | 02:39 | Task icon instance name, task name.
Now let's run the task and here is the
| | 02:52 | alert box, which has picked up my name
from the configuration settings and also
| | 02:56 | substituted in what
operating system we are running on.
| | 02:59 | ExtendScript gives you much greater
functionality than what we have included,
| | 03:03 | obviously, in this HelloWorld task.
But it should have given you at least an
| | 03:07 | insight into the methodology of tasks
and how ExtendScript makes these pieces
| | 03:11 | of functionality work with Device Central.
| | Collapse this transcript |
| Localization using ZStrings| 00:00 | Given that Device Central is a tool
that's used all over the world, it might be
| | 00:04 | necessary to localize your custom tasks
that you create, if you're planning to share
| | 00:08 | them across languages. ZStrings
are an Adobe convention for defining
| | 00:13 | localization strings. You identify a
string according to its usage in the user
| | 00:18 | interface and specify in the ZString
format. This enables the Device Central to
| | 00:23 | look up the language specific versions
of the string to display to the user.
| | 00:27 | So far in our HelloWorld task, whenever
we have written text that's going to be
| | 00:31 | displayed in the UI or menu options or
text within the dialog box, we have used
| | 00:36 | localized text. This means we have
proceeded the actual text with the
| | 00:41 | $$$/HelloWorld string. Device Central
sees this and knows to look inside one
| | 00:47 | of the language folders to pick
out the right text to display.
| | 00:51 | Let's take a look at the ZString files
and our XML config file in a little more
| | 00:55 | detail to see how this works out. I
have opened up my HelloWorld.xml file into
| | 01:01 | ExtendScript Toolkit CS4, as well as
the ZString files from my US and Spanish
| | 01:06 | language folders within my Hello task
files. Let's take a look at how we set
| | 01:11 | the title of that task.
| | 01:14 | This is how we write a localized
version of the text. By adding the
| | 01:19 | $$$/HelloWorld before the value of title,
we assign a bit of localized version
| | 01:24 | of this in some of the language
folders that you will also find amongst the
| | 01:27 | task folder. Just keep this line of
coding in mind, as we will now look at our
| | 01:31 | localized ZStrings.
| | 01:31 | Here is the ZString for the US
language. Notice this, it's exactly the same
| | 01:39 | value that we had in our XML file. For
installation of Device Central that set
| | 01:44 | to the US English language, this
is what you will see, HelloWorld.
| | 01:50 | Over here in my Spanish ZString file,
this string of localized text will
| | 01:57 | display something different, Hola
Mundo, which I am assuming is Spanish for
| | 02:04 | HelloWorld and the rest of these text
strings will also be replaced in other
| | 02:10 | parts of that task within a
Spanish installation of Device Central.
| | 02:14 | Localization is something that can
assist the deployment of you custom task to
| | 02:19 | other developers and Device Central
users around the world. If I am spending
| | 02:23 | some time looking at the ZString
files and the other components of a task,
| | 02:26 | hopefully you can appreciate how
straight forward localization really is.
| | Collapse this transcript |
|
|
11. Post TestingGetting your content to a device| 00:00 | As I have mentioned before, testing
your content within Device Central only
| | 00:03 | gives you part of the picture. You
should always end up testing your content on
| | 00:07 | a real device. In most cases, the
common way to transfer files across is by
| | 00:12 | connecting your computer to your device
either via a USB cable connection or a
| | 00:17 | Bluetooth connection.
| | 00:18 | No matter the software that you are
using to do the transfer of the files or
| | 00:22 | the model handset that you have; it's
most likely that you will use one of
| | 00:26 | these connection types. Using one of
these connection types would generally
| | 00:30 | mean that you can see your phone via
your Desktop, either as a connected device
| | 00:33 | or peripheral or sometimes even as an
external hard drive. Transferring files
| | 00:38 | then becomes a matter of simply
browsing the file structure of your phone and
| | 00:42 | dragging and dropping your content
into the right location on to the device.
| | 00:46 | If you are connecting via Bluetooth,
you could also see your device through
| | 00:49 | this file explorer view or you can
also send your content to your phone as a
| | 00:53 | Bluetooth message. It arrives on to
your phone's Messages Inbox as a Bluetooth
| | 00:58 | message, which launches the
attached file when it's read.
| | 01:03 | You could, of course, also upload
your file to a web server and browse the
| | 01:06 | mobile Internet on the device to
download it. But this is quite a
| | 01:09 | time-consuming workflow and if your
phone is not using Wi-Fi, it could be quite
| | 01:14 | an expensive one as well, depending
on what you pay for data on your phone.
| | 01:18 | Transferring your files to a device is
an important last step in the testing
| | 01:21 | process. No matter the software or
device, you will most likely be transferring
| | 01:26 | your files via a USB or Bluetooth
connection to your Desktop or perhaps,
| | 01:30 | setting it as a Bluetooth message or
downloading it from the mobile Internet.
| | Collapse this transcript |
| Nokia PC Suite and BREW App Loader| 00:00 | As you may or may not know, some
devices are quite open in terms of their
| | 00:04 | operating system while others are a
lot more locked down, either by the
| | 00:08 | manufacturer or the operator who is
selling those phones in your region.
| | 00:11 | In this lesson, I will give you some
basic information about working with the
| | 00:15 | BREW platform in North America and
look at the Nokia PC Suite solution for
| | 00:19 | getting your files on to a Nokia device.
| | 00:22 | Phones that support Flash Lite in
North America are generally offered by
| | 00:25 | Verizon Wireless and they using the
BREW platform for managing the software
| | 00:29 | that runs and is installed on those
devices, including the Flash Lite Player. I
| | 00:34 | say generally, because there are some
Nokia and Sony Ericsson devices in the US
| | 00:38 | market providing a user base of
Flash Lite enabled devices outside of the
| | 00:42 | operator controlled Eco system.
| | 00:45 | In order to transfer files to a Verizon
Wireless BREW device, you require a few
| | 00:49 | extra things. Firstly, you must be a
member of the BREW Developer Program, as
| | 00:54 | well as being a Certified BREW
Developer. This will give you access to
| | 00:58 | development software such as the App
Loader, which allows you to connect your
| | 01:02 | PC to a Verizon BREW device and
transfer your test files on to it.
| | 01:07 | Here is the BREW Developer website,
access through brew.qualcomm.com. Here you
| | 01:13 | can find the information you need to
join the developer program and become a
| | 01:16 | certified BREW developer. As well as
the additional cost, for many, this is a
| | 01:20 | level of complexity they were
counting on when they started building their
| | 01:24 | Flash Lite content. So again, it pays
to consider what you are developing and
| | 01:28 | for which regions before you start development.
| | 01:30 | For now, I am going to take an easier
path and use my Nokia N95, 8 GB with
| | 01:35 | Nokia PC Suite to transfer my files
across to the device. To download Nokia PC
| | 01:41 | Suite, go to nokia.com/pcsuite that URL
will automatically redirect you to the
| | 01:47 | Nokia Europe website, where you can
download the software. Currently, Nokia PC
| | 01:52 | Suite is for PCs only. But from this
website, you can also access Mac resources
| | 01:57 | to allow you to do the same work. You will
find it under Product Support in Mac software.
| | 02:02 | Once you have downloaded and installed
Nokia PC Suite and connected your device
| | 02:08 | either via USB or Bluetooth connection,
you can now access your device through
| | 02:12 | Windows Explorer. You will see the
device up here as another drive or as a
| | 02:17 | portable device. Clicking on either of
these will allow you to start drilling
| | 02:22 | down into the file structure of the
phone. I am going to look on my phone's
| | 02:25 | default memory drive. And then inside
the Data and Others folder. This Others
| | 02:32 | folder is where the Flash Lite
standalone player on S60 devices, looks for
| | 02:37 | content by default.
| | 02:38 | To transfer the files on to my phone,
it's a simple matter of drag and drop.
| | 02:42 | Here, I will transfer my groundswell
animation file on to my device. Click,
| | 02:47 | drag and drop, simple as that and
there is my animation file. Flash Lite
| | 02:55 | enabled phones are ultimately still at
the mercy of either the manufacturers or
| | 02:59 | operators, in terms of, how accessible
they are for transferring files across to them.
| | 03:04 | If you are working with BREW phones
in North America, you will have some
| | 03:07 | additional steps before you can start
transferring files to your phone. If you
| | 03:11 | have a Nokia device you can use the
Nokia PC Suite application to transfer the
| | 03:15 | files across. Sony Ericsson also has a
PC Suite Solution and there are various
| | 03:20 | Mac options as well.
| | Collapse this transcript |
| Over-the-air via Bluetooth| 00:00 | The most common of wireless connections
for a majority of devices on the market
| | 00:03 | today is Bluetooth. Here I will talk
more about sending your Flash Lite files
| | 00:08 | to your device via a Bluetooth message.
| | 00:12 | From within Windows, you can right
mouse click on the file that you want to
| | 00:15 | transfer and select Send to Bluetooth
device. You will see that I have got my
| | 00:21 | N95, 8 GB already paired with my PC. So
I just click Next and the file has been
| | 00:31 | successfully transferred to my phone.
| | 00:33 | Let's switch over to the phone and see
what that looks like. Getting your file
| | 00:37 | then out of the Inbox is just a
matter of launching it from the message and
| | 00:41 | then using the Flash Player menu
options to save it locally on to the file
| | 00:44 | system of the phone.
| | 00:46 | Bluetooth has been a standard
connectivity option on mobile phones for many
| | 00:50 | years now and can create that
connection that you need from your Desktop to
| | 00:53 | your phone, in order to transfer your
files. Sending files via a Bluetooth to
| | 00:58 | your phone come up as
Bluetooth messages in your Inbox.
| | Collapse this transcript |
| Protecting files via DRM| 00:00 | It's great that it's so easy to create
Flash Lite content for mobile devices
| | 00:04 | and to transfer those files around to
various phones but what if we want to
| | 00:08 | protect that content? In this lesson I
will discuss Digital Rights Management
| | 00:12 | or DRM with you and how it
applies to Flash Lite content.
| | 00:16 | Digital Rights Management is a hot
topic in the digital content industry. You
| | 00:21 | have probably heard of it before
mostly around the sale of digital music and
| | 00:24 | attempts to stop piracy or illegal
file sharing. Now I am not going to spend
| | 00:29 | time here debating the merits of a
locked down or an open digital content
| | 00:32 | environment, but simply put forth
the option of locking your Flash Lite
| | 00:35 | content using DRM.
| | 00:37 | Protecting your Flash Lite content once
it reaches the open market is something
| | 00:41 | that you should consider. And in some
cases, it will be considered for you
| | 00:44 | by the aggregators or operators
that sell your content. Locking the
| | 00:48 | content to the device that it's
downloaded to does have its advantages in
| | 00:52 | that the content, particularly if it
has been paid for, can't then be forwarded
| | 00:55 | or copied on to other devices of
users who haven't paid for it. Certainly
| | 01:01 | situations will arise particularly
in viral marketing or advergaming,
| | 01:04 | where you want your content to be
forwarded onto others. It really comes down
| | 01:08 | to an individual case by case
basis for the content in question.
| | 01:12 | If locking your content though is
something that's required then using OMA DRM
| | 01:18 | 1.0 is probably the simplest form of
Rights Management that you can implement
| | 01:22 | for Flash Lite. The Open Mobile
Alliance is an international standards board
| | 01:26 | that deals with interoperability on
the mobile platform. If you implement OMA
| | 01:31 | DRM for one supported device, it
will work across all supported devices,
| | 01:35 | regardless of their make or model.
| | 01:37 | There are three options for applying
DRM; Forward locking, Combined delivery
| | 01:43 | and Separate delivery. The last two
options, they have playback rights files or
| | 01:48 | keys that need to be included with the
content. However, Forward locking is the
| | 01:53 | simplest implementation. So we will
look at that for locking our Flash Lite content.
| | 01:57 | Flash Lite content is defined as being
passive content from the way DRM sees
| | 02:01 | various files formats. A SWF file is
treated just like image bitmap or media
| | 02:06 | files when it comes to DRM. DRM is
applied to a Flash Lite file by using
| | 02:11 | third-party tools but it's generally
provided by the device manufacturers.
| | 02:16 | You have the option of using perhaps,
the Nokia Multimedia Internet Toolkit.
| | 02:20 | Sony Ericsson's DRM Packager or
Motorola's Moto DRM Toolkit. As I mentioned
| | 02:26 | before, DRM is based on OMA standards,
so creating a DRM package using any of
| | 02:31 | these tools will create a DRM file
that's able to be loaded on to any device,
| | 02:36 | not just devices made by the
manufacturer whose DRM tool you use.
| | 02:40 | The process involved in all DRM
application though is essentially wrapping your
| | 02:45 | SWF content into a DRM message. With
Forward locking, this DRM message file
| | 02:50 | will be saved with the dm extension.
When your device receives a dm file
| | 02:54 | Over-the-air, it will interpret that
as a right's managed file and will look
| | 02:59 | inside the message to
find the SWF content to play.
| | 03:02 | And for the file to be successfully
downloaded from a web server or indeed sent
| | 03:06 | Over-the-air (OTA), the server that
delivers the file need to have the correct
| | 03:10 | MIME type setup. In the case of
Forward locking, the dm file extension has a
| | 03:15 | MIME type of application/vnd.oma.drm.message.
| | 03:21 | Adding DRM to your Flash Lite content
is very straightforward using one of the
| | 03:26 | many tools that's provided by the
device manufacturers. By wrapping your
| | 03:30 | content into a simple Forward lock DRM
message, you can lock the content on to
| | 03:34 | the phone that downloads it.
| | 03:36 | No doubt, you will come across DRM if
you sell your content through an operator
| | 03:40 | and it's also something you might
want to consider if you are going to make
| | 03:43 | your content available through
operator independent web portals.
| | Collapse this transcript |
|
|
12. Bonus: Exploring the AssetsGroundswell animation| 00:00 | I would just like to briefly take you
through some of the mobile assets that
| | 00:03 | we've been working with in these
Device Central lessons. You can find all of
| | 00:07 | the source codes for these Flash
files in amongst your exercise files.
| | 00:11 | Let's open up the Groundswell animation
first. And you can see in my Library, we
| | 00:15 | only have two objects required for
this animation. One is the Groundswell
| | 00:18 | logo and the other is a movie clip of a
flower. The flower movie clip is what we
| | 00:23 | are going to dynamically attach
to the Stage with ActionScript.
| | 00:26 | Let's take a look at that script now
and I'm going to collapse my Library
| | 00:31 | panel, open up my Actions panel and
bring across my file so we can see that
| | 00:36 | nice and clearly. Now to begin with we
are setting some variables based on the
| | 00:40 | current Stage width and Stage height.
This is so, so this animation could be
| | 00:44 | played across various devices with
different screen sizes but still use these
| | 00:49 | variables to make sure our
animation works correctly.
| | 00:51 | Next, we set some local variables
such as the number of flowers that will
| | 00:55 | appear in the animation and some
numbers that are going to relate to how the
| | 01:00 | animation works both in terms of the
size the flower comes out to, and the
| | 01:04 | speed that it bounces back. Our
zoomflower function is what does the real work
| | 01:09 | with the animation. Down below we have
got a simple loop that's going over the
| | 01:13 | number of flowers that we've set and
creating and setting some properties on
| | 01:17 | our new flower movie clip.
| | 01:19 | Here on the last line we are setting
that zoomflower function to be fired on
| | 01:23 | the onEnterFrame for that movie clip.
What all this combines to do is create an
| | 01:28 | animation that's randomly
generated every time the wallpaper plays.
| | 01:30 | So let's test that in Device Central.
From within Flash, Control and Test Movie.
| | 01:41 | Now this doesn't look quite right
because our Content Type set to Standalone
| | 01:44 | Player. We want this to be a wallpaper,
so I'm going to choose Wallpaper as my
| | 01:49 | Content Type. That looks better. And
there we have that Wallpaper appearing as
| | 01:54 | it would on this particular Nokia
phone. As you can see we have generated a
| | 01:58 | file that's only 2KB in size doing all
of this animation based purely on code.
| | 02:03 | Wallpapers like this bring a lot of
life to the mobile platform because they
| | 02:07 | are randomly generated every time.
| | 02:09 | That's it for this animation. Let us go and
have another look at one of the other assets.
| | Collapse this transcript |
| Groundswell clock| 00:00 | Let us now take a walk through the
source code for our clock wallpaper
| | 00:03 | animation. From within your exercise
files you'll be going to gswell_clock.fla.
| | 00:09 | I'm just going to zoom out a little bit
so we can see the full Stage view.
| | 00:14 | I want to leave as much room as
possible for our Actions panel.
| | 00:17 | Now our clock animation is made up
of a number of different movie clips.
| | 00:21 | Firstly, we have got the clock movie
clip. I'll edit that in place and you can
| | 00:26 | see we have different hour, minute,
and second hands for the clock as well as
| | 00:30 | the numbers that appear around the
outside. The clock hands are going to be
| | 00:34 | accessed individually by ActionScript
to make them rotate around based on the
| | 00:37 | time from the device.
| | 00:39 | I'll click back out to the root
timeline and now choose my flower movie clip.
| | 00:44 | This will be animated based on the
strength of the battery. If I edit this in
| | 00:48 | place all I have here is the drawing
object. We are going to change the alpha
| | 00:53 | transparency of that movie clip based
on the level of battery that we get back
| | 00:57 | through ActionScript.
| | 00:57 | My background movie clip is broken up
into 24 frames, one for every hour of the
| | 01:04 | clock. And you'll notice that each
Keyframe has a different colored background.
| | 01:09 | So every hour we are going to have a
different colored background on our Wallpaper.
| | 01:14 | I'll just turn the visibility of the
clock and battery off, so I can get to
| | 01:18 | this charger animation in the middle
of the screen. This animation is what
| | 01:24 | happens when our Flash application detects
it's plugged in to the wall by the charger.
| | 01:28 | So those are all the visual components
of our application. Let's just take a
| | 01:32 | quick look at the ActionScript. We
just have a single line at the top, which
| | 01:36 | sets our Wallpaper to play at full
screen, and then we start setting some
| | 01:40 | onEnterFrame functions for our movie
clips. The battery movie clip is going to
| | 01:44 | be constantly checking
for the battery level using
| | 01:47 | fscommand2("GetBatteryLevel"). We are
going to take the number that comes back
| | 01:51 | from that, store it in a variable
called batteryStrength, and then use the
| | 01:55 | variable to set the alpha
transparency of the movie clip.
| | 01:59 | The same thing goes for the charging
animation. We are setting an onEnterFrame
| | 02:03 | so that it's constantly
checking the power source using
| | 02:08 | fscommand2("GetPowerSource"). If it
comes back as True meaning it's plugged
| | 02:13 | into the wall then we play the animation;
otherwise, we the set the visibility
| | 02:18 | of the movie clip to false and we
stop the animation from playing.
| | 02:21 | Lastly, we have got an onEnterFrame
for our clock movie clip constantly
| | 02:26 | checking the current time of the
device. Using fscommand2("GetTimeHours"),
| | 02:29 | ("GetTimeMinutes") and ("GetTimeSeconds
"), we can determine what the rotation
| | 02:35 | should be for each of the clock hands
in our clock movie clip. And at the same
| | 02:40 | time, based on the hours that are
coming back we are also jumping to a
| | 02:43 | different background in your background
movie clip. So Control > Test Movie and
| | 02:50 | we'll see this animating in Device Central.
| | 02:53 | If you can't see it properly it should
be set to Wallpaper as a Content Type.
| | 02:57 | Don't forget that changing the device
clock is done through the Device Status
| | 03:01 | panel. So that's our clock animation
done. Let us have a look at one more
| | 03:05 | application from our exercise files.
| | Collapse this transcript |
| Groundswell weather application| 00:00 | Let us take a walk through the
Groundswell weather application that's been
| | 00:03 | included with your exercise files for
this course. In your exercise files,
| | 00:07 | there will be two versions, one
liveData and one localData. Let's use the
| | 00:11 | liveData version, just quickly
going through the visual assets first.
| | 00:18 | We have just got a basic JPEG as our
background, which has been optimized
| | 00:21 | outside of Flash. This is always
good to do so that you have got greater
| | 00:25 | control over optimization for your
bitmaps. You'll also notice that if I key
| | 00:29 | line all of the layers that it's
much bigger than the Stage size itself.
| | 00:33 | This is so on different phones with
different screen sizes you'll always get
| | 00:37 | content filling up the full
screen of the application.
| | 00:41 | We have a number of simple dynamic
text fields, which is going to show some
| | 00:45 | information based on the data we pull
in, some static text fields which are
| | 00:48 | just acting as they are soft key labels.
A movie clip here in the middle, which
| | 00:52 | is currently showing Load Data but if
we scrub through the Timeline, it also
| | 00:57 | has the weather icons.
| | 00:59 | While that data is loading, we don't
know what icon to show. So by default it's
| | 01:03 | showing Load Data. At the end it's
also got an error message so if there is
| | 01:08 | some problem with getting the XML, we
can just make this movie clip jump to the
| | 01:12 | end and give the user some feedback.
| | 01:14 | There is one more tiny movie clip here,
which if I edit in place just as two
| | 01:19 | frames, an empty one and then showing
the degree symbol that will appear for
| | 01:24 | our temperature. Again while the data
is loading, we don't really want to show
| | 01:28 | anything, so we just got these
stopped here on the first frame.
| | 01:31 | So those were the visual assets, let
us have a look at the ActionScript. To
| | 01:36 | begin with, I'm setting it as full
screen and taking over control of the soft
| | 01:39 | keys using fscommand2("setSoftKeys
"). I'm declaring all the variables and
| | 01:45 | visual assets that we are using on the
Stage, as well as a couple of non-visual
| | 01:49 | ones, such as the XML object that we
are going to load our weatherData into, a
| | 01:55 | SharedObject and also a keyListener
object for working in navigation. I'll just
| | 02:01 | highlight the main
functions within the application.
| | 02:03 | Here you have reloadXML function;
we're just calling the load method on a
| | 02:08 | weatherData XML object to load in an
XML file from an external web server. The
| | 02:13 | difference between this App and the
localData App is that this URL is calling
| | 02:17 | out to an external source whereas the
local one is just calling an XML file,
| | 02:21 | which would be on the device as well.
| | 02:24 | The onLoad function of our XML object
is very much to where it happens. We are
| | 02:29 | looping over all of the nodes of the
XML and pushing nodes into a local Array
| | 02:33 | making it a lot easier for us to access
that information. We call the showData
| | 02:38 | function passing in the position of the
Array that we want to look at first. In
| | 02:43 | this case, it's the
first position noted by zero.
| | 02:46 | We're also creating and adding a
Listener to our SharedObject. If the data load
| | 02:50 | files, we set all of the dynamic text
fields to null and tell the weatherIcon
| | 02:55 | to jump to that last dataFail frame.
showData is simply just taking information
| | 03:03 | out of that Local Array and populating
the dynamic text fields and also showing
| | 03:07 | us the right weatherIcon.
| | 03:08 | This SharedObject was created really
just to show the Persistent Storage panel
| | 03:13 | in Device Central working. Currently,
we are just saving the date of the last
| | 03:17 | download of XML data. We could extend
this to maybe seeing what that date is
| | 03:21 | and only downloading the full XML data
if the changed date on the server is different.
| | 03:26 | This onEnterFrame for the Signal movie
clip is interesting. Here is that Signal
| | 03:32 | movie clip and it's going to roll right
to left/left to right depending on the
| | 03:37 | strength of the signal. I'll show you
something interesting with this, and in
| | 03:40 | particular, the GetSignalLevel
ActionScript later on in Device Central.
| | 03:45 | Finally, we have our keyListener
listening out to hear what buttons are being
| | 03:49 | pressed. Different buttons will have
the trigger actions, such as, reloading
| | 03:53 | the XML, quitting an application or
scrolling left and right through the Local
| | 03:57 | Array to display different weather data.
So let's see that running in Device
| | 04:02 | Central. Control > Test Movie.
| | 04:08 | So here is our application running on a
Nokia N95 8GB, a Series 60 device.
| | 04:13 | You can see we're scrolling left and
right through our local data after we've
| | 04:17 | loaded it down from the web server.
This whole creative application of loading
| | 04:21 | an external data comes in at only 42 KB.
Not bad, I reckon for a mobile application.
| | 04:28 | Now the other one thing I wanted to
show you was about the Signal movie clip.
| | 04:31 | As you know, setting the signal
strength comes through a Network Status panel.
| | 04:35 | Have a look though and see what
happens when I scroll from left to right,
| | 04:39 | bringing it right down to zero and up to 100.
| | 04:42 | From our design this should be rolling
right across to the right hand side of
| | 04:47 | the screen when the signals are 100%.
It's not doing it because on a Series 60
| | 04:52 | device, when I call GetSignalLevel,
it's returning a different number than what I'm expecting.
| | 04:56 | I've got my movie clip to go from
left at 0 rolling all the way over to the
| | 05:02 | right at 100 and that's okay if I'm
getting back a number between 0 and 100.
| | 05:07 | But on Series 60 devices, I get
back something between 1 and 7.
| | 05:11 | Now, don't ask me why it's different;
that's just the love of mobile.
| | 05:15 | Of course, you'll have to take into
consideration these types of differences
| | 05:19 | when you are building your application.
But, for now that's our Weather App.
| | Collapse this transcript |
|
|
13. ConclusionTen tips for developing effective mobile content| 00:00 | I would like to share with you some
tips that I've picked up over my many years
| | 00:03 | as a Flash Lite Developer, which will
hopefully help you in your own mobile
| | 00:06 | development. Let us start with looking at a
few tips on managing various screen sizes.
| | 00:11 | When creating Flash Lite content that
will be deployed across multiple devices
| | 00:15 | with different screen sizes, the goal
is to create one SWF file that scales
| | 00:19 | across them all without losing
quality or functionality. Operators and
| | 00:23 | aggregators love this about Flash Lite!
They only have to manage one file for
| | 00:27 | all of the files that they support.
Rather than individually created ones for
| | 00:31 | specific targeted files, what we can
do is set the Stage size to the minimum
| | 00:36 | screen size and then bleed the visual
assets around the Stage to allow for the
| | 00:41 | screen resizing.
| | 00:42 | Remember that different screen sizes
aren't always in the same ratio, so on
| | 00:46 | some screens you see a little more
or less around the edges. To make the
| | 00:50 | content scale and always take up the full screen,
| | 00:53 | you can use the fscommand2("FullScreen")
ActionScript on the opening frame of your Flash
| | 00:58 | content. Be aware though that some
Sony Ericsson devices don't scale up but
| | 01:03 | only down. So this means that the Stage
size of your Flash file needs to be at
| | 01:08 | least of the same size of these
devices. Any smaller and you'll see your
| | 01:12 | content floating in the
middle of the front screen.
| | 01:15 | Try and use relative positions for
your assets based on the Stage object so
| | 01:19 | that they can be programmatically
moved around the Stage when the screen size
| | 01:23 | is changed. Consider also that
many new devices can rotate the screen
| | 01:27 | orientation either automatically or
manually. So you might want to build in
| | 01:31 | some checking for the Stage size and
screen orientation to make changes to your
| | 01:35 | visual assets dynamically
as the orientation moves.
| | 01:39 | When it comes to optimizing for
performance, there is a number of things that
| | 01:43 | you can keep in mind. Consider the
complexity of your vector shapes and
| | 01:46 | if using a bitmap instead might
be better. Bitmaps are seen only by the
| | 01:51 | Flash Lite Player as the bounding box
that contains the image. So if you have a
| | 01:55 | complex vector shape with lots of
points and curved lines, it might be easier
| | 02:00 | on the Player to render a bitmap instead.
| | 02:03 | Look at using bitmaps perhaps for
static elements that might not change all
| | 02:06 | that much such as backgrounds. This
will potentially save you some file size as
| | 02:11 | well as rendering power required.
| | 02:13 | Some of these points are becoming
less and less critical the more powerful
| | 02:17 | devices become. But looking for
opportunities to optimize your content, whether
| | 02:22 | big or small, is always a good practice.
| | 02:25 | But here are some final tips on
animation within Flash Lite. With animating on
| | 02:29 | mobile, you can quickly run into
performance issues if you are not careful. The
| | 02:33 | general rule is to minimize the amount
of screen that's needed to be redrawn
| | 02:37 | each time. Cutting down the amount of
screen that has to change will need a lot
| | 02:41 | of load on the processor. Try to also
avoid too many overlapping motion tweens
| | 02:46 | and use ActionScript to
create movement wherever possible.
| | 02:50 | There are many more articles and
tutorials available online that will help you
| | 02:54 | in various aspects of working with
Flash Lite and making your applications and
| | 02:57 | content as optimized as possible.
Check out the Resources section of this
| | 03:02 | course for more information.
| | Collapse this transcript |
| Additional resources| 00:00 | I would like to leave you now with
some additional resources that you might
| | 00:03 | like to consider looking at in order to
continue your education in Flash Lite.
| | 00:07 | One of the best places to start is
the Adobe.com Mobile & Devices Developer
| | 00:11 | Center. Here you will find a number of
articles and tutorials all about Flash
| | 00:16 | Lite. There's also a great section
called Getting Started. This has got some
| | 00:21 | great videos and documents all for
Flash Lite developers who are just getting
| | 00:25 | into the market. It explains
everything in a really basic and simple way and
| | 00:30 | helps you to work out where to start.
| | 00:31 | There is also a tab for selling your
content. Adobe doesn't do this for you,
| | 00:36 | but they direct you to companies that do.
Simply drop in your region, the type
| | 00:44 | of content that you have, and clicking
Show Companies will bring up a list of
| | 00:49 | contact details for
companies that can help you out.
| | 00:52 | Lastly, there is the Community tab.
You could consider joining a User Group.
| | 00:57 | It's a great way to meet other
developers and to hear what other people are
| | 01:00 | doing within the industry.
| | 01:02 | There is also a link to find a number
of Flash Lite related blogs that you
| | 01:06 | might like to follow up on. There is
some great content being put up by some of
| | 01:09 | these guys all on Flash Lite
content existing in the market today.
| | 01:15 | Also on the Adobe website is the
Flash Mobile Gallery. You can select from
| | 01:21 | different content types, drilling down
and seeing real examples of Flash Lite
| | 01:27 | content that people have developed and
released into the market. Use this as a
| | 01:34 | source of inspiration for some
of your own Flash Lite projects.
| | 01:42 | If you to like email forums there is a
great Yahoo! Group for Flash Lite; this
| | 01:47 | has been going for a number of years
now and has a wide range of new and
| | 01:51 | experienced Flash Lite Developers all
out there ready to engage and talk to you
| | 01:55 | about Flash Lite. Don't be afraid to
post out new questions if you are just
| | 01:59 | getting started or else read
what's coming back from other developers
| | 02:03 | experienced in developing
high-end Flash Lite content.
| | 02:07 | And lastly, if you would like to see
some more samples of Flash Lite content
| | 02:11 | being sold in the market today, why not
check out my companies website at moket.com?
| | Collapse this transcript |
| Goodbye| 00:00 | Here we are at the end of Device
Central CS4 Essential Training. Throughout the
| | 00:04 | course we have been able to look in
depth at the Device Central CS4 tool and
| | 00:08 | all its features that gives Flash Lite
and mobile developers for testing and
| | 00:12 | simulating their content.
| | 00:14 | I hope that you've been able to
appreciate the power of this application and
| | 00:17 | the incredible support that it provides
both novice and experienced Flash Lite developers.
| | 00:23 | It's something that makes the
development process of content more streamlined
| | 00:26 | and efficient and I believe it goes a
long way to potentially improving the
| | 00:30 | overall quality of the end product.
| | 00:32 | Thanks for investing your time in
these video lessons and in Device Central
| | 00:35 | CS4. I am Dale Rankine from Moket
and I really look forward to seeing the
| | 00:39 | wonderful content that you and the
others in the developer community will
| | 00:42 | create and test using Device Central
CS4 and other great new tools from Adobe.
| | Collapse this transcript |
|
|
