Showing posts with label ActionScript. Show all posts
Showing posts with label ActionScript. Show all posts

Friday, February 18, 2011

ActionScript Virtual Keyboard Calculator

Flex Builder 4 Flash Video Mouse Events

 

 

Part One

This is my first attempt at creating a virtual keyboard calculator. I got the script for the calculations from TUTVID, and added the number pads myself. As you can see below you have to add a different function to every button and direct the button to output to a specific text box.

I placed all the numbers inside movie clips (keyPad and keyPad2). Each keypad is assigned a textfield for output. In the next version I will attempt to use both keypads and textfields with only one visible at a time. Hope this get some of you started on creating your own virtual keyboards.

 

import flash.text.TextField;
import flash.events.TextEvent;
import flash.events.MouseEvent;

stage.focus = numBox;
addBtn.addEventListener(MouseEvent.CLICK, plusClick);
subBtn.addEventListener(MouseEvent.CLICK, subClick);
mulBtn.addEventListener(MouseEvent.CLICK, multClick);
divBtn.addEventListener(MouseEvent.CLICK, divClick);
equalBtn.addEventListener(MouseEvent.CLICK, equClick);
clearBtn.addEventListener(MouseEvent.CLICK, clearAll);

var plusSym:Boolean = false;
var subSym:Boolean = false;
var multSym:Boolean = false;
var divSym:Boolean = false;
numBox.restrict = "0-9";
numBox2.restrict = "0-9";

//KEYPAD 1
keyPad.num1.addEventListener(MouseEvent.CLICK, postNum1);
function postNum1(Event:MouseEvent):void{
numBox.text += "1";
}
keyPad.num2.addEventListener(MouseEvent.CLICK, postNum2);
function postNum2(Event:MouseEvent):void{
numBox.text += "2";
}
keyPad.num3.addEventListener(MouseEvent.CLICK, postNum3);
function postNum3(Event:MouseEvent):void{
numBox.text += "3";
}
keyPad.num4.addEventListener(MouseEvent.CLICK, postNum4);
function postNum4(Event:MouseEvent):void{
numBox.text += "4";
}
keyPad.num5.addEventListener(MouseEvent.CLICK, postNum5);
function postNum5(Event:MouseEvent):void{
numBox.text += "5";
}
keyPad.num6.addEventListener(MouseEvent.CLICK, postNum6);
function postNum6(Event:MouseEvent):void{
numBox.text += "6";
}
keyPad.num7.addEventListener(MouseEvent.CLICK, postNum7);
function postNum7(Event:MouseEvent):void{
numBox.text += "7";
}
keyPad.num8.addEventListener(MouseEvent.CLICK, postNum8);
function postNum8(Event:MouseEvent):void{
numBox.text += "8";
}
keyPad.num9.addEventListener(MouseEvent.CLICK, postNum9);
function postNum9(Event:MouseEvent):void{
numBox.text += "9";
}
keyPad.num0.addEventListener(MouseEvent.CLICK, postNum0);
function postNum0(Event:MouseEvent):void{
numBox.text += "0";
}
//KEYPAD 2
keyPad2.num1.addEventListener(MouseEvent.CLICK, postNum21);
function postNum21(Event:MouseEvent):void{
numBox2.text += "1";
}
keyPad2.num2.addEventListener(MouseEvent.CLICK, postNum22);
function postNum22(Event:MouseEvent):void{
numBox2.text += "2";
}
keyPad2.num3.addEventListener(MouseEvent.CLICK, postNum23);
function postNum23(Event:MouseEvent):void{
numBox2.text += "3";
}
keyPad2.num4.addEventListener(MouseEvent.CLICK, postNum24);
function postNum24(Event:MouseEvent):void{
numBox2.text += "4";
}
keyPad2.num5.addEventListener(MouseEvent.CLICK, postNum25);
function postNum25(Event:MouseEvent):void{
numBox2.text += "5";
}
keyPad2.num6.addEventListener(MouseEvent.CLICK, postNum26);
function postNum26(Event:MouseEvent):void{
numBox2.text += "6";
}
keyPad2.num7.addEventListener(MouseEvent.CLICK, postNum27);
function postNum27(Event:MouseEvent):void{
numBox2.text += "7";
}
keyPad2.num8.addEventListener(MouseEvent.CLICK, postNum28);
function postNum28(Event:MouseEvent):void{
numBox2.text += "8";
}
keyPad2.num9.addEventListener(MouseEvent.CLICK, postNum29);
function postNum29(Event:MouseEvent):void{
numBox2.text += "9";
}
keyPad2.num0.addEventListener(MouseEvent.CLICK, postNum20);
function postNum20(Event:MouseEvent):void{
numBox2.text += "0";
}

