How I became an application developer for vkontakte.ru
A little over a month ago, I decided that developing applications for a contact could very well become a profitable business, and a profitable business is just what I need. I did not have any knowledge in Action Script at that time. So I actually started from scratch and decided to document the process. Hope this helps someone. As far as possible, I will continue to share my experience on this blog. Below my notes are exactly as I entered them in evernote.
The 11th day began from the moment when I decided to become a developer of the application for vkontakte.ru. Exactly 11 days ago, I downloaded and launched Flex 3 Builder for the first time. For good, it was then that we had to start blogging, because the first steps are the most difficult. On the other hand, the first steps are still taking place and the most interesting is yet to come.
A bit of background.
The economic crisis has never really bothered me and has not worried so far, because I have never been afraid that I would be in a hopeless situation. Nevertheless, I must admit that I was too relaxed and the crisis led to the fact that my incomes became so meager and unstable that I had to look for new ways to make money. As a new path, application development for vkontakte.ru was chosen.
There were several reasons for this:
1. Great potential and many unoccupied niches.
2. A lot of ideas.
3. Ease of promotion and monetization of finished applications.
I didn’t put off this business in a long box (which, in fact, is very surprising, because so many have been put aside in my “long box” that its size is quite comparable to the size of some “long Venus”) and installed Flex 3 Builder. On the first day, I went through a simple tutorial that allowed me to enter words into a text field and get pictures from Flickr in response. It seemed very easy, but so far it hasn’t clarified how I can get any data from the VKontakte API. After poking around there, I decided to go through all the remaining tutorials from the Getting started section. After a couple of days, I had the feeling that now I know much more than before, but could not understand what exactly I know and how it can be used for my main purpose.
From this moment I decided to search for information only on those issues that will help me solve the current steps in creating the application. My first application, I decided to make a music player. Vkontakte already had about 6 players with different functionality, but I wanted mine, and such that all other players seemed something like windows media player classic compared to mine.
The first goal was to get and output a full response from the Vkontakte API. First, I reserved a place for my own application, got the corresponding api_id and secret code. Next, it was necessary to compose a full-fledged request from all this, the main difficulty was compiling a signature using md5. Here the Test Application application (http://vkontakte.ru/app35569_1933734) helped me a lot, with its help I was able to make a request and get a list of my friends. Now we had to send the same request from our own application. To get started, I needed to somehow connect md5 encryption. For this I used the free crypto library, after some manipulations I understood how to import it correctly, as well as how to call the desired function, get the result and output it. Here I first felt that there is progress and it filled me with pride (which I then experienced periodically and which I fed on). Then I made a request usingand, lo and behold, received a list of his friends.
The next goal was to play any audio file from your VKontakte page. To begin with, I learned by request to get a complete list of my audio records in XML format. Now I had to do something with him. First, I read the working with sound section of the Flex 3 Developer Guide, in theory everything seemed simple again, but I really didn’t want to write the necessary functions (and there wasn’t enough knowledge for that), so I started in search of ready flash mp3 players, I found a few pieces, fiddled with them for a long time, again received some new knowledge, but could not get them to work the way I needed. I had to go back to working with sound from the Flex 3 Developer Guide and carefully study the example there. From the example it became clear that I can achieve my goal through the one used in the example, SoundFocade library (or something like that), but first you had to learn how to select the necessary parameters from the xml response with a list of my VKontakte records. I had to postpone SoundFocade for a while and study xml, ways to access individual elements of the xml object, work with listsas well as things like Collections and dataProvider. That is what I did today, May 15th. As a result, I made a simple player interface and, using the Request tracklist button, I was able to get a list of songs from my page. It looked like this:
Well, the background has ended and now I can blog in real time. The current task is to add some text field and display the URL of the selected track there. I’ll go pour some tea and read the help on.
I didn’t even have time to pour tea. The task was solved elementarily, through itemClick event. In my case, itemClick = "showURL (event)". The construction of
event.currentTarget.selectedItem.url is much more interesting , it will be necessary to understand it in more detail, especially with currentTarget.
Well, now interesting things begin. I have all the information about the tracks, now I need to make it all play. Let the music play.
Done! Everything turned out to be very simple. I pulled out the necessary functions from SoundPlayer, deleted everything that was superfluous (not that completely superfluous, but something that can be dispensed with in the simplest version). So, one of the most important intermediate goals was achieved, I was able to download the full list of songs from my page and play any of them. It's time to set new goals.
The following goals:
Make the player fully functional.
- pause button
- track forward
- track back
- scroll bar
- download indicator
- volume
- shuffle
- loop of the entire playlist
- loop of one song
- output of the current artist and song
- time of the track playing
Global goals:
- Add API last requests to the player. fm
- Make interaction with the database
- Add drag and drop list items and save all this
- Your friends often listen
- Similar tastes on VKontakte
- The pause button was very simple.
First, with add and remove eventListenter, pause and resume are on the same button. Then he climbed into SoundFacade, for some reason it was done that you can pause only after the song is fully loaded, quickly added your function:
public function pausePlayback (pos: int = 0): void
{
this.pausePosition = pos;
this.sc.stop ();
this.playTimer.stop ();
this.isPlaying = false;
}
And it worked perfectly.
Now you need to make the scroll bar. At first it turned out to make a progressBar, which showed which part of the song has already been played and how much is left, but the problem is that it cannot be changed, i.e. you can’t rewind the song, and in addition, I would like the percentage of loading to be displayed on the same progressBar with some kind of pale color. In general, after some searches, I remembered that in English it was called seek bar and quickly found
Flex 3 Cookbook: Chapter 8, Images, Bitmaps, Videos, Sounds, which just addresses this issue. We will study.
So, instead of progressBar, you must explicitly use HSlider. I started with this:
public function onPlayProgress (evt: ProgressEvent): void
{
var playbackPercent: uint = 100 * (evt.bytesLoaded / evt.bytesTotal);
pbSlider.value = playbackPercent;
} The
slider moves right after the music, now we need to make the music move after it.
Through trial and error, he achieved the desired result, the music can be rewound. Now you need to somehow combine the rewind and the track load indicator. In addition, I came across an unexpected obstacle: if you play a track that is already completely in the cache, then you can’t switch to any other one. There is a suspicion that the problem is in the .close () method, which is trying to close a non-existing connection. Hurrah! As expected, the problem was in .close (), but I was looking for it in the wrong place, it turns out the first call to .close () was even earlier. True, the loading indicator has now begun to behave somehow strange, but this is nonsense, compared to the previous problem. Now the player looks like this:
In general, the maximum program for today is even overfulfilled. It's already one in the morning, you can go to bed.
Today is Saturday and one could rest, but is eager to continue the project. The maximum program for today is:
- repair the download indicator
- volume
- track forward
- track back
- looping one song
- displaying the current artist and song
- playing time of the track
The problem with the download indicator has been successfully resolved. The problem was that I went too far with the .close () method, and the connection to the underloaded tracks stopped closing altogether, as a result of this.s.addEventListener (flash.events.ProgressEvent.PROGRESS, onLoadProgress); I began to process several threads at once and, accordingly, alternately display the progress of each in the same progressBar. This problem is solved, now I noticed that when I connect some of the "heavy tracks" do not have time to load and I get a nagging stutter. So you need to increase buffer time.
bufferTime for some reason does not respond to my actions, but perhaps this is because it is necessary that the application has already been downloaded to the contact server, for now I will not bother with this.
There were no special problems with the volume, we connect flash.media.soundtransform, create a new object, pass it the value of volumeSlider, if it has changed.
I'm starting to be bothered by the poor structure of the project, everything is crammed into discord. After completing all the functions of the player, I will take up the design, refactoring and optimization of the code.
Now buttons back and forth.
As expected, there were no problems with the buttons, such a function and everything is in order:
trackList.selectedIndex = trackList.selectedIndex + 1;
var newUrl: String = trackList.selectedItem.url;
pbSlider.value = 0;
load (newUrl);
Looping one song
Again, no problem, with this combination:
this.s.addEventListener (flash.events.Event.SOUND_COMPLETE, onPlayComplete);
public function onPlayComplete (evt: Event): void
{
if (repeatTrack.selected == true) this.s.play ();
}
It is necessary to complete the “output of the current artist and song” and “the time of playing the track”, and then fix the problem with the volume; when rewinding, the volume returns to its original state.
Unfortunately, yesterday the vision was distracted by the euro and did not carry through the planned to the end.
May 17 I wanted to work despite the day off, but still had to rest. A friend called in the morning, thought about walking for two or three hours, as a result I came home closer to the night, maybe for the better, otherwise I actually started to lose contact with people, spent the whole week at home, and did not really communicate with anyone.
Okay, today we need to do the following:
Output of the current artist and song
Correct output of tracks in the playlist
Display of the playing time of the track
Fix the problem with volume
Shuffle
Looping the entire playlist The
volume has been fixed. Again there was a gap with an open connection, this time with a pause. I will decide.
The problem is resolved.
I also decided all other questions, no special situations arose, so it makes no sense to describe. For tomorrow I left only moving the playlist, after the mixing is ready, it will be possible to start cleaning the code, the player’s design and the like, i.e. I will bring the player in a salable condition.
For today, from the obligatory cases, only mixing the playlist. Next, I will begin work on polishing the player. For mixing, most likely, you will need to use an array of track numbers, randomly mixed. As always, we go to google and look for “flex 3 array random” and “flex 3 array shuffle”
Most likely this code will work:
package com.interactiveSection.utils {
public class RandomArray {
public function RandomArray (): void {};
public static function generateRdmArray (numElements: int, origArray: Array = null): Array {
if (origArray == null || numElements> origArray.length) {
origArray = (origArray == null)? new Array (): origArray;
for (var i: int = origArray.length; numElements> i; i ++) {
origArray.push (i);
}
}
//
var tempArray: Array = new Array ();
tempArray = origArray.slice ();
var resultArray: Array = new Array ();
while (tempArray.length> 0 && numElements> resultArray.length) {
var rdm: int = Math.floor (Math.random () * tempArray.length);
resultArray.push (tempArray [rdm]);
tempArray.splice (rdm, 1);
}
trace ("returning generated array:„ + resultArray);
return resultArray;
}
}
}
Surprisingly, playing a random track worked the first time, apparently a little bit, I begin to understand what's what in Flex and ActionScript.
So, I have a full-fledged player with the following functions:
- Output playlist
- Play, stop, pause
- Rewind
- Volume
forward, track backward
- Looping the track or the entire playlist
- Displaying the artist and song title
- Displaying the total track time and current playback time
In a word, all the basic functionality is there, now you need to bring the code in a beautiful and comfortable condition, and then make a nice design for the player.
I started working on the little things by adjusting the display of the names of songs and artists. The problem was that if there were special characters in the song, like 'or &, then they were escaped twice and from & it turned out, something like & $ # 39 ;, as a result in place', I got some codes. At first I thought that there should be some simple function like decode or unescape, such functions were actually found, but in my case their effect did not apply. I was looking for a simple way for a long time, but in the end I decided to do all this through .replace and reguyarnye expressions. Fortunately, before that I managed to post my problem everywhere, anywhere, including including in a contact Rostislav Sirak. Rostislav helped me a lot by proposing a method through htmlText in ItemRenderer. Thank you very much for the valuable advice, in parallel, I learned a lot more useful things.
Now in some difficulty, how exactly do I clean the code. Most likely it is necessary to make own components and to take out as code in separate files. The question is how to organize it better. Perhaps I’ll start by creating my own components, over time, the player will probably need to be separated from the main application.
Did nothing at all. Shame on me and shame.
Another shame
Yet
Today, I still took up the mind. Before cleaning the code, I decided to read the documentation and application examples so that there was some kind of “how to” example.
To start, I’ll make a list of what needs to be cleaned:
1. Transferring the list of songs through Collection, not just XML.
In general, the rest of the time I read “Getting started with flex 3”
Began reading the AS Action Script 3.0 Essential tutorial. I read 180 pages, in principle from the textbook I will need 400-500 more pages, this week I have to read to the end. I think this will give a big breakthrough in understanding how everything is arranged and where to move on. After this book I will read the manual on creating my own components, I think this is also a necessary step, before further development.
I continue to read the Action Script 3.0 Essential tutorial. Additionally downloaded “Application Architecture Guide 2.0” patterns & practices.
I read all the basic information from "Action Script 3.0 Essential", a lot has become much more understandable. I started reading “Creating and extending adobe flex 3 components”, there is a lot of information, but reading all of it in English will be a bit long, so for now I will confine myself to Chapter 7 “Chapter 7: Advanced MXML Components”, I think there will be all the necessary information on creating your own components . That's all for today.
I read about creating my own components, I understood the basic essence, if I turn to the documentation. I created a new project in Flex 3 Builder, in which I will make a cleaner version of the player, which is already separated by components, classes, modules, etc., and at the same time I will attach the design.
For 11 whole days I did not record anything, but at the same time I was immersed in the work with my head. So immersed that he even did everything, although in recent days I had to work literally all night long to manage to complete the player exactly one month after installing Flex 3 Builder. In general, I’ll just briefly describe what issues I encountered in these 11 days. At first I created a new project, this time I did not write all the code directly in the main file, but assigned him the role of a “container” for individual modules. I decided to place the elements like this: on top there is a header and a horizontal menu (which is not yet available, but is planned in the future), under the header there are two columns: in the left column is the player, and in the right is any additional information. Having marked out the main file, I set about creating a component with a player. File -> New -> MXML Component. Since the code has already been written (although in draft form), I started with the design. I decided to make the design gray, minimalistic and “metal-like”, such a choice was made because I couldn’t spend a lot of time on a rich design, but gray and minimalistic, although it would not cause delight, but also rejection (I hope). Opened Fireworks MX, made the background. Above, I needed a running line with the name of the song, and once again I climbed into Google for a corresponding example. Searched according to the words “scrolling text”, found a lot of nonsense, until it turned out that the desired result is described much better by the word marque. "Flex marque" in google gave much more useful results, which I easily adapted to my needs. With the line done. A scrollbar should be located just below. It was already harder. First of all, I didn’t like the standard bar and slider, and secondly, somehow I needed to display the process of downloading a music file in this strip. Again google, search again. In the end, I made the scroll bar invisible, leaving only the slider and placing it on top of the Progress Bar component, which depicted the scroll bar, although it actually wasn’t, but it showed the loading process perfectly. I redid the slider myself using the thumbSkin property. With this I decided, then I had to make a display of the playing time. Nothing complicated here, TextArea + embedded font. Then again difficulties, it is necessary to make a visualization. Then I got stuck for a long time, looked at a bunch of source code, until I came across a suitable component, set it up a bit, inserted it into the player, and to my surprise, it worked. I was very glad. Then there were all kinds of buttons and volume, there was nothing complicated, it makes no sense to describe in detail. After the buttons, it was necessary to make a ComboBox (drop-down list) with all the friends of the user. ComboBox itself was easy to make, filling it is also easy. There was a problem with displaying the inscriptions in the list, again I had to use htmlText to display special characters, I already had some experience, so I quickly added a combination of ItemRenederer and Label, special characters began to be displayed, but the inscription was constantly displayed as the selected item. I struggled with this problem for a long, long time, I didn’t understand what its cause was, and finally, in the best traditions of redneck coding, I simply closed the inscription on the selected item using canvas, and placed Label in the canvas and assigned the texts of the selected item to it. Hardly, this is the best solution, but otherwise I did not succeed. Then he added DataGrid for the playlist and with the design was ready. The software part for the player was already ready, I just combed it and quickly attached it. Next, you need to make a component that displays information about the artist using the LastFM API. First, according to tradition, I prepared the design of the component (with which I did not bother), prepared the necessary fields. Then he established interaction with the API. To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: Next, you need to make a component that displays information about the artist using the LastFM API. First, according to tradition, I prepared the design of the component (with which I did not bother), prepared the necessary fields. Then he established interaction with the API. To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: Next, you need to make a component that displays information about the artist using the LastFM API. First, according to tradition, I prepared the design of the component (with which I did not bother), prepared the necessary fields. Then he established interaction with the API. To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here:vkontakte.ru/app593265
05/15/2009
The 11th day began from the moment when I decided to become a developer of the application for vkontakte.ru. Exactly 11 days ago, I downloaded and launched Flex 3 Builder for the first time. For good, it was then that we had to start blogging, because the first steps are the most difficult. On the other hand, the first steps are still taking place and the most interesting is yet to come.
A bit of background.
The economic crisis has never really bothered me and has not worried so far, because I have never been afraid that I would be in a hopeless situation. Nevertheless, I must admit that I was too relaxed and the crisis led to the fact that my incomes became so meager and unstable that I had to look for new ways to make money. As a new path, application development for vkontakte.ru was chosen.
There were several reasons for this:
1. Great potential and many unoccupied niches.
2. A lot of ideas.
3. Ease of promotion and monetization of finished applications.
I didn’t put off this business in a long box (which, in fact, is very surprising, because so many have been put aside in my “long box” that its size is quite comparable to the size of some “long Venus”) and installed Flex 3 Builder. On the first day, I went through a simple tutorial that allowed me to enter words into a text field and get pictures from Flickr in response. It seemed very easy, but so far it hasn’t clarified how I can get any data from the VKontakte API. After poking around there, I decided to go through all the remaining tutorials from the Getting started section. After a couple of days, I had the feeling that now I know much more than before, but could not understand what exactly I know and how it can be used for my main purpose.
From this moment I decided to search for information only on those issues that will help me solve the current steps in creating the application. My first application, I decided to make a music player. Vkontakte already had about 6 players with different functionality, but I wanted mine, and such that all other players seemed something like windows media player classic compared to mine.
The first goal was to get and output a full response from the Vkontakte API. First, I reserved a place for my own application, got the corresponding api_id and secret code. Next, it was necessary to compose a full-fledged request from all this, the main difficulty was compiling a signature using md5. Here the Test Application application (http://vkontakte.ru/app35569_1933734) helped me a lot, with its help I was able to make a request and get a list of my friends. Now we had to send the same request from our own application. To get started, I needed to somehow connect md5 encryption. For this I used the free crypto library, after some manipulations I understood how to import it correctly, as well as how to call the desired function, get the result and output it. Here I first felt that there is progress and it filled me with pride (which I then experienced periodically and which I fed on). Then I made a request using
The next goal was to play any audio file from your VKontakte page. To begin with, I learned by request to get a complete list of my audio records in XML format. Now I had to do something with him. First, I read the working with sound section of the Flex 3 Developer Guide, in theory everything seemed simple again, but I really didn’t want to write the necessary functions (and there wasn’t enough knowledge for that), so I started in search of ready flash mp3 players, I found a few pieces, fiddled with them for a long time, again received some new knowledge, but could not get them to work the way I needed. I had to go back to working with sound from the Flex 3 Developer Guide and carefully study the example there. From the example it became clear that I can achieve my goal through the one used in the example, SoundFocade library (or something like that), but first you had to learn how to select the necessary parameters from the xml response with a list of my VKontakte records. I had to postpone SoundFocade for a while and study xml, ways to access individual elements of the xml object, work with lists
Well, the background has ended and now I can blog in real time. The current task is to add some text field and display the URL of the selected track there. I’ll go pour some tea and read the help on
I didn’t even have time to pour tea. The task was solved elementarily, through itemClick event. In my case, itemClick = "showURL (event)". The construction of
event.currentTarget.selectedItem.url is much more interesting , it will be necessary to understand it in more detail, especially with currentTarget.
Well, now interesting things begin. I have all the information about the tracks, now I need to make it all play. Let the music play.
Done! Everything turned out to be very simple. I pulled out the necessary functions from SoundPlayer, deleted everything that was superfluous (not that completely superfluous, but something that can be dispensed with in the simplest version). So, one of the most important intermediate goals was achieved, I was able to download the full list of songs from my page and play any of them. It's time to set new goals.
The following goals:
Make the player fully functional.
- pause button
- track forward
- track back
- scroll bar
- download indicator
- volume
- shuffle
- loop of the entire playlist
- loop of one song
- output of the current artist and song
- time of the track playing
Global goals:
- Add API last requests to the player. fm
- Make interaction with the database
- Add drag and drop list items and save all this
- Your friends often listen
- Similar tastes on VKontakte
- The pause button was very simple.
First, with add and remove eventListenter, pause and resume are on the same button. Then he climbed into SoundFacade, for some reason it was done that you can pause only after the song is fully loaded, quickly added your function:
public function pausePlayback (pos: int = 0): void
{
this.pausePosition = pos;
this.sc.stop ();
this.playTimer.stop ();
this.isPlaying = false;
}
And it worked perfectly.
Now you need to make the scroll bar. At first it turned out to make a progressBar, which showed which part of the song has already been played and how much is left, but the problem is that it cannot be changed, i.e. you can’t rewind the song, and in addition, I would like the percentage of loading to be displayed on the same progressBar with some kind of pale color. In general, after some searches, I remembered that in English it was called seek bar and quickly found
Flex 3 Cookbook: Chapter 8, Images, Bitmaps, Videos, Sounds, which just addresses this issue. We will study.
So, instead of progressBar, you must explicitly use HSlider. I started with this:
public function onPlayProgress (evt: ProgressEvent): void
{
var playbackPercent: uint = 100 * (evt.bytesLoaded / evt.bytesTotal);
pbSlider.value = playbackPercent;
} The
slider moves right after the music, now we need to make the music move after it.
Through trial and error, he achieved the desired result, the music can be rewound. Now you need to somehow combine the rewind and the track load indicator. In addition, I came across an unexpected obstacle: if you play a track that is already completely in the cache, then you can’t switch to any other one. There is a suspicion that the problem is in the .close () method, which is trying to close a non-existing connection. Hurrah! As expected, the problem was in .close (), but I was looking for it in the wrong place, it turns out the first call to .close () was even earlier. True, the loading indicator has now begun to behave somehow strange, but this is nonsense, compared to the previous problem. Now the player looks like this:
In general, the maximum program for today is even overfulfilled. It's already one in the morning, you can go to bed.
05/16/09
Today is Saturday and one could rest, but is eager to continue the project. The maximum program for today is:
- repair the download indicator
- volume
- track forward
- track back
- looping one song
- displaying the current artist and song
- playing time of the track
The problem with the download indicator has been successfully resolved. The problem was that I went too far with the .close () method, and the connection to the underloaded tracks stopped closing altogether, as a result of this.s.addEventListener (flash.events.ProgressEvent.PROGRESS, onLoadProgress); I began to process several threads at once and, accordingly, alternately display the progress of each in the same progressBar. This problem is solved, now I noticed that when I connect some of the "heavy tracks" do not have time to load and I get a nagging stutter. So you need to increase buffer time.
bufferTime for some reason does not respond to my actions, but perhaps this is because it is necessary that the application has already been downloaded to the contact server, for now I will not bother with this.
We turn to the volume.
There were no special problems with the volume, we connect flash.media.soundtransform, create a new object, pass it the value of volumeSlider, if it has changed.
I'm starting to be bothered by the poor structure of the project, everything is crammed into discord. After completing all the functions of the player, I will take up the design, refactoring and optimization of the code.
Now buttons back and forth.
As expected, there were no problems with the buttons, such a function and everything is in order:
trackList.selectedIndex = trackList.selectedIndex + 1;
var newUrl: String = trackList.selectedItem.url;
pbSlider.value = 0;
load (newUrl);
Looping one song
Again, no problem, with this combination:
this.s.addEventListener (flash.events.Event.SOUND_COMPLETE, onPlayComplete);
public function onPlayComplete (evt: Event): void
{
if (repeatTrack.selected == true) this.s.play ();
}
It is necessary to complete the “output of the current artist and song” and “the time of playing the track”, and then fix the problem with the volume; when rewinding, the volume returns to its original state.
05/17/09
Unfortunately, yesterday the vision was distracted by the euro and did not carry through the planned to the end.
05/18/09
May 17 I wanted to work despite the day off, but still had to rest. A friend called in the morning, thought about walking for two or three hours, as a result I came home closer to the night, maybe for the better, otherwise I actually started to lose contact with people, spent the whole week at home, and did not really communicate with anyone.
Okay, today we need to do the following:
Output of the current artist and song
Correct output of tracks in the playlist
Display of the playing time of the track
Fix the problem with volume
Shuffle
Looping the entire playlist The
volume has been fixed. Again there was a gap with an open connection, this time with a pause. I will decide.
The problem is resolved.
I also decided all other questions, no special situations arose, so it makes no sense to describe. For tomorrow I left only moving the playlist, after the mixing is ready, it will be possible to start cleaning the code, the player’s design and the like, i.e. I will bring the player in a salable condition.
05/19/09
For today, from the obligatory cases, only mixing the playlist. Next, I will begin work on polishing the player. For mixing, most likely, you will need to use an array of track numbers, randomly mixed. As always, we go to google and look for “flex 3 array random” and “flex 3 array shuffle”
Most likely this code will work:
package com.interactiveSection.utils {
public class RandomArray {
public function RandomArray (): void {};
public static function generateRdmArray (numElements: int, origArray: Array = null): Array {
if (origArray == null || numElements> origArray.length) {
origArray = (origArray == null)? new Array (): origArray;
for (var i: int = origArray.length; numElements> i; i ++) {
origArray.push (i);
}
}
//
var tempArray: Array = new Array ();
tempArray = origArray.slice ();
var resultArray: Array = new Array ();
while (tempArray.length> 0 && numElements> resultArray.length) {
var rdm: int = Math.floor (Math.random () * tempArray.length);
resultArray.push (tempArray [rdm]);
tempArray.splice (rdm, 1);
}
trace ("returning generated array:„ + resultArray);
return resultArray;
}
}
}
Surprisingly, playing a random track worked the first time, apparently a little bit, I begin to understand what's what in Flex and ActionScript.
So, I have a full-fledged player with the following functions:
- Output playlist
- Play, stop, pause
- Rewind
- Volume
forward, track backward
- Looping the track or the entire playlist
- Displaying the artist and song title
- Displaying the total track time and current playback time
In a word, all the basic functionality is there, now you need to bring the code in a beautiful and comfortable condition, and then make a nice design for the player.
I started working on the little things by adjusting the display of the names of songs and artists. The problem was that if there were special characters in the song, like 'or &, then they were escaped twice and from & it turned out, something like & $ # 39 ;, as a result in place', I got some codes. At first I thought that there should be some simple function like decode or unescape, such functions were actually found, but in my case their effect did not apply. I was looking for a simple way for a long time, but in the end I decided to do all this through .replace and reguyarnye expressions. Fortunately, before that I managed to post my problem everywhere, anywhere, including including in a contact Rostislav Sirak. Rostislav helped me a lot by proposing a method through htmlText in ItemRenderer. Thank you very much for the valuable advice, in parallel, I learned a lot more useful things.
Now in some difficulty, how exactly do I clean the code. Most likely it is necessary to make own components and to take out as code in separate files. The question is how to organize it better. Perhaps I’ll start by creating my own components, over time, the player will probably need to be separated from the main application.
05/20/09
Did nothing at all. Shame on me and shame.
05/21/09
Another shame
05/22/09
Yet
05/23/09
Today, I still took up the mind. Before cleaning the code, I decided to read the documentation and application examples so that there was some kind of “how to” example.
To start, I’ll make a list of what needs to be cleaned:
1. Transferring the list of songs through Collection, not just XML.
In general, the rest of the time I read “Getting started with flex 3”
05/24/09
Began reading the AS Action Script 3.0 Essential tutorial. I read 180 pages, in principle from the textbook I will need 400-500 more pages, this week I have to read to the end. I think this will give a big breakthrough in understanding how everything is arranged and where to move on. After this book I will read the manual on creating my own components, I think this is also a necessary step, before further development.
05/25/09
I continue to read the Action Script 3.0 Essential tutorial. Additionally downloaded “Application Architecture Guide 2.0” patterns & practices.
I read all the basic information from "Action Script 3.0 Essential", a lot has become much more understandable. I started reading “Creating and extending adobe flex 3 components”, there is a lot of information, but reading all of it in English will be a bit long, so for now I will confine myself to Chapter 7 “Chapter 7: Advanced MXML Components”, I think there will be all the necessary information on creating your own components . That's all for today.
05/26/09
I read about creating my own components, I understood the basic essence, if I turn to the documentation. I created a new project in Flex 3 Builder, in which I will make a cleaner version of the player, which is already separated by components, classes, modules, etc., and at the same time I will attach the design.
06/06/09
For 11 whole days I did not record anything, but at the same time I was immersed in the work with my head. So immersed that he even did everything, although in recent days I had to work literally all night long to manage to complete the player exactly one month after installing Flex 3 Builder. In general, I’ll just briefly describe what issues I encountered in these 11 days. At first I created a new project, this time I did not write all the code directly in the main file, but assigned him the role of a “container” for individual modules. I decided to place the elements like this: on top there is a header and a horizontal menu (which is not yet available, but is planned in the future), under the header there are two columns: in the left column is the player, and in the right is any additional information. Having marked out the main file, I set about creating a component with a player. File -> New -> MXML Component. Since the code has already been written (although in draft form), I started with the design. I decided to make the design gray, minimalistic and “metal-like”, such a choice was made because I couldn’t spend a lot of time on a rich design, but gray and minimalistic, although it would not cause delight, but also rejection (I hope). Opened Fireworks MX, made the background. Above, I needed a running line with the name of the song, and once again I climbed into Google for a corresponding example. Searched according to the words “scrolling text”, found a lot of nonsense, until it turned out that the desired result is described much better by the word marque. "Flex marque" in google gave much more useful results, which I easily adapted to my needs. With the line done. A scrollbar should be located just below. It was already harder. First of all, I didn’t like the standard bar and slider, and secondly, somehow I needed to display the process of downloading a music file in this strip. Again google, search again. In the end, I made the scroll bar invisible, leaving only the slider and placing it on top of the Progress Bar component, which depicted the scroll bar, although it actually wasn’t, but it showed the loading process perfectly. I redid the slider myself using the thumbSkin property. With this I decided, then I had to make a display of the playing time. Nothing complicated here, TextArea + embedded font. Then again difficulties, it is necessary to make a visualization. Then I got stuck for a long time, looked at a bunch of source code, until I came across a suitable component, set it up a bit, inserted it into the player, and to my surprise, it worked. I was very glad. Then there were all kinds of buttons and volume, there was nothing complicated, it makes no sense to describe in detail. After the buttons, it was necessary to make a ComboBox (drop-down list) with all the friends of the user. ComboBox itself was easy to make, filling it is also easy. There was a problem with displaying the inscriptions in the list, again I had to use htmlText to display special characters, I already had some experience, so I quickly added a combination of ItemRenederer and Label, special characters began to be displayed, but the inscription was constantly displayed as the selected item. I struggled with this problem for a long, long time, I didn’t understand what its cause was, and finally, in the best traditions of redneck coding, I simply closed the inscription on the selected item using canvas, and placed Label in the canvas and assigned the texts of the selected item to it. Hardly, this is the best solution, but otherwise I did not succeed. Then he added DataGrid for the playlist and with the design was ready. The software part for the player was already ready, I just combed it and quickly attached it. Next, you need to make a component that displays information about the artist using the LastFM API. First, according to tradition, I prepared the design of the component (with which I did not bother), prepared the necessary fields. Then he established interaction with the API. To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: Next, you need to make a component that displays information about the artist using the LastFM API. First, according to tradition, I prepared the design of the component (with which I did not bother), prepared the necessary fields. Then he established interaction with the API. To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: Next, you need to make a component that displays information about the artist using the LastFM API. First, according to tradition, I prepared the design of the component (with which I did not bother), prepared the necessary fields. Then he established interaction with the API. To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here: To transfer the current track from the player component to the component with LastFM, I used my own event, which transmitted information about the track to the main application, and it redirected the request to the component with LastFM. Well, then quickly added a hat. Made a logo and you're done. The player is running. It is currently available here:vkontakte.ru/app593265