Sunday, July 17, 2011

How to import Photoshop and Illustrator Files in Flash

Before importing Photoshop and Illustrator files in Flash first edit the preference settings for Photoshop and Illustrator as your requirement. Otherwise files will be imported in default setting which may be not what you wanted. For setting the preference see the following artcle:
After setting the preference go to File --> Import --> Import to Stage or Import to Library  and go to your ai or psd formatted file location.

Import window
Import settings

Select your file and click open and you will see another window showing some options set your requirement and click ok. All element from the files you select will be placed in your stage. One thing to remember before creating design in Photoshop or Illustrator is that make your design using RGB mode not CMYK mode because CMYK mode is not compatible with flash.

Importing Photoshop Files (psd format) in Flash

Two main Graphical software used in designing are Adobe Illustrator and Photoshop. For Better appearance in Flash sometimes you need to design element in Illustrator or Photoshop then import with Flash.(See the Difference between Photoshop and Illustrator) There are some key feature for this task. 

Flash supports importing different graphical software created artworks into it. In Flash you can set your preference how you want import these files. You can set you preference for  Photoshop  files means psd format files in flash

For setting your preference for Photoshop files first go to Edit --> Preferences and you see the following window.

Import Image Layers As.
Bitmap Images With Editable Layer Styles. Import Image as Editable Bitmap
Flatten Bitmap Images. Import image as non-editable bitmap
Create Movie Clips. Imports  image as movie clip symbol.

Import Text Layers As.
Editable Text. Import text from Photoshop  as editable text
Vector Outlines. Import text as vector paths and also convert it as a movie clip.
Flattened Bitmap Images.Import as non-editable Bitmap
Create Movie Clips. Imports as movie clip symbol

Import Shape Layers As.
Editable Paths And Layer Styles. Import shape as editable vector path.
Flatten Bitmap Images. Import image as non-editable bitmap.
Create Movie Clips. Import as movie clip symbol.
Layer Groups
Create Move Clips Import all groups as movie clip symbol.

Merged Bitmaps
Create Movie Clips Import all the shape layers as movie clip.
Publish Settings
Compression. Select Lossy (JPEG) or Lossless (PNG/GIF) compression mode you want. For the Lossy compression, from Publish Setting or Custom option select the quality 1 to 100

After choosing all of your preference for Photoshop click OK to save your preference settings. Also see Importing Illustrator Files (ai format) in Flash.
After setting the preference now Import Photoshop files in Flash.

Importing Illustrator Files (ai format) in Flash

Two main Graphical software used in designing are Adobe Illustrator and Photoshop. For Better appearance in Flash sometimes you need to design element in Illustrator or Photoshop then import with Flash (See the Difference between Photoshop and Illustrator).There are some key feature for this task.

Flash supports importing different graphical software created artworks into it. In Flash you can set your preference how you want import these files. You can set you preference for Illustrator files means ai format files in flash

For setting your preference for Illustrator files first go to Edit --> Preferences and you see the following window.


 From the window set the following things:

General.
Show Import Dialog Box. Select to show AI File Importer dialog box.
Excludes Objects Outside Art Board. In a simple form select  the artboard or crop area.
Import Hidden Layers. Select whether flash import hidden layers too.

Import Text As.
Editable Text. Select this Radio button  to Import Text in Editable format
Vector Outlines. Select this Radio button  to import text as vector paths; Normally used for unaltered appearance.
Bitmaps. Select this Radio button  to Import Text as un-editable bitmap
Create Movie Clips. Select this checkbox with all above three cases to Imports text as a movie clip for keeping all art effect

 Import Paths As.
Editable Paths.Used to  Import  paths of Illustrator files as editable
Bitmaps. Used to import paths as un-editable  bitmap format to keep the original appearence.
Create Movie Clips. Imports as a movie clip symbol

 Images.
Flatten Bitmaps To Maintain Appearance.Import an image as  bitmap; not editable.
Create Movie Clips. Imports as a movie clip symbol

Groups.
Import As Bitmaps. Import all objects in the group as a bitmap; not editable.
Create Movie Clips. Imports as a movie clip symbol

Layers.
Import As Bitmaps. Import the layer as a bitmap; not editable.
Create Movie Clips. Imports as a movie clip symbol


Explained above are the attribute you will find on the preference window. Select which one you preferred and then click OK. Also see Importing Photoshop Files (psd format) in Flash.
After setting your preference Now import your illustrator files in Flash.

Saturday, July 16, 2011

Change Position with shape tweening

Shape tweening can be used to create awesome animation by moving different shape position. Here is simple example how you do this.Add more layers for creating more attractable and complex animation.

Let draw a circle in the first frame of the stage with flash drawing tool and selecting the shape on the first frame with selection tool form insert menu select shape tween or with selection tool right click on the circle and select the create shape tween.

Select frame 20 from the timeline and from Insert -> timeline select Keyframe or right click on 20th frame and select insert a keyframe. You will see the timeframe upto 20th frame will look like with pale color.
Timeline color change after selecting keyframe

Now with selection tool (for shortcut press v) on frame 20 select the circle and drag it on the right side of the stage. 
Now repeat the same things on frame 40. First on frame 40 add a key frame and then with selection tool grab the circle and drag it to another position. You can repeat this for several times.
Now from control menu test the movie or press Enter to test.
Final timeline
The final time line will look like some thing as shown in the above picture.Change frame no for creating movement faster or slower.
  1  2   Next

Createing a shape tween

Here is a very easy example for understanding shape tweening. One can make more complex animation with this.

With any drawing tool create a shape on the very first frame of the stage. Here on the example I draw a rectangle. For Selecting rectangle form drawing tool select rectangle or press R for shortcut.
A rectangle

Now select frame one as the rectangle is selected and from insert menu click on shape tween or right click on the object and select create shape tween.
Now select another frame suppose frame 20, and from insert->timeline select blank key frame or right click on frame 20 and select Insert blank key frame or just select frame 20 and press F7 as shortcut.
Insert blank key frame on frame 20
Now again with flash drawing (press O as shortcut) tool draw another shape. And from control menu -> Test movie click on In flash professional. Or just press Enter to play the animation. Here I draw a circle.
Shape tweening
You see from the initial position the rectangle is converted into a circle shape shifting in circle's position.


  1  2   Next

Creating Animation with Shape tweening

It is similar as motion tweening. The main difference between them is that shape tweening's main purpose is to change or transforming shapes.Shape tweening can only be applied in editable shape. Different types of shape can be created using any drawing tools from flash like oval, rectangle etc. Then you can transform one shape to another over time like form oval to a rectangle.By default shape tweening is unpredictable means you won't know how they proceed but you can provide shape hit to let flash know how it should be proceeded.

See the example for better understanding   
        
                        How to create shape tween.
                        How to change Position with shape tweening


  1  2   Next

Friday, July 15, 2011

Text in Flash CS5


Two types of text available in flash CS5
1.       TLF (Text Layout Framework)
2.       Classic
Classic is same as text available in previous versions and can be categorized as static, dynamic, and input. TLF provides advance capabilities.

Now Select Text tool simply by clicking Text tool or just press shortcut T. Then you will see the Text property window. Form here you have to select as per your requirement. Your options are as follow:
Text Properties
Now from option one selected as black round and indicated as 1 if you select Classic Text Then form from no 2 option as per figure you will see three options. They are Static Text, Dynamic Text and Input Text.

Static Text is used to show normal text which have no interaction through out the process. The Dynamic Text is used to provide user interaction, work as variable change as per instruction such as weather temperature etc. And The input Text is used to take input like survey. 

On the other hand if you select TLF text in option 1 then you also have three options, Read Only, Selectable and Editable.

TLF Text used for more advanced text effects like creating  columns, rotating text, for various color effects in the Property Inspector.

In flash CS5 another interesting property that can be used with text tool is Break Apart. With this tool you can split text into single character shapes. For breaking apart first select the text with selection tool (ctrl+v) then from Modify menu select Break Apart.

Similarities and dissimilarities of AS2.0 and AS3.0


Dissimilarities with AS2
AS3 is located in Class files or in the Time line.
Object oriented.
Data loading changed.
Data control feature.
Text control
In AS3 Action Scripts can’t is added directly to a movie clips or button instances.
The way of Triggering events has also been changed in AS3.
XML files are handled differently
Namespaces use in projects
Drawing with shape class
Can be extended with external Action Script libraries
AS3 also can be extended using C/C++

Similarities with AS2
Working procedure with Variables
Working process with Math object
If/Else Statements logic and structure
Switch Statements logic and structure
Use of String
Date to control the use of date and time
Array to build a structured collection of data
Boolean to specify a true or false
Variable names are still case sensitive can’t start with number