Scroll

Modules, part 3: Creating a Background Gallery

Step 1: Creating BackgroundGalleryModule in Flash

Let's open the website.fla, create a new layer and drag the Image Gallery Module Preview component from the library.

1_choose_preview.png


We give it an instance name preview.

2_instance_name.png


Then we convert it to a MovieClip named BackgroundGalleryModule. We should check the Export for ActionScipt box. Class: BackgroundGalleryModule, Base Class: modules.BackgroundGalleryModule.

3_convert_to_mc.png


Now we should create a class with the same name in the modules package. We inherit SimpleGalleryModule for this class: com.moto.template.modules.gallery.SimpleGalleryMod ule.

package modules 
{
    import com.moto.template.modules.gallery.SimpleGalleryModule;
 
    public class BackgroundGalleryModule extends SimpleGalleryModule
    {
 
        public function BackgroundGalleryModule() 
        {
            super();
 
        }
 
    }
 
}

Let's import the MovieClip class:

import flash.display.MovieClip;

Now we'll create a holder for pictures. For this we go inside of the BackgroundGalleryModule MovieClip, create a new layer, and draw a shape.

4_shape.png


Then we convert it to a MovieClip. Let's name it contentHolder and give it the same instance name.

5_convert.png


Also we place it in the zero coordinates.

6_zero_coordinates.png


Then we go inside of this MovieClip and remove the shape. So, we get an empty holder.

7_delete_shape.png


Also we can name the layers so that it's easy to find the preview and contentHolder if needed.

8_rename_layers.png


We move the BackgroundGalleryModule MovieClip to the Modules folder in the library. Then we create a BackgroundGalleryModule Assets folder and move the contentHolder there.

9_library.png


When it's done and we have the MovieClips which we will use for our module, we can delete the layer that we have created at the very beginning or make it guide.
   
  

Step 4: Creating an XML file for the gallery

Now let's create an xml file for our gallery. In admin\modules\simpleGalleryModule there is a template.xml file. It's the default gallery template file. If we open it, we'll see that there are two properties described - Preview and Thumbnail. We don't need the Thumbnail property, but we also shouldn't change the default file. That's why we just duplicate the template.xml so that we can edit the copy without changing the default file. Let's name the duplicate template_background.xml. We open it and remove the Thumbnail property element:

            <property id="2" type="image">
                <name><![CDATA[Thumbnail]]></name>
            </property>

Also we remove the property template:

<item propertyType="2"></item>

And change thumbnail property value to 1:

        <option id="thumbnailPropertyID" editable="false">
            <value>1</value>

When the changes are done, the template_background.xml must be:

<?xml version="1.0" encoding="utf-8"?>
<simpleGalleryModule>
 
    <configuration>
        <option id="previewPropertyID" editable="false">
            <value>1</value>
        </option>
        <option id="thumbnailPropertyID" editable="false">
            <value>1</value>
        </option>
        <option id="thumbnailWidth" editable="false">
            <value>112</value>
        </option>
        <option id="thumbnailHeight" editable="false">
            <value>75</value>
        </option>
        <option id="maxRootItems">
            <value>0</value>
        </option>
    </configuration>
 
    <structure>
        <properties>
            <property id="1" type="image">
                <name><![CDATA[Preview]]></name>
            </property>
        </properties>
        <template id="0" order="0">
            <properties>
                <item propertyType="1"></item>
            </properties>
        </template>
    </structure>
 
    <data />
 
</simpleGalleryModule>

Then we open the structure.xml again and add the template element with the template_background.xml file name. So, the module will take the properties from this file.

                <data>
                    <template>template_background.xml</template>
                    <galleryData isDataProvider="true"/>
                </data>
  

Step 5: Adding the images display logic

Step 6: Auto resize

The module is resizable now. But we will lock it so that there is no possibility to drag it and change size. It will be resized automatically with the help of script.

We need to define whether the module is added to the stage with the event listener.

addEventListener(Event.ADDED_TO_STAGE, _stageHandler);

Let's add it to the class constructor:

        public function BackgroundGalleryModule() 
        {
            super();
 
            _preview = this["preview"];
            _contentHolder = this["contentHolder"];
 
            addEventListener(INITIALIZATION_COMPLETE, _initializationHandler);
            addEventListener(INITIALIZATION_ERROR, _initializationHandler);
 
            addEventListener(Event.ADDED_TO_STAGE, _stageHandler);
        }