//CALCULATIONS

function plusClick(event:MouseEvent):void
{
plusSym = true;
subSym = false;
multSym = false;
divSym = false;
symTxt.text = "+";
stage.focus = numBox2;
}
function subClick(event:MouseEvent):void
{
plusSym = false;
subSym = true;
multSym = false;
divSym = false;
symTxt.text = "-";
stage.focus = numBox2;
}
function multClick(event:MouseEvent):void
{
plusSym = false;
subSym = false;
multSym = true;
divSym = false;
symTxt.text = "x";
stage.focus = numBox2;
}
function divClick(event:MouseEvent):void
{
plusSym = false;
subSym = false;
multSym = false;
divSym = true;
symTxt.text = "/";
stage.focus = numBox2;
}

var input1:String;
var input2:String;
var plusRes:Number;
var subRes:Number;
var divRes:Number;
var multRes:Number;

function equClick(event:MouseEvent):void
{
input1 = numBox.text;
input2 = numBox2.text;
if (plusSym == true)
{
plusRes = parseInt(input1) + parseInt(input2);
plusRes.toString();
resultsTxt.text = String(plusRes);
}
else if (subSym==true)
{
subRes = parseInt(input1) - parseInt(input2);
subRes.toString();
resultsTxt.text = String(subRes);
}
else if (multSym==true)
{
multRes = parseInt(input1) * parseInt(input2);
multRes.toString();
resultsTxt.text = String(multRes);
}
else if (divSym==true)
{
divRes = parseInt(input1) / parseInt(input2);
divRes.toString();
resultsTxt.text = String(divRes);
}
}
function clearAll(event:MouseEvent):void
{
numBox.text = "";
numBox2.text = "";
resultsTxt.text = "";
symTxt.text = "";
stage.focus = numBox;

}


Thursday, February 17, 2011

Launch SWF in Full Screen with ActionScript

Flex Builder 4 Flash Video Mouse Events

 

 

full screen swf

Add Full Screen with publishing settings

When changing the publishing settings to allow your SWF to launch in full screen you first have to change the publishing setting under the HTML tag.

Adding a click handlers

You can also add full screen capabilities to a SWF file without publishing an HTML page by adding code to the

The <object> tag: <param name="allowFullScreen" value="true" /> and
The <embed> tag: allowfullscreen="true"

You must also add ActionScript to allow full screen by using buttons or the stage.

Using buttons to launch Full Screen

