Flash inside

Resizing your content with 9-slice scaling

I’ve found these days some designers and even programmers not aware of the 9-slice scaling that Flash provides, and that’s why I’d like to introduce it here for those who does not know it either.

This feature allows you to determine the way a MovieClip is scaled. Doing that you will be able to resize without unwanted results like your MovieClip is distorted.

With tablets and smart phones on the market, it’s a good idea to resize our content accordingly to the area we have available, and here is where 9-slice scaling will help you out.

Look at the picture below and notice the rounded corners it has:

Now look at the difference we get after applying an horizontal resize of the MovieClip:

As you can see with 9-slice scaling we can achieve the result we really expect.

In order to enable this feature, you just need to open the Properties panel of the MovieClip and select Enable guides for 9-slice scaling as shown in the picture below:

Then when you edit the MovieClip it will show you the guides that you can easily adjust to your needs as seen in the following picture:

This scaling mode cannot be applied to Buttons or Graphics Symbols. The same applies when we nest them inside a MovieClip. The 9-scale scaling will only be applied to the compatible content.

It would be perfect to have 9-slice scaling for Bitmaps as a built-in capability in Flash, but meanwhile Grant Skinner created a nice solution called BitmapSlice9. It allows you to break your Bitmaps in pieces and use the 9-slice scaling with a great results!

UPDATE: You can download this example in Flash CS5 here.

New mouse capabilities in Flash Player 11.2 and AIR 3.2

Adobe just released the beta of Flash Player 11.2 and AIR 3.2 for Desktop with brand new capabilities.

One of the great new additions is the mouse right and middle click events. That means we finally can remove completely the context menu! Focusing in games we have the mouse lock that will be available only in fullscreen mode and new relative mouse coordinates.

You can take a closer look at it in this post from Thibault Imbert.

Flash Player 11.1 and AIR 3.1 available!

Adobe just released the Flash Player 11.1 and AIR 3.1 for desktop and mobile devices. I wouldn’t wait a minute to give it a try!

You can find an article from Adobe here.

More joy for Flash enthusiasts

Adobe ceases Flash player development in mobile browsers

These past few days have been crazy after the announcement that Adobe stops the development of Flash Player for mobile browsers.

Flash always has been the technology that was able to do things that HTML couldn’t. With the big improvements the web is experimenting with HTML5, Flash has less room to be the chosen technology for all the interactive content in the World Wide Web.

I have been working recently with Flash on an Android tablet for the browser and talking about performance I have to say you have to create the content thinking on the device to get good results. I believe this is an important reason why Flash in the mobile browsers are not always welcome.

I am working on the elearning industry and this decision causes we take measures, as we need to run the content within the browser, Flash is not a good choice when we want to bring courses to tablets or mobiles.

Sad days…

Adding Flash Player 11 to Flash Pro CS5 and CS5.5

Richard Galvan from Adobe has published a great article explaining how to add Flash Player 11 to our Flash Pro CS5 or CS5.5. Especially interesting if you want to take advantage of the brand new Stage3D.

You can read the article here.

How to build a SWC package with Flex and Ant

Packaging classes in a SWC file is a good idea when you need to distribute your source code to a client, in order to publish a Flash movie, or when you work with other team members and you need to be sure the code remains unchanged.

With the Flex SDK we can generate SWC files from a pure AS3 source folder very easily. First of all we need to download the SDK and make the binary folder accesible in our system path.

Imagine we have a src folder inside our project folder and we want to add all the source code that is inside to a SWC package. To do that we will need to open a command line prompt and go to the directory of the project folder and execute the following:

compc -include-sources ./src/ -debug=false -optimize -output ./output.swc

Flex will generate a package called output.swc that contains all the classes inside src. Of course you should customize the parameters to fit your needs.

As you see this process is quite simple but it is worth making it automatic. Here is where we will use Apache Ant.

For those who are unaware of Ant, this tool was created to automate the software build process. Essentially it was for Java projects but now it can be used in multiple different ways because of the flexibility Ant provides.

Ant was implemented using Java and needs Java to work. It’s recommended you download and use the latest JDK release. The JRE can be used as well but some of the tasks may not be available.

Once you have Java up and running you can go ahead and download Ant here. Decompress the package and add the path to the Ant binary folder to your system path.

Now we have everything we need!

Go to your project folder and create a file called build.xml with the following content:

Basically what we do here is to define a task called build_swc that executes the Flex compiler sending the parameters we saw previously. Ant has lots of different options and you can improve this build file adding properties that would specify the source folder, output folder and output file name for example.

The last thing we have to do is to call Ant and execute the task we just created. Go to the folder of your project with the command line and execute the following:

ant build_swc

And that’s it! You have your SWC file ready to distribute and you don’t need to remember more than ant and the task you want to execute!

I love Ant

Flash Player 11 and AIR 3 in public beta available

Adobe Labs has just released the public beta of Flash Player 11 and AIR 3 for desktop. This is an exciting announcement as we can start playing with all the new features that are now available to our joy

3D tweening bug in Flash CS5.5

I worked recently on a project that required 3D animations. With my brand new Adobe Flash Professional CS5.5 I started building some cool animation tweens with 3D transformations. Everything looked good until I came across with some weird problems.

Sometimes I published my movie and I saw some 3D animations not being rendered properly or not being rendered at all. For me the most important thing is to be 100% sure that the content is going to be displayed fine for the users. It seems this problem happens when we publish the movie and not when we run the published SWF file.

Playing around with this bug I found out, at least, how to deal with it. In my case I have several scenes on my movie. Don’t know if this bug happens as well in one single scene. What I did was opening every scene and move the playhead through out the timeline and then when I published the movie again… the problem was gone! and the movie is being displayed fine as it should.

It seems there is something wrong with the tweening and the 3D that is not properly processed when we publish.

Hopefully Adobe will solve it soon!

Localizing Flash content with Strings panel

In the tricky job of creating multilanguage content, Flash provides us with the Strings panel that makes our lifes easier.

This panel is accessed from Windows > Other Panels > Strings and in order to add languages to our movie we need to click the Settings button.

Once we have added the languages, we need to specify which language we want as a default and the method that is going to be used to replace the strings.

We can choose between three different methods:

• Automatically at runtime: Flash will detect the language used in the computer and it will be applied as the language of the movie.

• Manually using stage language: We have an option in the same Strings panel where we can select the language. The movie will use that language in the output file.

• Via ActionScript at runtime: With ActionScript we can pick the language at runtime and change it when needed. This option is very handly if we need to allow the user to change the language of the movie.

Now we are ready to start feeding the Strings panel with text entries!

First we have to fill the identifier and the string and press the button Apply. Take special attention at the stage language selected as the string will be added to that language. You can add or modify all the strings easily later in the grid below.

In order to attach a string to a textfield in our movie we need to select the textfield on the stage and select the string in the Strings panel. Pressing the button Apply will do the job.

Now we can do a quick test selecting in the Settings Manually using stage language and if we go ahead and change the stage language we will see that the textfields are updated!

When we save the movie, Flash will save XML files for the different languages. Every language will be stored inside a different folder with the identifier of the language as the name. These XML files can be imported to the Strings panel pressing the button Import XML.

For more information you can have a look here at the Adobe official documentation.


Enjoy localizations!