Edge 'glimp' effect

hello.. Ive seen this 'effect' being used a lot in logo's and I cant find any kind of tutorial on it.. what I mean is the following:

example: http://www.templatemonster.com/scre...00/2706-ih.html

when u look on the left of that logo (below home and contact us) you see a glimps running over the 2 straight lines every now and then.. this is all I want..

can anyone tell me how I can do this or give me a tutor of it or something?

thanks a lot..

Hi, I dont know if that link was a bad example or not but heres a couple of ways to do the desired effect.

1) Simply animate a line along the desired path. Both the lines you talk about follow an almost straight line. If you right click and zoom in and watch the lowest of the two from its start position you may notice it doesnt actually conform to the shape it is gliding along, it wavers along the path slightly.

2) Manually create a mask that covers the area you want to "glimp". i.e. you have a box:

------------
| |
| | <- Thats the box
| |
------------

------------
| +----+ |
| | | | <- Thats the box mask
| +----+ |
------------

The mask is the outer ring, i.e. a square donut. Now under this make a line animate from right to left. Mask the line with the donut (which is centered correctly over the box). Now when you animate you should see the kinda of effect you want although now it will appear to conform to the shape of your original object.

I reckon your link uses option 1, however if the area to be glimped is complex option 2 might visually look more appealing.

-Tann

Hi, the image kinda things came out wrong in the final post. The top one should just be a box and the second should be a shape the same dimensions of the box with a square whole in the middle aka square donut.

-Tann

im sorry but is there some sort of tutorial I can follow to learn how to work with this masking stuff? im rather new to flash though im a fast learner so if I just had something I could work on I can get the rest done myself.. thanks

Hi,

well you could try searching the flash documentation. Help | Using Flash. Then search for "Create a mask". In mx this is a short tutorial page.

Maskings is dead simple.

Basic Masking
------------------
Create a new movie with two layers.

On the lowest layer draw a picture / place a movie clip. anything. for now draw a big circle.

Now lock that layer by clicking on the lock icon next to the alyer name.

Select the first frame for the layer above and draw a box inside the circle. It should fill the whole circle though.

Now right click on the layer name and choose mask. Make sure that layer is locked afterwards as well. You should now see a box shape and no circle. If you colour them differently then you will see the effect more clearly.

Animated Masking
-----------------------
Now extend both layers timelines so that they are say 30 frames long. In the first box mask frame move the box to the top of the circle. Then jump to the last box frame and move it to the bottem of the circle. Animate the box layer so that it tweens between the two frames. Now you should see the circle under the box but nothing else. Extend that idea to get the effect you want.

-Tann

ive been trying to work some with masks and I can get a symbol to follow the motion guide Ive made for it, only 2 problems left now.. one, the object I want it to 'run along' isnt straight, it's bold and has several 'bold angles' (sorry wouldnt know how else to call it), so how can I make it run along that smooth? second problem.. in the movie I showed in my first post the symbol that ran along the line had a bit of opacity.. how can I make a symbol see-threw?

here's the image I want to make it work on if that helps u understand, cuz my english aint that good

Hi,

I'm going on the basis that your talking about the pc and not the wavey background (though works for both I think). The easiest way is to simply draw the area you want to glimp. i.e. if its the case use the line tool to draw the outline and some of the internal lines. Then use that layer as the mask. you can have more than one layer under the same mask. This means you can have sepereate glimps moving over your drawing, or under the mask whichever way you think about it. Just drag n drop the layer to be masked under the mask layer (or its lowest child).

As to making the symbol slightly transparent you have two choices. If your glimp is a movie clip then just set its alpha 20 say 50% in the movie properties. if the glimp is a line or a shaped fill then expand the mixer panel on the right. if its not there select it from the Windows menu. Then select your glimp. Under the relevant paint box in the mixer panel choose a new colour. You glimp should reflect the change, otherwise play around with the order of selection until it does change. Now you've guarenteed your working on the same color in the mixer as the glimp is, set the color back to what you want the glimp to be. Then in the lower right of the mixer panel set the alpha component to 50%. you should then see that the glimp has changed to match.

-Tann

question on the masking thing.. Ive created a mask layer and a layer with the 'glimp' in it.. now the mask layer follows a certain path, it aint the correct path but that doesnt matter right now.. what I dont understand is that in this tutorial I got everything below the mask layer is invisible apart from the part where the 'figure' in the mask layer is.. but on my screen the layer below the mask layer is just visible, and the mask layer just shows up as a figure moving over my screen.. any idea what im doing wrong here?

nvm that, found what was wrong..

only now next problem..

Ive learned to use the motion guide, or at least the basics of it.. so I can 'draw' the path the mask layer figure will follow.. only problem is that when I mask a layer the motion guide options is unselectable.. now how should I do this?

Hi, ok fiddled round quickly. Your right, I cant seem to get that to work, both together that is. I have one idea that I'm pretty sure will work.

Copy the motion guide onto a new layer. One copy will be the motion guide, the other will be the mask.

Now make your glimp a movie clip (in case you used a graphic or a still object). In the glimp movie make two keyframes. Both should be the glimp. Dont change it. Now in the first keyframe's AS panel enter:

_x = _parent.glimpmover._x;
_y = _parent.glimpmover._y;

and in the second keyframe:

gotoAndPlay(1);

Thats the glimp itself done. Now back up a level to where all the guides etc are.

Make a new movie clip with a tiny box in it. Something thats not even as wide as the guide line. Call the instance of it "glimpmover" without quotes. Now tween this along the motion path. Place the motion path and the glimpmover below the mask layers (not as children tho).

So to sum up:

Modify the glimp
Make two versions of the path
Mask the glimp it self
Tween glimpmover's animation along path.

I think that should work, theoretically it should. Sometimes flash is funny about mixing AS with manually tweening.

Hope it helps (and works)

-Tann

so the 'glimp' is basically the line that runs along side the figure, and I should make this a movie clip? how do I make something a movie clip? isnt each flash project a movie clip on itself?

To make the glimp a movie clip you can either copy and paste it into a new clip or simply select it. Right click on it and choose convert to symbol. Give it a name and choose movie clip.

It will now appear in the library. If you dont know what the library is or where it is open the Window menu and choose library.

Your kind of right about everything being a movie as the entire .swf file is a movie. Inside that however you can have movies, buttons, graphics, bitmaps, shapes etc.

If you draw a box on the _root stage then it is a box shape in the root.

If you make a new movie symbol in the library, draw the box in there and then drag that movie onto the _root stage then it is a movie clip instance in the root.

Its easier to think of a heirarchy.

_root
---+------Movie1
---+------Movie2
---+------Box Shape 1
---+------Movie3
-------------+----Movie3's First Submovie
-------------+----Movie3's Second Submovie
-----------------------------+----Movie3's Second Submovie's first child

If you dont mind even more reading :¬) try reading the flash help -> Help Menu | Using Flash. Look under Using Flash | Working with Flash assets overview.

-Tann

well I tried the last thing u said but I think its still to complicated for me however I think I can manage it with what I know so far, maybe not exactly the way I want it but it'll do..

thanks a lot for all your help! appreciate it