Then we create a method (_stageHandler) which will handle this event with cases of adding, removing, and resizing:

        private function _stageHandler(event:Event):void
        {
            switch (event.type)
            {
                case Event.ADDED_TO_STAGE:
 
                    break;
 
                case Event.REMOVED_FROM_STAGE:
 
                    break;
 
                case Event.RESIZE:
 
                    break;
            }
        }

In case of adding to the stage we add a listener of removing the module:

addEventListener(Event.REMOVED_FROM_STAGE, _stageHandler);

and a listener of resizing event (on the stage):

stage.addEventListener(Event.RESIZE, _stageHandler);

                case Event.ADDED_TO_STAGE:
          addEventListener(Event.REMOVED_FROM_STAGE, _stageHandler);
                    stage.addEventListener(Event.RESIZE, _stageHandler);
                    break;

In case when module was removed from the stage, we also remove the listener of resize event:

                case Event.REMOVED_FROM_STAGE:
                    stage.removeEventListener(Event.RESIZE, _stageHandler);
                    break;

When the module is added we need to set its size immediately. For this we can call the _stageHandler method with resize event type:

_stageHandler(new Event(Event.RESIZE));

We call it in case of adding the module:

                case Event.ADDED_TO_STAGE:
          addEventListener(Event.REMOVED_FROM_STAGE, _stageHandler);
                    stage.addEventListener(Event.RESIZE, _stageHandler);
 
                    _stageHandler(new Event(Event.RESIZE));
                    break;

Let's use an existing function setSize, but override it for our needs:

        override public function setSize(newWidth:Number, newHeight:Number):void 
        {
            super.setSize(newWidth, newHeight);
 
        }

Let's call it in the stageHandler method in case of resize event and pass stage width and height as Moto.getInstance().stageWidth and Moto.getInstance().stageHeight. This way in the control panel there will be stage dimensions equal the editing area, not the whole browser window. And there will be standard stage width and height when the site is opened in the browser.

                case Event.RESIZE:
          setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
                    break;

We add Moto to imports:

import com.moto.template.common.Moto;

Also we should call setSize in the _loaderHandler method in case of loading completion for the loaded image to take the correct size:

        private function _loaderHandler(event:Event):void
        {
            switch (event.type)
            {
                case Event.COMPLETE:
                    _isLoaded = true;
 
                    _oldImage = _newImage;
 
                    _newImage = new Sprite();
                    _newImage.addChild(_loader.content);
                    _newImage.alpha = 0;
                    _contentHolder.addChild(_newImage);
 
                    var old:Sprite = _oldImage;
                    Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:function ():void { if (old && old.parent) old.parent.removeChild(old) } } );
 
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
                    break;

Let's add logic of resizing to the setSize method. We create a new variable:

var ratio:Number;

First we'll create logic for a new image, so we add a condition:

if (_newImage)
{

}


Then inside of this condition we reset the width and the height scale (set it 100%):

_newImage.scaleX = 1;
_newImage.scaleY = 1;


Calculate the width and the height ratios and choose the largest:

ratio = Math.max(newWidth / _newImage.width, newHeight / _newImage.height);

And we set the new scale equal to the calculated ratio:

_newImage.scaleX = ratio;
_newImage.scaleY = ratio;

Also we have to center the image:

_newImage.x = (newWidth - _newImage.width) * .5;
_newImage.y = (newHeight - _newImage.height) * .5;

        override public function setSize(newWidth:Number, newHeight:Number):void 
        {
            super.setSize(newWidth, newHeight);
 
            var ratio:Number;
            if (_newImage)
            {
                _newImage.scaleX = 1;
                _newImage.scaleY = 1;
 
                ratio = Math.max(newWidth / _newImage.width, newHeight / _newImage.height);
 
                _newImage.scaleX = ratio;
                _newImage.scaleY = ratio;
 
                _newImage.x = (newWidth - _newImage.width) * .5;
                _newImage.y = (newHeight - _newImage.height) * .5;
            }
 
        }

Then we make logic for an old image by analogy:

        override public function setSize(newWidth:Number, newHeight:Number):void 
        {
            super.setSize(newWidth, newHeight);
 
            var ratio:Number;
            if (_newImage)
            {
                _newImage.scaleX = 1;
                _newImage.scaleY = 1;
 
                ratio = Math.max(newWidth / _newImage.width, newHeight / _newImage.height);
 
                _newImage.scaleX = ratio;
                _newImage.scaleY = ratio;
 
                _newImage.x = (newWidth - _newImage.width) * .5;
                _newImage.y = (newHeight - _newImage.height) * .5;
            }
 
            if (_oldImage)
            {
                _oldImage.scaleX = 1;
                _oldImage.scaleY = 1;
 
                ratio = Math.max(newWidth / _oldImage.width, newHeight / _oldImage.height);
 
                _oldImage.scaleX = ratio;
                _oldImage.scaleY = ratio;
 
                _oldImage.x = (newWidth - _oldImage.width) * .5;
                _oldImage.y = (newHeight - _oldImage.height) * .5;
            }
 
        }