fullBtn.addEventListener(MouseEvent.CLICK, goFull);
function goFull(event:MouseEvent):void{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
escapeBtn.addEventListener(MouseEvent.CLICK, goSmall);
function goSmall(event:MouseEvent):void{
stage.displayState = StageDisplayState.NORMAL;
}

Using the Stage to launch Full Screen

import flash.display.StageDisplayState;
function goFullScreen():void
{
if (stage.displayState == StageDisplayState.NORMAL)
{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
else
{
stage.displayState = StageDisplayState.NORMAL;
}
}
stage.addEventListener(MouseEvent.CLICK, _handleClick);
function _handleClick(event:MouseEvent):void
{
goFullScreen();
}

If the SWF file is already published, changing the HTML <embed> and <param> tags will not allow full screen.

Monday, December 27, 2010

Free Flex Components

Flex Builder 4

1. FlexLib

- Open Source Flex Component Library

The FlexLib project is a community effort to create open source user interface components for Adobe Flex 2, 3 and 4.

Current components: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

2. reusable-fx

The reusable-fx is a library of reusable flex components.

* ChartScroller adds scrolling and zooming functionality to CartesianChart
* DataGrid2CSV enables export of data displayed in DataGrid to CSV format
* MDataGrid is an extendible DataGrid with client-side filtering and searching
* SlideDown, SlideLeft, SlideRight and SlideUp defines slide effects

3. The ActionScript Data Provider Controls library (ASDPC)

Provides a set of standard user interface components written in ActionScript.

  • Easy and extensive customization (functionality, appearance)
  • Platform, framework and project neutrality (out of the box usage)
  • Generic data intergration (data provider interface architecture)
  • High-performance
  • Unit tested and well documented
  • Open-source licence MIT

ADOBE Resources

Monday, November 29, 2010

ActionScript 3 Objects, Properties and Methods

Actionscript 3

Objects

ActionScript objects provide a means of moving graphic elements dynamically, building applications, organizing data, and more. You accomplish these tasks by using or setting object property values and invoking object methods.

Global objects

In your Flash application there are some objects that are classified asglobal, or unique to the movie as a whole. The mouse, for example, is defined as a global object, like a Mouse object. The mouse is global because you can only have one mouse in your application and can not create an instance of it. Objects like movie clips, text fields, and sounds must be created with components and instances to be used.

Flash Global Objects:

  • Math
  • Accessibility
  • Key
  • Mouse
  • Selection
  • Stage
  • System

Object classes

A class of objects represents a group of object instances within your project that share the same basic structure and functionality. For example, all movie clip instances belong to the MovieClip class of objects

import flash.display.MovieClip;
var myMovie:MovieClip = new MovieClip();

Properties

Certain objects, such as MovieClips for example, have properties and attributes which can be configured via ActionScript. Properties are simple attributes of the object, such as its width, its height, its horizontal position and its vertical position. In order for a property to be configured you need to use the dot (.) operator to access the property and the assignment (=) operator to set a new value for it.

var myMovie:MovieClip = new MovieClip();
myMovie.x = 300;
myMovie.y = 100;

myMovie is the object, x is the property, 300 is the value

Methods

Objects also have methods, or functionality actions that the object can perform. If your object is a video object, you can tell this object to play the video. Any action that the object can perform is called a method.

import flash.media.Video;

var myVideo:Video = new Video();
myVideo.play();

Some methods require additional information to execute the action. The Loader Class is responsible for loading external graphical elements into your movie, in order for it to perform the .load() method you must specify the URL of the file to be loaded:

import flash.display.Loader;

var myLoader:Loader = new Loader();
myLoader.load(new URLRequest("MyPic.png"));

Saturday, November 20, 2010

Create A Basic Contact Form With PHP and ActionScript

Creating the Form

  1. A TextInput Component for the email address of the sender named email_txt.
  2. A TextInput Component for the email address of the sender named name_txt.
  3. A TextField Component for the email address of the sender named message_txt.
  4. A Button Component named submit_btn, and Labeled Submit Message.

 

flash email form

The PHP Code (mail.php)

<?php
$to = "myAddress@mySite.com";
$subject = ($_POST['senderName']);
$message = ($_POST['senderMsg']);
$message .= "\n\n---------------------------\n";
$message .= "E-mail Sent From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";
$headers = "From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";
if(@mail($to, $subject, $message, $headers))
{
echo "answer=ok";
}
else
{
echo "answer=error";
}
?>

 

The Button Event Handler

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.net.URLVariables;

submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
function sendMessage(e:MouseEvent):void
{
var my_vars:URLVariables = new URLVariables();
my_vars.senderName = name_txt.text;
my_vars.senderEmail = email_txt.text;
my_vars.senderMsg = message_txt.text;

var my_url:URLRequest = new URLRequest("mail.php");
my_url.method = URLRequestMethod.POST;
my_url.data = my_vars;

var my_loader:URLLoader = new URLLoader();
my_loader.dataFormat = URLLoaderDataFormat.VARIABLES;
my_loader.load(my_url);

name_txt.text = "";
email_txt.text = "";
message_txt.text = "You have created a contact form with ActionScript 3.0 & PHP";

}

 

Adding Form Validation

Hide the submit button until the user types the word validate

var valid:String = "validate";
submit_btn.visible = false;
validate_txt.addEventListener(TextEvent.TEXT_INPUT, textInputHandler);

function textInputHandler(event:TextEvent):void
{
if (validate_txt.text = valid)
{
submit_btn.visible = true;
}
}

The contact tab has better form controls, this just shows the basics.

Wednesday, November 17, 2010

Loading An External Video With The ComboBox Component

Flex Builder 4 Flash Video Actionscript 3

import flash.events.Event;

vidPicker.addEventListener(Event.CHANGE, nextVid);
function nextVid(event:Event):void
{
myVideo.source = vidPicker.selectedItem.data;
vidTxt.text = vidPicker.selectedItem.label;
var vidSmooth:Video = event.target.content;
vidSmooth.smoothing = true;
}

Monday, November 15, 2010

Saturday, November 13, 2010

Bezier Tween in ActionScript 3

Flex Builder 4 Flash Video Flash Video

TweenMax also introduces an innovative feature called "bezierThrough" that allows you to define points through which you want the bezier curve to travel. Use the code below and alter the bezierThrough values, adding more or less values.

import gs.TweenMax;
import fl.motion.easing.*
TweenMax.to(mc, 3, {x:344, y:351, bezierThrough:[{x:78.2, y:198.15}, {x:260.05, y:93.75}, {x:348.8, y:123.3}], ease:Bounce.easeOut});

Click on the ball to start the tween


  • x:344, y:351 (The tween x & y values)
  • x:78.2, y:198.15 (1st Bezier point)
  • x:260.05, y:93.75 (2nd Bezier point)
  • x:348.8, y:123.3 (3rd Bezier point)

Wednesday, November 3, 2010

Timing Animation With ActionScript 3

Flex Builder 4 Flash Video Flash Video

Tween 2 Movie Clips without using the Timeline

Start a tween, and while it is playing start another one using the Timer Class and TimerEvent. First you have to import the classes, then create the timer. the Timer() constructor takes two parameters. The first parameter controls how frequently the TimerEvent.TIMER event gets dispatched (in milliseconds). The second parameter is the number of times that the TimerEvent.TIMER event will be dispatched before stopping.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.utils.Timer;
import flash.events.TimerEvent;
var timer:Timer = new Timer(1500, 1);//Creating the timer
timer.addEventListener(TimerEvent.TIMER, nextTween);
timer.start();

var myTweenX:Tween = new Tween(movieClip, "alpha", None.easeOut, 0, 1, 3, true);

function nextTween(e:TimerEvent):void{
var myTweenAlpha:Tween = new Tween(movieClip, "x", Strong.easeOut, 0, 300, 3, true);
timer.removeEventListener(TimerEvent.TIMER, nextTween);
}

ActionScript 3.0 Language Reference

Tuesday, November 2, 2010

Customizing The Right Click Context Menu With ActionScript 3

Flex Builder 4 Actionscript Tutorials

Right Click The SWF

Context Menu With Hyperlink

The code will make a context menu when users right click on the SWF. Clicking on the site link will open the web page of whatever link you use in the mySiteLink. This is good for blog posts and allows users to see the author of the content.

import flash.net.URLRequest;
import flash.ui.ContextMenu;
var myMenu:ContextMenu = new ContextMenu();
var copyright:ContextMenuItem = new ContextMenuItem( "Copyright© yoursite.com" );
var credit:ContextMenuItem = new ContextMenuItem( "Your Name Here" );
copyright.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visitMySite );
credit.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visitMySite );
credit.separatorBefore = false;
myMenu.hideBuiltInItems();
myMenu.customItems.push(copyright, credit);
this.contextMenu = myMenu;
function visitMySite(e:Event)
{
var mySiteLink:URLRequest = new URLRequest( "http://www.yoursite.com" );
navigateToURL( mySiteLink, "_parent" );
}

 

