“Edit Profile” Design

After login, users can edit their profile. It will change their password, email and personal icon. 

When the user select a image, it will display the preview immediately. The size of icon is fixed as a square. If the user uploaded a non-square image. The preview will maintain aspect ratio as the above picture. Otherview, it will distort the image if do not maintain aspect ratio. 

In order to avoid users making an additional step to crop the image size. We provided a online imagecopper - Flex Image Cropping Component1 .It can maintain cropper ratio and resize and move the crop area. 

The preview of icon is similar to Image memo. Mainly, FileReference is used to select/browse/preivew/upload the file in the memoImage2-3. FileReference can offer One-stop service. The data type of FileReference is ByteArray. However, the imagecopper just accepts BitmapData or url string which indicated to an external file as the image source. I found that this component used “Loader” to load images and I modified the library of imagecopper to load the bytes data of FileReference. Besides, the cropped images is not the original data of FileReference. The data of FileReference is just for read. The cropped image can not be uploaded by the FileReference. Base on the upload principle of FileReference, it will upload the image data to a URLRequest (php). URLRequest4 can use three types of data source which are

1. ByteArray Object
   
2. URLVariables
   
3. String 

The steps of upload images:5,6

• Get the bitmap data from the preview image by BitmapData variable
• bitmapdata -> Byte Array by JPEGEncoder
  • mx.graphics.codec.JPEGEncoder7
  • Adobe corelib PNGEncoder/JPGEncoder class6
• Byte Array -> Base64 string by Base64Encoder 
  • Base64 encoder/decoder class8,9
  • mx.utils.Base64Encoder
• Pass the string to the PHP file8 and then save on the server by URLVariables & URLRequest

Basically, the above encoders are more or less the same respectively. In order to facilitate the combination with other part of our project, i chose the encoders which are already provided by Flex Builder.

1 Flex Image Cropping Component

2 Uploading Files from Flex using PHP

3 Uploading files in Flex using the FileReference class

4 Adobe Flex 3 language Reference – URLRequest #data

5 Sending Images From Flex to a Server

6 Drawing game for future world @ Goonhilly

7 ImageSnapshot class in Flex 3 SDK

8 Webcam snapshots with Flex3

9 Base64 encoder/decoder class

Create music log panel design

I found that a few music player components. Mainly, they can divide into AS, AS+XML, music file management. Base on our project, user will upload the audio file (mp3) and play it. One memo plays one audio. And the music player has some controls. I think mini music player1 is too mini and too simple. It just has play/stop and volume control. Besides AS+XML2 and music manager3 are not suitable for LogField. The player will direct get the url from the database. Creating a new XML file is meaningless and static after retrieving the information from database. Just for music player, music management has a lot function (such as show all the music and arrangement) but i think it is too complicated and unnecessary. On the other hand, tarasnovak.com ‘s music player is very suitable for our project. It provides two music components which are Simple Flex Music Player1 and Flex Music Player2 . Mainly, these players can divide into audio playback control and Visualization. However, these two players used two different playback programs. Simple Flex Music Player used nl.fxc.controls.MP3Player.as class from labs.flexcoders.nl . Flex Music Player used Playr class.

Simple Flex Music Player

• Play/Pause/Stop
• Looping
• Volume control and Mute
• Getting the information of audio to be the song and album names automatically
• Show the timeline (just show, cannot modify)
• After Mute the audio, drag & drog the volume control, it will still show mute, but it is not mute anymore.

Flex Music Player

• Basic functions of Simple Flex Music Player
• Drag & drop the time line
• playlist (previous/next songs)
• Required user input the song and album names
• Change the style skin
• Resize the player
• One more visualization

Finally, I chose s “Simple Flex Music Player”. Class is simple and easlier to modify than Flex Music Player. Now, it can control the play time and amended the bugs of volume control.

Reference:

1. Simple Flex Music Player

2. Flex Music Player

3. Flex MusicPlayer v.2 with MusicVisualizer

Some Researches:

1. Create a Mini Music Player in AS3

2. Flash-XML Music Player in AS2

3. Social Media Player

Create video log panel design

As I mentioned before1, I used a  Flex embedded youtube player2 component. It is workable in local PC. But it uploaded to web server, it doesn’t work. Therefore, i found another flex components for youtube player1-5. These youtube players can play youtube in web server. However, these players are not suitable for our LogFeild. For our project, there are more than one youtube player memos in the same canvas. Even i post two different videos, just only one video can play. These five players have a common attribute which used swfLoader to play youtube. When main application page loaded, players start to load. I tried to unload the swfLoader first, and then play a new video. It still didn’t work.  I found that the original verion player is different from the 5 players. It used the VideoDisplay. Moreover, I found that “Flex embedded youtube player” has one more lastest version3. It is necesary to a proxy or php script to cross domain. It used the curl session to get the information of youtube. 

The previous youtube version will automatically load the video when the memo added in the application. And then it will show the preview(the 1st frame) of video. If there was a few video memos. It may waste the time and resources to load all the videos. It may retard the running time. For reduce the workload for video memo,  I used the Loader and URLRequest to get the thumb image url and relatived information (eg. title,  total time). After clicking the play button, player starts to load. 

Reference:

1 Youtube memo

2 Flex embedded youtube player

3 Flex embedded youtube player  1.1

4 Flex:Accessing Data

5 Using a PHP Proxy with Flex to talk Cross Domain

6 PHP cURL XAMPP

Research:

1  TubeLoc  

2  Flex Youtube Grabber

3  Google as3youtubelib

4  Flash Youtube AS3

5  Embeded Youtube player with LocalConnetion

As I mentioned before1, I used superpanel to be basic panel of our memo. Basically, the new panel kept all the functions of SuperPanel2.

• click title bar to drag & drop
• Maximize the window size
• click the title & content to focus panel, bring to the front
• reize the panel

Additional function:

• Due to titlebar doesn’t have enough space to add more control buttons. Control buttons are moved from the titlebar to the bottom of Memo Panel. 
• not only, the title bar can drag & drop, but also the content(eg. image, canvas) and control bar can.
• Control bar can be set to hide when the mouse out, show when the mouse over.

Referecne:

1 text memo X superpanel

2 http://www.wietseveenstra.nl/blog/2007/04/flex-superpanel-v15/

Left-hand side is the log preview and the background attribute at the bottom.

Right-hand side is the content, tags and privacy status.

Preview Function

I used a flex component called “ObjectHandles”.1 It allows the resize and movie in both  in both vertical and horizontal directions. When resizing or moving ObjectHandles out of the preview area. The object may be disappeared or out of control. In order to prevent object loss, the object position is limitied. It must remain the corner of log within the preview area.

Because of one of style – speak bubbles, The preview text and preview background are individual. Text can move and reize within the background. When background is resizing , the size and position of text will be limited by the size of background. When backgound is moving, the positon of text will synchronize with background. 

There is a reset button at the right bottom corner. It can reset the size and position of text and background. And then, “RichTextEditor” replaced the “TextArea”.  RichTextEditor has more flexible text editing.

Reference:

1 http://www.rogue-development.com/objectHandles.html

• timeline (helen)
• drawing(shadow)
• keyword, tags, search, catagory (helen)
• interface (shadow)
• personal info. edit (yan)
• private/public(shadow)

April testing

Other suggestion from advisors

• timeline(where and how to set the mechanisms)
• new update indication (The lasted one on top, lasted 10!)
• how to jump to another platform of your friends (In fd network: click on it direct)
• multiple platform for 1 user (give them a switch)
• public view/private view (switch)
• visit by friend (fd can rea via/drag along to set but not save)
• work co-operation (make different comment but group them together

(directly export from flex…you can choose import zip to import the whole project)

http://sweb.cityu.edu.hk/manfkwong2/FYP[11_2_2009_version10]_not%20export.zip

(copy all document from the whole project)

Now I am using the Remote Shared Object by using flash media server to remember the memo that user create.It can real time update the information and support multi-user.

So later, it is esay for us to add function to connect to database by using amfphp like password, registration etc.

The alert is the id number of user which is different between each user.In database , there are about 10 users.

I also combine the code “community”  with the ” memo board “, and everythning is normal now.

The overview map shows the current view of the memo container and then clicking the overview map can control the current view to corresponding position.