Tutorials

Tamil Websites

2011-05-30T04:11:00.001-07:00

Glittering Text Tutorial

2007-02-07T04:42:00.000-08:00

Glittering Text Tutorial

(For my tutorial you MUST have a paint shop program and Jasc Animation shop)

We will be making this:

First, you need some glitter. I found a whole bunch at Design by Aylana:

Don’t worry that the glitter is sparkling. Just right click and save the picture of the glitter.

For this tutorial, feel free to use the glitter below. Just Right click and save it.

…………………………………………………………………………………………………………………
Now open Paint shop (any version) and Jasc Animation shop. Open the glitter file in Animation Shop ONLY. In this case, “orange-002″. You will now see all the frame that make the glitter move and sparkle. Some glitters have a lot of frames, some have only two. Our glitter has 3 frames.

Now we have two chioces:
ONE: For a permanent copy of each of the frames, click and highlight ONE of the panels. There will be a blue and red circle around the one you have selected. (see above) RIGHT CLICK and choose “SAVE FRAME AS”. Choose a name (orange1.gif, orange2.gif, etc.) and save the new files somewhere you can find them.
TWO: For a temporary copy, RIGHT CLICK and choose COPY.

Now, we open these panels in PSP.

If you used ONE, open each individual glitter frame in PSP.

If you used TWO, simply paste the frame into PSP.

There MUST be more than ONE GLITTER frame. There should be at least two, if not more than that. For our example, there should be five frames now in PSP, waiting for you to use. Make sure all the frames are open at this time, sitting on your PSP desktop.

Open a new document. A good one for font work is 500×200. If you plan to use the document for signing emails, or putting on “any” background, be sure you choose TRANSPARENT. For this tutorial, you need a TRANSPARENT background, 500×200.

…………………………………………………………………………………………………………………

Fill Method

1. Click on the FILL button and change it from solid color to PATTERN.

That’s the circle of dots, if you don’t already know. If you’re having trouble getting to this box, just hold your mouse down a little longer on the color. Release the mouse when you’ve chosen the PATTERN feature.

2. A bizarre pattern is now in the FILL area. CLICK IT.

This box will now open. We’re going to change the “leopard” pattern to glitter by clicking on that and scrolling UP until we see our glitter.

Basically, any picture or pattern currently on your desktop becomes a ‘pattern’ you can choose. (This is true in regular fill/color patterns as well as for text ones.) Chose the first picture in this list, in my case “image 2″.

3. Switch your materials around so the pattern is on the bottom, and a solid color is on the top. The solid color will be a border for your image, and helps to anchor the text and give it a little edge.

4. Click the TEXT tool. Time to choose a font. You can visit my Using Fonts in PSP page for links and instructions about fonts.

Write something in the box provided. For this tutorial, I just used my name. Choose any size you like. You can always resize later. Be sure to choose a WIDE font. You are going to FILL this font, so you can’t choose something small and thin.

5. CROP the image to where you want it. This is good to get out of the way now.

6. SAVE the image.

7.Repeat step 2, choosing the SECOND FRAME this time. Watch out! Be sure you’re choosing the right frame. “Current Pattern” is what you already have selected, which was “image2″. You want “image3″ this time. Watch your text. You should see the pattern change when you get a new one.

9. Repeat step 6 (save). Repeat step 9 (this step). Continue until all frames for your glitter have been used. Remember to save each under a NEW name. “kristen2″ etc.

…………………………………………………………………………………………………………………

Now we go back to Animation Shop.

If you closed it, open Animation shop.

Easiest thing? Use the ANIMATION WIZARD. That’s the first button on the toolbar, or FILE and WIZARD.

Follow the Wizard instructions. Choose “Same size as the first image frame”, click next. Choose “transparent” if you want no background to appear, click next. Leave defaults, click next. Choose “repeat indefinitely” and change the frame display time to “20″ (see note below).

*Display time: You can check the rate of movement of the original glitter by clicking on a frame, choosing “frame properties” and seeing the rate. Our example moves at a rate of “20″. Click “add image” and choose all four of your saved PSP image files.

If you like, you can now reorder the frames so they appear in the right order. Use “move up” or “move down” to move the frames around. When they’re where you think you’ll want them, click next and then finish.

You have an animation!

If you click the “VIEW ANIMATION” button (at the far right edge of the toolbar, or VIEW and ANIMATION) you will see your text move around.

Play with the speeds of the frames!

Now save your image!

Follow the Wizard defaults to the end. This will compress your file a little so it’s not so big. Choose “File” and “Save As” and save your animation.

MS Publisher Tutorial

2006-11-15T07:23:00.000-08:00

Introduction into Microsoft Publisher
Microsoft Publisher 2000 helps you easily create, customize, and publish materials such as newsletters, brochures, flyers, catalogs, and Web sites. Publish easily on your desktop printer

This tutorial will help you get started with Microsoft Publisher and may solve some of your problems, but it is a very good idea to use the Help Files that come with Microsoft Publisher, or go to Microsoft's web site located at http://microsoft.com/office/publisher/default.htm for further assistance.

Back to top

Starting Microsoft Publisher

Two Ways

Double click on the Microsoft Publisher icon on the desktop.

Click on Start --> Programs --> Microsoft Publisher

On the File menu, click New

Click the Publications by Wizard tab

In the Wizards pane, click the type of publication you want

In the right pane, click the design you want

Click Start Wizard

To make changes to the publication's color scheme, layout, or personal information now, click Next and step through the wizard's questions to make the desired changes.

When you finish making changes, click Finish

In you publication replace the placeholder text and pictures with your own or with other objects.

On the File menu, click Save

In the Save In box, select the folder where you want to save the new publication

In the File name box, type a name for your publication

Click Save

On the File menu, click New

In the Catalog, click Blank Publications

Click the publication type you want and then click Create

In the Quick Publication Wizard pane, click the option you want

In the bottom pane, follow the instructions provided

Repeat steps 4 and 5 for each option

On the File menu, click Save

In the Save In box, select the folder where you want to save the new publication

In the File name box, type a name for your publication

Click Save

On the File menu, click New

Click Templates

Double-click the template you want to use for your publication. (Publisher opens a copy of the template)

Make the changes you want to create a new publication

On the File menu, click Save

In the Save In box, select the folder where you want to save the new publication

In the File name box, type a name for your publication

Click Save

On the File menu, click New

Click the Blank Publications tab

Click the publication type you want and then click Create OR If you do not see the type of publication you want, click Custom Page at the bottom of the Catalog, and then choose the options you want

On the File menu, click Save

In the Save In box, select the folder where you want to save the new publication

In the File name box, type a name for your publication

Click Save

On the File menu, click Open

Click the publications you want to open, and then click Open. If you do not see the file you want, switch to the drive or folder you previously saved it in.

On the Objects toolbar, click the Table Frame Tool

Position the pointer where you want a corner of the table to appear, and then drag the mouse diagonally

In the Create Table dialog box, choose the options you want. As you click different table formats, the Sample box displays them

Click OK

In the table, click where you want to add text, and then start typing. (The table automatically expands when your text fills the cell, unless you lock the table)

Move to the next cell you want to type in

On the File menu, point to Pack and Go, and then click Take to Another Computer. The Pack and Go Wizard takes you through each step of the packing process. Click Next to move to the next step.
If you haven't saved your publication already, the wizard will ask you to save it

If you're taking your publication on disk to another computer, when the wizard asks you to choose a location for saving your file, click A: OR If you're putting your files on an external drive, on a network, or on your computer's hard disk, click Browse, choose the drive and folder you want, and then click OK

Click Next

To embed TrueType fonts and to create links for embedded graphics, click the options you want and add a check mark. OR To not include linked graphics, click to remove the check mark.