Important: we have to make the correction of coordinates for the proper centering. You can learn more about it in the Coordinates correction article.

 

Step 7: Coordinates correction

The logic of centering works relatively to the zero coordinates, but they are not absolute. They change their position while resizing and that makes the centering work incorrect. We have to include this offsetting to make the centering look right.

This correction will be implemented in the _stageHandler method in case of resize event.
We create a new variable:

var point:Point = new Point();

And add the condition:

                case Event.RESIZE:
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
 
                    var point:Point = new Point();
                    if (stage)
                    {
 
                    }
                    break;

Also we have to import Point:

import flash.geom.Point;

Then inside of this condition we check whether the site is open in the control panel or not. If it's open in the control panel (limitedMode), we will take parent x and y:

point.x = parent.x;
point.y = parent.y;

And if not, we'll go to the highest level:

point = parent.localToGlobal(point);

                case Event.RESIZE:
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
 
                    var point:Point = new Point();
                    if (stage)
                    {
                        if (limitedMode)
                        {
                            point.x = parent.x;
                            point.y = parent.y;
                        }
                        else
                        {
                            point = parent.localToGlobal(point);
                        }
                    }
                    break;

We make the correction:

super.x = - point.x;
super.y = - point.y;

                case Event.RESIZE:
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
 
                    var point:Point = new Point();
                    if (stage)
                    {
                        if (limitedMode)
                        {
                            point.x = parent.x;
                            point.y = parent.y;
                        }
                        else
                        {
                            point = parent.localToGlobal(point);
                        }
 
                        super.x = - point.x;
                        super.y = - point.y;
                    }
                    break;

It was the correction relative to the holder. Then we have to make a correction relative to the stage, but only when in the website mode, not in the control panel. So, we add an appropriate condition and make the offset inside of it:

                case Event.RESIZE:
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
 
                    var point:Point = new Point();
                    if (stage)
                    {
                        if (limitedMode)
                        {
                            point.x = parent.x;
                            point.y = parent.y;
                        }
                        else
                        {
                            point = parent.localToGlobal(point);
                        }
 
                        super.x = - point.x;
                        super.y = - point.y;
 
                        if (!limitedMode)
                        {
                            super.x = super.x  - (stage.stageWidth - Moto.getInstance().website.loaderInfo.width) * .5;
                            super.y = super.y - (stage.stageHeight - Moto.getInstance().website.loaderInfo.height) * .5;
                        }
                    }
                    break;

Now our image will be centered and will fill the screen. We also have to block the possibility of manual position change in the module. We leave only the automatic resize. For this we have to override x and y coordinates:

        override public function set x(value:Number):void 
        {
 
        }
 
        override public function set y(value:Number):void 
        {
 
        }

Let's also add smoothing to improve the quality of resized image. We make smoothing in the _loaderHandler method in case of loading completion:

        private function _loaderHandler(event:Event):void
        {
            switch (event.type)
            {
                case Event.COMPLETE:
                    _isLoaded = true;
 
                    _oldImage = _newImage;
 
                    if (_loader.content is Bitmap)
                        (_loader.content as Bitmap).smoothing = true;
 
                    _newImage = new Sprite();
                    _newImage.addChild(_loader.content);
                    _newImage.alpha = 0;
                    _contentHolder.addChild(_newImage);
 
                    var old:Sprite = _oldImage;
                    Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:function ():void { if (old && old.parent) old.parent.removeChild(old) } } );
 
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
                    break;

SimpleGalleryModule - a super class for our gallery - also has a function of thumbnail arrangement. Let's turn it off to save processor time as we don't use thumbnails. We should set autoInitListControls parameter to "false" in the constructor:

