Project 3, Report (Flash eCard)
- Details
- Category: Level 2, Multimedia Development
- Published: Sunday, 26 August 2018 15:40
- Hits: 2558
Kiosk and eCard
Action Script 3.0
Multi Media 2014/15 Project 3
Istvan Franko
CET202
Tasks
Project 3 – Kiosk and eCard application
The marketing team has asked you to develop a tablet application that will be installed in shopping centres around the country to promote the OrganicOne brand.
The dedicated stands will provide information about the product and an interactive epostcard facility, allowing shoppers to send electronic postcards and messages to friends and family.
The application should be developed using Adobe Flash /ActionScript 3.0 as a standalone Windows application (EXE) and should provide the following features:
· Provide graphical information screens about the product
· A news screen that can be controlled by easily controlled by HQ and updated live
· Ability to set the background colour of the postcard and give the user the choice of pre-set styles
· Ability to choose graphics (from a library of pre-made graphics) that can be added to the postcard (photos, clipart etc)
· Add customisable text elements to the postcard (fonts, colour, size)
· Change layout of the postcard (move objects around)
· Provide a feature to load an existing image (jpg file provided by the user)
· Provide at least three suitable features to manipulate the uploaded photograph using a filter
· Provide a way to export the badge mockup as a JPG file so it can be emailed from the application or posted to twitter/facebook
· Provide a history/undo feature
· Run at an appropriate size to demonstrate suitability for a tablet in landscape mode. The application should be developed to run as a standalone Flash application for the prototype (.exe)
The application should be developed to run as a standalone Flash application (.exe)
The following components should be submitted:
· FLA file
· Exported Windows executable
· Copy of your source code (including any references to code/libraries used)
· Appropriate design documentation
· A report explaining the rationale behind the design, making reference to the design documentation, your approach and technology used. Give details on how you created this with AS3 and discuss how this could be deployed to Android and iOS devices.
Project URL
http://www.frankofamily.info/UniOfSunderland/Level2/Multimedia/Project3/OO.html
Project details
Display Resolution
What are the most common Android screen resolutions?
GravityLab (2014) present a list of most common android screen resolution.
Common Android Phone and Android Tablet Screen Res
What are the screen resolutions? Android phones
- 320 x 480
- 480 x 800
- 480 x 854
- 540 x 960
- 1280 x 720
- 1920 x 1080
We recommend 1280 x 720 for video encoding
What are the screen resolutions? Android tablets
- 1024 x 600
- 1280 x 800
- 1920 x 1080
- 2048 x 1536
- 2560 x 1440
- 2560 x 1600
We recommend 1920 x 1080 for video encoding
As they suggested I have chosen 1280x720 resulution for my project. This is recommended to android phones put just a slightly smallaer like wide Android resolution and I wanted to run on booth device without loose part of screen.
Source: http://www.gravlab.com/2013/11/21/common-android-screen-resolutions-video/
Home Page
Home pages show general information about products. There are Next and Prev to scroll to other pages, and buttons to go News or Ecard functions. I have used pictures and text what I created to my Project 2. I built my system from scenes. Navigation butons just going to other scenes.
All pictures and text set in xml files and keep in a central server. Application download these xml files, pictures from this server. This empower to easy change details on all devices. The detriment is the app doesn’t work without live internet connection.
The project has been created with Adobe Flash Pro developer tools. This software appropriate to develop applications for desktop comtupert and mobile devices too.
The main file type is Flash with .swf extension. This allows to embed to web pages and most of the browsers support it.

