Simple black and white images effects using adjust color filter

This, step by step flash lesson will show you how to apply adjust color filter on black and white image. To make this effect, you also have to use Free

Transform Tool (Q) and Blur filter. You don't have to use action script code to make this lesson. This effect you can use for some presentation, flash banner...

Step 1

FIrst, save black and white image below!



Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 334 pixels. Select white color as background color. Set your Flash movie's frame rate to 46 and click ok.



Step 3

Choose now File > Import > Import to Stage (Ctrl+R) and import the image that you just saved in stpe 1 into a flash stage.

Step 4

While the image is still selected, press F8 key (Convert to Symbol) to convert this image into a Movie Clip Symbol.



Step 5

While the new made Movie Clip is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.



Step 6

Call the current layer image. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name.

Step 7

Click now on frame 10,15,20,30,35 and 40 and press F6 key.



Step 8

Go back now on the first frame, select the Selection Tool (V) and click once on the image to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Click after that again on the plus icon and select the Blur Filter. Make the adjustments as follows:



Step 9

Select now frame 15, takae again the Selection Tool (V) and click once on the image to select it. After that, go again to the Properties Panel (Ctrl+F3) below the stage! Then, select Filters tab from the left side. Click after that on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 10

While you're still on frame 15, take the Free Transform Tool (Q), select the image, press and hold down Shift key and start dragging your mouse upwards.





Step 11

Select now frame 20, click once on the image using the Selection Tool (V) to select it and go again to the Properties Panel (Ctrl+F3). Then, select Filters tab from the left side. Click after that again on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 12

Select now frame 25, click once on the image using the Selection Tool (V) to select it and go again to the Properties Panel (Ctrl+F3). Then, select Filters tab from the left side. Click after that again on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 13

Select now frame 30, click once on the image using the Selection Tool (V) to select it and go again to the Properties Panel (Ctrl+F3). Then, select Filters tab from the left side. Click after that again on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 14

While you're still on frame 30, take the Free Transform Tool (Q), select the image, press and hold down Shift key and start dragging your mouse upwards.



Step 15

Select now frame 35, click once on the image using the Selection Tool (V) to select it and go again to the Properties Panel (Ctrl+F3). Then, select Filters tab from the left side. Click after that again on the plus icon and select the Adjust Color filter. Make the adjustments as follows:



Step 16

Select now frame 40 and repeat step 8!

Step 17

Take the Selection Tool (V) and select layer image. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the left side you will see Tween drop down menu. Select Motion on it.

We're done now!

Test your Movie and enjoy!

Download example

Create a portfolio app for your site with AS3

KICKSTART YOUR CREATIVE CAREER BY PUTTING YOUR WORK ONLINE WITH THIS EASYTOUSE PORTFOLIO APPLICATION, WHICH UTILISES THE SPEED OF ACTIONSCRIPT 3.0

It's coming to that time of the year when graduates are moving out into the job market and it is essential for those working in the creative industry to have a portfolio to show off their talents. This tutorial focuses on building a website that is easy to keep up to date. This ActionScript 3.0 Flash portfolio loads all the external content from an XML file so once the Flash file is up and published, there is no need to keep changing it. Instead, you’ll just have to add new entries into the XML file and add new thumbnails and images to your project. The interface is fairly generic so it should be useful for a variety of different uses, but with a minimum of Flash knowledge you should be able to skin this design to suit your own portfolio needs.