autoInitListControls = false;

        public function BackgroundGalleryModule() 
        {
            super();
 
            autoInitListControls = false;

Now we can compile the project and open the control panel. We will see that there is no more possibility to resize and move the Background Gallery Module. If we preview the website and try to resize the window, it will be resized correctly filling the entire window.

The BackgroundGalleryModule class that we get in the end:

package modules 
{
    import caurina.transitions.Equations;
    import caurina.transitions.Tweener;
    import com.moto.template.common.Moto;
    import com.moto.template.modules.gallery.SimpleGalleryModule;
    import com.moto.template.shell.model.vo.ModuleItemVO;
    import com.moto.template.shell.model.vo.MotoObjectVO;
 
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.geom.Point;
    import flash.net.URLRequest;
 
    public class BackgroundGalleryModule extends SimpleGalleryModule
    {
        private var _preview:MovieClip;
        private var _contentHolder:MovieClip;
 
        private var _loader:Loader;
        private var _isLoaded:Boolean = false;
 
        private var _newImage:Sprite;
        private var _oldImage:Sprite;
 
        public function BackgroundGalleryModule() 
        {
            super();
 
            autoInitListControls = false;
 
            _preview = this["preview"];
            _contentHolder = this["contentHolder"];
 
            addEventListener(INITIALIZATION_COMPLETE, _initializationHandler);
            addEventListener(INITIALIZATION_ERROR, _initializationHandler);
 
            addEventListener(Event.ADDED_TO_STAGE, _stageHandler);
        }
 
        override public function init(vo:MotoObjectVO):void 
        {            
            _preview.visible = false;
            _contentHolder.visible = false;
 
            super.init(vo);
        }
 
        private function _initializationHandler(event:Event):void
        {
            switch (event.type)
            {
                case INITIALIZATION_COMPLETE:
 
                    _preview.visible = !(dataProvider.length || !limitedMode);
                    _contentHolder.visible = !_preview.visible;
 
                    setCurrent(0);
                    break;
 
                case INITIALIZATION_ERROR:
                    _preview.visible = limitedMode;
                    break;
            }
        }
 
        private function setCurrent(index:uint):void
        {
            loadImage(pathPrefix + ModuleItemVO(dataProvider[index]).getPropertyValueByID(1));
        }
 
        private function loadImage(url:String):void
        {
            if (_loader && !_isLoaded)
            {
                try {
                    _loader.close();
                } catch(e:Error) {}
            }
 
            _isLoaded = false;
            _loader = new Loader();
            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _loaderHandler);
            _loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, _loaderHandler);
            _loader.load(new URLRequest(url));
        }
 
        private function _loaderHandler(event:Event):void
        {
            switch (event.type)
            {
                case Event.COMPLETE:
                    _isLoaded = true;
 
                    _oldImage = _newImage;
 
                    if (_loader.content is Bitmap)
                        (_loader.content as Bitmap).smoothing = true;
 
                    _newImage = new Sprite();
                    _newImage.addChild(_loader.content);
                    _newImage.alpha = 0;
                    _contentHolder.addChild(_newImage);
 
                    var old:Sprite = _oldImage;
                    Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:function ():void { if (old && old.parent) old.parent.removeChild(old) } } );
 
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
                    break;
 
                case ProgressEvent.PROGRESS:
 
                    break;
            }
        }
 
        private function _stageHandler(event:Event):void
        {
            switch (event.type)
            {
                case Event.ADDED_TO_STAGE:
                    addEventListener(Event.REMOVED_FROM_STAGE, _stageHandler);
                    stage.addEventListener(Event.RESIZE, _stageHandler);
 
                    _stageHandler(new Event(Event.RESIZE));
                    break;
 
                case Event.REMOVED_FROM_STAGE:
                    stage.removeEventListener(Event.RESIZE, _stageHandler);
                    break;
 
                case Event.RESIZE:
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
 
                    var point:Point = new Point();
                    if (stage)
                    {
                        if (limitedMode)
                        {
                            point.x = parent.x;
                            point.y = parent.y;
                        }
                        else
                        {
                            point = parent.localToGlobal(point);
                        }
 
                        super.x = - point.x;
                        super.y = - point.y;
 
                        if (!limitedMode)
                        {
                            super.x = super.x  - (stage.stageWidth - Moto.getInstance().website.loaderInfo.width) * .5;
                            super.y = super.y - (stage.stageHeight - Moto.getInstance().website.loaderInfo.height) * .5;
                        }
                    }
                    break;
            }
        }
 
        override public function setSize(newWidth:Number, newHeight:Number):void 
        {
            super.setSize(newWidth, newHeight);
 
            var ratio:Number;
            if (_newImage)
            {
                _newImage.scaleX = 1;
                _newImage.scaleY = 1;
 
                ratio = Math.max(newWidth / _newImage.width, newHeight / _newImage.height);
 
                _newImage.scaleX = ratio;
                _newImage.scaleY = ratio;
 
                _newImage.x = (newWidth - _newImage.width) * .5;
                _newImage.y = (newHeight - _newImage.height) * .5;
            }
 
            if (_oldImage)
            {
                _oldImage.scaleX = 1;
                _oldImage.scaleY = 1;
 
                ratio = Math.max(newWidth / _oldImage.width, newHeight / _oldImage.height);
 
                _oldImage.scaleX = ratio;
                _oldImage.scaleY = ratio;
 
                _oldImage.x = (newWidth - _oldImage.width) * .5;
                _oldImage.y = (newHeight - _oldImage.height) * .5;
            }
 
        }
 
        override public function set x(value:Number):void 
        {
 
        }
 
        override public function set y(value:Number):void 
        {
 
        }
 
    }
 
}