ActionScript 3
import fl.controls.ColorPicker;
import fl.controls.ProgressBar;
import fl.controls.TextArea;
import fl.events.ColorPickerEvent;
import fl.text.TLFTextField;
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.DropShadowFilter;
import flash.filters.ConvolutionFilter;
import flash.geom.ColorTransform;
import flash.geom.Rectangle;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.net.FileFilter;
import flash.text.TextFormat;
import flash.utils.ByteArray;
import flashx.textLayout.formats.TextLayoutFormat;
import flashx.textLayout.elements.TextFlow;
import com.adobe.images.JPGEncoder;
//create variables
var xmlProductData:XML = new XML();
var xmlProductsLoader:URLLoader = new URLLoader();
var currentRecord:int = 0;
var arrProducts:Array = new Array();
//StartPage buttons listeners
StartPage.btnNext.addEventListener(MouseEvent.MOUSE_DOWN, nextProduct); //event listener for button function
StartPage.btnPrev.addEventListener(MouseEvent.MOUSE_DOWN, prevProduct); //event listener for button function
StartPage.btnNews.addEventListener(MouseEvent.MOUSE_DOWN, gotoNews);
StartPage.btnEcard.addEventListener(MouseEvent.MOUSE_DOWN, gotoEcard);
//go to News page
function gotoNews(Evt):void{
MovieClip(this.root).gotoAndPlay(1, "News");
}
//go to Ecard creator
function gotoEcard(Evt):void{
MovieClip(this.root).gotoAndPlay(1, "Ecard");
}
//event listener for xml loading with finished function
xmlProductsLoader.addEventListener(Event.COMPLETE, xmlProductFileLoaded);
//load xml files
xmlProductsLoader.load(new URLRequest ("http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/xml/products.xml"));
//xmlProductsLoader.load(new URLRequest ("http://frankotrade.info/UniOfSunderland/2014-2015/Multimedia/Project3/xml/products.xml"));
//products file load ending function
function xmlProductFileLoaded(evt:Event):void{
xmlProductData = new XML(xmlProductsLoader.data);
trace (xmlProductData);
parseProducts(xmlProductData);
}
//read details from xml to objects
function parseProducts(productIn:XML):void{
var productAttributes:XMLList = productIn.product;
for each (var theproduct:XML in productAttributes) {
var productObj:Object = new Object(); //declare an object
productObj.producttitle = theproduct.producttitle;
productObj.proddescription = theproduct.description;
productObj.image = theproduct.image;
arrProducts.push( productObj ); //push object details to array
trace(productObj);
}
//display first product
trace ("first product download");
StartPage.txtTitle.text = arrProducts[0].producttitle;
StartPage.txtDescription.text = arrProducts[0].proddescription;
displayProductPhoto(arrProducts[0].image);
StartPage.btnPrev.visible = false;
}
//go to next product
function nextProduct(Evt):void{
trace ("the current record is:" + currentRecord + " and the array lengt is " + arrProducts.length );
currentRecord++;
//get text fields from array
if (currentRecord < arrProducts.length){
StartPage.txtTitle.text = arrProducts[currentRecord].producttitle;
StartPage.txtDescription.text = arrProducts[currentRecord].proddescription;
displayProductPhoto(arrProducts[currentRecord].image);
trace("now the current record is " + currentRecord);
}
//next and prev buttons visible settings
if (currentRecord == arrProducts.length-1){
StartPage.btnNext.visible = false;
StartPage.btnPrev.visible = true;
}
else {
StartPage.btnNext.visible = true;
StartPage.btnPrev.visible = true;
}
}
//go to prev product
function prevProduct(Evt):void{
trace ("pressed previous the current record is:" + currentRecord + " " + arrProducts.length );
currentRecord--;
//get text fields from array
if (currentRecord > -1){
trace("now the current record just changed to @ " + currentRecord);
StartPage.txtTitle.text = arrProducts[currentRecord].producttitle;
StartPage.txtDescription.text = arrProducts[currentRecord].proddescription;
displayProductPhoto(arrProducts[currentRecord].image);
trace("now the current record is " + currentRecord);
}
//next and prev buttons visible settings
if (currentRecord == 0){
StartPage.btnNext.visible = true;
StartPage.btnPrev.visible = false;
}
else {
StartPage.btnNext.visible = true;
StartPage.btnPrev.visible = true;
}
}
//display pictures on stage
function displayProductPhoto(filename:String){
//holdingClip.removeChild();
var photoFile:Loader = new Loader();
photoFile.load(new URLRequest (filename));
StartPage.holdingPictures.addChild(photoFile);
}
stop();
products.xml
<products>
<product>
<producttitle>Product Family</producttitle>
<description>On the area of the United Kingdomis endemic , despite the wintry weather in the number of actively moving and surprisingly healthy looking young.
Our scientist went to do futher research on this phenomenon and established, that the acting strange all a new healthy fruit drink, consumed regularly.
This drink dosen’t contain any specific component and is only home-producted fruits.The users have mentioned the positive price and the good taste to our questions.
The OrganicOne the new called drink can be bought in any of the greater stores.
For futher information on the benefits and positive effects ask your diabetics or your personal adviser.
</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/all_tetrapack.jpg</image>
</product>
<product>
<producttitle>Kanzi Apple</producttitle>
<description>Kanzi, which means 'hidden treasure' in Swahili is a cross between Braeburn and Gala which was raised in Belgium and introduced in 2004. The skin colour is a shiny orange red over a golden background. The flesh is cream-coloured, crisp and juicy with outstanding crunch when eaten but not too hard. The taste is a delicate balance of sugars and tartness with a pleasant apple flavour. Supplies of English Kanzi are available from November to April and maintains its quality extremely well in the fruit bowl. </description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/KanziApple_TetraPack.jpg</image>
</product>
<product>
<producttitle>Golden Apple</producttitle>
<description>Most Golden Delicious sold in Britain is imported as the variety requires higher temperatures and greater levels of light than are usually found in UK. English production is restricted to very small volumes that are normally sold from November to January. The variety was found as a chance seedling in the USA in 1890. Flavour is rather weak with mild sweetness balanced with slight acidity. Texture is reasonably firm and juicy.</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/GoldenApple_TetraPack.jpg</image>
</product>
<product>
<producttitle>Jazz Apple</producttitle>
<description>Jazz is a cross between Gala and Braeburn which was raised in New Zealand in the 1980s. Trial plantings were established in England in 2002 and the first volumes of English production became available in 2007. The skin is a shiny bright red colour over a golden background. The flesh is cream-coloured, juicy and with an outstanding crunchy texture. The variety is very juicy and the strong taste is an excellent balance of sugars and tartness with a strong hint of pear drops. English Jazz is available from November to April and maintains its quality extremely well in the fruit bowl.</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/JazzApple_TetraPack.jpg</image>
</product>
</products>
News Pages
News pages show news as its name suggested. I’m not a marketer and couldn’t write dummy news so I just filled up text boxes from Lorem Ipsum. My opinion not the Sofware Engineer need to create slogans and advertising texts.
News page’s texts also set in xml file what stored on server with pictures.
ActionScript 3
//global variables
var xmlNewsData:XML = new XML();
var xmlNewsLoader:URLLoader = new URLLoader();
var currentNews: int = 0;
var arrNews:Array = new Array();
//NewsPage buttons listeners
NewsPage.btnNext.addEventListener(MouseEvent.MOUSE_DOWN, nextNews); //event listener for button function
NewsPage.btnPrev.addEventListener(MouseEvent.MOUSE_DOWN, prevNews); //event listener for button function
NewsPage.btnHome.addEventListener(MouseEvent.MOUSE_DOWN, gotoHome);
NewsPage.btnEcard.addEventListener(MouseEvent.MOUSE_DOWN, gotoEcard);
//go to home function
function gotoHome(Evt):void{
MovieClip(this.root).gotoAndPlay(1, "Home");
}
//event listener for xml loading with finished function
xmlNewsLoader.addEventListener(Event.COMPLETE, xmlNewsFileLoaded);
//load xml files
xmlNewsLoader.load(new URLRequest ("http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/xml/news.xml"));
//xmlNewsLoader.load(new URLRequest ("http://frankotrade.info/UniOfSunderland/2014-2015/Multimedia/Project3/xml/news.xml"));
//news file load ending function
function xmlNewsFileLoaded(evt:Event):void{
xmlNewsData = new XML(xmlNewsLoader.data);
trace (xmlNewsData);
parseNews(xmlNewsData);
}
//read objects details from xml
function parseNews(newsIn:XML):void{
var newsAttributes:XMLList = newsIn.cell;
for each (var thenews:XML in newsAttributes) {
var newsObj:Object = new Object(); //declare an object
newsObj.newstitle = thenews.newstitle;
newsObj.newsdescription = thenews.description;
newsObj.image = thenews.image;
arrNews.push( newsObj ); //push object details to array
trace(newsObj);
}
//first product display
trace ("first news download");
NewsPage.txtNewsTitle.text = arrNews[0].newstitle;
NewsPage.txtNewsDescription.text = arrNews[0].newsdescription;
displayNewsPhoto(arrNews[0].image);
//currentNews = 1;
NewsPage.btnPrev.visible = false;
}
//prev news function
function nextNews(Evt):void{
trace ("the current news is:" + currentNews + " and the array lengt is " + arrNews.length );
currentNews++;
if (currentNews < arrNews.length){
//displayNewsPhoto("Empty.jpg");
NewsPage.txtNewsTitle.text = arrNews[currentNews].newstitle;
NewsPage.txtNewsDescription.text = arrNews[currentNews].newsdescription;
displayNewsPhoto(arrNews[currentNews].image);
//currentRecord++;
trace("now the current record is " + currentNews);
}
if (currentNews == arrNews.length-1){
NewsPage.btnNext.visible = false;
NewsPage.btnPrev.visible = true;
}
else {
NewsPage.btnNext.visible = true;
NewsPage.btnPrev.visible = true;
}
}
//next news function
function prevNews(Evt):void{
trace ("pressed previous the current news is:" + currentNews + " " + arrNews.length );
currentNews--;
//if (currentRecord <= arrProducts.length && currentRecord != 0){
if (currentNews > -1){
//displayProductPhoto("Empty.jpg");
trace("now the current news just changed to @ " + currentNews);
NewsPage.txtNewsTitle.text = arrNews[currentNews].newstitle;
NewsPage.txtNewsDescription.text = arrNews[currentNews].newsdescription;
displayNewsPhoto(arrNews[currentNews].image);
trace("now the current news is " + currentNews);
}
if (currentNews == 0){
NewsPage.btnNext.visible = true;
NewsPage.btnPrev.visible = false;
}
else {
NewsPage.btnNext.visible = true;
NewsPage.btnPrev.visible = true;
}
}
//display images on stage functions
function displayNewsPhoto(filename:String){
//holdingClip.removeChild();
var photoFile:Loader = new Loader();
photoFile.load(new URLRequest (filename));
NewsPage.newsPictures.addChild(photoFile);
}
stop();
news.xml
<news>
<cell>
<newstitle>News One</newstitle>
<description>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/News_1.jpg</image>
</cell>
<cell>
<newstitle>News Two</newstitle>
<description>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/News_2.jpg</image>
</cell>
<cell>
<newstitle>News Three</newstitle>
<description>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/News_3.jpg</image>
</cell>
<cell>
<newstitle>News Four</newstitle>
<description>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/News_4.jpg</image>
</cell>
<cell>
<newstitle>News Five</newstitle>
<description>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</description>
<image>http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/News_5.jpg</image>
</cell>
</news>
Ecard Starting Page
Ecard starting page, give basic information from this function and ask user enter his/her name. Bottom of page has a procces bar what shows to user what his/her other steps to finish to create ab ecard.
ActionScript 3
//global variables
var userName:String;
//buttons listeners
Ecard.btnContinue.addEventListener(MouseEvent.MOUSE_DOWN, mainPageContinue);
Ecard.btnExit.addEventListener(MouseEvent.MOUSE_DOWN, gotoHome);
function mainPageContinue(Evt):void{
if(Ecard.txtName.text.length == 0 || Ecard.txtName.text == "Please enter a name?"){
Ecard.txtName.text = "Please enter a name?";
}
else{
userName = Ecard.txtName.text;
trace ("User name: " + userName);
trace ("Ecard page");
/*var request:URLRequest = new URLRequest ("http://frankotrade.info/UniOfSunderland/2014-2015/Multimedia/Project3/php/createFolder.php");
request.method = URLRequestMethod.POST;
var variables:URLVariables = new URLVariables();
variables.FlashCardName = userName;
request.data = variables;
var loader:URLLoader = new URLLoader (request);
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.load(request); */
MovieClip(this.root).gotoAndPlay(1, "EcardBackgrounds");
}
}
stop();
Ecard Backgrounds Page
Ecard background page allows users to choose a background picture from gallery. The chosen background can be removed with a click on picture. Wher users inserted a background picture adjust buttons displayed. With this buttons user can edit pictures. A checkbox switch on-off a frame on picture. User can choose a frame colour using Color Picker.
For picture editing methods I used samples codes from ours tutorials.
To build a photo gallery I have followed a free tutorial from Republic Of Code web page. This tutorial shows how we can create a XML Grid Image Gallery in Flash (ActionScript 3.0)
Source: http://www.republicofcode.com/tutorials/flash/as3gridgallery/
In the ActionScript code I initialised an array for pictures element’s instance names and push all elements to this array for eays handing and removing.
All pictures stored in server and progress bars shown when there are downloading.
ActionScript 3
//global variables
var filterArray = new Array();
var movieClipArray = new Array();
var movieClipName:String;
var rectName:String;
var loadFileRef:FileReference = new FileReference();
var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;
var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var full_mc:MovieClip;
var x_counter:Number = 0;
var y_counter:Number = 0;
var my_tweens:Array = [];
var container_mc_tween:Tween;
var full_tween:Tween;
var rect:Shape = new Shape();
rect.graphics.lineStyle(2,0xff990000);
rect.graphics.beginFill(0xffFFFF33);
rect.graphics.drawRect(0, 0, 860, 560);
rect.graphics.endFill();
//hide screen editor buttons
ScreenAdjustment.visible = false;
//buttons listeners
BackgroundGallery.txtHello.text = "Hello " + userName + ",\nPlease choose a background from gallery?";
BackgroundGallery.btnEBContinue.visible = false;
BackgroundGallery.btnEBContinue.addEventListener(MouseEvent.MOUSE_DOWN, backgorundPageContinue);
BackgroundGallery.btnEBExit.addEventListener(MouseEvent.MOUSE_DOWN, gotoHomeFromBackground);
//go to home function
function gotoHomeFromBackground(Evt):void{
removeMovieClips();
MovieClip(this.root).gotoAndPlay(1, "Home");
}
//remove movie clips by name using an array
function removeMovieClips():void{
while (movieClipArray.length != 0) {
removeChild(getChildByName(movieClipArray[movieClipArray.length-1]));
movieClipArray.splice(movieClipArray.length-1, 1);
}
if(container_mc.stage){
container_mc.parent.removeChild(container_mc);
}
/*
if(container_pic.stage) {
container_pic.parent.removeChild(container_pic);
}*/
}
//go to next page
function backgorundPageContinue(Evt):void{
trace ("Background Page");
while (container_mc.numChildren > 0) {
container_mc.removeChildAt(0);
}
full_mc.buttonMode = false; //remove buttons mode from backround picture
MovieClip(this.root).gotoAndPlay(1, "EcardPictures");
}
//load gallery details from xml file
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/xml/backgrounds.xml"));
//myXMLLoader.load(new URLRequest("http://frankotrade.info/UniOfSunderland/2014-2015/Multimedia/Project3/xml/backgrounds.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
function processXML(e:Event):void {
var myXML:XML = new XML(e.target.data);
columns = myXML.@COLUMNS;
my_x = myXML.@XPOSITION;
my_y = myXML.@YPOSITION;
my_thumb_width = myXML.@WIDTH;
my_thumb_height = myXML.@HEIGHT;
my_images = myXML.IMAGE;
my_total = my_images.length();
createContainer();
callThumbs();
myXMLLoader.removeEventListener(Event.COMPLETE, processXML);
myXMLLoader = null;
}
//create container for thumbnails
function createContainer():void {
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);
setChildIndex(container_mc,0);
container_mc.addEventListener(MouseEvent.CLICK, callFull);
container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
container_mc.buttonMode = true;
preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);
}
function callThumbs():void {
for (var i:Number = 0; i < my_total; i++) {
var thumb_url = my_images[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.name = i;
thumb_loader.x = (my_thumb_width+10)*x_counter;
thumb_loader.y = (my_thumb_height+10)*y_counter;
if (x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}
var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y;
preloader_pb.width = my_thumb_width;
preloader_pb.height = my_thumb_height;
preloaders_mc.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePb);
}
}
function thumbLoaded(e:Event):void {
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
container_mc.setChildIndex(my_thumb,0);
my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded);
}
//call full background picture
function callFull(e:MouseEvent):void {
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@FULL;
full_loader.load(new URLRequest(full_url));
full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
var full_pb:ProgressBar = new ProgressBar();
full_pb.source = full_loader.contentLoaderInfo;
full_pb.x = 0; //(stage.stageWidth - full_pb.width)/2;
full_pb.y = 0; //((stage.stageHeight - full_pb.height)/2)-4;
preloaders_mc.addChild(full_pb);
full_pb.addEventListener(Event.COMPLETE, donePb);
container_mc.removeEventListener(MouseEvent.CLICK, callFull);
container_mc.buttonMode = false;
container_mc.removeEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.removeEventListener(MouseEvent.MOUSE_OUT, onOut);
container_mc_tween = new Tween(container_mc, "alpha", Strong.easeIn, 1,0.5,0.5, true);
}
//load full background picture
function fullLoaded(e:Event):void {
drawFrame();
ScreenAdjustment.chkFrame.selected = true;
full_mc = new MovieClip();
full_mc.buttonMode = true;
addChildAt(full_mc,2); //set layer position to 2
movieClipName = getChildAt(2).name;
trace ("Background name is " + movieClipName);
movieClipArray.push(movieClipName); //push movieclip name to array for easier removing
trace (movieClipArray);
var my_loader:Loader = Loader(e.target.loader);
full_mc.addChild(my_loader);
full_tween = new Tween(my_loader, "alpha", Strong.easeIn, 0,1,0.5, true);
my_loader.x = 30; //picture positons to leave place to frame
my_loader.y = 30;
ScreenAdjustment.visible = true;
BackgroundGallery.txtHello.visible = false;
BackgroundGallery.btnEBContinue.visible = true;
my_loader.addEventListener(MouseEvent.CLICK,removeFull);
my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded);
}
//draw a rectangle for frame
function drawFrame():void {
addChildAt(rect,1); //setChildIndex(rect,1)
rectName = getChildAt(1).name;
trace ("Rectangle name is " + rectName);
movieClipArray.push(rectName); //push movieclip name to array for easier removing
trace (movieClipArray);
}
//remove background picture with frame
function removeFull(e:MouseEvent):void {
var my_loader:Loader = Loader (e.currentTarget);
full_tween = new Tween(my_loader, "alpha", Strong.easeOut, 1,0,0.5, true);
full_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenFinFinished);
container_mc_tween = new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true);
if(rect.stage){
rect.parent.removeChild(rect);
movieClipArray.splice(movieClipArray.indexOf(rectName), 1); //remove rect name from array
}
movieClipArray.splice(movieClipArray.indexOf(movieClipName), 1); //remove background name from array
trace (movieClipArray);
ScreenAdjustment.visible = false;
BackgroundGallery.txtHello.visible = true;
BackgroundGallery.btnEBContinue.visible = false;
}
//progress bar
function donePb(e:Event):void {
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb);
my_pb.removeEventListener(Event.COMPLETE, donePb);
}
//tween effect
function tweenFinFinished(e:TweenEvent):void {
var my_loader:Loader = Loader (e.target.obj);
my_loader.unload();
full_mc.removeChild(my_loader);// This line was removeChid(my_loader), just add full_mc before it.
removeChild(full_mc);
full_mc = null;
container_mc.addEventListener(MouseEvent.CLICK, callFull);
container_mc.buttonMode = true;
container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
var my_tween:Tween = Tween(e.target);
my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinFinished);
}
//mouse on over function
function onOver(e:MouseEvent):void {
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.5;
}
//mouse ou out function
function onOut(e:MouseEvent):void {
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}
//apply a blur to the image
ScreenAdjustment.btnBlur.addEventListener(MouseEvent.MOUSE_DOWN, blurImage);
function blurImage(evt:Event):void{
var myBlur:BlurFilter = new BlurFilter();
filterArray.push(myBlur);
trace (filterArray);
full_mc.filters = filterArray;
}
//apply a glow drop shaddow to the image
ScreenAdjustment.btnGlow.addEventListener(MouseEvent.MOUSE_DOWN, glowImage);
function glowImage(evt:Event):void{
var myGlow:GlowFilter = new GlowFilter();
filterArray.push(myGlow);
trace (filterArray);
full_mc.filters = filterArray;
}
//apply bevel filters to the image
ScreenAdjustment.btnBevel.addEventListener(MouseEvent.MOUSE_DOWN, bevelImage);
function bevelImage(evt:Event):void{
var myBevel:BevelFilter = new BevelFilter();
filterArray.push(myBevel);
trace (filterArray);
full_mc.filters = filterArray;
}
//apply darkness to the image
ScreenAdjustment.btnBrightnessM.addEventListener(MouseEvent.MOUSE_DOWN, darknessImage);
function darknessImage(evt:Event):void{
var darkness:Array = [0, 0, 0, 0, 0.9, 0, 0, 0, 0];
var conv2:ConvolutionFilter = new ConvolutionFilter(3, 3, darkness, 1);
trace (filterArray);
filterArray.push(conv2);
full_mc.filters = filterArray;
}
//apply brightness to the image
ScreenAdjustment.btnBrightnessP.addEventListener(MouseEvent.MOUSE_DOWN, brightnessImage);
function brightnessImage(evt:Event):void{
var brightness:Array = [0, 0, 0, 0, 1.1, 0, 0, 0, 0];
var conv3:ConvolutionFilter = new ConvolutionFilter(3, 3, brightness, 1);
trace (filterArray);
filterArray.push(conv3);
full_mc.filters = filterArray;
}
//apply reset to the image
ScreenAdjustment.btnReset.addEventListener(MouseEvent.MOUSE_DOWN, resetImage);
function resetImage(evt:Event):void{
filterArray = [];
trace (filterArray);
full_mc.blendMode = BlendMode.NORMAL;
full_mc.filters = filterArray;
full_mc.transform.colorTransform = new ColorTransform(); //remove invert
}
//change frame color by color picker
ScreenAdjustment.myColPicker.addEventListener(ColorPickerEvent.CHANGE, changeRecColor);
function changeRecColor(evt:ColorPickerEvent):void{
trace (ScreenAdjustment.myColPicker.selectedColor);
trace (ScreenAdjustment.myColPicker.hexValue);
var colorInformation:ColorTransform = rect.transform.colorTransform;
colorInformation.color = ScreenAdjustment.myColPicker.selectedColor;
rect.transform.colorTransform = colorInformation
}
//freame on/off checkbox
ScreenAdjustment.chkFrame.addEventListener(MouseEvent.CLICK, frameOn);
function frameOn(e:MouseEvent):void{
var bool:Boolean = e.target.selected;
if(bool){
trace("Frame on");
drawFrame();
}
else{
trace("Frame off");
if(rect.stage){
rect.parent.removeChild(rect);
movieClipArray.splice(movieClipArray.indexOf(rectName), 1);
trace (movieClipArray);
}
}
}
stop();
backgrounds.xml
<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="5" XPOSITION="680" YPOSITION="30" WIDTH="100" HEIGHT="80">
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image1.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb1.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image2.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb2.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image3.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb3.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image4.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb4.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image5.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb5.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image6.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb6.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image7.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb7.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image8.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb8.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image9.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb9.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image10.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb10.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image11.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb11.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image12.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb12.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image13.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb13.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/image14.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/thumb14.jpg" />
</GALLERY>
Ecard Picture Pages
This scene allow users to insert pictures to background. One picture can be chosen from gallery or users allow to insert a second one by upload any other imege from local drives. User can remove pictures by click to them. When any pictures inserted to background a buttons set shows in. User can resize or move pictures with this buttons. For this buttons I worte extra functions, so user can hold this button for continouos use.
ActionScript 3
//global variables
var browsedFileName:String;
var pic_columns:Number;
var pic_x:Number;
var pic_y:Number;
var pic_thumb_width:Number;
var pic_thumb_height:Number;
var pic_images:XMLList;
var pic_total:Number;
var container_pic:MovieClip;
var preloaders_pic:MovieClip;
var fullpic_pic:MovieClip;
var browsed_pic:MovieClip;
var xpic_counter:Number = 0;
var ypic_counter:Number = 0;
var pic_tweens:Array = [];
var container_pic_tween:Tween;
var fullpic_tween:Tween;
//hide picture editor sets
PictureAdjustment.visible = false;
BrowsedPicturesAdjustment.visible = false;
//go to home
PicturesPageButtons.btnEPExit.addEventListener(MouseEvent.MOUSE_DOWN, gotoHomeFromPicture);
function gotoHomeFromPicture(Evt):void{
while (movieClipArray.length != 0){
//remove movie clips by name using an array
removeChild(getChildByName(movieClipArray[movieClipArray.length-1]));
movieClipArray.splice(movieClipArray.length-1, 1);
}
if(container_pic.stage) {
container_pic.parent.removeChild(container_pic);
}
MovieClip(this.root).gotoAndPlay(1, "Home");
}
//go to next stage
PicturesPageButtons.btnEPContinue.addEventListener(MouseEvent.MOUSE_DOWN, picturePageContinue);
function picturePageContinue(Evt):void{
trace ("Text Page");
btnBrowse.visible = false;
txtBrowse.visible = false;
while (container_pic.numChildren > 0){
container_pic.removeChildAt(0);
}
if(container_pic.stage){
container_pic.parent.removeChild(container_pic);
}
MovieClip(this.root).gotoAndPlay(1, "EcardTexts");
}
//move picture up function
PictureAdjustment.btnPicUp.addEventListener(MouseEvent.MOUSE_DOWN, movePicUp);
function movePicUp(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, movePicUpHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,movePicUpMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function movePicUpHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,movePicUpMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,movePicUpHold); //remove the listener for mouse up
}
function movePicUpMove(e:Event):void{
fullpic_pic.y = fullpic_pic.y -2;//do your movement
}
//move picture right function
PictureAdjustment.btnPicRight.addEventListener(MouseEvent.MOUSE_DOWN, movePicRight);
function movePicRight(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, movePicRightHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,movePicRightMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function movePicRightHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,movePicRightMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,movePicRightHold); //remove the listener for mouse up
}
function movePicRightMove(e:Event):void{
fullpic_pic.x = fullpic_pic.x +2; //do your movement
}
//move picture down function
PictureAdjustment.btnPicDown.addEventListener(MouseEvent.MOUSE_DOWN, movePicDown);
function movePicDown(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, movePicDownHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,movePicDownMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function movePicDownHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,movePicDownMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,movePicDownHold); //remove the listener for mouse up
}
function movePicDownMove(e:Event):void{
fullpic_pic.y = fullpic_pic.y +2;//do your movement
}
//move picture left function
PictureAdjustment.btnPicLeft.addEventListener(MouseEvent.MOUSE_DOWN, movePicLeft);
function movePicLeft(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, movePicLeftHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,movePicLeftMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function movePicLeftHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,movePicLeftMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,movePicLeftHold); //remove the listener for mouse up
}
function movePicLeftMove(e:Event):void{
fullpic_pic.x = fullpic_pic.x -2; //do your movement
}
//smaller picture function
PictureAdjustment.btnPicSizeM.addEventListener(MouseEvent.MOUSE_DOWN, sizePicSmaller);
function sizePicSmaller(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, sizePicSmallerHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,sizePicSmallerMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function sizePicSmallerHold(e:Event):void {
removeEventListener(Event.ENTER_FRAME,sizePicSmallerMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,sizePicSmallerHold); //remove the listener for mouse up
}
function sizePicSmallerMove(e:Event):void{
fullpic_pic.width = fullpic_pic.width -2; //do your resize
fullpic_pic.height = fullpic_pic.height -2;
}
//bigger picture function
PictureAdjustment.btnPicSizeP.addEventListener(MouseEvent.MOUSE_DOWN, sizePicBigger);
function sizePicBigger(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, sizePicBiggerHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,sizePicBiggerMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function sizePicBiggerHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,sizePicBiggerMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,sizePicBiggerHold); //remove the listener for mouse up
}
function sizePicBiggerMove(e:Event):void{
fullpic_pic.width = fullpic_pic.width +2; //do your resize
fullpic_pic.height = fullpic_pic.height +2
}
//load in an image
btnBrowse.addEventListener(MouseEvent.MOUSE_DOWN, loadImage);
function loadImage(e:MouseEvent):void{
loadFileRef.browse([new FileFilter("Images", "*.jpg;*.png")]);
loadFileRef.addEventListener(Event.SELECT, selectedFile);
}
function selectedFile(e:Event):void{
loadFileRef.addEventListener(Event.COMPLETE, completeLoadImage);
loadFileRef.load();
loadFileRef.removeEventListener(Event.SELECT, selectedFile);
}
function completeLoadImage(e:Event):void{
browsed_pic = new MovieClip();
browsed_pic.buttonMode = true;
addChild(browsed_pic);
setChildIndex(browsed_pic,4)
var myLoader:Loader = new Loader();
myLoader.loadBytes(e.target.data);
browsed_pic.addChild(myLoader);
myLoader.x = 50;
myLoader.y = 50;
browsedFileName = getChildAt(4).name;
movieClipArray.push(browsedFileName); //push picture instance name to array for easier remove
trace (movieClipArray);
BrowsedPicturesAdjustment.visible = true;
btnBrowse.visible = false;
txtBrowse.visible = false;
//loaded picture settings functions, move picture up
BrowsedPicturesAdjustment.btnPicUp.addEventListener(MouseEvent.MOUSE_DOWN, moveBrowsedPicUp);
function moveBrowsedPicUp(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, moveBrowsedPicUpHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,moveBrowsedPicUpMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function moveBrowsedPicUpHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,moveBrowsedPicUpMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,moveBrowsedPicUpHold); //remove the listener for mouse up
}
function moveBrowsedPicUpMove(e:Event):void {
myLoader.y = myLoader.y -2;//do your movement
}
//move loaded picture rigth
BrowsedPicturesAdjustment.btnPicRight.addEventListener(MouseEvent.MOUSE_DOWN, moveBrowsedPicRight);
function moveBrowsedPicRight(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, moveBrowsedPicRightHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,moveBrowsedPicRightMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function moveBrowsedPicRightHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,moveBrowsedPicRightMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,moveBrowsedPicRightHold); //remove the listener for mouse up
}
function moveBrowsedPicRightMove(e:Event):void{
myLoader.x = myLoader.x +2; //do your movement
}
//move loaded picture down
BrowsedPicturesAdjustment.btnPicDown.addEventListener(MouseEvent.MOUSE_DOWN, moveBrowsedPicDown);
function moveBrowsedPicDown(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, moveBrowsedPicDownHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,moveBrowsedPicDownMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function moveBrowsedPicDownHold(e:Event):void {
removeEventListener(Event.ENTER_FRAME,moveBrowsedPicDownMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,moveBrowsedPicDownHold); //remove the listener for mouse up
}
function moveBrowsedPicDownMove(e:Event):void{
myLoader.y = myLoader.y +2; //do your movement
}
//move loaded picture left
BrowsedPicturesAdjustment.btnPicLeft.addEventListener(MouseEvent.MOUSE_DOWN, moveBrowsedPicLeft);
function moveBrowsedPicLeft(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, moveBrowsedPicLeftHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,moveBrowsedPicLeftMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function moveBrowsedPicLeftHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,moveBrowsedPicLeftMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,moveBrowsedPicLeftHold); //remove the listener for mouse up
}
function moveBrowsedPicLeftMove(e:Event):void{
myLoader.x = myLoader.x -2; //do your movement
}
//smaller loaded picture function
BrowsedPicturesAdjustment.btnPicSizeM.addEventListener(MouseEvent.MOUSE_DOWN, sizeBrowsedPicSmaller);
function sizeBrowsedPicSmaller(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, sizeBrowsedPicSmallerHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,sizeBrowsedPicSmallerMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function sizeBrowsedPicSmallerHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,sizeBrowsedPicSmallerMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,sizeBrowsedPicSmallerHold); //remove the listener for mouse up
}
function sizeBrowsedPicSmallerMove(e:Event):void{
myLoader.width = myLoader.width -2; //do your resize
myLoader.height = myLoader.height -2;
}
//bigger loaded picture function
BrowsedPicturesAdjustment.btnPicSizeP.addEventListener(MouseEvent.MOUSE_DOWN, sizeBrowsedPicBigger);
function sizeBrowsedPicBigger(evt:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, sizeBrowsedPicBiggerHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,sizeBrowsedPicBiggerMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function sizeBrowsedPicBiggerHold(e:Event):void{
removeEventListener(Event.ENTER_FRAME,sizeBrowsedPicBiggerMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,sizeBrowsedPicBiggerHold); //remove the listener for mouse up
}
function sizeBrowsedPicBiggerMove(e:Event):void{
myLoader.width = myLoader.width +2; //do your resize
myLoader.height = myLoader.height +2;
}
myLoader.addEventListener(MouseEvent.CLICK,removeBrowsedPic);
loadFileRef.removeEventListener(Event.COMPLETE, completeLoadImage);
}
//remove loaded picture from stage
function removeBrowsedPic(e:MouseEvent):void {
PictureAdjustment.visible = false;
BrowsedPicturesAdjustment.visible = false;
btnBrowse.visible = true;
txtBrowse.visible = true;
movieClipArray.splice(movieClipArray.indexOf(browsedFileName), 1); //remove instance name from array
trace (movieClipArray);
removeChild(getChildByName(browsedFileName)); //remove object by name
}
//load gallery from xml file
var picXMLLoader:URLLoader = new URLLoader();
picXMLLoader.load(new URLRequest("http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/xml/pictures.xml"));
//picXMLLoader.load(new URLRequest("http://frankotrade.info/UniOfSunderland/2014-2015/Multimedia/Project3/xml/pictures.xml"));
picXMLLoader.addEventListener(Event.COMPLETE, processPicXML);
//get picture details from xml
function processPicXML(e:Event):void {
var picXML:XML = new XML(e.target.data);
pic_columns = picXML.@COLUMNS;
pic_x = picXML.@XPOSITION;
pic_y = picXML.@YPOSITION;
pic_thumb_width = picXML.@WIDTH;
pic_thumb_height = picXML.@HEIGHT;
pic_images = picXML.IMAGE;
pic_total = pic_images.length();
createPicContainer();
callPicThumbs();
picXMLLoader.removeEventListener(Event.COMPLETE, processPicXML);
picXMLLoader = null;
}
//create a container to gallery
function createPicContainer():void {
container_pic = new MovieClip();
container_pic.x = pic_x;
container_pic.y = pic_y;
addChild(container_pic);
setChildIndex(container_pic,3);
container_pic.addEventListener(MouseEvent.CLICK, callPicFull);
container_pic.addEventListener(MouseEvent.MOUSE_OVER, onPicOver);
container_pic.addEventListener(MouseEvent.MOUSE_OUT, onPicOut);
container_pic.buttonMode = true;
preloaders_pic = new MovieClip();
preloaders_pic.x = container_pic.x;
preloaders_pic.y = container_pic.y;
addChild(preloaders_pic);
}
//call thumbnails
function callPicThumbs():void {
for (var i:Number = 0; i < pic_total; i++) {
var thumb_url = pic_images[i].@THUMB;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbPicLoaded);
thumb_loader.name = i;
thumb_loader.x = (pic_thumb_width+10)*xpic_counter;
thumb_loader.y = (pic_thumb_height+10)*ypic_counter;
if (xpic_counter+1 < pic_columns) {
xpic_counter++;
} else {
xpic_counter = 0;
ypic_counter++;
}
var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y;
preloader_pb.width = pic_thumb_width;
preloader_pb.height = pic_thumb_height;
preloaders_pic.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePicPb);
}
}
//load thumbnails to gallery
function thumbPicLoaded(e:Event):void {
var pic_thumb:Loader = Loader(e.target.loader);
container_pic.addChild(pic_thumb);
container_pic.setChildIndex(pic_thumb,0);
pic_tweens[Number(pic_thumb.name)]=new Tween(pic_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
pic_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbPicLoaded);
}
//call full size picture
function callPicFull(e:MouseEvent):void {
var fullpic_loader:Loader = new Loader();
var fullpic_url = pic_images[e.target.name].@FULL;
fullpic_loader.load(new URLRequest(fullpic_url));
fullpic_loader.contentLoaderInfo.addEventListener(Event.INIT, fullPicLoaded);
var fullpic_pb:ProgressBar = new ProgressBar();
fullpic_pb.source = fullpic_loader.contentLoaderInfo;
fullpic_pb.x = 0; //(stage.stageWidth - fullpic_pb.width)/2;
fullpic_pb.y = 0; //((stage.stageHeight - fullpic_pb.height)/2)-4;
preloaders_pic.addChild(fullpic_pb);
fullpic_pb.addEventListener(Event.COMPLETE, donePicPb);
container_pic.removeEventListener(MouseEvent.CLICK, callPicFull);
container_pic.buttonMode = false;
container_pic.removeEventListener(MouseEvent.MOUSE_OVER, onPicOver);
container_pic.removeEventListener(MouseEvent.MOUSE_OUT, onPicOut);
container_pic_tween = new Tween(container_pic, "alpha", Strong.easeIn, 1,0.5,0.5, true);
}
//load full size picture
function fullPicLoaded(e:Event):void {
fullpic_pic = new MovieClip();
fullpic_pic.buttonMode = true;
addChildAt(fullpic_pic,3); //add picture to stage at layer 3
movieClipName = getChildAt(3).name;
trace ("Picture name is " + movieClipName);
movieClipArray.push(movieClipName); //push movie clip instance name to array for easier remove
trace (movieClipArray);
var pic_loader:Loader = Loader(e.target.loader);
fullpic_pic.addChild(pic_loader);
fullpic_tween = new Tween(pic_loader, "alpha", Strong.easeIn, 0,1,0.5, true);
pic_loader.x = 30; //(stage.stageWidth - pic_loader.width)/2;
pic_loader.y = 30; //((stage.stageHeight - pic_loader.height)/2)-4;
PictureAdjustment.visible = true;
btnBrowse.visible = false;
txtBrowse.visible = false;
pic_loader.addEventListener(MouseEvent.CLICK,removePicFull);
pic_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullPicLoaded);
}
//remove full picture from stage funcion
function removePicFull(e:MouseEvent):void {
var pic_loader:Loader = Loader (e.currentTarget);
fullpic_tween = new Tween(pic_loader, "alpha", Strong.easeOut, 1,0,0.5, true);
fullpic_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenPicFinished);
container_pic_tween = new Tween(container_pic, "alpha", Strong.easeOut, 0.5,1,0.5, true);
PictureAdjustment.visible = false;
BrowsedPicturesAdjustment.visible = false;
btnBrowse.visible = true;
txtBrowse.visible = true;
movieClipArray.splice(movieClipArray.indexOf(movieClipName), 1); //remove instance name from array
trace (movieClipArray);
}
//progress bar function
function donePicPb(e:Event):void {
var pic_pb:ProgressBar = ProgressBar(e.target);
preloaders_pic.removeChild(pic_pb);
pic_pb.removeEventListener(Event.COMPLETE, donePicPb);
}
//tween function
function tweenPicFinished(e:TweenEvent):void {
var pic_loader:Loader = Loader (e.target.obj);
pic_loader.unload();
fullpic_pic.removeChild(pic_loader);// This line was removeChid(pic_loader), just add fullpic_pic before it.
removeChild(fullpic_pic);
fullpic_pic = null;
container_pic.addEventListener(MouseEvent.CLICK, callPicFull);
container_pic.buttonMode = true;
container_pic.addEventListener(MouseEvent.MOUSE_OVER, onPicOver);
container_pic.addEventListener(MouseEvent.MOUSE_OUT, onPicOut);
var pic_tween:Tween = Tween(e.target);
pic_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenPicFinished);
}
//mouse over picture function
function onPicOver(e:MouseEvent):void {
var pic_thumb:Loader = Loader(e.target);
pic_thumb.alpha = 0.5;
}
//mouse out from picture function
function onPicOut(e:MouseEvent):void {
var pic_thumb:Loader = Loader (e.target);
pic_thumb.alpha = 1;
}
stop();
pictures.xml
<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="4" XPOSITION="860" YPOSITION="30" WIDTH="100" HEIGHT="120">
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/All_TetraPack.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/All_TetraPack_thumb.png" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/GreenApple_TetraPack.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/GreenApple_TetraPack_thumb.png" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/JazzApple_TetraPack.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/JazzApple_TetraPack_thumb.png" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/KanziApple_TetraPack.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/KanziApple_TetraPack_thumb.png" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/Green-Apple.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/Green-Apple_thumb.png" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/Jazz-Apple.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/Jazz-Apple_thumb.png" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/images/Kanzi-Apple.png" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/thumbs/Kanzi-Apple_thumb.png" />
</GALLERY>
Ecard Texts Page
On this scene user can add multiple text to ecard. User can edit text details by editor buttons. Text details stored in an array. User can remove texts by using Remove last buttons, which remove texts in reserve order.
ActionScript 3
//global variables
var i:int = 5;
var a:int = -1;
var textFieldName:String;
var textRemoveName:String;
var numberInArray:int;
var textArray = new Array(); //arry for text object setting
TextAdjustment.btnRemoveLast.visible = false;
numberInArray = movieClipArray.length;
//go to home
TextsPageButtons.btnEPExit.addEventListener(MouseEvent.MOUSE_DOWN, gotoHomeFromTexts);
function gotoHomeFromTexts(Evt):void{
while (movieClipArray.length != 0){
//remove movie clips by name using an array
removeChild(getChildByName(movieClipArray[movieClipArray.length-1]));
movieClipArray.splice(movieClipArray.length-1, 1);
}
MovieClip(this.root).gotoAndPlay(1, "Home");
}
//go to sending page
TextsPageButtons.btnEPContinue.addEventListener(MouseEvent.MOUSE_DOWN, textPageContinue);
function textPageContinue(Evt):void {
trace ("Send Page");
TextAdjustment.visible = false;
MovieClip(this.root).gotoAndPlay(1, "EcardSend");
}
//add text function
TextAdjustment.btnAddText.addEventListener(MouseEvent.MOUSE_DOWN, addText);
function addText(Evt):void{
var textSettings:TextFormat = new TextFormat(); //text settings
textSettings.font = "Verdana";
textSettings.size = 36;
textSettings.bold = false;
textSettings.italic = false;
textSettings.underline = false;
textSettings.color = 0x000000;
textSettings.align = TextFieldAutoSize.CENTER;
var textBox:TLFTextField = new TLFTextField();//text field setting
textBox.x = 0;
textBox.y = 0;
textBox.width = 800;
textBox.height = 500;
textBox.text = "Enter your text here";
textBox.defaultTextFormat = textSettings;
addChildAt(textBox,i);
TextAdjustment.btnBoldOn.visible = true;
TextAdjustment.btnBoldOff.visible = false;
TextAdjustment.btnItalicOn.visible = true;
TextAdjustment.btnItalicOff.visible = false;
TextAdjustment.btnUnderlineOn.visible = true;
TextAdjustment.btnUnderlineOff.visible = false;
textArray.push(textBox); //array for textbox objects for adjust setting and easier remove
a++;
trace ("x " +textArray[a].x);
trace ("y " +textArray[a].y);
trace ("width " +textArray[a].width);
trace ("height " +textArray[a].height);
trace (textArray + " " + a);
textFieldName = getChildAt(i).name;
movieClipArray.push(textFieldName);
trace (movieClipArray);
TextAdjustment.btnRemoveLast.visible = true;
i++;
//arial font function
TextAdjustment.btnArial.addEventListener(MouseEvent.MOUSE_DOWN, textArial);
function textArial(Evt):void{
textSettings.font = "Arial";
trace (textArray[a]);
textArray[a].setTextFormat(textSettings);
}
//calibri font function
TextAdjustment.btnCalibri.addEventListener(MouseEvent.MOUSE_DOWN, textCalibri);
function textCalibri(Evt):void {
textSettings.font = "Calibri";
textArray[a].setTextFormat(textSettings);
}
//mistral font function
TextAdjustment.btnMistral.addEventListener(MouseEvent.MOUSE_DOWN, textMistral);
function textMistral(Evt):void {
textSettings.font = "Mistral";
textArray[a].setTextFormat(textSettings);
}
//papyrus font function
TextAdjustment.btnPapyrus.addEventListener(MouseEvent.MOUSE_DOWN, textPapyrus);
function textPapyrus(Evt):void {
textSettings.font = "Papyrus";
textArray[a].setTextFormat(textSettings);
}
//times new roman font function
TextAdjustment.btnTimesNewR.addEventListener(MouseEvent.MOUSE_DOWN, textTimesNewR);
function textTimesNewR(Evt):void {
textSettings.font = "Times New Roman";
textArray[a].setTextFormat(textSettings);
}
//verdana font function
TextAdjustment.btnVerdana.addEventListener(MouseEvent.MOUSE_DOWN, textVerdana);
function textVerdana(Evt):void {
textSettings.font = "Verdana";
textArray[a].setTextFormat(textSettings);
}
//bigger font size
TextAdjustment.btnBiggerSize.addEventListener(MouseEvent.MOUSE_DOWN, textBiggerSize);
function textBiggerSize(Evt):void {
textSettings.size = int(textSettings.size)+2;
textArray[a].setTextFormat(textSettings);
}
//smaller font size function
TextAdjustment.btnSmallerSize.addEventListener(MouseEvent.MOUSE_DOWN, textSmallerSize);
function textSmallerSize(Evt):void {
textSettings.size = int(textSettings.size)-2;
textArray[a].setTextFormat(textSettings);
}
//bold on function
TextAdjustment.btnBoldOn.addEventListener(MouseEvent.MOUSE_DOWN, txtBoldOn);
function txtBoldOn(Evt):void {
trace (textSettings.bold);
textSettings.bold = true;
TextAdjustment.btnBoldOn.visible = false;
TextAdjustment.btnBoldOff.visible = true;
textArray[a].setTextFormat(textSettings);
}
//bold off function
TextAdjustment.btnBoldOff.addEventListener(MouseEvent.MOUSE_DOWN, txtBoldOff);
function txtBoldOff(Evt):void {
trace (textSettings.bold);
textSettings.bold = false;
TextAdjustment.btnBoldOn.visible = true;
TextAdjustment.btnBoldOff.visible = false;
textArray[a].setTextFormat(textSettings);
}
//italic on function
TextAdjustment.btnItalicOn.addEventListener(MouseEvent.MOUSE_DOWN, txtItalicOn);
function txtItalicOn(Evt):void {
trace (textSettings.italic);
textSettings.italic = true;
TextAdjustment.btnItalicOn.visible = false;
TextAdjustment.btnItalicOff.visible = true;
textArray[a].setTextFormat(textSettings);
}
//italic off function
TextAdjustment.btnItalicOff.addEventListener(MouseEvent.MOUSE_DOWN, txtItalicOff);
function txtItalicOff(Evt):void {
trace (textSettings.italic);
textSettings.italic = false;
TextAdjustment.btnItalicOn.visible = true;
TextAdjustment.btnItalicOff.visible = false;
textArray[a].setTextFormat(textSettings);
}
//underline on function
TextAdjustment.btnUnderlineOn.addEventListener(MouseEvent.MOUSE_DOWN, txtUnderlineOn);
function txtUnderlineOn(Evt):void {
trace (textSettings.underline);
textSettings.underline = true;
TextAdjustment.btnUnderlineOn.visible = false;
TextAdjustment.btnUnderlineOff.visible = true;
textArray[a].setTextFormat(textSettings);
}
//underline off function
TextAdjustment.btnUnderlineOff.addEventListener(MouseEvent.MOUSE_DOWN, txtUnderlineOff);
function txtUnderlineOff(Evt):void {
trace (textSettings.underline);
textSettings.underline = false;
TextAdjustment.btnUnderlineOn.visible = true;
TextAdjustment.btnUnderlineOff.visible = false;
textArray[a].setTextFormat(textSettings);
}
//move text up function
TextAdjustment.btnTextUp.addEventListener(MouseEvent.MOUSE_DOWN, textUp);
function textUp(e:Event):void{
stage.addEventListener(MouseEvent.MOUSE_UP, textUpHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,textUpMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function textUpHold(e:Event):void {
removeEventListener(Event.ENTER_FRAME,textUpMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,textUpHold); //remove the listener for mouse up
}
function textUpMove(e:Event):void {
textArray[a].y = textArray[a].y-2; //do your movement
}
//move text right function
TextAdjustment.btnTextRigth.addEventListener(MouseEvent.MOUSE_DOWN, textRigth);
function textRigth(Evt):void {
stage.addEventListener(MouseEvent.MOUSE_UP, textRigthHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,textRigthMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function textRigthHold(e:Event):void {
removeEventListener(Event.ENTER_FRAME,textRigthMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,textRigthHold); //remove the listener for mouse up
}
function textRigthMove(e:Event):void {
//do your movement
textArray[a].x = textArray[a].x+2;
}
//move text up function
TextAdjustment.btnTextDown.addEventListener(MouseEvent.MOUSE_DOWN, textDown);
function textDown(Evt):void {
stage.addEventListener(MouseEvent.MOUSE_UP, textDownHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,textDownMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function textDownHold(e:Event):void {
removeEventListener(Event.ENTER_FRAME,textDownMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,textDownHold); //remove the listener for mouse up
}
function textDownMove(e:Event):void {
textArray[a].y = textArray[a].y+2; //do your movement
}
//move text up function
TextAdjustment.btnTextLeft.addEventListener(MouseEvent.MOUSE_DOWN, textLeft);
function textLeft(Evt):void {
stage.addEventListener(MouseEvent.MOUSE_UP, textLeftHold); //listen for mouse up on the stage, in case the finger/mouse moved off of the button accidentally when they release.
addEventListener(Event.ENTER_FRAME,textLeftMove); //while the mouse is down, run the tick function once every frame as per the project frame rate
}
function textLeftHold(e:Event):void {
removeEventListener(Event.ENTER_FRAME,textLeftMove); //stop running the tick function every frame now that the mouse is up
stage.removeEventListener(MouseEvent.MOUSE_UP,textLeftHold); //remove the listener for mouse up
}
function textLeftMove(e:Event):void {
textArray[a].x = textArray[a].x-2;//do your movement
}
//color picker for text color
myColPicker.addEventListener(ColorPickerEvent.CHANGE, changeTextColour);
function changeTextColour(e:ColorPickerEvent):void {
trace (myColPicker.selectedColor);
trace (myColPicker.hexValue);
textSettings.color = "0x" + myColPicker.hexValue;
textArray[a].setTextFormat(textSettings);
}
}
//remove last text from picture
TextAdjustment.btnRemoveLast.addEventListener(MouseEvent.MOUSE_DOWN, removeLast);
function removeLast(Evt):void{
textRemoveName = movieClipArray[movieClipArray.length -1]
movieClipArray.splice(movieClipArray.indexOf(textRemoveName), 1);
textArray.pop(); //delete last element from array
trace (movieClipArray);
trace (textArray);
removeChild(getChildByName(textRemoveName)); //remove text from stage
i--;
a--;
if (movieClipArray.length == numberInArray) {
TextAdjustment.btnRemoveLast.visible = false;
}
}
stop();
Ecard Sending Page
On this stage user can save ecard to local drives.
If the ecard saved and new button shows in. Send by email button open a pop-up box. There are validated text input fields. If user filled the form the ecard details will be sent by email.
On this prototype the text fields’ parameters posted to a PHP file (email.php). With this email.php file we can send email to recepients, but in this prototype email.php just create an email.html file to display passed details.
Action Script 3
//global variables
var emailName:String;
var emailAddress:String;
var emailAddressText:String;
var emailAttachment:String;
var emailSubject:String;
var emailComment:String;
btnSendByEmail.visible = false;
//go to home
SendPageButtons.btnEPExit.addEventListener(MouseEvent.MOUSE_DOWN, gotoHomeFromSend);
function gotoHomeFromSend(Evt):void{
while (movieClipArray.length != 0) {
removeChild(getChildByName(movieClipArray[movieClipArray.length-1])); //remove movie clips by name using an array
movieClipArray.splice(movieClipArray.length-1, 1); //remove last element from array
}
MovieClip(this.root).gotoAndPlay(1, "Home");
}
//go to next stage
SendPageButtons.btnEPContinue.addEventListener(MouseEvent.MOUSE_DOWN, sendPageContinue);
function sendPageContinue(Evt):void {
while (movieClipArray.length != 0) {
removeChild(getChildByName(movieClipArray[movieClipArray.length-1])); //remove movie clips by name using an array
movieClipArray.splice(movieClipArray.length-1, 1); //remove last element from array
}
trace ("Finished Page");
MovieClip(this.root).gotoAndPlay(1, "EcardFinished");
}
//save image to local drive
btnSaveImage.addEventListener(MouseEvent.MOUSE_DOWN, saveImage);
function saveImage(evt:Event):void {
var imageCapture:BitmapData = new BitmapData(860, 560);
imageCapture.draw(stage, null, null, "normal", new Rectangle(0, 0, 860, 560), true);
var jpgEncoder:JPGEncoder = new JPGEncoder(80);
var jpgBytes:ByteArray = jpgEncoder.encode(imageCapture);
var fileRef:FileReference = new FileReference();
fileRef.save(jpgBytes, userName + ".jpg");
btnSaveImage.visible = false;
btnSendByEmail.visible = true;
}
//send email box opener
btnSendByEmail.addEventListener(MouseEvent.MOUSE_DOWN, sendImage);
function sendImage(evt:Event):void{
SBox.visible= true;
SBox.txtAttachment.text = userName + ".jpg";
}
//get email details from pop up box
SBox.btnSend.addEventListener(MouseEvent.MOUSE_DOWN, sendButton);
function sendButton(evt:Event):void {
if(SBox.txtName.text.length == 0 || SBox.txtName.text == "Please enter a name?"){
SBox.txtName.text = "Please enter a name?";
}
else {
if(SBox.txtEmail.text.length == 0 || SBox.txtEmail.text == "Please enter an email address"){
SBox.txtEmail.text = "Please enter an email address?";
}
else {
if(SBox.txtSubject.text.length == 0 || SBox.txtSubject.text == "Please enter a subject"){
SBox.txtSubject.text = "Please enter a subject?";
}
else {
emailSubject = SBox.txtSubject.text;
emailAddressText = SBox.txtEmail.text;
emailName = SBox.txtName.text;
emailComment = SBox.txtComment.text;
SBox.visible= false;
sendEmail();
}
}
}
}
//send email details to php file to handing
function sendEmail():void{
const SCRIPT_URL:String = "email.php";
var request:URLRequest = new URLRequest(SCRIPT_URL);
var variables:URLVariables = new URLVariables();
//setting sending variables
variables.sname = emailName;
variables.email = emailAddressText;
variables.subject = emailSubject;
variables.attachment = userName + "jpg";
variables.body = emailComment;
request.data = variables;
request.method = URLRequestMethod.POST; //send by post methode
var urlLoader:URLLoader = new URLLoader();
urlLoader.load(request);
}
stop();
email.php
<?php
$from = $_REQUEST['sname'];
$email = $_REQUEST['email'];
$subject = $_REQUEST['subject'];
$attachment = $_REQUEST['attachment'];
$message = $_REQUEST['body'];
$content = "<p>A virtual email sent from " . $from . "</p>";
$content .= "<p>Email address is " . $email . "</p>";
$content .= "<p>Subject is " . $subject . "</p>";
$content .= "<p>Attachment is " . $attachment . "</p>";
$content .= "<p>Comment is " . $message . "</p>";
$fileName = 'email.html';
file_put_contents($fileName, $content);
echo $content;
echo "<p>A virtual email sent from " . $from . "</p>";
echo "<p>Email address is " . $email . "</p>";
echo "<p>Subject is " . $subject . "</p>";
echo "<p>Attachment is " . $attachment . "</p>";
echo "<p>Comment " . $message . "</p>";
?>
email.html
<html>
<head></head>
<body>
<p>A virtual email sent from Istvan Franko</p>
<p>Email address is This email address is being protected from spambots. You need JavaScript enabled to view it.</p>
<p>Subject is Test Ecard</p>
<p>Attachment is test.jpg</p>
<p>Comment is ……….</p>
</body>
</html>
Ecard Finished Page
This is our final page where we thank the user and display other user’s saved ecards in a gallery.

ActionScript 3
var fin_x:Number;
var fin_y:Number;
var fin_thumb_width:Number;
var fin_thumb_height:Number;
var fin_images:XMLList;
var fin_total:Number;
var container_fin:MovieClip;
var preloaders_fin:MovieClip;
//global varaibles
var full_fin:MovieClip;
var fin_tweens:Array = [];
var container_fin_tween:Tween;
var fullFin_tween:Tween;
x_counter = 0; //reset counters
y_counter = 0;
//go to home
btnFinishedExit.addEventListener(MouseEvent.MOUSE_DOWN, gotoHomeFromFinished);
function gotoHomeFromFinished(Evt):void{
while (movieClipArray.length != 0){
//remove movie clips by name using an array
removeChild(getChildByName(movieClipArray[movieClipArray.length-1]));
movieClipArray.splice(movieClipArray.length-1, 1);
}
if(container_fin.stage) {
container_fin.parent.removeChild(container_fin);
}
MovieClip(this.root).gotoAndPlay(1, "Home");
}
//load picture details from xml file
var finXMLLoader:URLLoader = new URLLoader();
finXMLLoader.load(new URLRequest("http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/xml/ecards.xml"));
//finXMLLoader.load(new URLRequest("http://frankotrade.info/UniOfSunderland/2014-2015/Multimedia/Project3/xml/ecards.xml"));
finXMLLoader.addEventListener(Event.COMPLETE, processFinXML);
function processFinXML(e:Event):void {
var myFinXML:XML = new XML(e.target.data);
columns = myFinXML.@COLUMNS;
fin_x = myFinXML.@XPOSITION;
fin_y = myFinXML.@YPOSITION;
fin_thumb_width = myFinXML.@WIDTH;
fin_thumb_height = myFinXML.@HEIGHT;
fin_images = myFinXML.IMAGE;
fin_total = fin_images.length();
createFinContainer();
callFinThumbs();
finXMLLoader.removeEventListener(Event.COMPLETE, processFinXML);
finXMLLoader = null;
}
//create container for thumb
function createFinContainer():void {
container_fin = new MovieClip();
container_fin.x = fin_x;
container_fin.y = fin_y;
addChild(container_fin);
setChildIndex(container_fin,0);
container_fin.addEventListener(MouseEvent.CLICK, callFinFull);
container_fin.addEventListener(MouseEvent.MOUSE_OVER, onOverFin);
container_fin.addEventListener(MouseEvent.MOUSE_OUT, onOutFin);
container_fin.buttonMode = true;
preloaders_fin = new MovieClip();
preloaders_fin.x = container_fin.x;
preloaders_fin.y = container_fin.y;
addChild(preloaders_fin);
}
//call thumbs
function callFinThumbs():void {
for (var i:Number = 0; i < fin_total; i++) {
var thumbFin_url = fin_images[i].@THUMB;
var thumbFin_loader = new Loader();
thumbFin_loader.load(new URLRequest(thumbFin_url));
thumbFin_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbFinLoaded);
thumbFin_loader.name = i;
thumbFin_loader.x = (fin_thumb_width+10)*x_counter;
thumbFin_loader.y = (fin_thumb_height+10)*y_counter;
if (x_counter+1 < columns) {
x_counter++;
} else {
x_counter = 0;
y_counter++;
}
var preloaderFin_pb:ProgressBar = new ProgressBar();
preloaderFin_pb.source = thumbFin_loader.contentLoaderInfo;
preloaderFin_pb.x = thumbFin_loader.x;
preloaderFin_pb.y = thumbFin_loader.y;
preloaderFin_pb.width = fin_thumb_width;
preloaderFin_pb.height = fin_thumb_height;
preloaders_fin.addChild(preloaderFin_pb);
preloaderFin_pb.addEventListener(Event.COMPLETE, doneFinPb);
}
}
//load thumbs
function thumbFinLoaded(e:Event):void {
var fin_thumb:Loader = Loader(e.target.loader);
container_fin.addChild(fin_thumb);
container_fin.setChildIndex(fin_thumb,0);
fin_tweens[Number(fin_thumb.name)]=new Tween(fin_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
fin_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbFinLoaded);
}
//call full size picture
function callFinFull(e:MouseEvent):void {
var fullFin_loader:Loader = new Loader();
var fullFin_url = fin_images[e.target.name].@FULL;
fullFin_loader.load(new URLRequest(fullFin_url));
fullFin_loader.contentLoaderInfo.addEventListener(Event.INIT, fullFinLoaded);
var fullFin_pb:ProgressBar = new ProgressBar();
fullFin_pb.source = fullFin_loader.contentLoaderInfo;
fullFin_pb.x = 200; //(stage.stageWidth - fullFin_pb.width)/2;
fullFin_pb.y = ((stage.stageHeight - fullFin_pb.height)/2)-4;
preloaders_fin.addChild(fullFin_pb);
fullFin_pb.addEventListener(Event.COMPLETE, doneFinPb);
container_fin.removeEventListener(MouseEvent.CLICK, callFinFull);
container_fin.buttonMode = false;
container_fin.removeEventListener(MouseEvent.MOUSE_OVER, onOverFin);
container_fin.removeEventListener(MouseEvent.MOUSE_OUT, onOutFin);
container_fin_tween = new Tween(container_fin, "alpha", Strong.easeIn, 1,0.5,0.5, true);
}
//load full size picture
function fullFinLoaded(e:Event):void {
full_fin = new MovieClip();
full_fin.buttonMode = true;
addChild(full_fin);
setChildIndex(full_fin,2)
var fin_loader:Loader = Loader(e.target.loader);
full_fin.addChild(fin_loader);
fullFin_tween = new Tween(fin_loader, "alpha", Strong.easeIn, 0,1,0.5, true);
fin_loader.x = 350; //(stage.stageWidth - fin_loader.width)/2;
fin_loader.y = ((stage.stageHeight - fin_loader.height)/2)-4;
movieClipName = getChildAt(2).name;
trace ("Background name is " + movieClipName);
movieClipArray.push(movieClipName); //push intance name to array
trace (movieClipArray);
fin_loader.addEventListener(MouseEvent.CLICK,removeFinFull);
fin_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullFinLoaded);
}
//remove full image
function removeFinFull(e:MouseEvent):void {
var fin_loader:Loader = Loader (e.currentTarget);
fullFin_tween = new Tween(fin_loader, "alpha", Strong.easeOut, 1,0,0.5, true);
fullFin_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenFinishedFin);
movieClipArray.splice(movieClipArray.indexOf(movieClipName), 1);
trace (movieClipArray);
container_fin_tween = new Tween(container_fin, "alpha", Strong.easeOut, 0.5,1,0.5, true);
}
//progress bar
function doneFinPb(e:Event):void {
var fin_pb:ProgressBar = ProgressBar(e.target);
preloaders_fin.removeChild(fin_pb);
fin_pb.removeEventListener(Event.COMPLETE, doneFinPb);
}
//tween function
function tweenFinishedFin(e:TweenEvent):void {
var fin_loader:Loader = Loader (e.target.obj);
fin_loader.unload();
full_fin.removeChild(fin_loader);// This line was removeChid(fin_loader), just add full_fin before it.
removeChild(full_fin);
full_fin = null;
container_fin.addEventListener(MouseEvent.CLICK, callFinFull);
container_fin.buttonMode = true;
container_fin.addEventListener(MouseEvent.MOUSE_OVER, onOverFin);
container_fin.addEventListener(MouseEvent.MOUSE_OUT, onOutFin);
var fin_tween:Tween = Tween(e.target);
fin_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinishedFin);
}
//mouse over thumb
function onOverFin(e:MouseEvent):void {
var fin_thumb:Loader = Loader(e.target);
fin_thumb.alpha = 0.5;
}
//mouse out thumb
function onOutFin(e:MouseEvent):void {
var fin_thumb:Loader = Loader (e.target);
fin_thumb.alpha = 1;
}
stop();
ecards.xml
<?xml version="1.0" encoding="utf-8"?>
<GALLERY COLUMNS="5" XPOSITION="680" YPOSITION="100" WIDTH="100" HEIGHT="80">
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user1.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user1_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user2.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user2_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user3.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user3_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user4.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user4_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user5.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user5_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user6.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user6_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user7.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user7_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user8.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user8_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user9.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user8_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user10.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user10_thumb.jpg" />
<IMAGE FULL="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/user11.jpg" THUMB="http://nestor.sunderland.ac.uk/~bg47bp/Level_2/Project_3/user_images/thumbs/user11_thumb.jpg" />
</GALLERY>









