{"id":23,"date":"2008-05-30T02:09:00","date_gmt":"2008-05-30T06:09:00","guid":{"rendered":"http:\/\/www.searchenginegenie.com\/web-design-blog\/?p=23"},"modified":"2008-05-30T02:09:00","modified_gmt":"2008-05-30T06:09:00","slug":"blurring-text-in-flash","status":"publish","type":"post","link":"https:\/\/www.searchenginegenie.com\/web-design-blog\/blurring-text-in-flash\/","title":{"rendered":"Blurring Text in Flash"},"content":{"rendered":"

Creating the new and Blurred Images <\/span><\/b><\/p>\n

<\/span><\/p>\n

I am using Photoshop to edit my images, you can use whatever image editor you choose as long as it has a blur filter. Open Photoshop and start a new document with these dimensions: width<\/i> 200px<\/i>, and height 60px<\/i> and set the background color<\/i> to white<\/i>. Now type out some text or use any image you wish to use, I wrote Web Design Blog <\/b>Now go through File> Export Preview<\/i> to save your image. I used the GIF<\/i> foremat and saved the file as Web-design.gif<\/i>.<\/span><\/p>\n

\"\"<\/span><\/a>
<\/span><\/p>\n

\n

<\/span><\/o:p><\/p>\n

2-<\/b> Now go back to your Photoshop document and select the text block. In the properties inspector, go to Effects > Blur > Gaussian blur ( as shown in the image below ).<\/o:p><\/span><\/p>\n

<\/span><\/p>\n

\"\"<\/span><\/a> <\/span><\/p>\n

\n

<\/span><\/p>\n

Set Blur radius to 3, and click OK. <\/o:p><\/span><\/p>\n

<\/span><\/o:p><\/p>\n

\"\"<\/span><\/a>
<\/span><\/p>\n

Now go to File> Export Preview > there set the settings so that you have a small file size and good quality, and click on Export > Save it as Web-design1.gif.<\/o:p><\/span><\/p>\n

3-<\/b> Start a new Flash document with these settings, Width: 300 pixels, and Height: 200 pixels, with a white background. Set the frames per second to 20. <\/o:p><\/span><\/p>\n

4-<\/b> Go to File> Import to Library, and import the two images.<\/o:p><\/span><\/p>\n

5-<\/b> Now, create a new layer. Go to Insert> Layer. You can name the layers to make life easier, you will surely need this as you learn more complicated stuff in Macromedia Flash. I will change the names of layers. Layer 1 = Original, and Layer 2 = Blurred.<\/o:p><\/span><\/p>\n

6-<\/b> Open the Library that you imported the images to. You can do that by pressing (Ctrl+Library), or you can go to Window > Library. Drag and Drop ( Web-design.gif ) to Layer 1 (original). Select the image and press F8 to convert it to a symbol. Select Graphic and name the symbol (original).<\/o:p><\/span><\/p>\n

7-<\/b> Now, we have to position the image. Select the Text image. If you can’t see the Align control box, then go to Window> Align, Or (Ctrl+K). And click on the highlighted buttons in the image bellow, follow the steps, 1,2,3. <\/o:p><\/span><\/p>\n

<\/span><\/o:p><\/p>\n

\"\"<\/span><\/a><\/p>\n

<\/span><\/p>\n

8-<\/b> Repeat step 6, and drag the second image (Web-design1.gif) to layer 2 (blurred ), and don’t forget converting it to a symbol. Repeat step 7 to align the image to the center. The blurred image will cover the original image. <\/o:p><\/span><\/p>\n

9-<\/b> Click on frame 40 and drag down to select the layer below, and click F6 to create new key frame for both layers. Do the same thing to frame 20 for both layers. <\/o:p><\/span><\/p>\n

<\/span><\/o:p><\/p>\n

\"\"<\/span><\/a><\/p>\n

10-<\/span><\/b> In frame 1 of your second layer ( blurred ) Set the Tween to Motion from the properties inspector. Click on the blurred image and then set the Alpha to 0%.<\/span><\/span><\/p>\n

<\/span>\"\"<\/span><\/a><\/p>\n

<\/span>
11-<\/b> In frame 20 of the blurred layer, set the Tween to Motion and set Alpha to 100%. Then Click on frame 40 and set Alpha to 0%. Your timeline should look like the one below.
<\/span><\/span><\/span><\/p>\n

\"\"<\/span><\/a><\/p>\n

<\/span><\/p>\n

\n

Now if your try your movie, it should look just fine. But for a smoother effect Go to Frame 1 of the first layer ( original ) with set the Tween to motion and Alpha to 100%, Then go to Frame 20, set Tween to Motion, and set Alpha to 0%. Lastly click on Frame 40 and set Alpha to 100%.<\/o:p><\/span><\/p>\n

That must do it, you can now text your movie to see the animation in Action.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Creating the new and Blurred Images I am using Photoshop to edit my images, you can use whatever image editor you choose as long as it has a blur filter. Open Photoshop and start a new document with these dimensions: width 200px, and height 60px and set the background color to white. Now type out […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-23","post","type-post","status-publish","format-standard","hentry","category-flash"],"_links":{"self":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":0,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/posts\/23\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/media?parent=23"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/categories?post=23"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.searchenginegenie.com\/web-design-blog\/wp-json\/wp\/v2\/tags?post=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}