Click on any phrase to play the video from that point.
[♪ Music ♪] [Adobe TV presents: Paul Trani in...]
[Flash Training with Paul Trani]
Hi, my name is Paul Trani, Adobe Evangelist.
And one of the recent questions we got on the Adobe TV Facebook page was
how do you develop for multiple screens?
What does the workflow look like, and what are the best practices?
I'm going to break that down, starting with a project,
walking you through how that development would work.
And I'm going to be using Flash Professional to do so.
So, here I am in Flash Professional.
I do have this web FLA file, so maybe you do already have
content available that you'd like to repurpose or develop into an app.
This is just called Create Silk,
so when I click and drag,
it's going to go ahead and create this silk tapestry,
which looks actually pretty darn cool.
As I draw, I can hit the Shift key to change the direction of it.
And this is perfect for a mobile device
and any sort of touch screen, and that's what I want to do with it.
I want to repurpose it.
There's some things I need to do initially
to get this going, so I'm first going to go ahead and close that file.
And what I want to do is I want to go ahead and take this FLA file,
and I want to save out a new version as--
and I'll save it in this folder--as an Android version.
I'm going to start with Android because the workflow
for Android devices is much cleaner,
especially if you're dealing with Flash Pro or Flash Builder,
one of those being the ability to publish directly to the device.
But nonetheless, here's my Android FLA,
and I've just created this new file.
And from there, what I can do is I can go ahead and
resize this screen, because you can see that it's 1024 x 600.
I could change it here, or I can edit the document properties
and adjust the screen size right in here.
I can say--if I want this to be 480 x 800,
the size of my connected Android device, I can do that,
and I can scale content with this stage
based on these new dimensions.
Let's just see how this looks.
If I click "OK," it'll scale everything down.
It does make this look pretty small,
and even if I check out its properties,
you can see that this is actually a pretty small graphic.
Let's even go into our Transform options.
You can see that it scaled this graphic down by about 50%.
From there, this gives me at least a good starting point
to start modifying this because for an Android device,
I actually want this to actually pop up when they hit that sub-menu button.
That's what I want to do with this graphic.
I'd start making those adjustments based on the platform.
Based on the Android platform, this is probably going to be at the bottom.
Maybe I'll scale it up and put it down here
and start to modify it.
What I'd want to do with this is adjust this content
but really add buttons in here
that give me various options.
So, I'd add some more buttons right in here.
I'm just doing some drawing, but this is how I'd do the development
is I'd actually resize the stage
and then start moving things around based on the platform.
For Android, the menu is at the bottom,
and they're going to click that menu button.
This menu would pop up.
That's how I'd do that, but the bulk of the code
is actually going to exist inside of this document class
called FlashSilkWeb.
If I click this edit class definition,
you'll be able to see all of that code right in here.
All the heavy lifting is going to be done by a document class.
All of the drawing, all of that good stuff
that's not specific to the platform
is going to be done in this document class.
That does all the heavy lifting.
And let me go ahead and switch
to more of a baked file,
so this AndroidFinal, and I'll show you where this is at now.
Again, in this AndroidFinal, what I would do is I'd modify
any of the ActionScript in this document class,
and that's where the bulk of the code resides.
I have my options menu right down here.
You can see how it's customized specifically for the Android platform,
and then what you do is you go ahead and any code
you want to be specific for a platform,
you want to go ahead and put within your FLA.
So, that's what I have here.
If I select that frame 1 in the actions layer,
I'll go to Window, Actions.
And as I take a look, I can see, sure enough, the Options menu,
again, that this is specific to Android devices.
That's how it works, because quite frankly,
there is no menu button on an iPhone.
The specific code will actually go in the timeline
of the FLA that you're dealing with.
Yet the bulk of the code is still in this 1 document class
and can be changed to globally right there.
Okay, so that's the sort of Android version, and since I am on this final version,
I'd want to go ahead and test this out, and I'm going to go into
edit the application settings, and I'm going to publish it out
to my connected Android device, so it's really just a matter of
filling in the blank, and this is why I develop for Android first
is the fact that I can publish it out directly on the device.
I can go in and check whatever other boxes that I need to.
Those are your permissions, but I'll just go ahead and click "Publish,"
and it would appear on my device.
All right, so I have it published out to my Android device,
and it just played the splash screen, but nonetheless,
this is actually the application running, and as I draw with my finger
and as I tilt, you can see the silk moves that direction.
I'm tapping into the capabilities of the specific device.
Again, I'll tilt down, and you can start to create these drawings.
That works pretty well. I can tilt that around, and you get some nice imagery.
But again, what's specific about the Android device is the fact
that you have these buttons down here.
You have a back button, and even right here, it might be kind of hard to see,
but that's actually our menu button.
I'm clicking there, and it brings up that Options menu.
I can clear it.
I can save this image if I really like it.
I can save it to the gallery, which is what it just did,
or I can even exit out of the application.
I'm able to tap into those specific buttons
using that FLA file and the code in that FLA file.
That works pretty darn well, so I'm going to go back to my code.
Now that I know this is running really well and this is what I want,
I can start to make the other versions.
So, the Android version looks great.
I'd want to move on to the iOS version,
maybe the iPhone version.
I'd still take that same file, and I'd do a Save As
and save out my other versions.
This could be my iPhone version.
Save that out.
IPhone is saved out.
I can again modify the document settings,
scale my content appropriately.
But for an iPhone, I know that it doesn't have this menu,
so I actually need to bake this right into the interface.
And what that really means is just to remove this actions layer right here.
Remove that, and these buttons will appear down there.
I might want to modify them further because I don't want them to look like an Android,
like Android buttons.
But nonetheless, I want to bake the buttons on the screen
since there is no menu button.
Now, remember, all the code still links out to this document class,
so I still change it in 1 place, and then that changes it for all of my apps.
That's the iPhone version, and let me just jump to my iPad version.
And again, this is specific to iOS.
You might want to clean it up a little bit. It's called Create Silk.
We have this Clear and Save button,
again, baked onto the main screen.
Let me go ahead and open up a BlackBerry PlayBook version as well.
Again, it's linking to that same code,
but it has its Options menu up at the top because how the BlackBerry devices work
is you swipe down from the top on the bezel, as it's known,
and then it will reveal that menu.
Again, all of that code is baked into the FLA file,
and I can always take a look at that as well.
There's the menu code for the PlayBook.
So, here I have--let's see, 1, 2, 3, 4 different FLA files
for different platforms, and it works pretty well.
I can always edit my code in 1 spot.
That looks good.
But what happens if you want to change the name
of your app?
If I want to change the name of it or change any graphic,
what happens if I decide you know what?
I want to call this Draw Silk.
And if I change that inside of this movie clip symbol,
I'm quickly out of synch with all of the other graphics.
In here, it would say Draw Silk or it would say Create Silk.
I need to be able to synch up all of these graphics,
and how I do that is I make a new project.
I'm going to go to Window, Project,
and here's my Project panel.
What I'm going to do is I'm going to create a new project,
and let's call it Silk.
I'll point to that folder right there.
This contains all my FLA files,
and I'm going to click Choose and Create Project.
All right, it creates this project,
and it's just a group of files, and it even creates this
AuthortimeSharedAssets FLA which I'm about to get into,
but now I can synch up all of the graphics amongst these different FLA files.
I'll show you how to do that.
Again, Draw Silk, that logo,
movie clip, is what I want to share,
so I'm going to Library, right here, Logo.
If I want to share this symbol across files,
all I need to do is check that checkbox.
What happens there is it actually puts it inside
of this AuthortimeSharedAssets FLA.
You don't even need to touch that FLA,
just don't throw it away.
Nonetheless, check that box.
You can save your file.
Go to the iPhone version, or let's go to the iPad version.
You can see it's right down here.
Again, on a different menu,
but I can go over to the logo and check that box right there,
and look what I get.
It says hey, you know what? You get 3 options.
And really what I want to do in this case is I want to replace this logo
with the one from the shared assets that I just shared from the other file.
So, this should change from Create Silk to Draw Silk.
I'll hit "OK," sure enough, it changes to Draw Silk.
Now, these graphics are synched up.
I only need to change a graphic in 1 place,
and it will change it across all of those FLA files,
and that's how the workflow would be if you're working across
multiple FLA files.
Very powerful, and from there, if it's the iPad version or iOS,
it's just a matter of changing those settings and publishing it out.
That's how the workflow would happen,
and you could do it many different ways.
It really is going to be specific to your project.
It might be more adverse or more contained,
but in this case, I like that I have the power to customize
per platform, yet all my major code is inside of that 1 document class.
That's the workflow. Thank you so much for providing that feedback.
I really look forward to seeing your apps out on the various app stores.
Thanks for watching.
[♪ Music ♪]
[Adobe TV Productions] [tv.adobe.com]