Posts Tagged ‘as2’
Flashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.
1
2
3
| <object width="200" height="200" type="application/x-shockwave-flash" data="flashvars_as3.swf">
<param name="flashvars" value="colors=0x012345,0x123456,0x234567,0x345678,0x456789,0x567890,0x678901,0x789012&delay=.11&loop=true&random=false"/>
</object> |
In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.
1
| this.loaderInfo.parameters |
As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.
In this example I’m looking for 4 flashvars specifically (in any order):
- colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
- loop:Boolean – whether or not to repeat these colors (default is true)
- delay:Number – the delay between colors (in seconds). (default is 1 second)
- random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)
This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:
And here are some more (please don’t have a seizure!)
Here’s the full source if you’re interested:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
| /*
circlecube.com
App to demonstrate the process of getting flashvars from embed code to actionscript (as3)
Displays colors specified.
looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)
*/
//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
myflashvars = {colors: "random", delay: 1};
}
else{
myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
trace(item + ":\t" + myflashvars[item]);
if (item == "colors"){
myColors = myflashvars[item].split(',');
}
else if(item == "loop"){
myLoop = parseBoolean(myflashvars[item]);
}
else if(item == "delay"){
myDelay = myflashvars[item];
}
else if(item == "random"){
randomOrder = parseBoolean(myflashvars[item]);
}
}
//use my variables!
if (myColors[0] == "random"){
allRandom = true;
}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
counter.start();
stop();
function nextColor(e:Event):void{
//cycle through colors
if (!allRandom && !randomOrder){
if (counter.currentCount+2 > myColors.length){
if (myLoop == true || myLoop == "true"){
counter.reset();
counter.start();
}
else{
counter.stop();
}
}
trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
setColor(myBox, myColors[counter.currentCount - 1]);
}
//randomly select a color from the myColors array
else if (!allRandom && randomOrder){
var randomColor = Math.floor(Math.random() * myColors.length);
trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
setColor(myBox, myColors[randomColor]);
}
//randomly create colors
else{
trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
}
}
function setColor(item:DisplayObject, col):void{
if (col == "random"){
setRandomColor(item);
}
else{
setHexColor(item, col);
}
}
function setHexColor(item:DisplayObject, col:Number):void {
var myColor:ColorTransform = item.transform.colorTransform;
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0;
myColor.color = col;
item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
switch(str.toLowerCase())
{
// Check for true values
case "1":
case "true":
case "yes":
return true;
// Check for false values
case "0":
case "false":
case "no":
return false;
// If all else fails cast string
default:
return Boolean(str);
}
} |
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as2, as3, color, download, experiment, flash, html, open source, tutorial, web design
Buy Stock Flash
Sell & Buy Flash
Buy or Sell, Start Now -
Stock Flash – Royalty Free Stock Flash effects, Video, Audio
The New Kid on the block… it’s good to see some competition coming to the stock flash world. BuyStockFlash is revving it up. They are positioned to provide a place where flash-ers can upload components, templates, utilities, flv & mp3 players, logos & icons and any other flash elements to sell and earn at least 50% from the proceeds. I haven’t yet uploaded any files, but will once I have some time to do so. They also have a pretty rewarding affiliate program! They let the site speak for itself, displaying a gallery of available files on the homepage. The site just started last fall, is based in Prauge and since they have expanded to become buystocknetwork, including a site for flash, design templates, and sound files!
While the content is still somewhat bare, I’ve seen a few items that are top shelf! I see a lot of potential in this site! Good luck to them and to you, enjoy BuyStockFlash!
Author: Evan Mullins | Filed under: review
Tags: actionscript, as2, as3, flash, flex, network, review, tutorial, website
This deals with some issues I’m having with the seekbar of a player. The seekbar is the area that displays the video time as a bar that shows your current position/percentage of the video, it can also display the loaded portion of the video among other things as well. Including the video players I’ve made, most player code seems to use bytesLoded / bytesTotal to calculate the amount loaded and display in the loadbar (or whatever you call it), this load bar relates to the filesize as it reads the bytes loaded out of the total. In this same scrub bar area, I like to display the current video time in the playbar as the currentTime / totalTime, notice that this relates to the time and not the file size.
Since video is usually a variable bit rate, the loadbar (size) and the playbar (time) are not representing the same data of the video. Let’s consider an extreme example case video that consists of a first half containing live action with lots of colors and motion while the second half is a still image black and white slideshow. Understandably the first half of the video will be larger in file size than the second half, even though they each represent the same duration or half of a video… So the first half of the loadbar (size) would not correctly represent the first half of the playbar (time). So the user who watching the video load to the half point, and scrubbing to halfway through the video by clicking the load bar will see errors… The player will not be able to play the halfway (time) yet because that time is not yet loaded, even though the file is halfway loaded (size). So if we allow scrubbing through the video by clicking on the loadbar, there is a good chance that the user experience suffers because the loadbar (size) and playbar (time) are not interchangeable
Calculating display bar actionscript code:
1
2
3
4
| //bar is display bar mc
//bar.bg.width is used as a constant to scale the percentage to the full bar width
bar.sizebar.width = (ns.bytesLoaded / ns.bytesTotal) * bar.bg.width;
bar.timebar.width = (ns.time / duration) * bar.bg.width; |
Scrub on click actionscript code:
1
2
3
| //calculate from percentage of bar width to time for seeking to
jumpSeekTo = (bar.mouseX / bar.bg.width) * duration;
ns.seek(jumpSeekTo); |
A possible simple solution I’ve thought of is to just display a loading graphic if they click a time which has not yet loaded, but that seems counter intuitive and backwards, since the load bar would display that time as having being loaded.
I have not seen anything in documentation or anywhere online that suggests any other way to display the amount loaded which would represent the amount of TIME loaded rather than SIZE. Is there a way to know what time has loaded in the video and display that in the loadbar rather than display the percent of kb loaded?
Can anyone see something I am missing?
P.S. I already tried a couple forums to no avail: Actionscript.org forum post and gotoandlearn forum post.
Author: Evan Mullins | Filed under: other, review
Tags: actionscript, as2, as3, experiment, film, flash, flex, graphic design, interactive, movie, usability, video, web design
I find that Drag and Drop is the most intuitive form of user interaction (at least using a mouse). Actionscript has some of this functionality built in, with the interactive functions startDrag and stopDrag, these can help make our coding pretty easy. If you are transitioning from as2, the code was incredibly simple:
Actionscript2
1
2
3
4
5
6
| on (press) {
startDrag (this);
}
on (release, releaseOutside) {
stopDrag ();
} |
On the movie clip action panel you’d just put that script, which is actually pretty readable even if you don’t know code. The releaseOutside is to keep from the clip missing the release event, because sometimes if a user released the mouse button but was not currently over the clip being dragged for whatever reason, it will not stop dragging.
Actionscript 3
Some things have changed with as3, other than the actual coding structure, the biggest change for me doing drag and drop in the new actionscript was that the mouse events have changed. There is no more a press or release. They were replaced with, MOUSE_DOWN and MOUSE_UP. There is no more releaseOutside either and this one is a little more complicated to find among the new MouseEvent list.
Leaving it out works, but we still have the same problem. Check out the working example below and try dragging the red ball to the green or yellow one and drop it there. Since the green is above the red in the layer sequence, the mouse is over the green and when the MouseEvent.MOUSE_UP fires, it’s not on the red ball but on the green, so we don’t get to the code that drops the red ball. So the red ball code basically has times when the dragging sticks even after we release the mouse button. Not to mention the dragging is very jumpy!
1
2
3
4
5
6
7
8
| ballRed.addEventListener(MouseEvent.MOUSE_DOWN, dragRed);
ballRed.addEventListener(MouseEvent.MOUSE_UP, dropRed);
function dragRed(e:MouseEvent):void{
ballRed.startDrag();
}
function dropRed(e:MouseEvent):void{
ballRed.stopDrag();
} |
Using the Mouse Move event will help us to customize our behavior a bit more. Plus I wanted to get a more abstract level to it, so I could apply the event listeners to any display object and use the event properties to target the right clips. We begin the drag with the Mouse Down, and the create some other eventListeners for the stage that will watch the Mouse Move and Up events. So clicking on the green or yellow ball, fires the grabMe function which sets the me variable (which will hold any object) to the current target of the event, which should always be the object that you click. So we are using the same code for both the green and yellow ball. I’m a big fan of code consolidation and reuse, it takes a little more effort, but the code is much more clean and portable even. Then we add the event listeners for the stage on MOUSE_MOVE and MOUSE_UP. So first, mthe dragMe function, just says to update after event. This makes the animation smoother cause it only updates the display after the event completes it’s process. Then the drop me function is attached to the stage, so anywhere you release the mouse, the object will stop dragging, plus we remove the stage event listeners and add back the listener for the original object (me). Note the buttonMode property as well, this will make the cursor turn to a hand when you hover that object.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| ballYellow.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
ballYellow.buttonMode = true;
ballGreen.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
ballGreen.buttonMode = true;
var me:Object;
function grabMe(e:MouseEvent):void{
me = e.currentTarget;
me.removeEventListener(MouseEvent.MOUSE_DOWN, grabMe);
me.startDrag();
stage.addEventListener(MouseEvent.MOUSE_MOVE, dragMe);
stage.addEventListener(MouseEvent.MOUSE_UP, dropMe);
}
function dropMe(e:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_UP, dropMe);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, dragMe);
me.stopDrag();
me.addEventListener(MouseEvent.MOUSE_DOWN, grabMe);
}
function dragMe(e:MouseEvent):void {
e.updateAfterEvent();
} |
This functionality is much smoother and then when I want to add more code to the dragging or dropping, I have a place to do it already!
Example
Source
as3dragdrop-ball.fla
Author: Evan Mullins | Filed under: tutorial
Tags: actionscript, as2, as3, design, flash, flex, interactive, open source, tutorial
StomperNet has been a ‘buzz’.
After Andy’s ‘Mea Culpa‘ why wouldn’t it be…
But this is so much better and bigger, learning many lessons from the last launch – StomperNet strikes again!
Teamed up with Paul Lemberg a new product called FormulaFIVE (F5 for short).
Just launched a video to excite the industry!
So check out stomperf5.com now!
Author: Evan Mullins | Filed under: portfolio, work
Tags: actionscript, as2, css, dreamweaver, film, flash, graphic design, html, interactive, movie, portfolio, review, seo, stompernet, video, web design, website, work