1. Getting started From the cover CD, open the tutorial folder and open start. fla in Flash. Click the Size button on the Properties panel and a pop-up window will appear. Change the width to 800 pixels, the height to 600 pixels, the frame rate to 24fps and the background colour to #666666.	Convert to Symbol and name it ‘bg’."> 2. Add a rectangle Grab the Rectangle Primitive tool and add a 20-pixel corner radius, then draw a rectangle on the screen. Change the dimensions to 760 by 480 pixels and position at 20 pixels on the x axis and 60 on the y axis. Choose Modify>Convert to Symbol and name it ‘bg’.
3. Add a Drop Shadow Click on the Filters tab and add a Drop Shadow to the rectangle. Make the Blur 15 pixels, Strength 60 per cent, Angle 90 degrees and input five for the Distance. Drag the reflection symbol from the library, position as shown and Send To Back. Repeat with the reflection 2 symbol.	Rulers and drag a guide from the top ruler, then drop it at 420 pixels down the document. Select the bg instance on the stage and copy it. Lock the first layer, name this ‘bg’ and add a new layer, naming this ‘content’. Now choose Edit>Paste in Place and press Ctrl+B twice."> 4. Add a guide Go to View>Rulers and drag a guide from the top ruler, then drop it at 420 pixels down the document. Select the bg instance on the stage and copy it. Lock the first layer, name this ‘bg’ and add a new layer, naming this ‘content’. Now choose Edit>Paste in Place and press Ctrl+B twice.
5. Create outlines Use the Ink tool to add a two-pixel, #999999-coloured stroke to the rectangle. Double-click the outline, then cut and paste this to a new layer, naming it ‘outlines’. Now select the Line tool and draw lines in line with the guide, using the reflection below to line up the vertical lines.	6. Copy lines Select the lines inside the rectangle but not the outer edge. Copy and paste this onto the content layer. Lock and turn off the visibility of the ‘outlines’ layer. These lines subdivide the rectangle so select the rectangle’s top large area, cut and Paste in Place to a new layer, naming it ‘mask’.
7. Add buttons to stage Lock the mask layer and turn off the visibility. Select the content layer again and in the Colour panel, choose Linear for the fill and add a dark grey to light grey gradient. Now add this to each of the rectangles, which will become buttons for our interface.	Convert to Symbol. Name it ‘Button 1’ and make it a Movie Clip. Double-click the symbol. Select frame 2 and press F6. Make the gradient black to mid-grey. Create a new layer, open the ActionScript editor and add a stop(); command."> 8. Create a button Select the first rectangle on the left and choose Modify> Convert to Symbol. Name it ‘Button 1’ and make it a Movie Clip. Double-click the symbol. Select frame 2 and press F6. Make the gradient black to mid-grey. Create a new layer, open the ActionScript editor and add a stop(); command.
Convert to Symbol."> 9. Repeat the button process Repeat step eight for the next two buttons, naming the Movie Clips ‘Button 2’ and ‘Button 3’. Select each button in turn on the stage and name the instance from left to right, ‘bg1’, ‘bg2’ and ‘bg3’. Now select the top, small rectangle on the right and choose Modify>Convert to Symbol.	10. Forward button Name the symbol ‘forward’ and make it a button, then click OK. Double-click the symbol on the stage to edit it. From the library, drag in the arrow instance and position as shown above. Select the Hit frame and press F6 to add a Keyframe. Select the arrow and press Ctrl+B to break apart.
11. Hit state Double-click the arrow to edit the group and fill the dots with #66FF00 from the Color Mixer. Using the Text tool, add the word ‘browse’ in the same colour. Select the Hit frame and press F5 to extend the timeline. Return to the main stage and give this the instance name of ‘forward’.	12. Repeat the button process Repeat step 11 and 12 to create the Back button for the last rectangle in the interface. Be sure to give this the instance name of ‘back’ when you’ve finished creating the button. Now turn on the visibility of the outlines layer; you can still leave it locked at this stage of the production.
13. Dynamic text Use the Text tool to add a text box in 16pt Arial, colour set to #66FF00. Set the text box to Dynamic in the Properties panel and name the instance ‘heading 1’. Add another text box with white, 10pt Arial text, giving this the instance name of ‘description1’ and setting it to Multiline.	14. Create a new symbol Press Ctrl+F8 to create a new symbol and name it blank, making it a Movie Clip. Press OK then return to the main stage. Drag this onto the stage and position by the white spot as shown, giving this the instance name of ‘image1’. This will be used to load thumbnail images into later.
15. Copy the text Select the two Dynamic text fields and the empty Movie Clip on the stage. Copy and paste them, then position over the second rectangle and again over the third. Change the instance names to ‘heading2’, ‘description2’ and ‘image2’, and again for the last rectangle but use ‘3’ instead.	Convert to Symbol, name this ‘transition 2’ and make it a Movie Clip. Press OK and double-click to edit the symbol. Create a new layer but drag this below the first."> 16. Create a transition Drag the shape symbol from the library to the stage and position over the top of the three main buttons. Go to Modify>Convert to Symbol, name this ‘transition 2’ and make it a Movie Clip. Press OK and double-click to edit the symbol. Create a new layer but drag this below the first.
17. Create a rectangle Select frame 15 of layer 1 and press F5 to extend the timeline. Drag frame 1 of layer 2 to frame 2. Now select frame 2 of layer 2 and press F6 to add a Keyframe. Draw a large white rectangle that’s bigger than the shape on layer 1. Select frame 15 of layer 2 and add another Keyframe.	18. Animate the rectangle Use the Free Transform tool to scale the rectangle to a small shape as shown above, which should be to the right of the layer above. Select frame 2 and add a shape Tween. Add a new layer and select frame 1, then open the ActionScript editor. Add a stop(); command on frame 1.
19. Create a mask Select layer 1, right-click near the name layer1 and from the drop-down list, select Mask. Return back to the main stage and all that you will be able to see of this instance now is a white spot. While this is still selected, name the instance ‘transition2’ in the Properties panel.	20. Add the folder From the library, drag the symbol spin.swf to the stage and in the Properties panel, change the Color drop menu to Tint and change the colour to #999999. Open the Transform palette, scale up to 180 per cent then name the instance ‘spin’ in the Properties panel.
21. Invisible button Create a new symbol, name it ‘invisible’ and make it a button. Click OK, select the Hit frame and press F6. Add a rectangle and return to the main stage. Lock the content layer, name a new layer ‘buttons’, drag over three copies of the invisible symbol, naming them ‘link1’, ‘link2’ and ‘link3’.	22. Add an image layer Lock the buttons layer and create a new layer above this. Name this layer ‘image’ and from the library, drag the blank symbol to the stage and position at 20 pixels on the x axis and 60 pixels on y axis with the Properties panel. Add an instance name of ‘mainImage’ then lock this layer.
23. Add a box Create a new layer above the image layer, naming it ‘box’. Drag the box symbol onto the stage, positioning in the top right of the black area. Lock this layer, unlock the outlines layer and add a Dynamic text box to the stage, naming it ‘longDesc’. Set the text colour as white and set to Multiline.	Convert to Symbol, name it ‘transition’ and make it a Movie Clip."> 24. Transition layer Lock the outlines layer and create a new layer above the box layer. Name this ‘transition’. Select the Rectangle tool and draw a large white rectangle over the top section of the document. With this selected, choose Modify>Convert to Symbol, name it ‘transition’ and make it a Movie Clip.
25. Animate shape Tween Double-click the symbol to edit it. Select frame 20 and add a Keyframe, then select frame 1 and drag it to frame 2. With the Free Transform tool, scale the width of the rectangle. In the Color panel, change the fill to 20 per cent alpha. Add a shape Tween between frame 2 and 20.	26. Another layer Add a new layer and add a Keyframe at frame 20. Drag the transition1 symbol from the library onto the stage. Rotate 90 degrees clockwise and scale the same as the rectangle. Select frame 100, press F5 then select frame 1 and open the ActionScript editor to add a stop(); command.
27. Name the instance Return to the main stage and the transition instance ought still be selected on the stage. It will now just be a white dot as there is no content on frame 1. Name the instance of this ‘transition’ and lock the layer. Select the mask layer and right-click on it, choosing Mask from the drop menu.	28. Add to the mask The transition layer will be masked, but drag the box layer up slightly and the image layer and they will also become part of the mask. Now leave Flash for a second and drag the tutorial folder off the CD and onto your hard drive. Save this Flash file into that folder.
29. Attach the code Make sure nothing on the stage is selected and look in the Properties panel. Type ‘MyContent’ into the Document class. Save your document again and press Ctrl+Enter to test your file. You should be able to see the portfolio running in the Flash Player. Download Tutorial Files

