Did you know????

In this post am going to tell you few tips that are not known by many Flash users ,except for a few.SHSHSH.... please don't tell anyone :).

Tip 1 : New Sprite Icon in Flash CS4: Sprite has unique green icon that distinguish it from Movie clips symbol.Don't get excited, it is still a Movie clip since it has a timeline in it, it is just a different icon.

Many Users would rather use Sprite over Movie Clip because of the overhead in memory required to instantiate a Movie clip once the timeline is being used.

Now let me show you the new Icon :

1. New Fla file.
2. Create a rectangle on stage.
3. Using the selection tool Double click on the rectangle to select.
4. Modify > Convert To Symbol.
5. Turn on "Export for ActionScript" as follow :

6.Change the Base class value from "flash.display.MovieClip" to "flash.display.Sprite".
7.Click OK.
8.Click OK again.
9.(Window > Library) to open Library panel if it is not already and you should see the following :



Tip 2 : Do you know that you can assign an instance name to an animation in the Motion Property inspector, then use this line of code—tweenInstanceName.addTarget (mcInstanceName)—to apply this animation to another instance in your FLA file as follow :

1. Launch Flash CS4.
2. New Flash File(ActionScript 3.0).
3. Using the Rectangle tool create a rectangle on stage.
4. Select the rectangle on stage and convert to Movie clip.
5. Right Click on the Movie clip on stage and select "Create Motion Tween" as follow :

6.Change the location of the Movie clip on stage to animate it and by doing that you should see the animation path as follow :



7. Select the animation path and open the Properties panel (Windows > Properties).
8. Add an instance name to the Motion by typing an instance name for Motion Tween as follow :

9. Create a new timeline layer.
10.On the new layer create another Movieclip and give it an instance name "newMovie".
11.Create new layer and call it "Actions" and open the action panel (Windows > Actions)
12. In the action panel type the following :

//myMotion is the motion instance name
//myMovie is the target Movie clip
//tweenInstanceName.addTarget (mcInstanceName)

myMotion.addTarget(newMovie);

13. Test Movie and you should see both Movie clips has the same animation.

Tip 3: New Flex component Icon in Flash CS4: Flex Components that was built in Flash CS4 has unique Flex icon that distinguish it from Flash Movie clips.

1. Quit Flash CS4.
2. Download and install Flex Component Kit for Flash CS3 Professional using Adobe Extension Manager CS4.

Note : it is saying Flex Component Kit for Flash CS3 but it also works for Flash CS4 "promise am telling you the truth".

3. Launch Adobe Flash CS4.
4. File > New and select "Flash File(ActionScript 3.0) and click OK.
5. Open the Commands menu and it should look like this if the kit was installed correctly :



6.Using the Rectangle tool create a rectangle on stage.
7.Select the rectangle on stage and convert to Movieclip.
8.Commands > Convert Symbol To Flex Component.
9.Windows > Library to open Library if it is not already and you should see the new pretty icon as follow :



How about that :), pretty cool.

Now you can publish and use this symbol in Flex. I will be talking about this in future posts.


Thanks,
Tareq

Slice 9 in Adobe Flash CS4

Lately I have been getting many questions and complains regarding Slice 9 and why it's not functioning correctly when doing certain things , so i decided to write this blog to clarify two things :
- What is Slice 9 and how the user can you use it.
- Feature Limitations.

First let me talk a little bit about Slice 9 concept and then i will tell you about what you can and cannot do with slice 9.

The concept of Slice 9 is to split the Movieclip into 9 areas that are going to be scaled independently.
Why?? Using the Slice 9 grid,Users can control which areas to be scaled and which not to be scaled.For instance, many designers don't want see the corners of a custom component to be distorted when scaling that component.

As you see in the graph below Flash Authoring will divide the Movieclip into 9 areas that going to be scaled as below

1. No scale 2. Horizontal scale 3. No scale
4. Vertical scale 5. Horizontal and Vertical scale 6. Vertical scale
7. No scale 8. Horizontal scale 9. No scale



Figure 1. Slice 9 areas.

Nothing better than an example to demonstrate how to use scale 9

1. Launch Flash CS4 "if you don't have Flash CS4 go buy it :)".
2. File > New and then Select "Flash File (ActionScript 3.0).
3. Select Rectangle Tool from the ToolBar as follow :



Figure 2. ToolBar Panel.

4. From Properties panel (Window > Properties).Under Rectangle Options lock the rectangle corner and set them to 15 as follow



Figure 3. Properties Panel.

5. Draw Rectangle on Stage.
6. Select the Rectangle and the stroke by double clicking on it.
7. Modify > Convert To Symbol.
8. Make sure Symbol type is MovieClip.
9. Turn on "Enable guides for 9-slice scaling" as follow :



Figure 4. Convert To Symbol dialog.

10.Click OK.
11.Double click on the symbol to go into Edit mode and you should be seeing the following :



Figure 5. Slice 9 Edit Mode.

Moving those guides will determine which areas are going to be scaled :
a. Horizontally
b. Vertically
c. No Scale
as i explained above "Figure 1".

12.Exit "Edit Mode" by clicking on Scene 1 as follow :



Figure 6. Exit Edit Mode.

13. Now try to scale the rectangle as follow :



Figure 7. MovieClip with Slice 9.

Notice that neither the stroke nor the corners have been scaled.

Now let's try to turn off Slice 9 and see the difference. You can turn off Slice 9 by doing the following :

1. Right click on the Symbol inside the library and select "Properties".
2. Turn off "Enable guides for 9-slice scaling".
3.Click Ok.

You will see that the Rectangle on stage looks like below :



Figure 8. MovieClip without Slice 9.


Slice 9 limitations :
1. You can apply Slice 9 only on a MovieClip ( No Shape , No Button).
2. You can only Scale Slice 9 horizontally or vertically and if you try the following type of transformation,Slice 9 will get automatically turned off :
a. Skew.
b. Rotate.