Rsstudio: from design to development then back again..

Official Joseph Eddun - Daily Flash Site

noreply@blogger.com (RSStudio) — Mon, 21 Feb 2011 06:35:00 +0000

I just finished another flash portfolio site from a fellow artist Joseph Eddun.

http://josepheddun.com/

BandMaster Flash Site

noreply@blogger.com (RSStudio) — Thu, 24 Jun 2010 06:48:00 +0000

Another mmorpg game caze to hit Philippines is the game bandMaster. As a preparation for it's beta release, I was commissioned to develop the flash site. The panning motion was based on the actual games menu.

Drummer Simulator! Playing

noreply@blogger.com (RSStudio) — Tue, 12 Jan 2010 10:09:00 +0000

Playing drums has been one of my frustration. I think my motor skills when it comes to arms and leg synchronizing wasn't properly developed. So, with all the guitar hero and rockstar games in the market, why don't I make a virtual drum set. So here's the drummer simulator made entirely in Flash 8 and Actionscript 2. Enjoy the beat!

4 Vector Planet Package

noreply@blogger.com (RSStudio) — Thu, 07 Jan 2010 08:14:00 +0000

HOT PLANET

EARTH-LIKE PLANET

MOON-LIKE PLANET

RINGED-PLANET

In between AS3 programming, I usually spend hours tweaking vectors to make animations and graphics. This animation of pseudo 3D planet rotating is actually one of those techniques, I've been using ever since Flash 5. The idea is to create a rotating sphere from 2D tweening. No 3D plugin was used, I simply played around with the gradients and alpha of the vector graphics. The highlights and shadows were made using basic sphere shading. You may check this site for details in making a realistic sphere.

I'll update this post later, on how to get the raw files. Enjoy!

Flex Multimedia Player: Flex Development

noreply@blogger.com (RSStudio) — Tue, 05 Jan 2010 04:04:00 +0000

It's 2010 already, and boy does time fly by so quickly. I'm off to a new job and just recently started with Flex Development. So this would be a big transition from jquery studies to Flex studies. But who knows, I might step back to website development since RIA is web-based after all. Enough with the introduction, I'll be presenting here a basic overview of a product I've been developing in Flex lately: A Flex Multimedia Player. This application is catered to the following usage:

Showcase of video and static portfolio
Modular E-learning tool
Online presentation for tutorials
Other great stuffs :)

Basically, the application is actually a practice for me to incorporate flex css, mxml and as3. Experience thought me that a planned project is the best training there is.

The application is designed using a container canvas; with controls driven by buttons, scrollbars and tree; and the content loaded in a swfLoader component. these visuals are implemented through mxml and css.

The functional behavior is handled by Actionscript 3, which I've been studying in between jquery and mxml studies. I'll post more regarding the AS3 on succeeding studies since I still need provide clear comments on the codes. But for now, you may visit the application here. Until next blogging then. Enjoy!

New site design

noreply@blogger.com (RSStudio) — Tue, 30 Jun 2009 05:16:00 +0000

I finally finished my website v2. Took me the entire early morning to finish it. Hope you like it.

http://www.rsandagon.com

jQuery Tools: A user-interface component for the web

noreply@blogger.com (RSStudio) — Thu, 04 Jun 2009 09:35:00 +0000

From the developer who brought us flowPlayer comes a simplified yet strong UI library. The library includes six major website needs for presenting information: tabs, tooltips, accordions, overlays, smooth navigation, and visual effects -- basically all the 'nice eye candy' you see in web 2.0 applications.

I haven't tried using it yet, but I bookmarked it for future use in my projects.

Do you think it'll make a hype for web designers and web developers alike? Share your thoughts!

jQuery Masking Effect

noreply@blogger.com (RSStudio) — Tue, 02 Jun 2009 08:55:00 +0000

Having been a Flash developer and an avid masking effect user, I decided to play with jQuery and create a similar masking effect. You may check the final form here:

1. XHTML
Let's start with the xtml. We basically place 2 images overlapping each other. The images are:
Masked Image:

Masked State:
Then the masked image is placed inside a div which will act as the mask.



  





 1st shape

 2nd shape

 3rd shape

2. CSS