Click Next

Click Finish

In Publisher cannot find a linked graphic while packing your publication do one of the following:

Click Retry after you insert the disk or CD-ROM containing the original graphic into the appropriate drive.
Click Skip to leave the current link and replace the graphic later
Click Browse to locate a graphic that has been moved or to select another graphic and link it.

Insert another disk if Publisher prompts you, and click OK. Remember the ordering of your disks for when you unpack them

Click OK

Unpack.exe is the program you use to unpack your files, which will be on the first disk.

On the Tools menu, point to Commercial Printing Tools, and then click Color Printing.

Black and White Printing

Process-color printing
1. In the Print all colors as box, click Process colors (CMYK).
2. Click OK

Spot-color printing

source: http://www.bcschools.net/staff/MicrosoftOffice.htm

MS ExcelTutorial

2006-11-15T07:22:00.000-08:00

Introduction into Microsoft Excel
Microsoft Excel is allows you to create professional spreadsheets and charts. It performs numerous functions and formulas to assist you in your projects.

This tutorial will help you get started with Microsoft Excel and may solve some of your problems, but it is a very good idea to use the Help Files that come with Microsoft Excel , or go to Microsoft's web site located at http://microsoft.com/office/excel/default.htm for further assistance.

Back to top

Starting Microsoft Excel

Two Ways

Double click on the Microsoft Excel icon on the desktop.

Click on Start --> Programs --> Microsoft Excel

Click the cell that you want to enter the formula.

Type = (an equal sign).

Click the Function Button

Select the formula you want and step through the on-screen instructions

Precedence	Operation	Operator
1	Exponentiation	^
2	Multiplication	*
2	Division	/
3	Addition	+
3	Subtraction	-
4	Concatenation (putting 2 strings together, like Jenn & ifer)	&
5	Equal To	=
5	Greater Than	>
5	Less Than	<

Make sure you have the Formatting toolbar visible

Click on View --> Toolbars --> Formatting

Select cells you wish to format by left clicking on them and highlighting them

Click the button to shade a cell and/or the to give a cell a border

Select over the text you want to make your chart with

Click Insert --> Chart

Select the type of chart you want

Confirm or change your data range

Update the Chart Options

Select if you want to put it into the current worksheet or into a new worksheet

source: http://www.bcschools.net/staff/ExcelHelp.htm

MS PowerPoint Tutorial

2006-11-15T07:17:00.000-08:00

Introduction into Microsoft PowerPoint
Microsoft PowerPoint is a powerful tool to create professional looking presentations and slide shows. PowerPoint allows you to construct presentations from scratch or by using the easy to use wizard.

This tutorial will help you get started with Microsoft PowerPoint and may solve some of your problems, but it is a very good idea to use the Help Files that come with Microsoft PowerPoint, or go to Microsoft's web site located at http://microsoft.com/office/powerpoint/default.htm for further assistance.

Back to top

Starting Microsoft PowerPoint

* Two Ways

1. Double click on the Microsoft PowerPoint icon on the desktop.

Click on Start --> Programs --> Microsoft PowerPoint

Creating & Opening a Presentation
After you open up Microsoft PowerPoint, a screen pops up asking if you would like to create a New Presentation or Open An Existing Presentation.

AutoContent Wizard

Creates a new presentation by prompting you for information about content, purpose, style, handouts, and output. The new presentation contains sample text that you can replace with your own information. Simply follow the directions and prompts that are given by Microsoft PowerPoint.

Design Template

Creates a new presentation based on one of the PowerPoint design templates supplied by Microsoft. Use what is already supplied by Microsoft PowerPoint and change the information to your own.

Blank Presentation

Creates a new, blank presentation using the default settings for text and colors. Go to next step: Creating A Blank Presentation

Select Open An Existing Presentation from the picture above

Click on your presentation in the white box below step 1

If you do not see your presentation in the white box, select More Files and hit OK.

Locate you existing Presentation and hit the Open button

Back to top

Create a Blank Presentation
After you select Blank Presentation a window pops up asking you to select the layout of the first slide.

Pre-Designed Slide Layouts (Left to Right)

* Title Slide
* Bulleted List
* Two Column Text
* Table
* Text & Chart
* Chart & Text
* Organizational Chart
* Chart
* Text & Clip Art
* Clip Art & Text
* Title Only
* Blank Slide

NOTE:If you already know what you want in your next slide, it is a very good idea to choose one of the pre-designed layouts from above. However if you do not, then you can still insert what you want in throughout your Presentation anytime you desire. Just choose Blank Slide and insert items as you see fit.
Back to top

Different Views That PowerPoint Demonstrates
There are different views within Microsoft PowerPoint that allow you to look at your presentation from different perspectives.

Normal View	Outline View	Slide View	Slide Sorter View	Slide Show View

Switches to normal view, where you can work on one slide at a time or organize the structure of all the slides in your presentation	Switches to outline view, where you can work with the structure of your file in outline form. Work in outline view when you need to organize the structure of your file.	Switches to slide view, where you can work on one slide at a time	Displays miniature versions of all slides in a presentation, complete with text and graphics. In slide sorter view, you can reorder slides, add transitions, and animation effects. You can also set the timings for electronic slide shows.	Runs your slide show in a full screen, beginning with the current slide if you are in slide view or the selected slide if you are in slide sorter view. If you simply want to view your show from the first slide: Click Slide Show at the top of the screen Select View Show

Slide Manipulation

* Inserting A New Slide
1. Click Insert at top of screen
2. Select New Slide
.
* Formatting A Slide Background
o You can format your slide to make it look however you would like, whether it be a background color, picture, or a design template built into Microsoft PowerPoint. The next step will show you how to apply a Design Template, but the other items mentioned above can be accomplished the same way.
1. Click Format at the top of the screen
2. Select Apply Design Template

Select Design you wish to apply

Click Apply Button

Inserting Clipart & Pictures

Display the slide you want to add a picture to.

Click Insert at the top of the screen

Select Picture

Select Clip Art

Click the category you want

Click the picture you want

Click Insert Clip on the shortcut menu

When you are finished using the Clip Gallery, click the Close button on the Clip Gallery title bar

Steps 1-4 are very similar when inserting other Pictures, Objects, Movies, Sounds, and Charts

Back to top
Adding Transitions to a Slide Show

You can add customized transitions to your slide show that will make it come alive and become appealing to your audience. Follow these steps when adding Slide Transitions.

In slide or slide sorter view, select the slide or slides you want to add a transition to.

On the Slide Show menu at the top of the screen, click Slide Transition

In the Effect box, click the transition you want, and then select any other options you want

To apply the transition to the selected slide, click Apply.

To apply the transition to all the slides, click Apply to All.

Repeat the process for each slide you want to add a transition to.

To view the transitions, on the Slide Show menu, click Animation Preview.

Click Slide Show at the lower left of the PowerPoint window.

On the Slide Show menu, click View Show.

On the View menu, click Slide Show.

Press F5 on the keyboard

Forward Navigation

Simply click on the left Mouse Button or hit the Enter Button on your keyboard

Reverse Navigation

Hit the Backspace on the keyboard

Exiting the show

Hit the Esc Button on the keyboard

Open the Presentation you want to pack

On the File menu, click Pack and Go

Follow the instructions in the Pack and Go Wizard.

Unpack a presentation to run on another computer

Insert the disk or connect to the network location you packed the presentation to

In My Computer, go to the location of the packed presentation, and then double-click Pngsetup

Enter the destination you want to copy the presentation to

source: http://www.bcschools.net/staff/PowerPointHelp.htm

MS Word Tutorial

2006-11-15T07:15:00.000-08:00

Introduction into Microsoft Word
Microsoft Word is a powerful tool to create professional looking documents.