Removing Specific Menu Items

var my_menu:ContextMenu = new ContextMenu();
my_menu.builtInItems.forwardAndBack = false;
my_menu.builtInItems.loop = false;
my_menu.builtInItems.play = false;
my_menu.builtInItems.print = false;
my_menu.builtInItems.quality = false;
my_menu.builtInItems.rewind = false;
my_menu.builtInItems.save = false;
my_menu.builtInItems.zoom = false;
contextMenu = my_menu;

Monday, November 1, 2010

Merapi Bridges AIR with and Java

AIR Flash Builder Flash Video
The Merapi Project

Merapi is a framework that bridges an AIR application with a Java application, both running on the desktop. This communication is accomplished through a class that exists in Java and ActionScript called merapi.Bridge. The simplest way to interact from AIR to Java is by sending and receiving messages though the bridge.

Get Merapi from Google Code

Wednesday, October 27, 2010

Bitmap Smoothing with ActionScript 3

Bitmaps Actionscript 3

Controls whether or not the bitmap is smoothed when scaled. The above images were scaled at 300%. When you load an image using a loader and would like to increase the size of the image, use the smoothing property. If true, the bitmap is smoothed when scaled. If false, the bitmap is not smoothed when scaled.

The Code

import flash.display.Loader;
import flash.display.Bitmap;

var myPicLoader:Loader = new Loader();
myPicLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
myPicLoader.load(new URLRequest("http://www.theflashstudio.net/images/flashstudioSmooth.jpg"));

var myPicLoader2:Loader = new Loader();
myPicLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete2);
myPicLoader2.load(new URLRequest("http://www.theflashstudio.net/images/flashstudioSmooth.jpg"));

function onComplete(event:Event):void {
var bitmapImage:Bitmap = event.target.content;
bitmapImage.smoothing = true; // APPLY SMOOTHING
myPicLoader.x = 52; // X Placement
myPicLoader.y = 25; // Y Placement
myPicLoader.height = 200;
myPicLoader.width = 168;
addChild(myPicLoader);
}

function onComplete2(event:Event):void {
var bitmapImage2:Bitmap = event.target.content;
bitmapImage2.smoothing = false; // APPLY SMOOTHING
myPicLoader2.x = 307; // X Placement
myPicLoader2.y = 25; // Y Placement
myPicLoader2.height = 200;
myPicLoader2.width = 168;
addChild(myPicLoader2);
}

 

Using Video Smoothing Blog Post

Tuesday, October 26, 2010

Using the Microphone with the Flash Player to View Activity Levels

Flash Player Actionscript 3 Images
  1. Choose a microphone
  2. Click the close button.
  3. Allow access to activate microphone

Use the Microphone class to capture audio from a microphone attached to a computer running Adobe AIR. Use the Microphone class to monitor the audio locally. Use the NetConnection and NetStream classes to transmit the audio to Flash Media Server. Flash Media Server can send the audio to other servers and broadcast it to other clients running Adobe AIR.

A system might not have a microphone or other sound input device attached to it. You can use the Microphone.names property or the Microphone.getMicrophone() method to check whether the user has a sound input device installed. If the user doesn't have a sound input device installed, the names array has a length of zero, and the getMicrophone() method returns a value of null.

Calling the Microphone.getMicrophone() method without a parameter returns the first sound input device discovered on the user's system.

The Sound Player

  1. Create a dynamic text field with instance the name of activity_txt
  2. Create a dynamic text field with instance the name of width_txt.
  3. Create a dynamic text field with instance the name of status_txt
  4. Draw a line with instance the name of line_mc.

The Code

import flash.media.Microphone;

var myMic:Microphone = Microphone.getMicrophone();
Security.showSettings(SecurityPanel.MICROPHONE);
myMic.setLoopBack(true);
myMic.setUseEchoSuppression(true);
myMic.addEventListener(StatusEvent.STATUS, this.onMicStatus);

function onMicStatus(event:StatusEvent):void
{
if (event.code == "Microphone.Unmuted")
{
status_txt.text = "Microphone access was allowed.";
}
else if (event.code == "Microphone.Muted")
{
status_txt.text = "Microphone access was denied.";
}
}

stage.addEventListener(Event.ENTER_FRAME, stage_EnterFrame);
function stage_EnterFrame(e:Event)
{
line_mc.width = myMic.activityLevel*5;
activity_txt.text = "Activity: " + String(myMic.activityLevel) + "%";
width_txt.text = "Line_mc Width: " + String(line_mc.width) + "px";
}

  1. Calling the Microphone.setUseEchoSuppression() method with a parameter value of true reduces, but does not completely eliminate, the risk that audio feedback will occur.
  2. The activity level is an integer (whole number) from 0 – 100 (no volume/full volume).
  3. Test the SWF and if you have a microphone you will see the levels on the bar and text fields change.

ActionScript 3.0 Language and Components Reference Using the Microphone class

Adobe AIR Launchpad 2.0 with Mobile Support

AIR Flash Builder Flash Video
Version 2.0 of Adobe AIR Launchpad Beta

Version 2.0 of Adobe AIR Launchpad Beta is now available and supports the creation of AIR Mobile projects as well as some other important updates (start a new project or switch back and forth between mobile or desktop AIR projects without restarting the app)!

Version 2.0 allows you to create mobile projects based on the AIR for Android APIs and the Flex Hero SDK's. You can now choose Desktop or Mobile for your application and have a zip file and directory folder containing all of your options with samples that can be imported into Flash Builder. The Desktop option targets the Flash Builder 4 IDE and the Mobile option targetes the Flash Builder Burrito IDE which is still in development.

  1. Download Adobe AIR Launchpad 2.0
  2. Install Adobe AIR Launchpad.
  3. Run Adobe AIR Launchpad and select the capabilities your application needs from the dialog boxes. Launchpad will generate the Flex or Burrito project.
  4. Import the resulting project and build your application.
  5. Ask questions or share your feedback in the Adobe AIR Launchpad forum

More from Adobe Labs

Monday, October 25, 2010

Create an ActionScript 3 Scrolling Video Menu

Flash Player Actionscript 3 Flash Video

The ScrollPane component is used to to display images, and SWF files, but to assign functions to nested clips inside The ScrollPane is a real pain. In this post we will design a scroll pane and use the contents as a menu for a FLVPlayback component. The original script comes from flashconf.com, which was just a scroller but we will add buttons inside to control a FLVPlayback component.

The Scroller and Mask

  1. Get the TweenLite engine and save it in the same folder to access the classes
  2. Draw a rectangle 200×250. This will act as a mask for the content.
  3. Convert the rectangle to a movie clip. Set the registration point to the top left corner.
  4. Give the movie clip an instance name of myMask.
  5. Draw a line of size 1×250 on the right side of the stage do not convert to movie clip.
  6. Draw a circle 20×20. Convert it to a movie clip. Set registration point to center.
  7. Give the circle an instance name of scrollMC.
  8. Put the circle on the top of the line like below.
scrollbar

Create the content movie clip

  1. Create a movie clip out of a rectangle the same width as the mask.
  2. The height can be any amount as only the mask size portion will be shown..
  3. Set the registration point to the top left corner.
  4. Give the content an instance name of myContent
  5. Add images to use as thumbnails for your video's and convert them to buttons
  6. All functions are on the parent timeline.
  7. Use movieClip.movieClip format to access the buttons inside the child MC.
  8. Ensure all instance names are completed for the buttons and movie clips
  9. Paste or type the below code.
  10. The tweens blur can be adjusted inside the tweenFinished function.

The Video Player

  1. Place an FLVPlayback component on stage with instance the name of myMovie.
  2. Choose a skin or use video controls.
  3. Give all controls instance names.
  4. Set the controls to the FLVPlayback component.
  5. Set the initial video, volume level and stop autoplay.

The Final Code

//Import TweenMax and the plugin for the blur filter
import com.greensock.TweenMax;
import com.greensock.plugins.BlurFilterPlugin;
import flash.display.*;

myMovie.playPauseButton = playPause;
myMovie.stopButton = stopBtn;
myMovie.seekBar = myBar;
myMovie.source = "http://www.yoursite.com/yourVideo1.flv";
myMovie.autoPlay = false;
myMovie.volumeBar = volBar;

myContent.one_btn.addEventListener(MouseEvent.CLICK, playVid);
myContent.two_btn.addEventListener(MouseEvent.CLICK, playVid2);
myContent.three_btn.addEventListener(MouseEvent.CLICK, playVid3);

function playVid(e:MouseEvent):void{
myMovie.source = "http://www.yoursite.com/yourVideo1.flv";
}

function playVid2(e:MouseEvent):void{
myMovie.source = "http://www.yoursite.com/yourVideo2.flv";
}

function playVid3(e:MouseEvent):void{
myMovie.source = "http://www.yoursite.com/yourVideo3.flv";
}

//Save the content's and mask's height.
//Assign your own content height here!!
var CONTENT_HEIGHT:Number = 940;
var MASK_HEIGHT:Number = 250;

//We want to know what was the previous y coordinate of the content (for the animation)
var oldY:Number = myContent.y;

//Position the content on the top left corner of the mask
myContent.x = myMask.x;
myContent.y = myMask.y;

//Set the mask to our content
myContent.mask = myMask;

//Create a rectangle that will act as the bounds to the scrollMC.
//This way the scrollMC can only be dragged along the line.
var bounds:Rectangle = new Rectangle(scrollMC.x,scrollMC.y,0,250);

//We want to know when the user is scrolling
var scrolling:Boolean = false;

//Listen when the user is holding the mouse down on the scrollMC
scrollMC.addEventListener(MouseEvent.MOUSE_DOWN, startScroll);

//Listen when the user releases the mouse button
stage.addEventListener(MouseEvent.MOUSE_UP, stopScroll);

//This function is called when the user is dragging the scrollMC
function startScroll(e:Event):void {

//Set scrolling to true
scrolling = true;

//Start dragging the scrollMC
scrollMC.startDrag(false,bounds);
}

