This page is for students at the Norwegian school of Technology. All of the exercises will be placed here and you will find the content below:

Exercise 1:
Create animation on top of the image in order to get a more realistic presentation of the page. To create animation on the text, please see the Hjelpehandbok_flash for guidance. Make sure that your animation will enhance the fact that the girl is listening to music from her phone/music player. Use your imagination! Below is a result of how it may look like, but do not create the same effects I have.

Deadline on this exercise is 16. sept.

Exercise 2:

Sometimes it’s hard to view products in a small area. Animation on the interaction from the user can give a more appropriate viewing of the products. The next exercise is primarily based on animation in actionscript. Use the Tweener library to achieve the result. Here is a tip:

“Create a sprite that holds every image side by side and animate the sprite. Also animate the focused element with the scaleX and scaleY attribute.”

Because this is a hard exercise, you will find the code below. Do not just copy the code, but rather read and understand it. If you want to add elements like buttons or text, do so.

package
{
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import caurina.transitions.Tweener;

public class MobileSelector extends MovieClip
{
private var imageHolder:Sprite;
private static var smallScale:Number 	= 0.7;
private static var normalScale:Number = 1.0;
private var num:int = 0;
private var _selected:int = 0;
private var currentSelected:Sprite;
private var leftButton:LeftButton;
private var rightButton:RightButton;

public function MobileSelector()
{
//create the holder for images and add images
imageHolder = new Sprite();
addImage(new Image1(0,0), 0, -1);
addImage(new Image2(0,0), 200, -1);
addImage(new Image3(0,0), 400, -1);
addImage(new Image4(0,0), 600, -1);
addImage(new Image5(0,0), 800, -1);
addImage(new Image6(0,0), 1000, -1);
addImage(new Image7(0,0), 1200, -1);
addImage(new Image8(0,0), 1400, -1);
imageHolder.y = 50;
addChild(imageHolder);
setFocusedElement();

//prepare and add the left button
leftButton = new LeftButton();
leftButton.x = 200;
leftButton.y = stage.stageHeight - 20 - leftButton.height;
leftButton.addEventListener(MouseEvent.CLICK, previous);
addChild(leftButton);

//prepare and add the right button
rightButton = new RightButton();
rightButton.x = stage.stageWidth - 200 - (rightButton.width/2);
rightButton.y = stage.stageHeight - 20 - rightButton.height;
rightButton.addEventListener(MouseEvent.CLICK, next);
addChild(rightButton);

//add keyboard events to stage
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeyboardEvent);
}
/*
* Animate to the next focused element
*/
public function setFocusedElement(){
if(currentSelected == null) {
currentSelected = imageHolder.getChildAt(_selected) as Sprite;
}
else {
Tweener.addTween(currentSelected, {scaleX:smallScale, scaleY:smallScale, time:1, transition:"easeOut"});
}
currentSelected = imageHolder.getChildAt(_selected) as Sprite;

Tweener.addTween(imageHolder,
{
x:(stage.stageWidth/2) - currentSelected.x - (currentSelected.width / 2) + 10,
time:1,
transition:"easeIn",
onStart:function()
{
Tweener.addTween(currentSelected,
{
scaleX: normalScale,
scaleY: normalScale,
time:1,
transition:"easeIn"
});
}
});
}

/*
* Handle the received keyboard event
*/
public function checkKeyboardEvent(e:KeyboardEvent) :void
{
if(e.keyCode == Keyboard.LEFT)
previous();
else if(e.keyCode == Keyboard.RIGHT)
next();
}

public function next(e:MouseEvent = null) :void
{
if(_selected+1 == num)
return;
_selected++;
setFocusedElement();
}
public function previous(e:MouseEvent = null) :void
{
if(_selected-1 < 0)
return;
_selected--;
setFocusedElement();
}

private function addImage(image:BitmapData, x:Number, y:Number):void
{
var s:Sprite = new Sprite();
var b:Bitmap = new Bitmap(image);
s.addChild(b);
s.scaleX = smallScale;
s.scaleY = smallScale;
s.x = x;
s.y = y;
imageHolder.addChild(s);
num++;
}
}
}

Deadline on this exercise is 23. sept.

Exercise 3:

The next exercise has direction towards loading content and using this in flash. Content stored in standard format like XML and loading images are often required when creating solutions for companies. I refer to my post Loading external resources in Actionscript 3 in order to load images and How to load XML in Actionscript 3 to complete the exercise. We will be using the previous exercise to achieve the result. If you are struggeling with this exercise, download the result here and see what the difference from your code and mine is.

Download the result package

Here is the wanted result:

Well, here is the lecture from 7. Oct. Hope this will help you understand more of the fundamentals in programming actionscript 3.

This is the next step: