Flash Actionscript3 Parallax effect
Parallax effect is widely used in games but its also used in websites to give that awesome feel to it... its not just like you would just use it because its cool but you'll have to define the purpose behind using it ( it might be just useless ).
below is a demo of one way of doing it, i might do another one that wont require greensock or any tweening engine to get the same effect, & by the way im using TweenNano which is a very light version of TweenMax.
Edit:
Demo | Download
import com.greensock.TweenNano;
import com.greensock.easing.*;
//ease type
var easeType = Expo.easeOut;
//xmouse will hold x position of the mouse in relation to the center of the stage.
//assuming that the stage center's value is 0;
var xmouse:Number = 0;
// percentage of the xmouse position
var xPct:Number = 0;
// speed or durationl
var speed:Number = 2;
// add event listener based on mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, render);
function render(e:MouseEvent):void
{
//if xmouse pos is greater than the center of the stage
if( e.stageX > stage.stageWidth/2) {
xmouse= -(e.stageX -stage.stageWidth) - stage.stageWidth/2; //-512
}
else
{
xmouse = ((stage.stageWidth/2) - e.stageX); //512
}
xPct = Math.round ((xmouse/stage.stageWidth) * 200);
//where will the sky moveclip move to...
var skyXto:Number = ((xPct/100) * (sky_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;
TweenNano.to(sky_mc,speed, {x:skyXto, ease:easeType});
var fieldXto:Number = ((xPct/100) * (field_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;
TweenNano.to(field_mc,speed, {x:fieldXto, ease:easeType});
var grassXto:Number = ((xPct/100) * (grass_mc.width - stage.stageWidth)/2) + stage.stageWidth/2;
TweenNano.to(grass_mc,speed, {x:grassXto, ease:easeType});
}
Twitter & Flash AS3 fun experiment
Demo | Download
note: this wont work for protected accounts, it'll require authentication.
neat yeah? :-) buggy though, you may download the source code and improve it anyway you could!
in a nutshell, Im using PHP to receive data from flash & send it over to twitter via an API call and then send back the received XML to flash,
twitter.as
package {
import flash.display.*;
import flash.events.*;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.system.Security;
import flash.net.URLVariables;
import flash.net.*;
public class Twitter extends MovieClip {
private var cont:MovieClip;
public var speed:Number=-6;
private var menu:Array = new Array();
//Security.allowDomain("twitter.com");
public function Twitter():void {
//create a new container ( a movieclip )
cont = new MovieClip();
// set its x and y
cont.x=stage.stageWidth*0.5;
cont.y=(stage.stageHeight*0.5);
// add it to the stage
addChild(cont);
//attach an event listener
addEventListener(Event.ENTER_FRAME, render);
//attach an event listener to the "go" button
go.addEventListener(MouseEvent.CLICK,loadTweets)
}
private function loadTweets(E:Event):void{
loading_mc.alpha = 1;
//PHP path or full path
var url:String = "proxy.php";
//Grab the twitter handle
var tweetHandle:String = handle.text;
//declare variables
var myVars:URLVariables = new URLVariables();
//assign variables
myVars.user = tweetHandle;
//create a new request
var Request:URLRequest = new URLRequest();
//assign request url
Request.url = url;
//define the methiod ( GET or POST )
Request.method = URLRequestMethod.POST;
//attach the variables to the request
Request.data = myVars;
//create a kiader for the request
var tweetXmlLoader:URLLoader = new URLLoader();
//define the data format
tweetXmlLoader.dataFormat = URLLoaderDataFormat.TEXT;
// attach an event listener
tweetXmlLoader.addEventListener(Event.COMPLETE, generateTweets);
//time for action!
tweetXmlLoader.load(Request);
//remove unwanted library items and ditach unused events listeners
go.enabled = false;
go.removeEventListener(MouseEvent.CLICK, loadTweets);
removeChild(go);
removeChild(handle);
}
public function generateTweets(e:Event):void {
//remove "loading tweets" movieclip from stage
removeChild(loading_mc);
//define an XMLList and assign the new received data to it
var tweetXML:XMLList = new XMLList(e.target.data );
// loop em BABY!
for (var i:uint=0; i<10; i++) {
//grab a tweetbox from the library ( runtime loading ) see export for more info.
var t:MovieClip = new tweetBox();
//assign the status ( tweet ) to the text within the tweetBox
t.txtBox.text = tweetXML.status[i].text
//just to check
trace (tweetXML.status[i].text);
// assign a z prop ( focal length ) how close/far is each box
t.z=3000-(i*400);
// add it to the container we created earlier
cont.addChild(t);
//push the movieclip to use it on the Event.ENTER_FRAME function ( render )
menu.push(t);
}
}
function render(e:Event):void {
// loop through menu
for(var j:int=menu.length-1;j>=0;j--) {
//increase the z prop!
menu[j].z+=speed;
// if item in menu Z prop is greater less than 600 then take it back to 3400
if (menu[j].z<-600){
menu[j].z=3400;
}
}
}
}
}
Now for the PHP part ... you may also consider using the php function "readfile" instead if cURL, I just felt like testing it!
<?php
$url = $_POST['user'];
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL,'https:\/\/zainals.com//zainals.com\/\/zainals.com//zainals.com//api.twitter.com/1/statuses/user_timeline.xml?screen_name='.$url);
curl_setopt($curl_handle,CURLOPT_CONNECTTIMEOUT,2);
curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,1);
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
if (empty($buffer))
{
print "Sorry, Moe is a sicko!.<p>";
}
else
{
print $buffer;
}
?>
Google maps application with actionscript 3 for android ( AIR )
What are we building:
-
Download the source code here Download
What is required?
- Install google maps api for flash ( Emanuele Feronato tutorial )
- Flash IDE ( Ability to compile & export apk for android ) Im currently using flash CS5
- AS3 knowledge ( duh )
once you install google maps api for flash, navigate to the components and drag out a GoogleMapsLibrary component to the library.
Under the document class enter Main ( the external AS3 file ) which we'll be having the code in.
Save the Fla file and in the same directory create an AS file and save it as Main.as, Copy & Paste the following code in Main.as :
package {
//Flash imports
import flash.display.MovieClip;
import flash.sensors.Geolocation;
import flash.events.GeolocationEvent;
import flash.geom.Point;
import flash.events.Event;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.text.TextField;
import flash.text.TextFormat;
//Google maps imports
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.MapMouseEvent;
import com.google.maps.InfoWindowOptions;
public class Main extends MovieClip {
//declare map
public var map:Map;
//declare geilocation
private var myLoc:Geolocation;
//declare marker
private var marker:Marker;
private var myText:TextField;
public var format:TextFormat;
public function Main() {
// constructor code
super();
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
addEventListener(Event.ADDED_TO_STAGE, init);
}//main ends
private function init(e:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
map = new Map();
map.key = "ABQIAAAAYE0bGtlAc2aNHkbZAX8d5xTtk0dF-T8JMCdCfbxeilM7kTvGfhSLRtD2VK3FR9ecXk7jWpMWxZuZvw";
map.sensor = "false";
map.url = "http://zainalsc.juliet.cloudns.io";
map.setSize(new Point (stage.stageWidth, stage.stageHeight));
addChildAt( map, 0 ) ;
map.addEventListener(MapEvent.MAP_READY, onMapReady);
txtField();
}//init ends
private function onMapReady(e:MapEvent):void
{
map.addControl (new ZoomControl() );
map.addControl (new MapTypeControl() );
map.setCenter( new LatLng( 26.116602, 50.482178), 14, MapType.SATELLITE_MAP_TYPE);
if(Geolocation.isSupported) {
myLoc = new Geolocation();
myLoc.addEventListener(GeolocationEvent.UPDATE, onGeoUpdate);
myLoc.setRequestedUpdateInterval(100);
}
}//onMapReady Ends
private function onGeoUpdate(e:GeolocationEvent):void
{
map.setCenter( new LatLng( e.latitude, e.longitude), 18, MapType.SATELLITE_MAP_TYPE);
setMarker( new LatLng(e.latitude, e.longitude));
}//onGeoUpdate ends
private function txtField():void
{
format = new TextFormat();
format.size = 20;
format.align = "center"
format.font = "Verdana"
format.color = 0xffffff;
myText = new TextField();
myText.width = stage.stageWidth
myText.height = 40;
myText.background = true;
myText.backgroundColor = 0x000000;
myText.y= 0;
myText.text = "initializing GMAPS";
addChild(myText);
myText.setTextFormat(format);
}//txtField
private function setMarker(p:LatLng):void
{
if (marker){
marker.setLatLng(p);
}else {
marker = new Marker(p);
map.addOverlay(marker);
marker.addEventListener(MapMouseEvent.CLICK, showInfo);
}//if else ends
myText.htmlText = p.toString();
myText.setTextFormat(format);
}//setMarker Ends
private function showInfo(e:MapMouseEvent):void
{
var markerContent:String = marker.getLatLng().toString();
marker.openInfoWindow( new InfoWindowOptions({contentHTML: markerContent}));
}//showinfo ends
}//class ends
}//package ends
dont forget to set application permissions:?AIR for Android settings > Permissions & tick:
- Internet
- Access fine location