//This function is called when the user stops dragging the scrollMC
function stopScroll(e:Event):void {

//Set scrolling to false
scrolling = false;

//Stop the drag
scrollMC.stopDrag();
}

//Add ENTER_FRAME to animate the scroll
addEventListener(Event.ENTER_FRAME, enterHandler);

//This function is called in each frame
function enterHandler(e:Event):void {

//Check if we are scrolling
if (scrolling == true) {

//Calculate the distance how far the scrollMC is from the top
var distance:Number = Math.round(scrollMC.y - bounds.y);

//Calculate the percentage of the distance from the line height.
//So when the scrollMC is on top, percentage is 0 and when its
//at the bottom the percentage is 1.
var percentage:Number = distance / MASK_HEIGHT;

//Save the old y coordinate
oldY = myContent.y;

//Calculate a new y target coordinate for the content.
//We subtract the mask's height from the contentHeight.
//Otherwise the content would move too far up when we scroll down.
//Remove the subraction to see for yourself!
var targetY:Number = -((CONTENT_HEIGHT - MASK_HEIGHT) * percentage) + myMask.y;

//We only want to animate the scroll if the old y is different from the new y.
//In our movie we animate the scroll if the difference is bigger than 5 pixels.
if (Math.abs(oldY - targetY) > 5) {

//Tween the content to the new location.
//Call the function tweenFinished() when the tween is complete.
TweenMax.to(myContent, 0.3, {y: targetY, blurFilter:{blurX:2, blurY:2}, onComplete: tweenFinished});
}
}
}

//This function is called when the tween is finished
function tweenFinished():void {

//Tween the content back to "normal" (= remove blur)
TweenMax.to(myContent, 0.3, {blurFilter:{blurX:0, blurY:0}});
}


ActionScript 3 Basic Mouse Events

Flex Builder 4 Flash Video Mouse Events

Click on the SWF or move the mouse to activate the text.

The code below shows how the text in a dynamic text field responds to the user moving and clicking with the mouse.

  • //Make a dynamic text field named mouse_events  
  • //The stage will listen for each event and display the related text.  
  •   
  • stage.addEventListener(MouseEvent.MOUSE_DOWN, mouse_down);   
  • stage.addEventListener(MouseEvent.MOUSE_UP, mouse_up);   
  • stage.addEventListener(MouseEvent.MOUSE_MOVE, moving);  
  • stage.addEventListener(MouseEvent.MOUSE_OUT, leave);  
  •   
  • function moving(event:MouseEvent)   
  • {   
  •     mouse_events.text = "Your mouse is moving";  
  • }   
  • function mouse_down(event:MouseEvent)   
  • {   
  •     mouse_events.text = "The mouse button is down";  
  • }   
  • function mouse_up(event:MouseEvent)   
  • {   
  •     mouse_events.text = "Mouse button is up again";  
  • }
  • function leave(event:MouseEvent)   
  • {   
  •     mouse_events.text = ""; //No text  
  • }

CLICK : MouseEvent.CLICK
Used to detect mouse clicks.

DOUBLE_CLICK : MouseEvent.DOUBLE_CLICK
Used to detect double clicks.

MOUSE_DOWN : MouseEvent.MOUSE_DOWN
Checks when mouse is pressed down.

MOUSE_LEAVE : MouseEvent.MOUSE_LEAVE
Monitors when the mouse leaves the stage.

MOUSE_MOVE : MouseEvent.MOUSE_MOVE
Monitors when the mouse moves.

MOUSE_OUT : MouseEvent.MOUSE_OUT
Monitors when the mouse moves out of the attached to object of the event.

MOUSE_OVER : MouseEvent.MOUSE_OVER
Monitors when the mouse moves over the attached to object of the event.

MOUSE_UP : MouseEvent.MOUSE_UP
Monitors when the mouse moves up the attached to object of the event from a click.

MOUSE_WHEEL : MouseEvent.MOUSE_WHEEL
Monitors when the mouse wheel moves, detect the positive or negative delta property for distance and direction moved.

ROLL_OUT : MouseEvent.ROLL_OUT
Dispatched when the user moves a pointing device away from an InteractiveObject instance.

Thursday, October 21, 2010

Make A Movie Clip Follow Mouse Clicks Using ActionScript 3

Flex Builder 4 Flash Video Mouse Events

Click on the stage and the ball will follow the mouse click.


The Code

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var xMovement:Tween;
var yMovement:Tween;

function Start():void
{
stage.addEventListener(MouseEvent.CLICK, moveToClick);
}

