Home Community Submit Tutorials Downloads Gallery Links Contact FAQ's / Help
  Home
  Submit Tutorials
  Community
  Tutorials
  Fonts
  Templates
  Affiliates
  Photography Corner
  Site Map
  Contact Us
 
Affiliates
  Pixel Apex
  Tutorial Collection
  Racuda
  Adobe Tutorialz
  Pixel2life
  Good-Tutorials
  Tutorialized
  Deviantart
  Chipmunk-Scripts
  Majesticlicks
 
Tutorial Categories
3D Studio Max
Adobe Photoshop
Adobe Fireworks
Adobe Flash
Adobe Illustrator
ASP.NET
Dreamweaver
eCommerce
Gimp
Maya
PHP Coding
Swift 3D Swift 3D
Windows Operation
 
Tutorial
Name:
Shoe Template
Author:
Pixel Digest
Gallery Image
Name:
Flower
Author:
Pixel Digest
 
Search:
Search Example: Orb, Oman3d, Adobe Photoshop or Picture Editing
 
 
Writing Text - Learn how to create this writing text effect using a pen with Flash 8.
Introduction: In this tutorial I will teach you how to create a Writing text effect using a pen that follows the text. It is a very simple affect no action scripts, all I used it one layer. Its a nice affect you can add to an into to your flash projects.
 

 

Learn how to create the flash text effect above 

 

Part1: Setting up the workspace.
Ok, let us get started. Create a new Flash Document, Click Modifyarrow Document, here is where you can change the background color, and the dimensions of your movie. Since I am creating this for explanation I sat the size to 477 x 200 to fit into my page. However, you can create any dimension you need.  

This is the settings I used, as shown below

 

 

Part2: Adding the text Effect and setting up the Layers.
Click ok, when you are satisfied and lets get started. Click on the text Tool and write something in the middle of your work space. I typed P D using the Kunstler Script font, the size I used was 196. This will be different for you depending on the font and content you want. With that you should just have the letters shown below.
 

 

Click on the Subselection Tool select the text and Break it Apart

 

With the Subselection Tool selected, right click on the text and select Distribute to Layers this will create two layers with the letters P and D on its own layer.

 

At this point you should have the layers shown below.

 

Using the Selection Tool click on the Letters P and D and Break it apart once. This will allow you to erase parts of the letters. I did a search on google for pen and I found the image below that I will be using.

 

Create a layer and name it pen, place this layer below the P and D layers as shown below. You can also delete Layer 1.

 

Click on the P layer and add a Motion Guide . When you do this you will have the layers shown below.

 

Right Click on the P layer, select Properties, and select Guided as shown below. Repeat this for the Pen layer.

 

With that your layers should look similar to the image below

Part3: Adding the Guides
Click on the Guide Layer select the pen tool using the setting below.  

Still on the Guide Layer using the pen trace the First letter as shown below.

Still on the Guide Layer use the pen and trace the other part of the letter as shown below. The trace does not have to be perfect, just make it close as possible.

Click on the Pen layer, with the Feather on it. Right click on the feather and convert it into a Graphic

 

Using the Selection Tool   double click on the feather, this will allow you to edit the position. Still using the Selection Tool move the feather to where the feather point is on the X ash shown below.

Use to go back to the previous frame. Lock all the layers except the Pen layer

Using the Selection Tool drag the (X) over to the starting point, it should lock it self into the line

Click on frame 20 and press F6 to insert a keyframe on all of your layers.

Click on Frame 20 and move the pen over the End point as shown below. This should also lock it self into the line.

Press Enter and it should follow the path you created. If not Go back and find something you probable missed. Ok now we will do the other part of the P, Click on Frame 22, and press F6 to insert a keyframe of each of your layers as shown below.

We will follow the path you created, same as you just did, click on the pen and drag it to the point shown below.

Click on frame 40 and press F6 to insert a keyframe on all of your layers. Drag the pen over to the End point.

 

With that you should have the effect below.

Part4: Adding the Writing Effect to the letter P.
Lock all the layers except the "P" Layer, select frames 1 to frame 20 as shown below.

 

Right click and convert this into Keyframes 

At this point you can Hide the guide layer to allow you to edit the Letter better. Click on frame one, select the "P" layer and using the Erase Tool erase from where the point of the pen is. Repeat this from frame 1 to frame 20. With this you should have the effect below.

 

Repeat step 4, to add this effect o the other part of the Letter P. Once you get this part down it should be ease. You movie should look like the flash file below at this point. 

Part5: Adding the Writing Effect to the letter D.
Frame 40 should be the last frame, click on Frame 42, and press F6 to insert a new keyframe on each layer. Click on the Guide Layer select the pen tool and trace the letter  "D" as shown below.

This is just like the previous steps. Click on the Pen, unlock the layer, and move the pen to the start point. Click on Frame 60, press F6 to insert a new keyframe and move the pen to the end point. Make sure to remove the Letter "D" from frame 1 to frame 41. This will give you the effect below.

From here you can follow step 4 and you will be able to add this effect. It is the same steps so I think its redundant for me to say the same thing over again. Click here to download the flash (.fla) file.

Note: The example that I created, the pen is shown below the text. To fix this move the Pen layer above your text, not above the Guide Layer. In doing this you will have to use flash to cut the pen out of its background. If you break your image apart twice, it will allow you to use the erase to do this.

Download the flash file: Click Here

Finished:
Well that is it. Hope it is what you expected.

I also created a video tutorial for this example. The file is a 16.63 MB flash file. I have the link up on the video section on the forums. Users have to register to view the file, because of spam after you register. Email me at markc1822(at)pixeldigest.com with your user name and I will activate your account. Click here to register.

 

This Tutorial was Created By Mark
© 2007 pixeldigest.com. All Rights Reserved.

 
 
Help Support Us
 
 
 
News Updates
Updated the Forum, Unfortunately i could not use the same link as the old forum for the update. For the new link click Here. All the post and user name are still usable. So, if you previously registered you can still use the old username and password. Some accounts that was not used were deleted.  
 
News Update [10/16/07]
Yesterday on the 15th of October my gallery went down for some unknown reason. I was able to get the backup of the images, i just lost all the users. The gallery was not that active but i am sill pissed about what happened. I am in the process of reloading the gallery. Just give me some time and it should be up and running.Yesterday on the 15th of October my gallery went down for some unknown reason. I was able to get the backup of the images, i just lost all the users. The gallery was not that active but i am sill pissed about what happened. I am in the process of reloading the gallery. Just give me some time and it should be up and running.  
... Read More
 
Bookmark This Page
 
 
Untitled Document
Latest Gallery Image
 
Sponsors
Custom Shapes
Custom Shapes
 
 

Home | Submit | Tutorials | Forums | Gallery | Fonts | Downloads | Templates | Affiliates | Sitemap | Contact | FAQ's / Help

© 2005 - 2008 pixeldigest.com