Project 3, Report (Flash eCard)

Kiosk and eCard

Action Script 3.0

Multi Media 2014/15 Project 3

Istvan Franko

CET202

Tasks

Project URL

Project details

Display Resolution

Home Page

ActionScript 3

products.xml

News Pages

ActionScript 3

news.xml

Ecard Starting Page

ActionScript 3

Ecard Backgrounds Page

ActionScript 3

backgrounds.xml

Ecard Picture Pages

ActionScript 3

pictures.xml

Ecard Texts Page

ActionScript 3

Ecard Sending Page

Action Script 3

email.php

email.html

Ecard Finished Page

ActionScript 3

ecards.xml

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>