How to create a light effect inside a rectangle in Actionscript 3? - actionscript-3

I have tried to do this here http://wonderfl.net/c/9Kdv but what I want is not this
alt text http://reboltutorial.com/images/flash-banner-trial.png
but rather the equivalent of this. As I'm flash newbie I don't see how:
(source: reboltutorial.com)
action script 3 code below:
package {
import flash.display.*;
import flash.text.*;
import flash.net.URLRequest;
import flash.filters.*;
import flash.geom.Rectangle;
public class FlashTest extends Sprite {
public function FlashTest() {
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(0x400000);
mc.graphics.drawRoundRect(0, 0, 278, 170,25,25);
mc.graphics.endFill();
mc.x = 80;
mc.y = 60;
addChild(mc);
//from tut http://blog.0tutor.com/post.aspx?id=116
var filt:GlowFilter = new GlowFilter();
var filt_shadow:DropShadowFilter = new DropShadowFilter();
//here we add some properties to the two filters, the glow filter we give a color.
filt.color = 0xFF0000;
//and how much it should blur.
filt.blurX = 7;
filt.blurY = 7;
//then the dropshadow filter, also how much it should blur on the object.
filt_shadow.blurX = 4;
filt_shadow.blurY = 4;
//and finally an alpha, the alpha goes from 1 to 0, 1 being fully visible and 0 is transparent, then of cause .5 is just in between.
filt_shadow.alpha = .4;
mc.filters = [filt,filt_shadow];
var theTextField:TextField = new TextField();
theTextField.border = false;
theTextField.x = 30;
theTextField.y = 50;
theTextField.autoSize = TextFieldAutoSize.LEFT;
theTextField.text = "Experiment";
var myformat:TextFormat = new TextFormat();
myformat.color = 0xFFFFFF;
myformat.size =24;
myformat.align="center";
myformat.font = "Impact";
theTextField.setTextFormat(myformat);
mc.addChild(theTextField);
var url:String = "//www.rebol.com/graphics/reb-logo.gif";
var urlReq:URLRequest = new URLRequest(url);
var ldr:Loader = new Loader();
ldr.load(urlReq);
ldr.x=30;
ldr.y=88;
mc.addChild(ldr);
}
}
}

Instead of this line:
mc.graphics.beginFill(0x400000);
you can use beginGradientFill with the fillType set to GradientType.RADIAL. You would just need to adjust the focalPointRatio to make it offcenter. Check out the example in the docs for how to do this.

Related

Add movieclips within another movieclip

I am having trouble embedding a child object to a movieClip with code using AS3 and I am not sure what I am doing wrong.
I am trying to create a new movieclip with code and add it to the stage. I am then trying to embed dynamically created objects inside that movieclip. When I trace the objects it shows that they are on the stage and not embedded into the movieclip. I looked through the forums but I didn't find an answer. Below is a watered down version of the code I have. Any help is appreciated.
import flash.display.MovieClip;
import flash.events.Event;
import flash.display.Sprite;
import flash.text.*;
import flash.net.URLRequest;
import flash.display.Loader;
var btnAImage:Loader = new Loader();
var image:URLRequest = new URLRequest("btn_A.png");
public function TextWithImage()
{
var TextField1:TextField = new TextField;
var myText1:String = "TEXT FIELD 1";
var BtnMovieClip:MovieClip = new MovieClip();
var btnPadding = 5;
addChild(BtnMovieClip); //add new MC to stage
btnAImage.load(image);
BtnMovieClip.addChild(btnAImage); // no error gets thrown. I am trying to add the btnAImage inside of my BtnMovieClip.
btnAImage.x = btnPadding; //I am able to reference the btnAImage without referencing the BtnMovieClip object.
btnAImage.y = btnPadding;
var screenW = stage.stageWidth;
TextField1.height = 40;
TextField1.width = 250;
var textPadding = 5;
var TextField1_fontFormat:TextFormat = new TextFormat ;
TextField1_fontFormat.size = 40;
TextField1_fontFormat.font = "TestFont";
TextField1.defaultTextFormat = TextField1_fontFormat;
BtnMovieClip.addChild(TextField1); // no error gets thrown. I am trying to add the text field inside of my BtnMovieClip.
TextField1.text = myText1;
TextField1.x = (btnAImage.width + textPadding);
TextField1.y = textPadding;
}
I wasn't preloading my image so here's how I fixed it. Thank you to Organis for the help!!!
public var btnAImage:Loader;
private function Question8_Answer()
{
trace("Question8_Answer() was called");
btnAImage = new Loader();
btnAImage.load(new URLRequest("btn_A.png"));
btnAImage.contentLoaderInfo.addEventListener(Event.COMPLETE, TextWithImage);
}
public function TextWithImage()
{
var TextField1:TextField = new TextField;
var myText1:String = "TEXT FIELD 1";
var BtnContainer:Sprite = new Sprite();
var btnPadding = 5;
addChild(BtnMovieClip);
BtnMovieClip.addChild(btnAImage);
btnAImage.x = btnPadding;
btnAImage.y = btnPadding;
var screenW = stage.stageWidth;
TextField1.height = 40;
TextField1.width = 250;
var textPadding = 5;
var TextField1_fontFormat:TextFormat = new TextFormat ;
TextField1_fontFormat.size = 40;
TextField1_fontFormat.font = "TestFont";
TextField1.defaultTextFormat = TextField1_fontFormat;
BtnMovieClip.addChild(TextField1); // no error gets thrown. I am trying to add the text field inside of my BtnMovieClip.
TextField1.text = myText1;
TextField1.x = (btnAImage.width + textPadding);
TextField1.y = textPadding;
BtnContainer.width = 300;
}