#container{
 width:650px;
 height:300px; 
}

#imageHandler{
 width:400px;
 height:100px; 
 left:10px;
 top:10px;
 position:relative; 
}

#menu{
 width:350px;
 height:100px; 
 left:10px;
 top:10px;
 position:relative; 
}

#menu a{
 text-decoration:none;
 color:black; 
}

#menu a:hover{
 color:gray; 
}

#image-wrapper{
 left:200px;
 width:200px;
 height:100px;
 overflow:hidden;
 position:relative;
 z-index:100;
 border-style:solid;
 
}

#imageHandler{
 background:transparent url(image.jpg) no-repeat scroll left top;
 width:600px;
 height:100px;
 border:0px; 
 position:relative;
 left:-200px;
}

.menuList{
 padding:.5em;
 display:block;
 top:200px;
 position:absolute;
}

.menuList li{
 padding:.5em;
 display:inline;
}


#maskHandler{
 background:transparent url(outline.jpg) no-repeat scroll left top;
 width:600px;
 height:100px;
 border:0px; 
 z-index:99; 
 position:relative;
 top:-93px;
}

3. Javascript
Now we animate the mask while animating the inside position of the masked image as well. This creates the illusion of masking:


$(document).ready(function(){

 $(".menuList li").each(
 
 function(intIndex){
 
// Bind the onclick event to simply alert the
// iteration index value.
$(this).bind (
  "click",
  function(){
     //alert( "Hottie index: " + intIndex );
    var widPos =  intIndex*200;
    var imgPos = -widPos;
    $("#image-wrapper").animate({"left": widPos}, "fast");
    $("#imageHandler").animate({"left": imgPos}, "fast");     

  }
); 
  
 });
 });

Conclusion
The masking effect is not a masking tool similar to that of Flash technology; however this masking effect can pretty be effective in mimicking the behavior. We can use this in menu, image presentation or fun section which acts like a game tool in your site. Hope you enjoy

What do you think about this effect?

TEAM WACOM Posted my Digital Artworks at their Gallery

noreply@blogger.com (RSStudio) — Mon, 25 May 2009 14:33:00 +0000

TEAM WACOM PHILIPPINES POSTED MY 2009 ARTWORKS HERE :

Some of these artworks will also be included in the The Future of Infinite Creativity begins here... the Intuos4 launch! May 29, 8-5pm! See the venue below:

Hope you can join the event!

Flickr API Implementation in Papervision - AS3

noreply@blogger.com (RSStudio) — Sun, 24 May 2009 16:44:00 +0000

Papervision is one of my Flash visions since I first saw the 3D X-Wing took flight in Flash years ago. My research and study have always been interrupted with the necessity to work and do other important things; However I was able to sneak this small project in my quite busy schedule. This project was actually like hitting two birds with one stone: Flickr API and Papervision.

Please click here or the image to view the project:

I still haven't compiled the raw files. I promise to update this blog once I've finished some urgent matters right now. You may email me or contact me in this blog for details though. Thanks!

Free Vector and Raster Teddy Bears

noreply@blogger.com (RSStudio) — Fri, 22 May 2009 13:17:00 +0000

Yup, you read it right. I'm giving away free bears from a project that didn't push through. So without further ado, the free bears:

YOUNG BEAR
FATHER BEAR

Simply click the images for the direct link.

You may use them in your personal artworks or freelance projects. Just don't forget to link me back -- and a simple thanks may do. Enjoy!

Jquery and Actionscript 3.0 Communication

noreply@blogger.com (RSStudio) — Mon, 18 May 2009 02:12:00 +0000

There's been always a debate regarding the functionality of jQuery against Flash application. But I believe that both of them are tools which can be effectively utilized together to create a better web application. This tutorial attempts to illustrate an implementation of both jQuery and AS3 to create a plotting system with dynamic input. The final form of application looks like this:

AS3 PART
Let's start with the AS3 application first. The flash file consists of movieClip object named barObject. This is a simple rectangular object to be used in the bar chart. Let's take a look at the code then have a detailed discussion afterwards:



import bar;
import flash.external.ExternalInterface;


/***************STAGE MODE*******************/
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.ACTIVATE, activateHandler);
stage.addEventListener(Event.RESIZE, resizeHandler);