Step 8: Background Image Switch

In this step we'll create logic which will change the background image on page switch. We continue to work with the BackgroundGalleryModule class.
We start this step with adding a listener for switch page event on initialization:

Moto.getInstance().eventDispatcher.addEventListene r(MotoEvent.SWITCH_PAGE, _switchPageHandler);

        override public function init(vo:MotoObjectVO):void 
        {            
            _preview.visible = false;
            _contentHolder.visible = false;
 
            super.init(vo);
 
            Moto.getInstance().eventDispatcher.addEventListener(MotoEvent.SWITCH_PAGE, _switchPageHandler);
        }

We should import MotoEvent:

import com.moto.template.common.events.MotoEvent;

Switch page event will be handled with _swichPageHandler function, so let's create it. We place it after the _stageHandler function.

        private function _switchPageHandler(event:Event):void
        {
 
        }

On page change we call the setCurrent function and pass the current page index. The current page number is taken from Moto.getInstance().currentPage and the count starts from 1. The count of gallery images starts from 0, so we have to deduct 1 from the page number.

setCurrent(Moto.getInstance().currentPage - 1);

        private function _switchPageHandler(event:Event):void
        {
            setCurrent(Moto.getInstance().currentPage - 1);
        }

Let's add a new private variable:

private var _localDataProvider:Array;

Then we should go to the initializationHandler function, add a condition to INITIALIZATION_COMPLETE case, and set _localDataProvider to dataProvider:

if (!_localDataProvider)
{
_localDataProvider = dataProvider;
setCurrent(0);
}
break;


        private function _initializationHandler(event:Event):void
        {
            switch (event.type)
            {
                case INITIALIZATION_COMPLETE:
 
                    _preview.visible = !(dataProvider.length || !limitedMode);
                    _contentHolder.visible = !_preview.visible;
 
                    if (!_localDataProvider)
                    {
                        _localDataProvider = dataProvider;
                        setCurrent(0);
                    }
                    break;
 
                case INITIALIZATION_ERROR:
                    _preview.visible = limitedMode;
                    break;
            }
        }

There can be fewer images than pages, that's why we go to the setCurrent function and set index to the minimal value between the passed value and the general quantity of images.

index = Math.min(index, _localDataProvider.length - 1);

This way if the setCurrent function gets the index value which is greater than the images quantity, the image with the greatest index will be loaded.

        private function setCurrent(index:uint):void
        {
            index = Math.min(index, _localDataProvider.length - 1);
            loadImage(pathPrefix + ModuleItemVO(dataProvider[index]).getPropertyValueByID(1));
        }

If the setCurrent function will be called with the index of currently loaded page, the page will be reloaded. We will make reloading impossible by keeping a current index. Let's create a new variable _currentIndex and set it to "-1" by default. We set "-1" because it can't be equal to an index value which comes to the setCurrent function.

private var _currentIndex:int = -1;

And in the setCurrent function we add a condition before loading an image:

if (_currentIndex != index)

        private function setCurrent(index:uint):void
        {
            index = Math.min(index, _localDataProvider.length - 1);
 
            if (_currentIndex != index)
            {
                loadImage(pathPrefix + ModuleItemVO(_localDataProvider[index]).getPropertyValueByID(1));
            }
        }

Also we set _currentIndex to index if the condition is true:

_currentIndex = index;

        private function setCurrent(index:uint):void
        {
            index = Math.min(index, _localDataProvider.length - 1);
 
            if (_currentIndex != index)
            {
                _currentIndex = index;
                loadImage(pathPrefix + ModuleItemVO(_localDataProvider[index]).getPropertyValueByID(1));
            }
        }

The BackgroundGalleryModule class now is:

package modules 
{
    import caurina.transitions.Equations;
    import caurina.transitions.Tweener;
    import com.moto.template.common.events.MotoEvent;
    import com.moto.template.common.Moto;
    import com.moto.template.modules.gallery.SimpleGalleryModule;
    import com.moto.template.shell.model.vo.ModuleItemVO;
    import com.moto.template.shell.model.vo.MotoObjectVO;
 
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.geom.Point;
    import flash.net.URLRequest;
 
    public class BackgroundGalleryModule extends SimpleGalleryModule
    {
        private var _preview:MovieClip;
        private var _contentHolder:MovieClip;
 
        private var _loader:Loader;
        private var _isLoaded:Boolean = false;
 
        private var _newImage:Sprite;
        private var _oldImage:Sprite;
 
        private var _currentIndex:int = -1;
 
        private var _localDataProvider:Array;
 
        public function BackgroundGalleryModule() 
        {
            super();
 
  

Step 9: Animation complete function

Also we can take onComplete logic to another function. It's a part of Tweener in the _loaderHandler function at the moment:

Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:function ():void { if (old && old.parent) old.parent.removeChild(old) } } );

We'll move this logic to a new function. Let's create it after the _loaderHandler function. Its call parameter will be forDelete.

        private function _onCompleteAnimationHandler(forDelete:Sprite):void
        {
 
        }

Let's add a condition which checks if forDelete exists and if it's placed somewhere:

if (forDelete && forDelete.parent)

We remove forDelete if the condition is true:

forDelete.parent.removeChild(forDelete);

        private function _onCompleteAnimationHandler(forDelete:Sprite):void
        {
            if (forDelete && forDelete.parent)
                forDelete.parent.removeChild(forDelete);
        }

Let's add one more condition. If an old image is the one to be deleted:

if (_oldImage == forDelete)

Then we remove its reference:

_oldImage = null;

        private function _onCompleteAnimationHandler(forDelete:Sprite):void
        {
            if (forDelete && forDelete.parent)
                forDelete.parent.removeChild(forDelete);
 
            if (_oldImage == forDelete)
                _oldImage = null;
        }

Now we remove the logic on animation complete and call the created function instead:

Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:_onCompleteAnimationHandler } );

We pass the parameter with the help of onCompleteParams:

Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:_onCompleteAnimationHandler, onCompleteParams:[old] } );

It will pass an array [old] with one value to the _onCompleteAnimationHandler function. This value will be the picture which has to be removed.

        private function _loaderHandler(event:Event):void
        {
            switch (event.type)
            {
                case Event.COMPLETE:
                    _isLoaded = true;
 
                    _oldImage = _newImage;
 
                    if (_loader.content is Bitmap)
                        (_loader.content as Bitmap).smoothing = true;
 
                    _newImage = new Sprite();
                    _newImage.addChild(_loader.content);
                    _newImage.alpha = 0;
                    _contentHolder.addChild(_newImage);
 
                    var old:Sprite = _oldImage;
                    Tweener.addTween(_newImage, { alpha:1, time:1, transition:Equations.easeOutSine, onComplete:_onCompleteAnimationHandler, onCompleteParams:[old] } );
 
                    setSize(Moto.getInstance().stageWidth, Moto.getInstance().stageHeight);
                    break;
 
                case ProgressEvent.PROGRESS:
 
                    break;
            }
        }

Now we have the Background Gallery module which can change images on page switch. This is the BackgroundGalleryModule class that we have on the current stage:

package modules 
{
    import caurina.transitions.Equations;
    import caurina.transitions.Tweener;
    import com.moto.template.common.events.MotoEvent;
    import com.moto.template.common.Moto;
    import com.moto.template.modules.gallery.SimpleGalleryModule;
    import com.moto.template.shell.model.vo.ModuleItemVO;
    import com.moto.template.shell.model.vo.MotoObjectVO;
 
    import flash.display.Loader;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.geom.Point;
    import flash.net.URLRequest;
 
    public class BackgroundGalleryModule extends SimpleGalleryModule
    {
        private var _preview:MovieClip;
        private var _contentHolder:MovieClip;
 
        private var _loader:Loader;
        private var _isLoaded:Boolean = false;
 
        private var _newImage:Sprite;
        private var _oldImage:Sprite;
 
        private var _currentIndex:int = -1;
 
        private var _localDataProvider:Array;
 
        public function BackgroundGalleryModule() 
Have more questions? Submit a request

Comments