TypeError: Error #1006: addChild is not a function

I'm trying to embed a "pre-made" flash actionscript 3 gallery into my own flash animation. Both animations work in good ways independently. But once I insert the photo gallery into my own project I am getting an error of;
TypeError: Error #1006: addChild is not a function.
at project_fla::galeri_6/onCompleteXmlLoad()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()
My flash button code which leads to gallery is;
stop();
galeri_btn.addEventListener(MouseEvent.CLICK, galeri);
function galeri(event:MouseEvent):void
{
gotoAndStop(3);
}
And lastly, the flash gallery code is;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;
var xmlLoader:URLLoader = new URLLoader(new URLRequest("photo_gallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, onCompleteXmlLoad);
var xmlFile:XML;
var xcoord:int = 10;
var gal:gallery = new gallery();
gal.x = 10;
gal.y = 10;
addChild(gal);
var thumbsContainer:Sprite = new Sprite();
thumbsContainer.x = 10;
thumbsContainer.y = 320;
addChild(thumbsContainer);
var txtTitle:TextField = new TextField();
txtTitle.x = 15;
txtTitle.y = 15;
var format:TextFormat = new TextFormat();
format.bold = true;
format.color = 0xFFFFFF;
format.size = "20";
format.font = "Arial";
txtTitle.defaultTextFormat = format;
addChild(txtTitle);
var txtDesc:TextField = new TextField();
txtDesc.x = 15;
txtDesc.y = 40;
var format1:TextFormat = new TextFormat();
format1.color = 0x000000;
format.font = "Calibri";
format.size = 12;
txtDesc.defaultTextFormat = format1;
addChild(txtDesc);
function onCompleteXmlLoad(e:Event):void{
xmlFile = new XML(xmlLoader.data);
var len:int = xmlFile.photo.length();
txtTitle.text = xmlFile.photo.name[0];
txtDesc.text = xmlFile.photo.desc[0];
for(var i:int = 0;i<len;i++){
var t:thumbs = new thumbs();
t.x = xcoord;
t.y = 10;
t.buttonMode = true;
t.name = (i+1).toString();
thumbsContainer.addChild(t);
t.addEventListener(MouseEvent.MOUSE_OVER, onMouseover);
t.addEventListener(MouseEvent.MOUSE_OUT, onMouseout);
t.addEventListener(MouseEvent.CLICK, onMouseClick);
var tloader:Loader = new Loader();
tloader.load(new URLRequest("thumbs/" + (i+1) + ".jpg"));
t.addChild(tloader);
xcoord += t.width + 10;
}
var loader:Loader = new Loader();
loader.load(new URLRequest("img/1.jpg"));
gal.addChild(loader);
scroller.source = thumbsContainer;
scroller.setSize(550,110);
}
function onMouseover(e:MouseEvent):void{
e.currentTarget.alpha = 0.5;
}
function onMouseout(e:MouseEvent):void{
e.currentTarget.alpha = 1.0;
}
function onMouseClick(e:MouseEvent):void{
var loader:Loader = new Loader();
loader.load(new URLRequest("img/" + e.currentTarget.name + ".jpg"));
gal.addChild(loader);
txtTitle.text = xmlFile.photo.name[int(e.currentTarget.name) - 1];
txtDesc.text = xmlFile.photo.desc[int(e.currentTarget.name) - 1];
}
Any help is appreciated.
The problem is within one of those two lines:
t.addChild(tloader);
or
gal.addChild(loader);
And the reason for this is because of addChild is not a function error message. If you were calling addChild on non-existing object, the error would be something else.
t is of type thumbs - var t:thumbs = new thumbs(); and gal is gallery - var gal:gallery = new gallery();
So either one of those classes (thumbs or gallery) is problematic. They should do one of the following (inside the classes):
extend DisplayObjectContainer - Sprite or even MovieClip are safest
provide addChild kind of function

create new movieclip from class [duplicate]

This question already exists:
Flash Action Script 3 design custom MovieClip as Button
Closed 9 years ago.
I am new to Flash AS3.I am trying to create a movie clip> I have created basic code but i need to convert it t package so i can create XX number of clips from it.
Can you help in making this simple package so I can use it like var btn:Button = new Button("title");
// mc_main
var mc_main:MovieClip = new MovieClip();
//mc.graphics.lineStyle(1,0x0000CC);
mc_main.graphics.beginFill(0x0000CC);
mc_main.graphics.drawRect(0, 0, 400, 40);
mc_main.graphics.endFill();
mc_main.x = 80;
mc_main.y = 60;
addChild(mc_main);
//mc_txt
var mc_txt:TextField = new TextField();
mc_main.addChild(mc_txt);
mc_txt.text = 'Hello!';
mc_txt.x = 50;
mc_txt.y = 8;
//mc_txt Color
var tf:TextFormat = new TextFormat();
tf.size = 18;
tf.bold = true;
tf.font = "Arial"
tf.color = 0xFFFFFF;
mc_txt.setTextFormat(tf);
I came up with code this but doesnt work
package com.fladev.button
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Button extends MovieClip
{
private var Title:String;
private var Image:String;
public static var mc_main:MovieClip = new MovieClip();
public function Button(Title:String, Image:String) {
this.Title = Title;
this.Image = Image;
Draw_main();
}
private function Draw_main()
{
mc_main.graphics.beginFill(0x0000CC);
mc_main.graphics.drawRect(0, 0, 400, 40);
mc_main.graphics.endFill();
mc_main.x = 80;
mc_main.y = 60;
this.stage.addChild(mc_main);
}
}
}
Your mc_main variable has no reason to be static.
Also, don't add it to the stage; add it to the instance of Button.

positioning bitmapdata

I have the following code:
public function Application()
{
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
var urlRequest:URLRequest = new URLRequest("image/1.jpg");
loader.load(urlRequest);
addChild(loader);
}
private function completeHandler(e:Event):void{
loader.content.width = 800;
loader.content.scaleY = loader.content.scaleX;
piece = Math.round(loader.height/10);
drawBitmaps();
}
private function drawBitmaps():void{
var bmdata:BitmapData = new BitmapData(loader.width, piece, true, 0x000000);
bmdata.draw(loader);
var bitmap:Bitmap = new Bitmap(bmdata);
addChild(bitmap);
loader.visible = false;
}
the result is a bitmap wich contains a pice of the image. The height is 80. and it starts at the top of the image. But how can i tell the bitmapdata to start drawing the image from lets say 80pixels? so it draws a middle piece of the image? Because atm it allways draws from the top of the image.
You should use BitmapData::draw clipRect parameter.
Here is an example:
package {
import flash.geom.Rectangle;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Sprite;
public class BitmapDataTest extends Sprite {
public function BitmapDataTest() {
var c:Sprite = new Sprite();
var g:Graphics;
g = c.graphics;
g.beginFill(0xFF0000);
g.drawCircle(30,30,30);
g.endFill();
addChild(c);
c.x = 10;
c.y = 10;
var bmdata:BitmapData = new BitmapData(60, 60, true, 0x000000);
bmdata.draw(c,null,null,null, new Rectangle(0,30,30,30));
var bitmap:Bitmap = new Bitmap(bmdata);
addChild(bitmap);
bitmap.x = 80;
bitmap.y = 10;
}
}
}
Please notice that the target bitmap data should have the same dimensions as source or this won't work. If you really have to cut it down you should use BitmapData::copyPixels method.
The easiest way would be to apply a mask, dynamically. Here is a good example: Actionscript 3 and dynamic masks
You can create a rectangle, the height you're looking for and position it appropriately.
Hope this helps.

Detect Line Break in AS3 Input TextField

I want to be able to write a paragraph in a textfield, and then click and hold, or do some similar gesture, and have the entire paragraph selected. I'm then going to drag it (using bitmapdata or whatever) to another textfield.
In order to do this, I need to be able to detect where a given paragraph ends. So I'm trying to do that with the following code, which searches for "\n" in the text. It isn't finding it. Can anyone see why (or suggest another technique for doing this)?
TIA,
David
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import view.controls.CustomButton;
public class Main extends Sprite
{
private var bt:CustomButton;
private var tf:TextField;
public function Main()
{
tf = new TextField();
tf.name = "tfield";
tf.type = TextFieldType.INPUT;
tf.width = 400;
tf.height = 200;
tf.x = 100;
tf.y = 100;
tf.selectable = true;
tf.border = true;
tf.background = true;
tf.backgroundColor = 0xFFFFFF;
tf.multiline = true;
tf.text = "Like most of the things I get excited about and share with you, this technique really doesn’t have much to it, but I love its elegance, how it works in the background and gets out of your way. While it’s really simple I think this one is a real gem, ’cause when you look at a class that uses it, it looks like magic!\n\nOkay, so you know how when you’re writing a site or app that’s of a small to medium scale, you default to storing data in XML, and you map that XML to model classes, usually pretty directly? Or, maybe you use a configuration file for your site to load in some constants or something, and XML is a pretty easy choice for this. With E4X you can really parse through that XML quickly.";
tf.wordWrap = true;
addChild(tf);
bt = new CustomButton("Detect", 0xFFFFFF, 0x000000,50,20);
bt.x = 250;
bt.y = 350;
addChild(bt);
addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event):void
{
bt.addEventListener(MouseEvent.CLICK, clickHandler);
}
private function clickHandler(e:MouseEvent):void
{
var lineBreak:int = tf.text.indexOf("\n");
trace(lineBreak);
}
}
}
//custom button class
package view.controls
{
import flash.display.GradientType;
import flash.display.SimpleButton;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.Event;
import flash.geom.Matrix;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
public class CustomButton extends Sprite
{
private var textColor:uint = 0x000000;
private var myColor:uint = 0xFEEE9E9;
private var btnWidth:Number;
private var btnHeight:Number;
public function CustomButton(buttonText:String, gradientColor:uint, borderColor:uint, myBtnWidth:Number, myBtnHeight:Number)
{
var colors:Array = new Array();
var alphas:Array = new Array(1, 1);
var ratios:Array = new Array(0, 255);
var gradientMatrix:Matrix = new Matrix();
var lineThickness:Number = 1;
//var myColor:uint = 0xFF0000;
gradientMatrix.createGradientBox(myBtnWidth, myBtnHeight, Math.PI/2, 0, 0);
this.btnWidth = myBtnWidth;
this.btnHeight = myBtnHeight;
var ellipseSize:int = 20;
var btnUpState:Sprite = new Sprite();
colors = [0xFFFFFF, myColor];
//btnUpState.graphics.lineStyle(1, brightencolor(myColor, -500));
btnUpState.graphics.lineStyle(lineThickness, borderColor);
btnUpState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnUpState.graphics.drawRoundRect(0, 0, myBtnWidth, myBtnHeight, ellipseSize, ellipseSize);
btnUpState.addChild(createButtonTextField(buttonText, textColor));
//
var btnOverState:Sprite = new Sprite();
colors = [0xFFFFFF, brightencolor(myColor, 50)];
//btnOverState.graphics.lineStyle(1, brightencolor(myColor, -50));
btnOverState.graphics.lineStyle(lineThickness, borderColor);
btnOverState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnOverState.graphics.drawRoundRect(0, 0, myBtnWidth, myBtnHeight, ellipseSize, ellipseSize);
btnOverState.addChild(createButtonTextField(buttonText, textColor))
//
var btnDownState:Sprite = new Sprite();
//colors = [brightencolor(myColor, -15), brightencolor(myColor, 50)];
btnDownState.graphics.lineStyle(lineThickness, borderColor);
btnDownState.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, gradientMatrix);
btnDownState.graphics.drawRoundRect(0, 0, myBtnWidth, myBtnHeight, ellipseSize, ellipseSize);
btnDownState.addChild(createButtonTextField(buttonText, textColor))
//
this.btnWidth = myBtnWidth;
this.btnHeight = myBtnHeight;
var myButton:SimpleButton = new SimpleButton(btnUpState, btnOverState, btnDownState, btnOverState);
myButton.name = buttonText;
addChild(myButton);
}
private function createButtonTextField(Text:String, textcolor:uint):TextField {
var myTextField:TextField = new TextField();
myTextField.textColor = textcolor;
myTextField.selectable = false;
myTextField.width = btnWidth;
myTextField.height = btnHeight;
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.align = TextFormatAlign.CENTER;
myTextFormat.font = "Arial";
myTextFormat.size = 12;
myTextField.defaultTextFormat = myTextFormat;
myTextField.text = Text;
myTextField.x = (btnWidth/2)-(myTextField.width/2);
myTextField.y = 1;
return myTextField;
}
private function brightencolor(color:int, modifier:int):int {
var hex:Array = hexToRGB(color);
var red:int = keepInBounds(hex[0]+modifier);
var green:int = keepInBounds(hex[1]+modifier);
var blue:int = keepInBounds(hex[2]+modifier);
return RGBToHex(red, green, blue);
}
private function hexToRGB (hex:uint):Array {
var colors:Array = new Array();
colors.push(hex >> 16);
var temp:uint = hex ^ colors[0] << 16;
colors.push(temp >> 8);
colors.push(temp ^ colors[1] << 8);
return colors;
}
private function keepInBounds(number:int):int {
if (number < 0) number = 0;
if (number > 255) number = 255;
return number;
}
private function RGBToHex(uR:int, uG:int, uB:int):int {
var uColor:uint;
uColor = (uR & 255) << 16;
uColor += (uG & 255) << 8;
uColor += (uB & 255);
return uColor;
}
}
}
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.display.Sprite;
import flash.events.MouseEvent;
var tf:TextField = new TextField();
tf.type = TextFieldType.INPUT;
tf.width = 400;
tf.height = 200;
tf.x = stage.stageWidth / 2 - tf.width / 2;
tf.y = stage.stageHeight / 2 - tf.height / 2;
tf.selectable = true;
tf.border = true;
tf.background = true;
tf.backgroundColor = 0xCCCCCC;
tf.multiline = true;
tf.wordWrap = true;
tf.text = "Enter text here, hit enter to create new paragraphs."
stage.addChild(tf);
var pushme:Sprite = new Sprite();
pushme.graphics.beginFill(0xCCCCCC, 1);
pushme.graphics.drawRect(0, 0, 100, 25);
pushme.graphics.endFill();
pushme.buttonMode = true;
pushme.addEventListener(MouseEvent.CLICK, pushedme);
pushme.x = tf.x + tf.width - pushme.width;
pushme.y = tf.y + tf.height + 15;
stage.addChild(pushme);
function pushedme(e:MouseEvent):void {
var paragraphCounter:int = 1;
var curParagraphOffset:int = -1;
for (var i:int = 0; i < tf.numLines; i++) {
if (tf.getFirstCharInParagraph(tf.getLineOffset(i)) == tf.getLineOffset(i) && tf.getFirstCharInParagraph(tf.getLineOffset(i)) > curParagraphOffset) {
trace("Paragraph " + paragraphCounter + " text: \n" + tf.text.substr(tf.getFirstCharInParagraph(tf.getLineOffset(i)), tf.getParagraphLength(tf.getFirstCharInParagraph(tf.getLineOffset(i)))));
paragraphCounter++;
curParagraphOffset = tf.getFirstCharInParagraph(tf.getLineOffset(i));
}
}
}
Paragraph Detection
Step by step
You can probably take it from here and ignore the empty paragraphs, but to explain:
Setup textfield, input more text manually (as shown)
Create the button to check for paragraphs
Set paragraph counter to 1 so it outputs properly for the first detected paragraph
Paragraph offset needs to be -1 for the if statement to be satisfied for the first iteration as the first paragraph should be at character 0
If the first character in the paragraph is also the first character on this line and we're not part of the previous paragraph, we have a new paragraph on this line.
Output the paragraph text based on the first character and the length of the paragraph by taking a substring of the tf.text property.
Increment paragraphCounter and set the curParagraphOffset to the new first character index.
If you want to be able to click and hold on a given paragraph, all you need to do is call:
tf.getCharIndexAtPoint(x, y)
on click of your text field. You can then find the first character in that paragraph, grab the substring based on the paragraph length, and go from there.
Hope this helps!