New scalable shapes widget

Create unique Flash widgets you can import into SmartBuilder

Moderator: Nav

New scalable shapes widget

Postby Nav » Tue Jan 20, 2009 5:45 pm

Hello all,
There is a new Scalable shape widget that will allow you to use a whole suite of new, complicated shapes to use as backgrounds for displays. Typically, if you wanted to use a nice background, you couldn't resize the shape, because then the corners would distort, such as in this example:

diagram1.jpg (14.37 KiB) Viewed 10491 times

But, using the new widget, you can resize the shapes and it will keep its proportions, like so:

diagram2.jpg (13.49 KiB) Viewed 10491 times

The way to do this is to go to "More Objects" on the Object Pallet, and select "Scalable Shapes". You can name this object something descriptive like "background 1" in the Properties panel. Near the bottom of the Properties panel, you can specify which Graphic you want to use. In the "Shared Library > Media & Assets > Design Elements > Scalable Shapes" folder, there are a number of objects that you can choose from. You can preview them to get a feel for which elements scale and which do not. After selecting them, you can even choose which accent color you want, in order to better match your lesson's theme. Be sure to click into the color field to specify the exact color that you want, even if it is the default color.

These objects have been specially created in Flash to allow for this type of scaling. If you are interested in creating your own, you can reply to this post, and we can provide instructions and examples. If you don't have Flash or want to learn how to create them, but you have a design that you want to see created, you can similarly make a post here with an image of your desired background, and we can make it for you (of course, it will be sharable with all SmartBuilder users).

The other subfolders located in the "Design Elements" folder are free to use as well. Some Interfaces will similarly use the Scalable Shapes widget. Most Backgrounds will typically be used as plain graphics, but contain semi-transparent white fades and require to be layered over shapes with a fill color to be seen. Check out some of the new templates to see how to use them. "Templates > - Categorization Interactions > Identify and categorize patterns" is a good example of how to use a background element with a low alpha value over a simple shape can create a nice background effect.

Please experiment and feel free to post your questions, comments, and requests!

- Nav
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm

Re: New scalable shapes widget

Postby Nav » Fri Feb 20, 2009 7:10 pm

Please check out the source FLA called Scalable shape example located in the Shared Library > Media & Assets > Sample Flash Animations (and source files) folder.

There are some basic 9-slice things that you must understand before trying to edit this file. One is that the 9-slice guides (see below) show the regions that will be scaled differently. The lines cut the shape into 9 sections. The 4 corner sections will not be scaled at all. The top and bottom sections will only be scaled sideways, and not vertically, while the left and right sections will only scale vertically and not sideways. Finally, the middle will be scaled normally.

9-slice.jpg (69.8 KiB) Viewed 10466 times

In the example above, we see that the rounded corners are in the 4 corner sections and won't scale at all. Simply use the movieClips provided and drag the guides to the place you want them to be. Alternatively, to turn the guides on and off, go to your Library, right click on the movieClip, select Properties... and check or clear the Enable guides for 9-slice scaling checkbox (you may need to click on the advanced button).

Now that we understand a simple 9-slice case, we'll look at how the accent color is changed. Basically, there are 2 movieClips, called box_mc and accent_mc.

accent_mc is just a shape object. Refrain from using lines, and only use a single color. This will be layered below the other movie clip. Be sure to update the:
Code: Select all
function getColor() {
   return 0x256f9e;

with the correct hexidecimal value.

accent.jpg (80.61 KiB) Viewed 10466 times

box_mc contains any fades and the main colors that can't be changed once in SmartBuilder. You can use as many colors as you like in this movieClip.

box.jpg (79.78 KiB) Viewed 10466 times

Note that both movieClips should be the same size. You can use fills with 0% alphas to achieve the same size (see selected object below. The white outline is actually a fill with 0% alpha).

box-higlighted.jpg (234.43 KiB) Viewed 10466 times

Once both movieClips are created, and 9-slice guides are configured similarly for them, simply layer them on top of each other to see the effect.

combined.jpg (81.42 KiB) Viewed 10466 times

When creating these, I typically build out the box_mc using only shapes and fills, with no lines, and then copy and paste the fill into accent_mc, and change it to be a single color.

Phew, that was quite a bit of information. Please let me know if anything was unclear, or if you need an older flash version of the source FLA (that one is CS4).

- Nav
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm

Re: New scalable shapes widget

Postby Alway » Wed Jan 13, 2010 10:45 am

I have created a Scalable Shapes widget with a blue bar on the top and then just a white background. The blue bar scales fine horizontally but not vertically. I tried changing the placement of the guides but no luck. Any Ideas?
Posts: 10
Joined: Wed Jan 13, 2010 10:27 am

Re: New scalable shapes widget

Postby Nav » Mon Jan 18, 2010 2:38 pm

Hi Alan,
Thanks for posting this question on the forum. We've run into this with a number of scalable shapes, too. Basically, when you have a single fill/gradient that spans the entire shape, it will not selectively (9-slice) scale that fill/gradient. The way to make it work is to break apart the mostly white area of the fill and replace it with just all white. The following graphic should hopefully illustrate the point. Let me know if that doesn't fix it!

2010-01-13_1040.png (58.88 KiB) Viewed 10365 times

- Nav
Posts: 866
Joined: Mon Nov 05, 2007 2:58 pm

Return to Using the Object SDK

Who is online

Users browsing this forum: No registered users and 1 guest

Not able to open ./cache/data_global.php