Click on any phrase to play the video from that point.
[♪ Music ♪]
[Adobe Developer Connection]
Hey guys, Jacob Surber, Flash Catalyst Product Manager.
Today we're going to take a look at some of the great work flows in Flash Catalyst
CS5.5, in particular, wireframing and prototyping.
So what we see onscreen now is a typical wireframe.
You can see we've got plenty of gray boxes, all kinds of shades of gray,
but what you will start to notice, we've got lots of components on here.
We've got buttons, we've got drop downs, we've got input fields.
We even have a couple of these new placeholder component.s
Let's check out the common library.
So this is new.
Here you can see all kinds of Spark components.
You can actually visually skin these inside the app, and they're going to work for you
inside a Flash Builder.
We also have all kinds of placeholder components.
So this is FPO content.
It lets you rapidly create your prototype, throw down pictures of avatars, charts,
swiffs, videos, whatever you happen to need for the kind of app that you're building.
Here you can see a list.
So this list has all kinds of stuff going on in it.
First of all, it's being laid out in a grid.
We can control the padding, the spacing between the elements, but then each element
we can create our own custom states.
So as you can see here in our states panel, we've got normal, we've got over
and then we've got selecting.
They've got different looks.
So here in our over state we've got some custom data.
We're using our avatar placeholder.
If we look at our design time data, you can start to fill out this design time data
to customize the way this is going to look in your prototype.
So I'm going to switch over really quick to Illustrator.
So here you can see our final comps.
We've got some nicer shades of gray.
We've got some blue buttons,
and we also have our stylized buttons, next, previous, back.
I can import all of this artwork into Catalyst with ease and convert this
artwork into skins.
Cool, so you can see here we've imported our artwork.
We've found our buttons.
We've given them all the appropriate states.
You can see up, over, down, disabled, fully interactive.
One of the most requested features that we've had for creating a nice wireframe
like this is letting you add constraints.
So if I select this container here, you see these little bars.
These are constraint handles.
You can see I can click and it will unconstrain.
We also now have a little handle in the lower right.
This lets you preview how your app's going to resize.
So if I start to move this handle, you'll see the stage change size.
You'll start to see the grid reflow.
When I let off, it'll just snap back to its original size.
So I just zoomed out here and let you see how things really resize.
If you check out that top control bar, you can see things stay anchored
to the right as I move and snap right back,
the exact same behavior that you're going to see in a browser.
No wireframing tool is going to be complete without an align panel.
I can now select an object, select its background.
I can center things relative to each other, relative to the artboard,
everything that you're used to doing in all of Adobe's design tools.
So now that I have this artwork imported, I have it constrained onstage.
I know how it's going to perform in the browser.
I need to make it interactive.
So we have our interactions panel.
The interactions panel is new and improved.
We have support now for doubleclick if your app requires, but we now
also give you global targeting.
I can select an object, check out the interactions panel.
You can see here I'm actually controlling the root application
from inside of a custom component.
This was impossible before.
Creating custom components in Flash Catalyst, you can start to leverage
or manage layouts, not only tile, like we see there on the list,
but also horizontal and vertical.
So that's just a couple of my favorite features that are really going to
help you in wireframing and prototyping.
If you want to learn some more, check out Flash Catalyst
on the Adobe Developer Connection. Thanks.
[Adobe Developer Connection]
[♪ Music ♪]