This tutorial will help you get started with Microsoft Word and may solve some of your problems, but it is a very good idea to use the Help Files that come with Microsoft Word , or go to Microsoft's web site located at http://microsoft.com/office/word/default.htm for further assistance.

Back to top

Starting Microsoft Word

Two Ways

Double click on the Microsoft Word icon on the desktop.

Click on Start --> Programs --> Microsoft Word

Back to top

Viewing the toolbars

The toolbars in Microsoft Word provide easy access and functionality to the user. There are many shortcuts that can be taken by using the toolbar. First, make sure that the proper toolbars are visible on the screen.

Click View

Select Toolbars

Select Standard, Formatting, and Drawing

Other toolbars can be selected if you wish

Name	Icon	Description
New Blank Document		Creates a new, blank file based on the default template.
Open (File menu)		Opens or finds a file.
Save (File menu)		Saves the active file with its current file name, location, and file format.
Mail Recipient		Sends the contents of the document as the body of the e-mail message.
Print (File menu)		Prints the active file or selected items. To select print options, on the File menu, click Print.
Print Preview (File menu)		Shows how a file will look when you print it.
Spelling and Grammar (Tools menu)		Checks the active document for possible spelling, grammar, and writing style errors, and displays suggestions for correcting them. To set spelling and grammar checking options, click Options on the Tools menu, and then click the Spelling and Grammar tab.
Cut (Edit menu)		Removes the selection from the active document and places it on the Clipboard.
Copy (Edit menu)		Copies the selection to the Clipboard.
Paste (Edit menu)		Inserts the contents of the Clipboard at the insertion point, and replaces any selection. This command is available only if you have cut or copied an object, text, or contents of a cell.
Format Painter (Standard toolbar)		Copies the format from a selected object or text and applies it to the object or text you click. To copy the formatting to more than one item, double-click , and then click each item you want to format. When you are finished, press ESC or click again to turn off the Format Painter.
Undo (Edit menu)		Reverses the last command or deletes the last entry you typed.
Redo (Edit menu)		Reverses the action of the Undo command.
Hyperlink		Inserts a new hyperlink or edits the selected hyperlink.
Tables and Borders		Displays the Tables and Borders toolbar, which contains tools for creating, editing, and sorting a table and for adding or changing borders to selected text, paragraphs, cells, or objects.
Zoom		Enter a magnification between 10 and 400 percent to reduce or enlarge the display of the active document.
Office Assistant		The Office Assistant provides Help topics and tips to help you accomplish your tasks.

Click on File

Select New

To create a blank document, simply select Blank Document. To create a document based on one of the templates provided in Microsoft Word, select which one you would like to create and select OK

Highlight the text that you want to format by dragging your mouse over while holding down the left mouse button

Change the text to your desire

Click where you want your table to go

Click Table at top of screen

Select Insert

Select Table

Give your table dimensions

Click where you want your picture to go

Click Insert at top of screen

Select Picture

Select Clip Art or From File

Select picture and click Insert

Click Insert at top of screen

Select Page Numbers and/or Date & Time

Click Tools at top of screen

Select Spelling and Grammar

source: http://www.bcschools.net/staff/WordHelp.htm

flash | Pool Of Squares

2006-11-08T15:04:00.001-08:00

Pool

of Squares

Manny Dimatulac
aka Thoripes

This is a little animation that
plays a simple animation whenever the mouse hovers over the
area:


Flash 5	Flash 4

Less than 2kb, this is great
for loading screens or just cool effects to put on your
website. Of course, the animation doesn't have to be squares
growing and fading out. After mastering this, experiment
with different animations. Well enough chit-chat, let's get
started!

First off, open Flash 5 (for
Flash 4 users, I'll note what you need to change, if
necessary).

Hit CTRL+M to open up the movie
properties.

Change the width AND height to
150; change the background color to whatever you want; hit
Ok.

Next, Click Insert >
New Symbol; type "box" (w/o quotations), then click
Graphic.

Now you should be in the edit
screen of your new symbol, create a box with a transparent
background. To select a transparent background, click and
hold the bucket, then click the button with a red line
drawn across:

Next draw the square; any size will do for
now since we'll be modifying that later on. Select the
entire square, press CTRL+K to bring up the Align box,
click "To Stage" then click the middle buttons of "Align"
and "Distribute", this centers the box. This method is how
you'll be centering other objects throughout this
tutorial.

Note for Flash 4 users: this
is how your window should look (after hitting CTRL+K, press
these buttons):

Next create another symbol called "spin_box"
and make it a Movie Clip.

Open up your library (CTRL+L) and drag "box" into the
movie clip.

Select the box, then resize ()
it to a smaller size. Then center it.

Next, select frame 15 and hit F6. This creates a new
Keyframe for the animation.

Select frame 15, this selects all the objects in it
(which in this case is the box).

Next, resize that box again, but make it a lot bigger
this time.

Flash 4 Users, skip to
14a.

Select the box, then open up the Effects
Panel (Window > Panels > Effects).

In the drop-down box, select Alpha, then change 100%
to 0%. Skip ahead to 15.
1. Next, right-click the symbol, and choose
  properties. Choose the Color Effects tab, choose Alpha
  from drop-down box, then move the slider all the way to
  the left (0). Click OK. Skip to 16a.

Next, select this frame (the one with a box in it
).

Open up the Frames tab (Window > Panels > Frame). From
the Tweening drop-down box, select Motion. Skip to Next
page.
1. Double-click any frame in between 1 and 15,
  a dialog box should pop up. Select Tweening, then Motion
  from drop-down. Then OK.

Next, create a new Button symbol and name it
"trigger". For this symbol, make a square with a
background (i'd make it red outline, blue background just
for reference). The colors won't really matter, you'll
see...

Now, go back to spin_box's edit window. Select frames
1 through 15 and shift them all one frame so frame 1 will
be empty.

Put "trigger" in frame 1. Give frame 1 a stop
action...

Flash 5: Double-click
frame 1, + > Basic Actions > stop

Flash 4: Double-click
frame 1, Actions tab > + > stop

Select the trigger, center it, and set it's
alpha to 0 like we did with the box on the
previous page.

Now we'll actually make it a trigger to play the movie
by giving it some actions...

Flash 5: Select the
trigger, Right-Click, then Actions. + > Basic Actions >
Play. Next, select "on (release)" in the script window,
refer to the bottom of the dialog box, unlick, Release, and
click "rollover". Click Ok.

Flash 4: Double-click
trigger, select Actions tab > + > Play. Select "On
(Release)" unclick Release, then click Roll Over.

Now go back to the main stage (nothing
should be there). Drag spin_box from your library and
position it at the bottom left corner of the movie.

Next, select it, hold CTRL, then drag it to the right.
Repeat this step until you have the whole row filled up
with it.

Now select the entire row, hold CTRL, then drag up.
Repeat until the whole movie is filled.

This is how the movie should
look like if you select all the symbols:

Now Save the fla, then press CTRL+Enter to
save the swf. Don't test the movie here cause it might be
slow. Open the directory you saved it to, then
double-click the swf. YOU'RE DONE!!!

Here are the fla's if you
still don't understand something:

Flash 5

Flash 4

Now, that wasn't too hard was
it? This is actually my first flash tutorial I've ever
written, so sorry if it looks real sketchy, I'll be glad to
answer some questions you may have by
emailing me,
contacting me in IM (thoriphes2k1 or thoriphes2k2), or
posting on the
forums.

Manny Dimatulac

malocadi@hotmail.com

flash | Pool Of Squares

2006-11-08T15:04:00.000-08:00

Pool

of Squares

Manny Dimatulac
aka Thoripes

This is a little animation that
plays a simple animation whenever the mouse hovers over the
area:


Flash 5	Flash 4

First off, open Flash 5 (for
Flash 4 users, I'll note what you need to change, if
necessary).

Hit CTRL+M to open up the movie
properties.

Change the width AND height to
150; change the background color to whatever you want; hit
Ok.

Next, Click Insert >
New Symbol; type "box" (w/o quotations), then click
Graphic.

Now you should be in the edit
screen of your new symbol, create a box with a transparent
background. To select a transparent background, click and
hold the bucket, then click the button with a red line
drawn across:

Next draw the square; any size will do for
now since we'll be modifying that later on. Select the
entire square, press CTRL+K to bring up the Align box,
click "To Stage" then click the middle buttons of "Align"
and "Distribute", this centers the box. This method is how
you'll be centering other objects throughout this
tutorial.

Note for Flash 4 users: this
is how your window should look (after hitting CTRL+K, press
these buttons):

Next create another symbol called "spin_box"
and make it a Movie Clip.

Open up your library (CTRL+L) and drag "box" into the
movie clip.

Select the box, then resize ()
it to a smaller size. Then center it.

Next, select frame 15 and hit F6. This creates a new
Keyframe for the animation.

Select frame 15, this selects all the objects in it
(which in this case is the box).

Next, resize that box again, but make it a lot bigger
this time.

Flash 4 Users, skip to
14a.

Select the box, then open up the Effects
Panel (Window > Panels > Effects).

In the drop-down box, select Alpha, then change 100%
to 0%. Skip ahead to 15.
1. Next, right-click the symbol, and choose
  properties. Choose the Color Effects tab, choose Alpha
  from drop-down box, then move the slider all the way to
  the left (0). Click OK. Skip to 16a.

Next, select this frame (the one with a box in it
).

Open up the Frames tab (Window > Panels > Frame). From
the Tweening drop-down box, select Motion. Skip to Next
page.
1. Double-click any frame in between 1 and 15,
  a dialog box should pop up. Select Tweening, then Motion
  from drop-down. Then OK.

Next, create a new Button symbol and name it
"trigger". For this symbol, make a square with a
background (i'd make it red outline, blue background just
for reference). The colors won't really matter, you'll
see...

Now, go back to spin_box's edit window. Select frames
1 through 15 and shift them all one frame so frame 1 will
be empty.

Put "trigger" in frame 1. Give frame 1 a stop
action...

Flash 5: Double-click
frame 1, + > Basic Actions > stop

Flash 4: Double-click
frame 1, Actions tab > + > stop

Select the trigger, center it, and set it's
alpha to 0 like we did with the box on the
previous page.

Now we'll actually make it a trigger to play the movie
by giving it some actions...

Flash 4: Double-click
trigger, select Actions tab > + > Play. Select "On
(Release)" unclick Release, then click Roll Over.

Now go back to the main stage (nothing
should be there). Drag spin_box from your library and
position it at the bottom left corner of the movie.

Next, select it, hold CTRL, then drag it to the right.
Repeat this step until you have the whole row filled up
with it.

Now select the entire row, hold CTRL, then drag up.
Repeat until the whole movie is filled.

This is how the movie should
look like if you select all the symbols:

Now Save the fla, then press CTRL+Enter to
save the swf. Don't test the movie here cause it might be
slow. Open the directory you saved it to, then
double-click the swf. YOU'RE DONE!!!

Here are the fla's if you
still don't understand something:

Flash 5

Flash 4

Manny Dimatulac

malocadi@hotmail.com

Free Blog Content - How to add calendar to Blogger

2006-11-06T17:06:00.000-08:00

Free Blog Content - How to add calendar to Blogger

Flash Short cut Keys

2006-10-18T04:31:00.000-07:00

he following is a list of shortcut keys that I find most used in Flash. These are the same for Flash 5, Flash MX, Flash MX 2004, Flash 8. I have denoted these shortcuts using a PC. If your using a MAC, just change the CTRL to COMMAND.

Tools:

Selection Tool - V
Sub Selection Tool - A
Free Transform Tool - Q
Gradient Transform Tool - F
Line Tool - N
Lasso Tool - L
Pen Tool - P
Text Tool - T
Oval Tool - O
Flash Rectangle Tool - R
Pencil Tool - Y
Brush Tool - B
Ink Bottle Tool - S
Paint Bucket Tool - K
Flash Eyedropper Tool - I
Flash Eraser Tool - E

Zoom
Zoom In - CTRL + ‘+’
Zoom Out - CTRL + ‘-’

Frames

Add Frame – F5
Delete Frame – SHIFT + F5
Add Key Frame – F6
Add Blank Key Frame – F7

Symbol (MovieClip, Button, Graphic)

Turn Into Symbol – F8
Insert New Symbol - CTRL + F8

File

New Document - CTRL + N
Open Document - CTRL + O
Close Document - CTRL + W
Close All - CTRL + ALT + W
Save - CTRL + S
Save as… - CTRL + SHIFT + S
Import to Stage - CTRL + R
Publish - SHIFT + F12
Exit - CTRL + Q

Modifying and Editing

Undo - CTRL + Z
Redo - CTRL + Y

Cut - CTRL + X
Copy - CTRL + C
Paste - CTRL + V
Paste in Place - CTRL + SHIFT + V

Testing Your Movie

Test Movie - CTRL + ENTER
Debug Movie - CTRL + SHIFT + ENTER

Source: http://www.myflashresource.com/category/articles/flash-shortcut-keys/

ActionScript 3 Tip of the Day

2006-10-10T05:48:00.000-07:00

ActionScript 3 Tip of the Day

The release of Flex Builder 2 is around the corner and though the next version of Flash is still a ways away, ActionScript 3 will be a big part of Flex 2 and the impending release of Flash Player 9 (which arrives with Flex). ActionScript 3 is the next step forward and to help with the transition (for those of you deciding to make it), I thought, since I've been working with AS3 a bit lately, I'd make a new Tip of the Day thread for ActionScript 3.0 to help people prepare. So here we go:

ActionScript 3 Tips and Tricks:

06-19-06: Change the frame rate of your movie
06-20-06: Class scope is now bound to class methods
06-21-06: Graphics Object and the Drawing API
06-22-06: New Variable Types
06-23-06: Display Objects
06-24-06: New Import Directive
06-25-06: Type Casting and the as Operator
06-26-06: Unique Class Variables
06-27-06: New MouseMove Behavior
06-28-06: The delete Keyword and Class Members
06-29-06: The Dictionary Class
06-30-06: Label Statements
07-01-06: Detecting When the Mouse Leaves the Movie
07-02-06: SimpleButton Instances
07-03-06: Commas in Shorthand Array Definitions
07-04-06: Package Block
07-05-06: Same-file Helper Classes
07-06-06: Access Attributes
07-07-06: Abstract Classes
07-08-06: The override Keyword
07-09-06: Using prototype
07-10-06: Regular Expression (RegExp) Support
07-11-06: Approach to Depth Sorting
07-12-06: Deep Object Copies with ByteArray
07-13-06: Similarly Named Instance and Static Properties
07-14-06: EventDispatcher
07-15-06: Events and Event Types
07-16-06: Writing Inline XML
07-17-06: Determine Instance Class or Superclass
07-18-06: super() Placement (Now Anywhere)
07-19-06: Determining Current Frame Label
07-20-06: Multiple Arguments in trace()
07-21-06: Calling Event Handlers without Events
07-22-06: URLRequest for URL Strings
07-23-06: XML vs. XMLDocument
07-24-06: Loading Text and XML with URLLoader
07-25-06: is Operator (vs instanceof)
07-26-06: Flash 9: Timelines as Classes
07-27-06: RegExp: Email Validation
07-28-06: Render Event
07-29-06: XML: @ Operator for Attributes
07-30-06: Event Propagation Support
07-31-06: Get Sound Spectrum Information
08-01-06: Number() Conversion No Longer Interprets Octals
08-02-06: Garbage Collection: Reference Counting & Mark and Sweep
08-03-06: Weak References
08-04-06: Flash 9: BitmapData and Bitmaps from the Library
08-05-06: Changes in typeof
08-06-06: getBounds() vs getRect()
08-07-06: for..in and for each..in
08-08-06: Default Values for Function Parameters
08-09-06: Undetermined Number of Arguments With ...(rest)
08-10-06: arguments
08-11-06: Support for Namespaces
08-12-06: Namespaces: Name Qualifier Operator (::)
08-13-06: dynamic is Not Inherited
08-14-06: Creating a mouseWithin Event
08-15-06: Prevent Overriding and Subclassing with final
08-16-06: MXMLC: SWF Metadata Tag
08-17-06: Proxy Class
08-18-06: in Operator
08-19-06: Proxy: getProperty and setProperty
08-20-06: Flash 9: Display Object Variables and Instance Names
08-21-06: XML: XML and XMLList
08-22-06: Constants
08-23-06: duplicateMovieClip Replacement
08-24-06: Proxy: callProperty
08-25-06: Creating graphics Copies
08-26-06: TextField.appendText()
08-27-06: include Directive
08-28-06: Duplicate Variable Definitions
08-29-06: mouseEnabled and Event Blocking
08-30-06: mouseChildren with Event Propagation
08-31-06: rollOver and rollOut vs. mouseOver and mouseOut
09-01-06: DisplayObjectContainer contains()
09-02-06: Cleaning Up Event Listeners
09-03-06: Detecting Addition to or Removal from Stage
09-04-06: Event Phases and Event Capturing
09-05-06: Determining Event Phase
09-06-06: Preventing Event Propagation
09-07-06: Global Events
09-08-06: Detecting a mouseUp Outside
09-09-06: Flash 9: Document Class
09-10-06: Access to stage and root
09-11-06: Namespaces: use namespace Directive
09-12-06: No More Color Class; Use ColorTransform
09-13-06: Runtime Errors; Error Class
09-14-06: Errors: try..catch..finally and Exception Handling
09-15-06: Errors: Asynchronous Exception Handling
09-16-06: XML: Children (.) and Decendants (..)
09-17-06: Array.indexOf (Array.lastIndexOf())
09-18-06: asfunction: Now event:
09-19-06: Proxy: Property Enumeration (nextName(), nextValue(), and nextNameIndex())
09-20-06: Event Capturing and mouseEnabled
09-21-06: Flash 9: Strict Mode
09-22-06: System.totalMemory
09-23-06: Closing Net Connections
09-24-06: Timer Class
09-25-06: AVM2 (AS3) to AVM1 (AS2/AS1) Communication via LocalConnection
09-26-06: ByteArray Class

100 AS3 tips! After tip 100, no longer will they be added daily
_______________________________________

Additional Resources:

Download:

Random Image Generator | PHP

2006-09-23T18:08:00.000-07:00

Random Image Generator
Using a random image generator on your website has many practical purposes, some of which include creating a rotating banner system or rotate advertising ads. Its a valuable piece of code on your website and this tutorial will show you a simple way to use it.

Code
"
?>

Code
$images = 5;

This is where we define the number of images that will be displayed. If the number is larger than the number of images in your folder you will get nothing back on certain refreshes. If you put the number smaller than the number of images in your folder, you will only display images up to that number. The images must be named in numerical sequence so if you put the number at 4 and have 5 images, the #5 image will not be displayed.

Code
$path = "images/";

This is where you define the path to your images folder

Code
$random = rand(1,$images);

Here we use teh rand() function to create a random number starting from 1 and ending at the number defined in our $images variable

Code
echo ""

Here we piece everything together and echo out the image. Note if you have any other extension than .jpg you will have to change it in this line.

Alpha/Onion skin | Flash

2006-09-23T17:55:00.000-07:00

Learn how to get a cool alpha fading, onion skin type of effect used by many websites.

Start off by starting a new movie: File » New. Then go to Modify » Movie and change the width and height to whatever your prefference might be. The one I'm making is Width: 550 Height: 400. Then using the text tool, write whatever you want the text to say.

Okay great, next you want to highlight the text, so the blue border is around it, and go Insert » Convert to Symbol. Choose name: "Text" and behavior as a Movie Clip.

Right Click on the text and choose Edit In Place. Now we're in the movie clip. On the timeline, you should see on the top left, the name of the layer entitled, "Layer 1". Double click that and rename it "Moving Text". Now select the text like we did before and Insert » Convert to Symbol again. This time name it "Text Over" and behavior as a graphic.

Now you want to select the text and press Edit » Copy and make a new layer. Name the layer "Static Text". Ok, add a keyframe on both the layers up to 20. On the Moving Text, right click on the first frame and choose "Create Motion Tween". On the 20th Frame of the Moving Text, go to the effect tab, select Alpha from the drop down and choose 0% Opacity.

Finally, click the scale button and click the middle right white box on the text, and drag it as far as you want the effect to go. Go File » Publish and you're done. Not too hard was it? You can click the image on the left to see a larger picture.
Download the editable Flash File.

Sourch: http://www.absolutecross.com/tutorials/flash/

LCD Orbs | PhotoShop

2006-09-23T17:47:00.000-07:00

This tutorial will show you how to create a glowing LCD Orb, great for interfaces and hi-tech designs.

You'll learn a cool airbrushing technique to create a glowing effect, as well as a way to design a great-looking highlight effect.

1.

For this tutorial, my LCD Orb was created at 350x350px and scaled down in the examples below - if you apply this technique to a different sized shape, you may need to adjust the values to suit your particular image.
Begin by making a new 350x350px image with a white background, and create a new layer — name this layer "LCD Shape". Select the Elliptical Marquee tool. Now hold SHIFT and ALT on your keyboard and from the center outward draw your circle so that it fills most of the image area.

Fill in the selection with your color of choice (Edit » Fill). The example's fill color is #ACBEDC.

2.

Now without deselecting, create a new layer and name it "LCD Shading". Press D on your keyboard to reset your colors to default. Go to Edit » Stroke — for the width enter 9, Location should be Inside, and if it isn't already, ensure that the color is black. Click OK.

Now, with the "LCD Shading" layer selected and your selection still active, go to Filter » Blur » Gaussian Blur, enter a setting of 9, and click OK. Lower the opacity of the layer to about 28%. Remember to keep in mind that if your image is a different size than the example (350x350px) then you may need to use different settings to get a similar look. Press CTRL + D on your keyboard and compare what you have so far with this example.

3.

The next step will be to create a subtle outline around the Orb, to give the shape a little definition from its background. Hold CTRL and click on the "LCD Shape" layer to load the circle selection. Again create a new layer on top of the other 2, and name this one "Stroke". Go to Edit » Stroke and enter a setting of 2. Now lower the opacity of this layer to about 32%.

4.

Create a new layer on top of all the others and name it "Orb Glow" — change the layer blending mode of this layer from Normal to Color Dodge, and lower the "Fill" (located under the opacity) to around 21%. After that, select the Paintbrush tool and in the Options bar at the top of the screen, select the Airbrush icon.

Press D on your keyboard to reset your colors, and then press X so that white is your foreground color. In the Option bar set your brush size to 300, and set 0% Hardness and 40% Flow. Hold your brush at the bottom of the LCD Shape so that it is positioned about half way out of the selection (see the example below), and hold down your mouse button for about 1 second give or take.

Move your mouse down further so that now only the top 1/3 of the brush is inside the selection, and click for about 1 second again. You should now have painted a bright glowing area around the bottom half of the circle, which is brightest at the bottom. Looking smooth eh?

5.

The next step will be to create the highlight for the orb. Create a new layer and name it "Highlight". Choose the Pen Tool and set it to Paths mode. Now draw a series of points to create a rough section in the top half of your circle as illustrated in the example below. (If your path ends up as a solid shape that you can't see through, make sure your Pen tool is set to Paths mode as mentioned above).

To get the bottom of the path to curve, you can use the Add Anchor Point Pen tool. Add a point to the middle of the bottom line, then click and drag the point upwards to slightly bend the path.

6.

With the Pen Tool still selected, right click in the path and choose "Make Selection..." and press OK. Press M on your keyboard to switch to your Selection tool.

The next part is a bit tricky, so hold on to your hat. Create a new layer (don't lose your selection), hold SHIFT + CTRL + ALT together, and click on the "LCD Shape" layer (the original circle layer). Move the selection down about 5 pixels using the Down arrow on your keyboard. This should give you a selection similar to that in the example below.

7.

Select the Gradient Tool, and choose the "Foreground to Transparent" setting (white to transparent). Now, make a gradient in your selection starting from the top and dragging to the bottom of the selection. You will end up with a nice highlight. Press CTRL+D to deselect. Go to Filter » Blur » Gaussian Blur and enter a setting of about 6.

To delete any of the blurred gradient that may have strayed outside the shape, hold CTRL and click on the "LCD Shape" layer to bring back your original circle selection. Choose Select » Inverse and press Delete on your keyboard. You won't see anything change, but you would if your LCD Orb was on a background color other than white.

If you'd like your highlight to be brighter, try making a duplicate of the Highlight layer, and adjust the opacity of the copied layer. Also try scaling the highlight with Edit » Free Transform for different effects.

8.

Your LCD Orb is now complete! Use it as part of your interface, skin (i.e. winamp), website layout, or wherever you like.

You can add on additional effects as well, such as scanlines, a translucent logo, or inset it into an interface. To learn how to make a smooth metal panel like in the example below, see the smooth metal tutorial.

If you had any trouble completing this tutorial, feel free to download the PSD and take a look under the hood on how this effect works (right click on the link and choose Save Target As or Save Link As). You can also download a PSD of the example below.

Inset Buttons | Photoshop

2006-09-23T17:43:00.000-07:00

The following is a technique every designer should have in their bag of tricks. I use this technique very often when making any sort of interface and it's a handy trick to know. These steps will enable you to make buttons look like they are inset into the surface of an object such as an interface, winamp skin, etc, and can add a great degree of depth to an otherwise flat and boring image.

1.

Firstly, you are going to need an interface or panel that you want to add your buttons to. You can use any interface image you already have handy, or you can make a new one similar to the the example by following the steps in the smooth metal tutorial.

Here is an example of what an inset is:

From the above image you can see that the inset is what adds realism and makes the button look like it's meant to be there. Most buttons on mobile phones, stereos, and all kinds of electronic gadgets are inset into the surface, so that's the effect this tutorial will help you emulate.
2.

Start by creating a new layer above the layer that contains your interface. Set your foreground color to: #C1C2C4
Now select the Ellipse Tool (note this is the shape tool not the marquee selection tool)

3.

Roughly where you want your button to appear, hold SHIFT and drag your circular shape until you have the size you want.

To give the button the chrome effect add the following layer styles...
go to Layer » Layer Style » Inner Shadow

Enter these settings: Inner Shadow
Add a Inner Glow layer style with these settings: Inner Glow
Add a Gradient Overlay layer style with these settings: Gradient Overlay
And last but not least, add a Stroke layer style with these settings: Stroke

When you've completed this, you may want to save your layer style for later use (to do this, click New Style and choose a name. Then click Styles at the very top left of the layer styles box, and click on the arrow icon to the right... choose Save Styles from the list). Click OK when you're done, and you should be left with a button similar to the one shown below.

4.

So, you now have your button sitting on top of your interface, but it doesn't look like it's meant to be there. Time for the much-needed inset.

In your Layers palette click on the vector mask of the button you just created, as shown in the image below:

This makes the path active.

Now switch to your Paths palette:

Drag the Path layer of your button to the image to duplicate it.
It will create a new path called Path 1.

Now choose the Path Direct Selection tool, right click inside your document anywhere and choose "Free Transform Path"
Holding SHIFT and ALT together drag a corner to make the path slightly bigger than the button as shown below. When you've finished this, hit Enter.

5.

The reason we are using paths in this instance is because they are much easier to resize without any loss of quality.
The next step is to create a new layer UNDERNEATH the layer with your button on it.
With the Path Direct Selection tool still active, right click anywhere in the document and choose "Create vector mask". Now press X then D to reset your colors. Hit CTRL + Backspace to fill the path with white.

Now go to Layer » Layer Style » Gradient Overlay and enter these Gradient Overlay settings (or adjust them so it looks good to you)

Your image should now look something like the example below. Notice how the button now appears as if it is a part of the panel, instead of just sitting on top of the surface? Good job :)
.
6.

Don't stop there though. Continue to try this effect on buttons of any shape, size, or texture. You can even make screens or LCD displays look like they are inset into the interface. Try out the LCD Orbs and Glossy Buttons tutorials for some ideas you can apply for making great-looking LCD displays.

With a little effort, you can produce some almost photo-realistic stuff. If you make a lot of interfaces you'll find that you use this technique quite often; not just for the buttons but for just about anything.

Tentacle Tubes | PhotoShop

2006-09-23T17:39:00.000-07:00

So you've seen those trendy "tentacle" designs in your favorite wallpapers and splash pages, but were disappointed to discover that the usual way to create them is with a 3D modeling program. Never fear though, with a bit of effort you can create a similar effect with just Photoshop... no 3D app necessary.
A slight drawback is that the final product of this technique never comes out quite the same - what you'll end up with will be random, but will definitely look cool.

Start with a new image with a white background, and to be on the safe side make it about 800x800 px. The tentacles in this tutorial's example will be plastic-looking, but you can create any type you want... chrome, shiny, various colors... whatever you can come up with. Start by selecting the Polygon Lasso tool from the toolbar and, as neatly as you can, draw a triangle pointing down. You will probably need to zoom out (shrink the image view) while doing this.
Once you have your triangle, fill the selection in with your color of choice - the example uses #8FCFFF. Deselect (CTRL+D).

Next go to Filter » Distort » Shear. What you need to do here is click along the line and drag parts to make it "squiggle" like in the example below. Keep an eye on the preview window and once you're happy with the results, click OK.

Now use Free Transform (CTRL+T) to rotate or resize your tentacle to taste, and press enter to apply it. No doubt you're quite impressed with your, eh... squiggly... but it still looks rather flat and dull at this point (sorry to burst your bubble). It's time to grab the Airbrush (first select the Paintbrush tool, and choose the Airbrush icon in the Options bar). Select the tentacle shape (hold CTRL and click on the layer), then create a new layer above the tentacle one. Set the Airbrush to a size of around 200-300px with 100% opacity, and paint around the edges of the tentacle to give it a rounded beveled effect. You may want to mess with the layer's opacity to get this to look how you like it. Refer to the sample below if you need to.

Now it's just a case of using the airbrush to paint highlights and shadows. Hold CTRL and click on the tentacle layer to select it, and make a new layer (you will want to do each of the following parts on their own separate layer). Next, choose an aqua color from your color palette, and begin adding highlights to the tentacle.
As you complete each layer of highlights, you should blur the parts you've airbrushed a bit using Filter » Blur » Gaussian Blur (that's why you must do each part on a new layer). In the example below, an aqua highlight and a white highlight have been added.

Now we're going to darken up the edges a bit. Hold CTRL and click on the original tentacle shape layer (Layer 1). Set a darker blue shade as your foreground color and go to Edit » Stroke - use a setting of about 2 or whatever you feel looks best.
You can now add a faint drop shadow (in the example, the drop shadow is a faint dark blue shade... if your tentacle is a different color, you will probably want to use a darker shade of whatever color you used).

If one tentacle is cool, wouldn't lotsa tentacles be even better? If you think you might want to go back and change things later, you should first make a set of copies of your tentacle's layers (drag each one to the New Layer icon... if you like to stay organized, you might want to move these copies into a Layer Set to group them together... Layer » New » Layer Set). Now, merge the layers of your tentacle together into one single layer and make several copies of that layer. Once you have your duplicate copies, begin to rotate and transform each of them in unique ways (see Edit » Transform). You may even want to do the "Shear" filter on some of them again to reshape them (see Step 2). Remember to keep the flat non-pointy side of the tentacles positioned "outside" of the visible work area of your image or underneath part of another tentacle, or things will look rather strange. You also don't have to always have the point of the tentacle showing on all the copies (notice the one below that only has its middle section visible).

Here's another example of what you might come up with using this technique. Remember you don't have to stick with making the tentacles look like translucent plastic... you could make them solid, shiny, metallic, rough, etc. Have fun.

MusicPlug.In Video post

2006-09-19T15:09:00.000-07:00

How to add YouTube.Com video links to MusicPlug.In via Admi panal

Go to http://www.musicplug.in

Using the navigation bar, Select the language for which you prefer to add video song

There are two ways for searching for the song or movie your are looking for

1- use the navigation bar which contains category like
Movie, Actor, Actress etc, you can click on the and search for the song you want

2- you can directly search for the song or movie using the search box

you can cheek for the availability of the songs using the drop down menu
this is one option to cheek the whether the song is available or not

go to www.youtube.com

you can search on youtube using
movie name or song name
if lucky you will find the song your searching for

now when you see the song you want to add in musicplug.in
> right click on the song
> click on properties

now
> select the link that s in the address panel ( search from http:// ... )
> copy (ctrl + c ) that link

now log in your musicplug.in admi panle
you should have selected the movie name and the song name
( if the song name ant available it means that the song already exist,
you can directly come to this before going through the music plug in steps )
right click on the external link and past (ctrl + v ) the address you have c
opied from the properties

thats it job done
it might seems bit confusing at stare actually it very simple
have a go

- Shovan

google search in swf file | Flash

2006-09-13T07:44:00.000-07:00

In this tutorial, we will learn how to create a simple Google search tool in flash.

First thing first, open up flash and create a new document. Now you need to find a google logo, you can use to show your users that the search they are using is a google search.

Next, bring up the Components menu (Ctrl + F7). Drop down the area labelled "User Interface" and scroll until you see the component "Text Input". Click and drag out onto your workspace. Then click on it, go to the properties menu, and set its Instance Name to "search" with no quotes.

Again, go to the components menu. Scroll until you see the "Button" component, and drag it out onto your workspace. Click on it, go to its Properties / Parameters, and set its Instance Name to "Google Search" with no quotes. Make its label in parameters say "Google Search" as well.

The next step is to click on the Button you just dragged out onto the stage. Open up the actions area (F9) and type in this code.

Code:

on (release) {
getURL("http://www.google.com/search?hl=en&q=" + _root.terms.text, "_blank");
}

Basically this will open up the viewers browser at google.com and whatever they have entered in the text box, will be searched for.

You should now be able to export the flash, and test it. If you have done everything correctly, you should be able to now search google from your flash document.

Basic Flash Action Script | Flash

2006-07-04T23:37:00.000-07:00

click Here

Animation Text with AS | Flash

2006-06-30T14:57:00.000-07:00

Author: GotCha

Animating Text By Using ActionScript

Note: This is quite an old tutorial. You may wish to examine new open source
such as Jesse Stratford's
Dynamic Multi-line
Text Animator. It's well commented and has updated functionalities and
syntax.

Download FLA

This tutorial will display a way to animate text by using ActionScript. In order
to understand this tutorial properly, one should be acquainted with the basics
of Flash and furthermore the use of variables, duplicating movie clips, loops
and the properties of movie clips.

The Idea

The idea is to have a movie clip named "letters", which contains a text
field that is also named "letters" (please choose names more suitable for your
own needs). This movie clip is nested inside another movie clip named "ani",
because it contains the animation the letters will perform. This structure makes
it possible to duplicate the movie clip ani after a certain interval, and then
set the letter inside based upon a variable, after which it will perform the
animation. By using Set Property, we make sure that the letters are placed in
the right position.

Initialising our environment

When opening the file, you will see four layers, though only the layers "ani"
and "actions" are necessary. You could simply delete the layers "The Passionate
World" and "squares" if you want - the animation would still work J

In frame 1 in the layer "actions" we set our initialising environment. Here
we have the following actions:

Set Variable: "text" = "The Passionate World is round. For
days we sail, for months, and still the way is new; strange stars. Drawn to you,
taut over time, ropes connect this floating floor to the wind, fraying into
sound. To arrive is to sleep where we stop moving. Past the shoal of clothes to
that shore, heaped with debris of words. A hem of salt, white lace, on sea-heavy
legs. Love longs for land. All night we dream the jungle's sleepy electricity;
gnashing chords of insects swim in our ears and we go under, into green. Anne
Michaels"

Set Variable: "startx" = 165

Set Variable: "starty" = 45 Set Property ("/ani", Visibility) = False

Set Variable: "length" = Length (text)

Set Variable: "linelength" = 25

Set Variable: "kerning" = 6

Set Variable: "charinline" = 0 Set Variable: "linenumber" = 1

Set Variable: "linespace" = 10 Set Variable: "i" = 1

Set Variable: "x" = 1 Set Variable: "lettercount" = 1

The first variable "text" is the text we want to animate (I've chosen a poem I
found somewhere on the

net by Anne Michaels). The next two variables are our horizontal and
vertical starting points. Hereafter we make the movie clip "ani" invisible by
setting it's visibility to False (we could also set it to 0 - the result would
be the same). The variable "length" returns the length of the text we want to
animate, which is necessary to control our loops. The variable "kerning" is the
distance between the letters, while "charinline" keeps track of the characters
in each line. The variables "linenumber" and "linespace" keeps track of the
number of lines and the vertical space between the lines. Finally the variables
"i", "x" controls our loops (I prefer to have two variables, but you could have
just one), while "lettercount" is used to control when the letters should fade
out.

Creating the text

In frame 10 we have the following actions (the frame number doesn't matter; it
could also be frame number 2):

Set Variable: "charinline" = charinline+1

If (charinline >= linelength)

Set Variable: "prevent" = Substring(text,i-1,1)

If (prevent eq " ")

Set Variable: "linenumber" = linenumber+1

Set Variable: "charinline" = 1

End If

End If

Duplicate Movie Clip ("/ani", "ani"&i, i)

Set Property ("ani"&i, X Position) = startx+charinline*kerning

Set Property ("ani"&i, Y Position) = starty+linenumber*linespace

Set Variable: "/ani"&amp;i&"/letters:letters" = Substring ( text, i, 1 ) Set
Variable: "i" = i+1

First, we increase the variable "charinline" by one, because we add a
character to our line. After this, we ask whether or not the number of
characters in the line is greater or equal to the length of the line. If this
occurs, then we create a variable ("prevent") that makes sure that we do not
start a new line with a character, which is a part of a word placed on the line
above (i-2). We then increase "linenumber" by one and set "charinline" to 1,
because we commence a new line. The following duplicates the movie clip "ani",
positions it and sets the letter inside the movie clip using Substring.

The number of frames between frame 10 and the following represents the interval
between the letters. The following keyframe contains these actions:

If (i <= length)

Go to and Play (10)

Else

Stop

End If

This stops the animation and increases the variables "lettercount" on the main
timeline by one. If "lettercount" on the main timeline equals the length of our
text, then all letters have reached this point in their individual animation.
Therefore we can start fading out the letters. This action is performed on the
main timeline, which is why we use Tell Target to Go To and Play the label "end"
on the main timeline.

On the main timeline we find that the label "end" contain the following actions:

If (x <= length)

Begin Tell Target ("ani"&x)

Go to and Play ("end")

End Tell Target

Set Variable: "x" = x+1

End If

Here, if "x" is less or equal to the length of our text we Go To and Play the
label "end" in the movie clip "ani"&x. This means that the above would start by
fading out ani1, because we set "x" to 1 in frame 1. We then increase "x" by one
to make sure that when the actions are carried out the next time, they will
cause ani2 to fade out. The following frame on the main timeline contains the
following actions, which makes sure that the actions described above are carried
out continuously:

Go to and Play (_currentframe-1)

Blur_transition_effect | Flash

2006-06-30T14:38:00.000-07:00

Written by: Patrick Mineault, patrick@5etdemi.com, http://www.5etdemi.com
Difficulty Level: Beginner
Requirements: MX or MX 2004
Topics Covered: Properties, clip events
Assumed Knowledge: basic knowledge of flash Download FLA

Blur transition effect

I'm sure you've seen this effect a thousand times: a blurry picture becomes sharp or vice versa on rollover. Here's an example:

The effect seems complicated and it looks fancy but it's incredibly simple. I've chosen to use actionscript and not tweens for the animation in this tutorial, so this should give you a hint for other projects involving properties.

Creating the assets

You'll need a picture of some kind. Here I've used a photo of miss Kathie Holmes (a nod to Flashguru). Flash doesn't have a function for blurring so we'll do this in Photoshop (or any other image manipulation program you prefer). Open a copy of your picture and apply a gaussian blur filter to it. Usually a 8-10 pixel radius will do the job. Save it as a jpg file.

Import both the original and the blurred image into Flash. Create a new empty movieclip called 'assembled' (Ctrl+F8). Create two layers in it. Place the blurry picture on the bottom layer and the original on top. Select the original picture and convert it to a movie clip (F8). Give this movieclip an instance name of 'original'. Don't confuse the movieclip name with the instance name. The instance name is what you enter in this panel:

Adding the script

The script will manipulate the original photo's transparency. Go into the main timeline and place an instance of the 'assembled' movieclip. Keep the movieclip selected and go into the actions panel. Enter this script:

onClipEvent(load)
{
     dir = 0;
     speed = 6;
     original._alpha = 0
     this.onRollOver = function()
     {
             dir = 1;
     }
  
     this.onRollOut = function()
     {
             dir = -1;
     }
     useHandCursor = false;
}

onClipEvent(enterFrame)
{
     temp = original._alpha + speed*dir;
     original._alpha = Math.min(100,Math.max(temp,0));
}

Press Ctrl+enter to test your movie. You should have get a blur transition effect when you move your mouse over the photo. If you receive an error such as: 'Clip events are permitted only for movie clip instances', it's because you placed the script on a frame instead of on the movieclip. Make sure you have the movieclip selected before pasting the script into the actions panel.

Let's see how this works. We have two variables that are set up when the movieclip is loaded: dir and speed. Dir is set to 1, -1 or 0 depending on whether we want the animation to move forward, backward or to stay still. When we rollover or rollout of the movieclip, the direction of the animation is reversed.

On each frame the script calculates a new tentative transparency value for the original picture. The nested Math.min and Math.max functions bound the value of the temp variable to between 0 and 100; this is crucial as these are the only reasonable values for the _alpha property. So all the script does is make the original picture opaque on rollover and clear on rollout. That's all there is to it.

Final thoughts

You can try different filters for the blurred picture instead of gaussian blur. In particular, motion blur and radial blur will give interesting effects.
It may be a good idea to make the blurred picture duotone or grayscale for effect.
If you want the animation to be triggered by another element on stage, the key is to assign the onRollOver and onRollOut actions to another button or movieclip. For example, for a button with an instance name of trigBtn placed on the _root timeline, you would change this.onRollOver to _root.trigBtn.onRollOver and this.onRollOut to _root.trigBtn.onRollOut.
You can adjust the speed of the animation by modifying the value of the speed variable.

Don't forget to experiment, it's the only way to learn. If you need professional help with ActionScript, please visit 5etdemi.com for my portfolio and contact info. Happy flashing!

Properties AS | Flash

2006-06-30T14:36:00.000-07:00

Click Here

Publishing with Blog

2006-06-30T09:31:00.000-07:00

1 Intro
2 Writing your own blog
3 Blogging from Afar
4 Personilise your blog
5 Telling others about your blog
6 Telling others to Contribute
7 Hosting your blog ur self
8 Getting your words out
9 Template Tag

CSS Full Tutorials

2006-06-22T23:58:00.000-07:00

Click Here

Animation Via Action Script | Flash

2006-06-22T23:24:00.000-07:00

Click Here

Flahs Basic

2006-06-19T05:01:00.000-07:00

Flash Tutourial

HTML Full Tutorials

2006-06-17T13:01:00.000-07:00

Click here

clean template tutorial

2006-06-06T09:55:00.000-07:00

clean template tutorial

Hi, This is what the finished template will look like :-

Step 1 [ New ] :- Start a New document, the size i used was
700x800 px.

Step 2 [ The background] :- Grab the gradient tool and choose a
light grey colour to white and fill the document with it.

Step 3 [ Border pt1 ]:-

start a New layer ( Ctrl + Shift + N ) an get the rectangular marquee
tool, select a thin strip down 1 side and fill it with a light colour.

Step 4 [ border pt 2 ] :-
on the same layer get the marquee tool again and make a section like
before but fill it with a diagonal pattern. if you dont have the
pattern
Click here
to no how to make it. i used a grey 1. now get the single column
marquee tool and fill 3 sections with the same colour used in step 3.
your border should look like this.

Step 5 [ Border pt 3 ] :-
Duplicate (Ctrl + J) the layer you have the border on and flip it
horizontaly ( Edit > Transform > Flip Horizontal) and move it to
the other side. merge both those layers (Ctrl + E) and name it border
so you dont get confused.

Step 6 [ Header ] :-
Create a new layer (Ctrl + Shift + N) and grab the rectangular marquee
tool again and make a section at the top for the banner. i used some
vector brushed and made mine realy quick.

Step 7 [ Navigation ] :-
create a small rectangle box using the marquee tool and fill it with a
gradient (i used the colour from the border to transparent) then fill
it with the same scan lines used on the border. and finaly stroke the
box with a colour. duplicate it for however many links you want and add
text. i used asenine font set to soft light.

Step 8 [ small content boxes ] :- Do the same as step 7 but make
a bigger box, duplicate it and put them next to each other.

Step 9 [ Big content box ] :- Do the same as before but one big
box. and thats about it.

Mosica Effect | PhotoShop

2006-06-06T09:48:00.000-07:00

Mosica Effect

click on the thumbnait for the tutourial

Flash AC menu

2006-06-01T07:03:00.000-07:00

var newMenu:ContextMenu = new ContextMenu(); newMenu.hideBuiltInItems(); newMenu.customItems.push(new ContextMenuItem("Designed by Shovan...",goTo)); this.menu = newMenu; function goTo() { getURL("http://www.shovan.co.nr"); };

Test

2006-04-08T09:24:00.000-07:00

Test