Featured Post 1 Title

Replace these every slide sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.Download more free blogger templates from www.premiumbloggertemplates.com.

Read More

Featured Post 2 Title

Replace these every slide sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.Download more free blogger templates from www.premiumbloggertemplates.com.

Read More

Featured Post 3 Title

Replace these every slide sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.Download more free blogger templates from www.premiumbloggertemplates.com.

Read More

Featured Post 4 Title

Replace these every slide sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.Download more free blogger templates from www.premiumbloggertemplates.com.

Read More

Featured Post 5 Title

Replace these every slide sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.Download more free blogger templates from www.premiumbloggertemplates.com.

Read More

May 25, 2010

Make MP3 Player with Flash

This time I will make a separate program for playing MP3, by adding some features commonly available in the form of MP3 player add files, view playlists, and the ability to choose the playlist. But still with the limitation that the MP3 files should be in the same folder with SWF file.

image

See The Tutorial Videos

 

 

Features add files that can select multiple files simultaneously can we make use FileReferenceList class, while the feature created a playlist using the List component. To start, let's follow the steps below:

 

1. First, create a new Flash file with the features of ActionScript 2.0. How, click the menu File> New.… after the options window appears, select Flash File (ActionScript 2.0).

image

2. Click Modify> Document. In the Dimensions column, change the value of Width and Height to 300 px for stage width and 270 px for height measurement stage.

image

image

3. Do the import button in a way, click the Components tab, User Interface, and select Button, click and drag the button to the stage. Take three pieces of buttons, which are used for the Browse for File, Previous, and Next.

image

image

4. Click the first button on the Properties tab, give the instance name left_btn.

image

 image

Then click the Component Inspector panel. On the Parameters tab, select the label and change its name to Previous.

image

image

Do it for the next button in the same way. On the second button, give the instance name browse_btn and on the third button, give the instance name right_btn.

image

image