function moveToClick(event:MouseEvent):void
{

xMovement = new Tween(circle_mc,"x",Back.easeIn,circle_mc.x,mouseX,.7,true);
yMovement = new Tween(circle_mc,"y",Back.easeIn,circle_mc.y,mouseY,.7,true);
}

Start();

The fl.transitions.package

The fl.transitions.package contains classes that let you use ActionScript to create animation effects. You use the Tween and TransitionManager classes as the primary classes for customizing animation in ActionScript 3.0.

Blinds The Blinds class reveals the movie clip object by using appearing or disappearing rectangles.
Fade The Fade class fades the movie clip object in or out.
Fly The Fly class slides the movie clip object in from a specified direction.
Iris The Iris class reveals the movie clip object by using an animated mask of a square shape or a circle shape that zooms in or out.
Photo Makes the movie clip object appear or disappear like a photographic flash.
PixelDissolve The PixelDissolve class reveals reveals the movie clip object by using randomly appearing or disappearing rectangles in a checkerboard pattern.
Rotate The Rotate class rotates the movie clip object.
Squeeze The Squeeze class scales the movie clip object horizontally or vertically.
Transition The Transition class is the base class for all transition classes.
TransitionManager The TransitionManager class defines animation effects.
Tween The Tween class lets you use ActionScript to move, resize, and fade movie clips by specifying a property of the target movie clip to animate over a number of frames or seconds.
TweenEvent The TweenEvent class represents events that are broadcast by the fl.transitions.Tween class.
Wipe The Wipe class reveals or hides the movie clip object by using an animated mask of a shape that moves horizontally.
Zoom The Zoom class zooms the movie clip object in or out by scaling it in proportion.

 

ActionScript 3.0 Reference

Wednesday, October 20, 2010

Copy to Clipboard Using ActionScript 3

Flex Builder 4 Flash Video



setClipboard()

Replaces the contents of the Clipboard with a specified text string. This method works from any security context when called as a result of a user event (such as a keyboard or input device event handler). This method is provided for SWF content running in Flash Player 9. It allows only adding String content to the Clipboard.. Three-dimensional display objects follow the pointer and Sprite.startDrag() moves the object within the three-dimensional plane defined by the display object. Or, if the display object is a two-dimensional object and the child of a three-dimensional object, the two-dimensional object moves within the three dimensional plane defined by the three-dimensional parent object.

flash.desktop Clipboard

The Clipboard class provides a container for transferring data and objects through the clipboard. The operating system clipboard can be accessed through the static generalClipboard property.

A Clipboard object can contain the same information in more than one format. By supplying information in multiple formats, you increase the chances that another application will be able to use that information. Add data to a Clipboard object with the setData() or setDataHandler() method.

ActionScript 3.0 Reference

Drag and Drop with ActionScript 3

Flex Builder 4 Flash Video Mouse Events



Drag and drop code

reset.addEventListener(MouseEvent.CLICK, comeHome);

function comeHome(e:Event) {
mc.x = 115;
mc.y = 70;
}

function initDragger(mc:MovieClip):void
{
mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownDragger);
mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpDragger);
}

function mouseDownDragger(e:MouseEvent):void
{
e.currentTarget.startDrag();
}
function mouseUpDragger(e:MouseEvent):void
{
e.currentTarget.stopDrag();
}

// Set up drag
initDragger(mc);

startDrag()

Lets the user drag the specified sprite. The sprite remains draggable until explicitly stopped through a call to the Sprite.stopDrag() method, or until another sprite is made draggable. Only one sprite is draggable at a time. Three-dimensional display objects follow the pointer and Sprite.startDrag() moves the object within the three-dimensional plane defined by the display object. Or, if the display object is a two-dimensional object and the child of a three-dimensional object, the two-dimensional object moves within the three dimensional plane defined by the three-dimensional parent object.

Parameters

lockCenter:Boolean (default = false) — Specifies whether the draggable sprite is locked to the center of the pointer position (true), or locked to the point where the user first clicked the sprite (false).

bounds:Rectangle(default = null) — Value relative to the coordinates of the Sprite's parent that specify a constraint rectangle for the Sprite.

stopDrag()

Ends the startDrag() method. A sprite that was made draggable with the startDrag() method remains draggable until a stopDrag() method is added, or until another sprite becomes draggable. Only one sprite is draggable at a time.

Related Posts Plugin for WordPress, Blogger...