Car Acceleration Tutorial

In this flash actionscript 3.0 tutorial you will see how to make a car move more realistic then just moving back and forth, we will add some acceleration and de acceleration functionality so the car start up slow and increases in speed until it ends at a max speed, then when we want to stop it also need to slow down before it stops.

And it all should be looking like this.

First you may prepare some graphics for you stage, I guess you can do better then I did, I just made a fast one here. One simple tip I will tell you is to add a drop shadow to your object, so it looks like its standing on some kind of ground.

Now the only thing we need on the stage is some kind of car, just draw something or put in one if you have one. Convert it to a movie clip and give it the instance name "car".

Now we are ready for the actionscript part, so open up your actionscript panel and type in the code below.

First we need some variables to control some stuff, like telling us which key is pressed, the speed of the car, friction and acc..

view plain?

1. var rightKeyDown:Boolean;
2. var leftKeyDown:Boolean;
3. var keyPressed:int;
4. var speed = 0.5;
5. var cs = 0;
6. var friction = 0.96;

  var rightKeyDown:Boolean;   var leftKeyDown:Boolean;   var keyPressed:int;   var speed = 0.5;   var cs = 0;   var friction = 0.96; 

Usually I always put an init function, we could just type it outside any function, but it all looks more structured with a init function for all the code that should be run at program start.

