Создаем красивый космос + туманность. PhotoShop/Flash IDE/AS3

Очень давно хотел поделиться этим методом, но все никак руки не доходили. Вот, таки дошли :)
Туториал конечно слегка сумбурно написан, но будет понятен даже новичкам.
Методика построения космоса, основана на фотошоповском уроке, я же ее немного доработал.
В самом фотошопе нам понадобится лишь 1 картинка, все остальные действия происходят во флеше.

• 1
Открываем фотошоп, создаем новое изображение нужного нам размера и Filter — Render — Clouds. Можно понажимать несколько раз CTRL+F для достижения максимально нужного вам эфекта. Полученую картинку созраняем как jpg с максимальным качеством.

• 2
Открываем флеш, создаем новый проект, или открываем ваш. Импортируем в библиотеку полученое в фотошопе изображение. Создаем новый символ (CTRL+8). Вписываем все как показано на рисунке и нажимаем ОК.

Вставляем наше изображение на координаты x:0 y:0. Возвращаемся на Scene.
• 3
Создаем новый символ (CTRL+8). Вписываем все как показано на рисунке и нажимаем ОК.

Произвольно рисуем цветные кружки разного размера. Затем возвращаемся на Scene.

• 4
Если вы создавали новый проект, то в свойствах проекта, указываем Document Class — SpaceSystem.

• 5
Создаем новый ас3 класс и копируем туда следующий текст
package {
        import flash.display.Bitmap;
        import flash.display.BitmapData;
        import flash.display.Shape;
        import flash.display.Sprite;
        import flash.events.Event;
        import flash.events.MouseEvent;
        import flash.filters.BlurFilter;

        public class SpaceSystem extends Sprite {
                
                private var starContainer:Sprite;
                private var cloud:Sprite;
                private var cloudLight:CloudLight;
                //private var galaxy:Galaxy;
                private var bitmap:Bitmap;
                private var bitmapData:BitmapData;
                
                public function SpaceSystem() {
                        addEventListener(Event.ADDED_TO_STAGE, initThis);
                }
                
                private function initThis(e:Event):void {
                        removeEventListener(Event.ADDED_TO_STAGE, initThis);
                        initVariables();
                }
                
                private function initVariables():void {
                        // Создаем контейнер который будет содержать все наши чилды космоса.
                        starContainer = new Sprite();
                        addChild(starContainer);
                        
                        // Циклом создаем звезды - это обычный шейп 
                        for (var i:int = 0; i < 2000; i++) {
                                var size:int = Math.random() * 1 + 1;
                                var alpha:Number = Math.random() * 1;
                                var partShape:Shape = new Shape()
                                partShape.graphics.beginFill(0xffffff, alpha);
                                partShape.graphics.drawRect(1, 1, size, size);
                                partShape.graphics.endFill();
                                starContainer.addChild(partShape);
                                partShape.x = Math.random() * 1024 + 1;
                                partShape.y = Math.random() * 768 + 1;
                        }
                        //Если у вас есть картинка ее можно также добавить на фон.
                        //galaxy = new Galaxy();
                        //galaxy.blendMode = "lighten";
                        //galaxy.alpha = .75;
                        //starContainer.addChild(galaxy);
                        
                        //Создаем подсветку облаков
                        cloudLight = new CloudLight();
                        starContainer.addChild(cloudLight);
                        cloudLight.filters = [new BlurFilter(255, 255, 3)];
                        cloudLight.blendMode = "lighten";
                        cloudLight.alpha = .5
                        
                        //Создаем облака
                        cloud = new Clouds();
                        starContainer.addChild(cloud);
                        cloud.blendMode = "overlay";
                
                        makeBitmap();
                }
                
                private function makeBitmap():void {
                        //Создаем битмапу и добавляем в нее полученый космос
                        bitmapData = new BitmapData(1024, 768, false, 0x000000);
                        bitmap = new Bitmap(bitmapData);
                        bitmapData.draw(starContainer);
                        addChild(bitmap);
                        
                        //Удаляем элементы космоса
                        removeChild(starContainer);
                        starContainer = null;
                        //galaxy = null;
                        cloud = null;
                        cloudLight = null;
                }
        }
}

Сохраняем его с именем SpaceSystem в папке проекта.
• 5
Компилируем — радуемся результату!

• 6
Если вы интегрируете данный класс в ваш проект, достаточно в нужном месте дописать
spaceSystem = new SpaceSystem();
addChild(spaceSystem);

и добавить переменную
private var spaceSystem:SpaceSystem;

• 7
Красота космоса зависит в первую очередь от цветов и расположения элементов в CloudLight
  • +11

Комментарии (11)

0
Годно. Как я понимаю, можно эту красоту делать более-менее динамической? Иначе был бы смысл всё сразу в Фотошопе сделать — и возможностей больше, и производительность не страдает вообще.
  • iLORd
  • iLORd
0
Данный способ можно дорабатывать в любых направлениях, изменять «облака» изменять им цвет, прозрачность, позицию, плюс звезды каждый раз динамически генерируются. А на выходе получаем туже битмапу, что и с фотошопа.
0
Красиво. Но переделывать свой космос, нарисованный во флеше не буду:)
0
Просто и со вкусом :). Как там FPS? Не страдает?
0
Так битмапа же ;)
0
А… ок…
Я потом увидел, когда вверх проматывал… голова не работает, спать надо :)
0
Семен Семеныч! Красивый космос уже создан задолго до нас: www.jpl.nasa.gov/spaceimages/


и т.д. :)
0
Отличный урок. Медитировал минут десять :)
0
Не помешало бы ещё рандомно задавать звездам размер и может частичную прозрачность маленьким звездам, чтобы глубину передать. Сам я уже не раз рисовал космос и туманности и немного набил в этом деле руку.
0
Именно так и происходит: в цикле, первые два параметра как раз отвечают за размер и прозрачность!
0
а, точно, я код-то не посмотрел, а в финальной картинке как-то не заметил, мне показалось что все звезды одинаковые…
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.