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});
}
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
I HATE Actionscript 3.0
how often do you hear this ?
lets rollback a little bit, Actionscript is a part of Adobe Flash programming or scripting language, its also used in Adobe AIR/Flex environment.
Personally, i code and publish websites using actionscript 2.0, i find it easier to code & easier to come up with a solution after breaking down problems ( problem solving ) at least thats how i code.
i break down a project into smaller problems and solve each ones individually, however this is not the case here .
When Actionscript 3 was introduced, i though, HEY its Actionscript 2.0 with more features, guess i was right about the features not even close about actionscript 2.
Migration, i thought this wont take much time to catch up with, catching up was OK but applying what i knew in Actionscript 2 in Actionscript 3 is totally a different thing.
AS3 is more likely to be strict, when i first tried writing button functions it took me more time to write a single function than what it takes to write a function in AS2, its about time me thinks, what i don't like in AS3 is the OOP ( this again is a personal opinion ) as designers, we tend to like AS2 because its not so complicated, by looking at tutorials, advanced users tend to use their own classes to build up their projects, which is a good thing, making your code reusable, designers & beginners cant go that deep ( i wounder what adobe were thinking of ), yes designers are frightened to use AS3.
Then stick your ass with AS2 you may think, i would, im still publishing websites @ 2.0, but AS3 and flash player 10 has more features like native XML, Timer, the use of 3D engines like papervision, the new bone & 3D tools in Cs4 besides the tweening & built in motion editor ... i can go on forever, all the cool stuff are being written in AS3, i feel like im forced to learn AS3 because AS2 might become obsolete, just like what happened to our granpa AS1.
i learnt flash on my own when Lee Brimelow published his video tutorial site about 3? years ago(me thinks), i also bought few good books from friendsofed & lynda.com, the main reason though for any success is practice & practice makes perfect, purchased my own domain name zainals.com and published my first flash site , started experimenting on my own kid ( V1, V2, V3, etc ... ).
What am going to do is try and develop a flash AS3 flash website of my own, applying all what i know in AS2 in AS3, this would probably make AS3 look brighter in my perspective..
OOP comes in later on once i completely understand how AS3 works, i just wish that Adobe makes it easier for us designers...