function activateHandler(event:Event):void {
trace("activateHandler: " + event);
}

function resizeHandler(event:Event):void {
trace("stageWidth: " + stage.stageWidth + " stageHeight: " + stage.stageHeight);
}

/**************VARIABLE*****************/
var numBar = 1;

/**************EXTERNAL INTERFACE************/
flash.external.ExternalInterface.addCallback("sendBarToFlash", addBar);
flash.external.ExternalInterface.addCallback("sendDataToFlash", getDataFromJavaScript);
flash.external.ExternalInterface.addCallback("removeBarToFlash", removeBar);

function getDataFromJavaScript(num,val):void{
this["bar"+num].setScaleY(Number(val)/100);
}


function init(numBar:int){
 
 for(var i=1;i < numBar; i++){
  var barX:Number = 54.5 + 25*(i-1);
  var barY:Number = 174;
  var alp:Number = i%2?1:0.3 ;
  try{
   this["bar"+i].BarDestroy();
  }catch(e){
   trace(e);
  }
  this["bar"+i] = new bar(barX,barY,alp);
  
  addChild(this["bar"+i]);
  this["bar"+i].setScaleY(Math.random());
 }
}

function addBar(ind){
 numBar = ind;
 var barX:Number = 54.5 + 25*(ind-1);
 var barY:Number = 174;
 var alp:Number = ind%2?1:0.3 ;
 try{
  this["bar"+ind].BarDestroy();
 }catch(e){
  trace(e);
 }
 this["bar"+ind] = new bar(barX,barY,alp);
 
 addChild(this["bar"+ind]);
 this["bar"+ind].setScaleY(0); 
}

function removeBar(){
 this["bar"+numBar].BarDestroy();
 numBar--;
}

addBar(1);

The topmost part of the code are inclusion of AS3 Classes. You may want to read Adobe Flash documentation to know more of this. But for now, let's concern ourselves with the EXTERNAL INTERFACE part. This part deals with the communication between AS3 and the browser, specifically the javascript. In this tutorial, we have three js functions handling the communication: SendBarToFlash, SendDataToFlash and RemoveBarToFlash. To every js function, we need an AS3 callback which would "talk" to the js. We have addBar,getDataFromJavaScript and removeBar, respectively. After setting out the callback functions, we created supporting functions init, addBar and removeBar. These functions modify the bar objects as called by the js.

jQuery PART
The jQuery handles the modification of the data in the bar chart. The plot.js is written as follows:


/*****************************************
PRoject: JqueryUI and AS3 External Interface
Author: Ryan Sandagon
Date: 30-Apr-2009
Object: To demonstrate slider interaction with flash-based plotting application
****************************************/



/*************VARIABLE**************/
//Initialize the number of plot
var DataCnt = 1;

/*************FUNCTION**************/
//Checking the Flash Object thru the flash container
function getFlashMovieObject(movieName){
 if (window.document[movieName]){
  return window.document[movieName];
 }

 if (navigator.appName.indexOf("Microsoft Internet")==-1){
   if (document.embeds && document.embeds[movieName])
   return document.embeds[movieName];
 }
 else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
 {
   return document.getElementById(movieName);
 }
}

//Slider functionality
function setSliderValue(num){
 var sliderID = "#slider"+num;
 var slval = $(sliderID).slider('value');
 $(sliderID).next().text(slval);
}



//*************Jquery part
$(document).ready(function(){


//Provides data to the flash movie for the
//value of the plot element
function SendDataToFlashMovie(ind,val)
{   
 var flashMovie=getFlashMovieObject("swfContainer");
 flashMovie.sendDataToFlash(ind,val);
}

//Adds plot element
function sendBarToFlashMovie(){
 var flashMovie = getFlashMovieObject("swfContainer");
 flashMovie.sendBarToFlash(DataCnt);
}

//Remove plot element
function removeBarFromFlashMovie(){
 var flashMovie = getFlashMovieObject("swfContainer");
 flashMovie.removeBarToFlash();
}

//1st slider initialize
$("#slider1").data("ind", 1);
$("#slider1").slider({
  value: 0,
    change: function(event, ui) {
     $("#slider1").next().text(ui.value);
     SendDataToFlashMovie($(this).data("ind"),ui.value);
    }
  });

//********menu Initialize
// Addition of content
$("#plusSign").click(function () {
 DataCnt++;
 var str = "DATA "+DataCnt+" 
0";
$("#tableu").append(str);

var sliderName = "#slider"+ DataCnt;
$(sliderName).data("ind", DataCnt);
$(sliderName).slider({
    change: function(event, ui) {
     $(this).next().text(ui.value);
     SendDataToFlashMovie($(this).data("ind"),ui.value);
    }
  });
 
  //call function for Flash
sendBarToFlashMovie();

});

 //Removal of content
 $("#minusSign").click(function (){
 
  if(DataCnt > 1){
   $("#tableu .nameTxt").slice(-1).remove();
   $("#tableu .valueTxt").slice(-1).remove();
   var sliderName = "#slider"+ DataCnt;
      $(sliderName).remove();
  
   //call function for Flash
   removeBarFromFlashMovie();
  
   DataCnt--;
  }
 });

});

Assuming that we are fairly knowledgeable to js, we will focus on the jQuery part. Take note of the functions called in the AS3. These provide the callback functions which throw data into the Flash object. This tutorial made use of FlashObject which makes Flash embedding a breeze (I tell you, it does!). Our jQuery also made use of jQuery slider from JqueryUI. The slider triggers the callBack function SendDataToFlashMovie whenever a slider event "change" is called. This throws data from js to AS3 and thereby changing the bar chart.

Several online applications can adopt the same technology to communicate AS3 part to jQuery. I know this isn't rocket science or a major discovery, but it does make the jQuery and AS3 work together. More like a peace on earth to me. :)

JQuery Photo Slot Machine Transition Effects

noreply@blogger.com (RSStudio) — Fri, 15 May 2009 19:14:00 +0000

I find the motion of the images in an slot machine fascinating -- and what's more delightful is to form the right images from the combination followed by the ringing of bell, falling of confetti and a large check of money. Too bad, you won't get that scenario here. Though I can guarantee to give you an effective way of presenting your images mimicking the slot machine transition effects using jQuery.

For the final form of this tutorial, you may want to visit this link to view the transition.

Let's start of by having a single image divided into 8 cells. Every element in the column 1 has a corresponding element in column 2, which would form a complete image. In our example the first element in column 1 should be joined with the 3rd element in column 2. In a way, we are forming a puzzle using jQuery.
In our xhtml, we write the following part to handle the image:
```
 
 

 

 
  Description:

 
```
The div box 1 would provide the elements of column 1 while box 2 would display that of column 2.
A menu which would act as control of the display is written as follows:
```
image 1
image 2
image 3
image 4
```

The css in styling the page is written as:



#menu{
width:350px;
height:100px;
left:10px;
top:10px;
position:relative;
}

#menu a{
text-decoration:none;
color:black;
}

#menu a:hover{
color:gray;
}

#box1,#box2{
background:transparent url(box.jpg) no-repeat scroll left top;
width:200px;
height:100px;
border:0px;
}

#box1{
background-position:0px 0px;
top:0px;
left:0px;
position:absolute;
}

#box2{
background-position:-200px 0px;
top:0px;
left:199px;
position:absolute;
}

#box3{
background:black;
top:0px;
left:400px;
width:150px;
height:100px;
position:absolute;
}

#box3 p{
color:white;
}

The jQuery then provides the transition of the background in box 1 and box 2. This will animate the images similar to the slot machine images. The menu functionality and the transition is written like this:


$('#a1')
 .css( {backgroundPosition: "0 0px"} )
.mouseover(function(){
 $('#box1').stop().animate(
  {backgroundPosition:"(0px 0px)"},
  {duration:500})
 $('#box2').stop().animate(
  {backgroundPosition:"(-200px -200px)"},
  {duration:500})
 $("strong.addedtext").remove();
 $('#box3 p').append("
Dave and Dhing")
})

Finally, we iterate the jquery code for all buttons to display the correct combination of images. Probable use of this concept would involve menu effects, gallery for small sets of images, banner effects and even headers with transitioning images.

For the final output you may visit the following link:

Hope you find this useful!