5. Using the Text Tool, create a Dynamic Text with the instance name word_txt that position under three previous Movieclip. Later, this text will display the artist name and song title (taken from the ID3 tags of MP3 which is running, while also displays the current song when compared to the total time the entire song.

image

image

image 

6. To view playlists, we will use the List component, which is one of the predefined components in Flash that can be found in the User Interface Components panel. If the Components panel is not visible, we can open it by clicking the menu Window > Components.

image

image 

7. Drag List component from Components panel to the center stage, positioned at the bottom of the third button that we have made previously.

image 

8. Give the component an instance name with the name cmp_playlist.

image 

9. Create a new layer we will use as a special place to save ActionScript. Writing the script aimed at a separate layer to make it more neatly, and not mixed with other components, making them easier organized. Create a new layer can be done by click the menu Insert > Timeline > Layer found on the main menu.

image 

Or they can be illustrated with a paper click on the icon located at the lower left corner of the Timeline panel.

image

10. Right click on the first frame in a new layer that was created earlier, select the Actions menu.

image

11. After the ActionScript panel appears, give this script:

image

import flash.net.FileReferenceList;

var playlist:Array = new Array();
var music:Sound = new Sound();
var number:Number = new Number(0);
var jmlMax:Number = new Number(4);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

this.createTextField("status_txt", this.getNextHighestDepth(), 0,0,100,22);

right_btn.onPress = right;
left_btn.onPress = left;
browse_btn.onPress = browseFile;
browse_btn.text.text = "load";
left_btn.text.text = "prev";
right_btn.text.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");

function doubleClick(arg1) {
trace(arg1);
}

listHandler.change = function(evt:Object)
{
    if(number != evt.target.selectedItem.data)
    {
        number = evt.target.selectedItem.data;
        loadMusic();
    }
}

music.onSoundComplete = function()
{
    right();
}

music.onLoad = function(success:Boolean)
{
    if (success)
    {
        music.start();
        status_txt.text = "file Found";
        trace("playlist: ");
        for(var i = 0; i < playlist.length; i++)
        {
            trace(i+": "+playlist[i]);
        }
    }
    else
    {
        status_txt.text = number + " file not Found";
    }
}

listenerFileRefList.onSelect = function(file:FileReferenceList):Void
{
    for(var i=0; i < file.fileList.length; i++)
    {
        var fileChoose = file.fileList[i].name;
        playlist.push(fileChoose);
        cmp_playlist.addItem({label:fileChoose, data:i});
    }
    loadMusic();
}

function browseFile()
{
    fileRefList.browse();
}

function loadMusic()
{
    music.loadSound(playlist[number], true);
}

function right()
{
    number +=1;
    if(number >= playlist.length)
    {
        number = 0;
    }
    loadMusic();
}

function left()
{
    number -=1;
    if(number <= 0)
    {
        number = playlist.length - 1;
    }
    loadMusic();
}

this.onEnterFrame=function()
{
    var position:String = music.position.toString();
    var duration:String = music.duration.toString();
    var artist:String = music.id3.artist.toString();
    var title:String = music.id3.songname.toString();
    var minutePlaying:String = Math.floor(position/60000) + ":" + Math.round((position/1000)%60);
    var minuteTotal:String = Math.floor(duration/60000) + ":" + Math.round((duration/1000)%60);
    if(position == undefined)
    {
        word_txt.text = "load MP3 file first";
    }
    else
    {
        word_txt.text = artist + " - " + title + "\n" + minutePlaying + " / " + minuteTotal;
    }
}

12. Save the FLA file first from the Flash is in a particular folder containing MP3 files (e.g a folder in My Music), by clicking File menu > Save As ...

image

image

13. Perform a Test Movie to see a preview of the movie Flash we have made this. Click Control > Test Movie, or by pressing Ctrl + Enter on the keyboard.

image

image

14. To create this executable file from SWF (that can be run on another computer, even if Flash is not installed on other computers), we can set it with the way Windows Projector checklist on the menu option File > Publish Settings.

image

image

Click the File menu > Publish or press Shift > F12 on your keyboard to perform publish.

image


Make Simulation of Point and Line with Flash

MovieClip class has some drawing functions, termed the Drawing API, such as: beginFill (), beginGradientFill (), clear (), curveTo (), endFill (), lineTo (), lineStyle (), moveTo (), which allows for produce fusion curve, line, and color to the stage just by writing a few lines of the script. I will try to create an interactive simulation of the points can be shifted, and has a line connecting with a few variations.

image

See The Tutorial Videos

Follow these steps:

1. Create a new Flash file with ActionScript 2.0 features:

File > New > (ActionScript 2.0)

image

2. Save the FLA file in advance of the flash that we will create it in a folder:

File > Save As…

image

3. This time no one image that needs to be prepared before, because we will draw it as a whole using a script.

4. Right-click the first frame on the timeline, select the Actions menu to display the Actions panel that will write in the frame.

image

5. After the Actions panel appears, it is time to write the script of the simulation points and this line:

image

function createPoint(dynaPoint, depth, x, y)
{
clip = this.createEmptyMovieClip(dynaPoint, depth);
clip.lineStyle(20, 0x0, 100);
clip.moveTo(0, 0);
clip.lineTo(0.2, 0);
clip._x = x;
clip._y = y;
}
function drag()
{
this.startDrag(true);
paper.onMouseMove = drawLine;
this.onPress = drop;
}
function drop()
{
this.stopDrag();
delete(paper.onMouseMove);
this.onPress = drag;
}
function drawLine()
{
this.clear();
this.lineStyle(2, 0x0, 100);
this.moveTo(point1._x, point1._y);
this.lineTo(point2._x, point2._y);
updateAfterEvent();
}
createPoint('point1', 1, 100, 100);
createPoint('point2', 2, 120, 100);
point1.onPress = drag;
point2.onPress = drag;
this.createEmptyMovieClip('paper', 0);

 

6. To see a preview of the Flash movie that we make, click on Control > Test Movie or by the keyboard shortcut Ctrl + Enter.

image

7. The result, we can see there are two contiguous images that point. When passing the mouse cursor over it, then the form of hand-shaped cursor changes to indicate that the images could be shifted. If one point of the two movable, will be illustrated by a line connecting between the two.

image

8. Why is this so? CreatePoint function () that we created above, each time a call will create an empty Movieclip which illustrate a point, and every point we would call a Movieclip shear that drawing a line. To further explore, we try to change back function drawLine (), and the final line of the script becomes:

image


function drawLine()
{
this.clear();
this.lineStyle(2, 0x0, 100);
this.moveTo(point1._x, point1._y);
this.lineTo(point2._x, point2._y);
this.moveTo(point3._x, point3._y);
this.lineTo(point4._x, point4._y);
updateAfterEvent();
}
createPoint('point1', 1, 100, 100);
createPoint('point2', 2, 120, 100);
createPoint('point3', 3, 140, 100);
createPoint('point4', 4, 160, 100);
point1.onPress = drag;
point2.onPress = drag;
point3.onPress = drag;
point4.onPress = drag;
this.createEmptyMovieClip('paper', 0);

 

9. Perform a Test Movie again to see the preview. With changes in the script above, we will find the number of points increased to four pieces which each have a line connecting two points in between.

image

10. Up here, we have little to understand the use of function moveTo () as an initial reference point and draw a line lineTo function () as the endpoint of the line drawn. So as to create a closed curve from these points, we need to change the function drawLine () that we make, and the final line of the script we'd be:

image

function drawLine()
{
this.clear();
this.lineStyle(2, 0x0, 100);
this.moveTo(point1._x, point1._y);
this.lineTo(point2._x, point2._y);
this.lineTo(point3._x, point3._y);
this.lineTo(point4._x, point4._y);
this.lineTo(point1._x, point1._y);
updateAfterEvent();
}
createPoint('point1', 1, 100, 100);
createPoint('point2', 2, 120, 100);
createPoint('point3', 3, 140, 100);
createPoint('point4', 4, 160, 100);
point1.onPress = drag;
point2.onPress = drag;
point3.onPress = drag;
point4.onPress = drag;
this.createEmptyMovieClip('paper', 0);

 

11. Perform a Test Movie again to see the preview. With this second script changes, we have four pieces, each dot dot interconnected with two other points, and form a closed curve.

image

12. With some examples, try to make back some other variations.


May 24, 2010

Social Sketches A Hand-drawn Icon Set

social-sketches-preview

I really like sketches, absolutely for icon. This is nice icon from Social Bookmarking, Social Networking and Search Engine. Different from other, like Glossy Icon, High Quality Icon, Beautiful Icon, but this Sketches Icon. For Social Bookmarking, Social Networking and Search Engine (have Digg, StumbleUpon, Facebook, Reddit, Twitter, De-li-ci-ous, Flickr, Technorati, Last.fm, Wordpress, RSS, Google, Bing, Yahoo! and BuySellAds). Total have 16 Social Sketches Hand-drawn Icon. “Different is Beautiful”, High Quality Icon and Sketches Icon is different (from design and color).

 

See This Icon!

1. Bing

bing-256

2. BuySellAds

buysellads-256

 

3. Delicious

delicious-256

 

4. Digg

digg-256

 

5. Facebook

facebook-256

 

6. Flickr

flickr-256

 

7. Google

google-256

 

8. Last.fm

lastfm-256

9. Reddit

reddit-256

 

10. RSS

rss-256

 

11. Stumbleupon

stumbleupon-256

 

12. Technorati

technoratti-256

 

13. Twitter

twitter-256

 

14. Twitter Bird

twitter-follow-256

15. Wordpress

wordpress-256

 

16. Yahoo!

yahoo-256

Download Social Sketches Icon.zip

Who's The Owner ?

Yeah, we must respect the owner of Icon, if not there’s the Author, we never have a Greats Icon! FanArshavin.com so respect with the owner of Icon.

Author: An Phan Van