First the function makes sure to tell flash that no keys is down.

Then we add to eventlisteners, one for the key down, and one for key up, to call a function no matter what key is hit.

view plain?

1. startMe();
2. function startMe():void {
3. leftKeyDown = false;
4. rightKeyDown = false;
5. stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
6. stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
7. }

startMe(); function startMe():void {  leftKeyDown = false;  rightKeyDown = false;  stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);  stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey); } 

This next function "filters" what key is down, if its the left or right, then add some function if its the one or other.

view plain?

1. function pressKey(event:KeyboardEvent):void {
2. keyPressed = event.keyCode;
3. if (keyPressed == Keyboard.LEFT) {
4. leftKeyDown = true;
5. }
6. if (keyPressed == Keyboard.RIGHT) {
7. rightKeyDown = true;
8. }
9. car.addEventListener(Event.ENTER_FRAME, driveCar);
10. }

function pressKey(event:KeyboardEvent):void {  keyPressed = event.keyCode;  if (keyPressed == Keyboard.LEFT) {   leftKeyDown = true;  }  if (keyPressed == Keyboard.RIGHT) {   rightKeyDown = true;  }  car.addEventListener(Event.ENTER_FRAME, driveCar); } 

And here is the function that has the most important code, it actually makes the car move, when the right key is down.

function driveCar(event:Event):void { if (leftKeyDown) { cs -= speed; } if (rightKeyDown) { cs += speed; } car.x += cs; cs *= friction; }

As you may have noticed in the startMe function we also added an eventlistner to listen to when the key is UP again, that is no key is down, so we can stop the car again.

view plain?

1. function releaseKey(event:KeyboardEvent):void {
2. var key_:int = event.keyCode;
3. if (key_ == Keyboard.LEFT) {
4. leftKeyDown = false;
5. }
6. if (key_ == Keyboard.RIGHT) {
7. rightKeyDown = false;
8. }
9. }

function releaseKey(event:KeyboardEvent):void {  var key_:int = event.keyCode;  if (key_ == Keyboard.LEFT) {   leftKeyDown = false;  }  if (key_ == Keyboard.RIGHT) {   rightKeyDown = false;  } } 

And that''s it, if you had any problem with the code, you may download the source code below, and test the car function through there.

Download button

This, step by step flash lesson will show you how to create cool and very practical photo animation using a Tint and mask techniques! You don't have to use action script code to make this lesson. For this lesson, I will use a photo of Bmw roadster. You can use this animation for any flash header, banner, presentation... Step 1 First, download a transparent photo of Bmw roadster! Step 2 Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 440 pixels and the height to 350 pixels. Select black color as background color. Set your Flash movie's frame rate to 22 and click ok. Step 3 Choose now File > Import > Import to Stage (Ctrl+R) and import a photo of Bmw roadster into a flash stage. Step 4 While the photo is still selected, press F8 key (Convert to Symbol) to convert this photo into a Movie Clip Symbol. Step 5 While the new made Movie Clip is still selected, go to the Align Panel (Ctrl+K) and do the following: 1. Make sure that the Align/Distribute to Stage button is turned on, 2. Click on the Align horizontal center button and 3. Click the Align vertical center button. Step 6 Call the current layer Bmw roadster. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name. Step 7 Click now on frame 10 and 30 and press F6 key. Step 8 Go back now on the first frame, select the Selection Tool (V) and click once on the photo to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage and for Color drop down menu choose Tint. Then, choose the following options: Repeat this process also for frame 10 Step 9 Right-click anywhere on the gray area between frame 10 and 30 on the timeline and choose Create Motion Tween from the menu that appears. Step 10 Create now a new layer above the layer Bmw roadster and name it mask. Step 11 Select now the mask layer, take the Rectangle Tool (R) and draw a rectangle shape about 500x190 and place it on the position like it is shown on the picture below! Step 12 Click now on frame 10 and press F6 key. After that, while the rectangle shape is still selected, go to the Align Panel and repeat step 5. Step 13 Right-click anywhere on the gray area between frame 1 and 10 on the timeline and choose Create Motion Tween from the menu that appears. Step 14 Select now shape area layer again, and convert it to a mask by right-clicking on the shape area layer and selecting Mask. See the picture below. Now, we're done! Have a nice day! Download example

Share this tutorial: